@charset "UTF-8";
/* =============================================================================
   VÍTOŇKA LIPNO — JEDINÝ STYLESHEET (single source of truth)
   Design: Kinsley (bslthemes). Vše ostatní CSS je sloučeno sem.
   -----------------------------------------------------------------------------
   ORGANIZACE (konvence — všechny další úpravy jen zde, dle této struktury):
     1. TOKENS         – :root proměnné (barvy, typografie, spacing, radius)
     2. BASE           – reset, body, typografie, odkazy
     3. BUTTONS/FORMS  – tlačítka, inputy, custom-select, flatpickr
     4. HEADER         – fixní hlavička 80px (logo vlevo / menu střed / CTA vpravo)
     5. HERO           – booking_search (hvězdy, nadpis, bílá pill lišta)
     6. FEATURE KARTY  – .builder-section.section-features
     7. ABOUT SPLIT    – .builder-section.section-text_image (text_image)
     8. STATS          – .builder-section.section-stats
     9. SECTION HEADS  – centrované nadpisy 38/600 + eyebrow
    10. ROOMS          – .featured-apartment (apartment_card)
    11. EXPERIENCE     – .builder-cards-section
    12. TESTIMONIALS   – .testimonials-section
    13. FAQ            – .builder-faq-section
    14. NEWSLETTER     – .newsletter-section
    15. FOOTER         – .site-footer
    16. CONTENT PAGES  – .page-content, .pricing-table
    17. BOOKING        – .bookings-form
    18. FOOTER DRAWER  – mobilní menu
   Uvnitř každé sekce: nejprve desktop, pak @media breakpointy
   (≤991px tablet, ≤600px mobil).
   ============================================================================= */


/* ===== zdroj: utilities.css ===== */
/* KCKurzy — utility třídy (flex, grid, spacing, text). Sdílené mezi site.css a admin.css. */

/* ── Flex ─────────────────────────────────────────────── */






















/* ── Grid ─────────────────────────────────────────────── */






/* ── Spacing ──────────────────────────────────────────── */
   
   
   
  






/* ── Text ─────────────────────────────────────────────── */

















/* ── Colors ───────────────────────────────────────────── */











/* ── Layout utilities ─────────────────────────────────── */








/* ── Borders + radius ─────────────────────────────────── */





/* ── Visibility ───────────────────────────────────────── */

.u-visually-hidden {
    position: absolute !important;
    clip: rect(0 0 0 0);
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ── Cursor + a11y ────────────────────────────────────── */



/* ── Screen reader only ───────────────────────────────── */
.sr-only {
    display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── DBA shorthand utilities ──────────────────────────── */


.text-muted { color: var(--c-muted, #6b7383); }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }


.mt-medium { margin-top: 16px; }
.mt-large { margin-top: 32px; }

.mb-medium { margin-bottom: 16px; }

.m-0 { margin: 0; }



/* ── CozyStay redesign — bg/text utilities ───────────── */







/* ── Admin utility components (used by new admin views) ───── */




.admin-filter-bar .form-group { margin: 0; }
.admin-filter-bar .form-input,
.admin-filter-bar .form-select { height: 42px; box-sizing: border-box; }
.admin-filter-bar .btn { height: 42px; padding-top: 0; padding-bottom: 0; }















.is-inactive { opacity: 0.55; }

/* ─────────────────────────────────────────────────────────────
   Doplňky pro admin refactor (2026-05-20) — odstranění inline stylů
   ───────────────────────────────────────────────────────────── */

/* Display */




/* Cursor */



/* Text alignment & style */






/* Width helpers — primárně pro <th> v admin tabulkách */






/* Min-width / max-width helpers */




/* Whitespace */


/* Color helpers — semantic */




/* Grid helpers — admin filter bars */




/* Filter bar wrapper (display:flex; gap:12px; align-items:end; flex-wrap:wrap) */


/* Form-group v u-filter-bar nesmí mít margin-bottom (default 16px ve form-group),
   jinak align-items: end posune buttony (které margin-bottom nemají) o 16px DOLŮ.
   Specifity 0,1,1 přebíjí .form-group (0,1,0) z admin.css.
   Stejný pattern už existuje pro .admin-filter-bar na řádku 152. */
.u-filter-bar > .form-group { margin: 0; }

/* ── Sjednocení výšky form prvků ve filtrovacích řádcích ────────────
   Bez pevné výšky se počítá z paddingu (pole ~42, tlačítka ~38) a v řádku
   se to nesrovná. V administraci se použije společný token `--ctl-h`
   (definovaný v admin.css), na webu zůstává původních 42px. */
.u-grid-filter .form-input,
.u-grid-filter .form-select,
.u-filter-bar .form-input,
.u-filter-bar .form-select {
    height: var(--ctl-h, 42px);
    box-sizing: border-box;
}
.u-grid-filter .btn,
.u-filter-bar .btn {
    height: var(--ctl-h, 42px);
    padding-top: 0;
    padding-bottom: 0;
}

/* Posledni cell v gridu — wrap pro buttony bez vlastní form-group.
   align-self:end zajistí spodní zarovnání s ostatními cells (které mají label nahoře). */


/* Form inline */


/* Padding helpers */


/* ===== zdroj: site.css ===== */
/* ============================================================
   dejablueapartment.cz — site.css
   Design tokens, layout, components.
   Cozystay/LoftOcean-inspired — warm beige + sage green palette,
   Marcellus (serif headings) + Jost (sans body), generous whitespace,
   square buttons, uppercase navigation.
   ============================================================ */

:root{
    /* Brand palette — beige & sage (cozystay/loftocean) */
    --c-primary:    #b99d75;        /* warm beige (CTA, accents) */
    --c-primary-2:  #ab916c;        /* deeper beige (hover) */
    --c-secondary:  #53624e;        /* sage green (secondary CTA, headings accent) */
    --c-secondary-2:#3f4b3a;        /* deep sage (hover) */
    --c-accent:     #b99d75;        /* alias of primary for legacy refs */
    --c-cream:      #f8f5f1;        /* cream / off-white panels */
    --c-bg:         #ffffff;
    --c-bg-soft:    #ede6dc;        /* warm panel bg */
    --c-ink:        #1a1b1a;        /* near-black text */
    --c-ink-soft:   #393939;
    --c-muted:      #707070;
    --c-line:       #b5bbb3;        /* sage border */
    --c-line-soft:  #e6e6e6;

    --c-success:    #53624e;
    --c-error:      #c85b5b;
    --c-warn:       #b99d75;

    /* CozyStay redesign — dark teal experience, very dark footer, alt cream */
    --c-dark-teal:  #2c4a47;
    --c-very-dark:  #111111;
    --c-cream-2:    #efe9df;

    /* Luxury gold accent (champagne) — pro CTA, rámečky, badges */
    --c-gold:        #c9a961;
    --c-gold-2:      #b39152;        /* hover/deeper */
    --c-gold-light:  #e6d5a6;        /* light champagne */
    --c-gold-dark:   #8a6f3d;        /* deep gold (border on dark bg) */
    --grad-gold:     linear-gradient(135deg, #d4b572 0%, #c9a961 45%, #b39152 100%);

    /* Typography — Marcellus (display serif) + Cormorant Garamond (poster italic) + Jost (sans body) */
    --font-sans:    'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-serif:   'Marcellus', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-display: 'Cormorant Garamond', 'Marcellus', 'Playfair Display', Georgia, serif;

    /* Spacing & radii (cozystay uses square / minimal radius) */
    --radius-sm: 0;
    --radius:    0;
    --radius-lg: 4px;
    /* Section spacing tokens — KEEP MINIMAL. Builder vládne spacing per-section.
       Hardcoded velké paddingy (140/200px) dělaly bílé díry mezi sekcemi. */
    --space-section: 48px;
    --space-section-lg: 64px;

    /* Shadows (subtle, neutral) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow:    0 6px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.12);

    --header-h: 80px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
    margin: 0;
    font-family: var(--font-sans);
    color: var(--c-ink);
    background: var(--c-bg);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img, svg{ max-width: 100%; height: auto; display: block; }
a{ color: var(--c-secondary); text-decoration: none; transition: color .15s ease; }
a:hover{ color: var(--c-primary); }
h1, h2, h3, h4{
    font-family: var(--font-serif);
    font-weight: 400;          /* Marcellus is single-weight serif */
    line-height: 1.18;
    letter-spacing: 0.005em;
    color: var(--c-ink);
    margin: 0 0 .5em;
}
h1{ font-size: clamp(38px, 5.4vw, 68px); }
h2{ font-size: clamp(30px, 3.8vw, 48px); }
h3{ font-size: clamp(22px, 2.6vw, 30px); }
h4{ font-size: clamp(18px, 2vw, 22px); }
p{ margin: 0 0 1em; }
/* Global safety: žádný element by neměl způsobit horizontal scroll
   (kontroluje nejvyšší úroveň, jednotlivé prvky mohou overflow:visible).
   `clip` místo `hidden` — hidden dělá z body scroll container a rozbíjí
   position: sticky (rezervační sidebar); clip ne. */
html, body{ overflow-x: clip; }
.container{
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
}

@media (max-width: 960px) {
.container{ padding: 0 24px; }
}
@media (max-width: 540px) {
.container{ padding: 0 16px; }
}
@media (max-width: 380px) {
.container{ padding: 0 12px; }
}/* ============================================================
   Header
   ============================================================ */

.site-header{
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    /* žádný border — border-color defaultuje na currentColor = #1a1b1a (--c-ink)
       per dispatcherův regression hint (header všech 4 stran rgb(26,27,26)).
       Scrolled state níže přidává vlastní border-bottom. Transparent variant
       používá ::after pseudo pro viditelný 1px white separator. */
    border: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled{
    border-color: var(--c-line);
    box-shadow: var(--shadow-sm);
}
.site-header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    gap: 24px;
}
.site-logo{
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: 28px;
    color: var(--c-ink);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1;
}
.site-logo:hover{ color: var(--c-primary); }


.site-logo-text{
    font-family: var(--font-serif);
}
.site-nav{
    display: flex;
    gap: 28px;
    align-items: center;
}
.site-nav a{
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover{
    color: var(--c-primary);
    border-color: var(--c-primary);
}

.lang-switcher{
    display: inline-flex;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-muted);
}
.lang-switcher a{
    padding: 6px 8px;
    color: var(--c-muted);
    transition: color .15s;
}
.lang-switcher a + a{
    border-left: 1px solid var(--c-line);
    margin-left: 4px;
    padding-left: 12px;
}
.lang-switcher a.is-active{ color: var(--c-ink); }
.lang-switcher a:hover{ color: var(--c-primary); }
.nav-burger{
    display: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.nav-burger > span:not(.sr-only){
    display: block;
    width: 18px;
    height: 2px;
    background: var(--c-ink);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.nav-burger[aria-expanded="true"] > span:not(.sr-only):nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] > span:not(.sr-only):nth-child(2){ opacity: 0; }
.nav-burger[aria-expanded="true"] > span:not(.sr-only):nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }
/* ============================================================
   Buttons
   ============================================================ */

.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 30px;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    text-decoration: none;
    line-height: 1.2;
}
.btn-primary{
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}
.btn-primary:hover{
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
}
.btn-secondary{
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-ink);
}
.btn-secondary:hover{
    background: var(--c-ink);
    color: #fff;
}
.btn-ghost{
    background: transparent;
    color: var(--c-primary);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.btn-ghost::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 1px;
    background: var(--c-primary);
    transition: background .15s;
}
.btn-ghost:hover{ color: var(--c-primary-2); }
.btn-ghost:hover::after{ background: var(--c-primary-2); }
.btn-block{ width: 100%; }
.btn-lg{ padding: 18px 38px; font-size: 16px; }
.btn-sm{ padding: 10px 18px; font-size: 13px; }
/* ============================================================
   Hero
   ============================================================ */

.hero{
    position: relative;
    min-height: clamp(640px, 90vh, 960px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 24px 100px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0.20), rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.60)),
                #53624e;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.hero-with-search{
    min-height: clamp(720px, 92vh, 1000px);
}
.hero-content{
    position: relative;
    z-index: 2;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.hero-eyebrow{
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 24px;
}
.hero-title{
    font-family: var(--font-serif);
    font-size: clamp(40px, 6.4vw, 80px);
    font-weight: 400;
    line-height: 1.08;
    color: #fff;
    margin: 0 auto 24px;
    max-width: 18ch;
    text-wrap: balance;
}
.hero-subtitle{
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255,255,255,0.92);
    max-width: 60ch;
    margin: 0 auto 36px;
    text-align: center;
}

/* ============================================================
   Booking widget (sidebar / hero overlay)
   ============================================================ */

.booking-widget{
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    color: var(--c-ink);
    width: 100%;
    max-width: 460px;
    text-align: left;
}
.booking-widget--inline{
    margin: 32px auto 0;
    max-width: 720px;
}
.booking-widget--inline .booking-widget-fields{
    grid-template-columns: repeat(4, 1fr);
}
.booking-widget h3{
    margin: 0 0 18px;
    font-size: 22px;
    font-family: var(--font-serif);
}
.booking-widget-fields{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.booking-widget-field{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.booking-widget-field label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-muted);
    font-weight: 600;
}
.booking-widget-field input,
.booking-widget-field select{
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--c-ink);
    background: #fff;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.booking-widget-field input:focus,
.booking-widget-field select:focus{
    border-color: var(--c-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(31,78,95,0.15);
}
/* Kalendářová ikona u datumových polí (detail apartmánu + obecné widgety).
   Hero widget má vlastní specifičtější ::after (right:30px) — ten tuto pozici přebije. */
.booking-widget-field--date{ position: relative; }
.booking-widget-field--date input{ padding-right: 38px; }
.booking-widget-field--date::after{
    content: ""; position: absolute; right: 12px; bottom: 12px;
    width: 16px; height: 16px; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364688c' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}

.booking-widget-quote-row{
    display: flex;
    justify-content: space-between;
    color: var(--c-ink-soft);
}
.booking-widget-quote-row.total{
    font-size: 18px;
    font-weight: 600;
    color: var(--c-ink);
    padding-top: 10px;
    border-top: 1px solid var(--c-line);
    margin-top: 6px;
}

/* Doplňky / příplatky v rezervačním formuláři (spravované v /admin/priplatky).
   Řádek = karta; vybraný doplněk zeleně orámovaný (JS přidává .is-active),
   povinné (turistický poplatek) jako informativní ztlumená karta bez inputu. */
.booking-extras{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.booking-extra-row{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--c-line);
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.booking-extra-row:not(.booking-extra-row--mandatory):hover{
    border-color: var(--c-primary);
}
.booking-extra-row.is-active{
    border-color: #2e9e5b;
    background: rgba(46, 158, 95, .05);
    box-shadow: 0 0 0 1px #2e9e5b;
}
.booking-extra-row{ flex-wrap: wrap; }
.booking-extra-row .form-checkbox{ margin: 0; }
/* Checkbox varianta: název + checkbox na řádku, cena vpravo */
.booking-extra-check{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-ink);
    cursor: pointer;
    margin: 0;
}
/* Množstevní varianta (select): název na celé šířce, pod ním select vlevo + cena vpravo */
.booking-extra-qty-label{
    flex: 1 1 100%;
    display: block;
    color: var(--c-ink);
    cursor: pointer;
    margin: 0;
}
.booking-extra-name{
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
}
.booking-extra-desc{
    display: block;
    font-size: 12.5px;
    color: var(--c-muted);
    font-weight: 400;
    margin-top: 2px;
}
/* Silnější selektor než `.card.booking-form .form-select` (0,3,0), který jinak
   přebíjel width:100% a padding → box se roztáhl a nativní šipka utekla vpravo. */
.card.booking-form select.booking-extra-qty{
    /* Kompaktní box podle obsahu + vlastní šipka hned za textem. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    margin-right: auto;
    text-align: left;
    font-size: 14px;
    min-height: 40px;
    padding: 6px 32px 6px 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23383a4e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}
.booking-extra-price{
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
    color: var(--c-ink);
    background: var(--c-line-soft);
    border-radius: 50px;
    padding: 5px 14px;
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
}
.booking-extra-price--free{
    color: #2e9e5b;
    background: rgba(46, 158, 95, .12);
}
/* Povinný (turistický poplatek) — informativní karta: název nahoře,
   pod ním „účtuje se automaticky" vlevo + cena vpravo */
.booking-extra-row--mandatory{
    background: var(--c-line-soft);
    border-style: dashed;
}
.booking-extra-row--mandatory .booking-extra-name{ flex: 1 1 100%; }
.booking-extra-row--mandatory .booking-extra-price{ background: #fff; }
.booking-extra-auto{
    white-space: nowrap;
    font-size: 12px;
    color: var(--c-muted);
    font-style: italic;
    flex: 0 0 auto;
    align-self: center;
    margin-right: auto;
}


/* ============================================================
   Sections
   ============================================================ */

.section{
    padding: var(--space-section) 0;
}



.section-header{
    text-align: center;
    max-width: 720px;
    margin: 0 auto 24px;
}
.section-header-eyebrow{
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-primary);
    margin-bottom: 14px;
}
.section-header h2{
    font-family: var(--font-serif);
    font-weight: 400;
    margin: 0 0 18px;
}
.section-header p{
    color: var(--c-muted);
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 30px;
}
/* Contact section heading — extra space pred formulářem (user feedback).
   Actual DOM: <section class="section section-heading"> + <section class="contact-form-section">.
   Matchne i variants .section-contact_form / booking-form. */
.section + .contact-form-section,
.section-heading + .contact-form-section,
.section + .section-contact_form,
.section-heading + .section-contact_form,
.section-heading + .section-contact_form_advanced,
section.section-heading + form,
.section-heading + .booking-form-wrap,
.section + .booking-form-wrap,
.section-heading + .contact-form,
.contact-form-section {
    margin-top: 28px;
}
.contact-form-section .section-header,
.contact-form-section .section-header p {
    margin-bottom: 32px;
}
/* Card body heading („Napište nám" / „Send us a message" / „Kontaktní údaje") —
   margin-bottom 25 px aby nevisel nadpis přímo na form inputech (user feedback).
   Třída mb-medium dává jen 16 px — překryjeme specifičtějším selektorem.
   Pozn.: stejný pattern se používá i v rezervační formě, tam má taky 25 px sedět. */
.contact-form-section .card-body > h2.mb-medium,
.contact-form-section .card-body > h3.mb-medium,
.booking-form .card-body > h2.mb-medium,
.booking-form .card-body > h3.mb-medium {
    margin-bottom: 25px;
}
/* ============================================================
   Cards
   ============================================================ */

.card-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.card{
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
    box-shadow: none;
    border-bottom: 1px solid transparent;
}
.card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-bottom-color: var(--c-primary);
}
.card-image{
    aspect-ratio: 4/3;
    background: var(--c-cream);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.card-image img,
.card-image > div{
    transition: transform .6s ease;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.card:hover .card-image img,
.card:hover .card-image > div{ transform: scale(1.05); }
.card-body{
    padding: 28px 4px;
}
.card-eyebrow{
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
    color: var(--c-primary);
    margin-bottom: 10px;
    font-weight: 500;
}
.card-title{
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 26px;
    margin: 0 0 10px;
    line-height: 1.2;
}
.card-text{
    color: var(--c-muted);
    font-size: 14px;
    margin-bottom: 16px;
}
/* ============================================================
   Featured apartment (homepage section)
   ============================================================ */

.featured-apartment{
    padding: var(--space-section-lg) 0;
    background: var(--c-cream);
}
.featured-apartment-grid{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
}
.featured-apartment-image{
    aspect-ratio: 4/3;
    background: var(--c-bg-soft);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.featured-apartment-body h2{
    margin: 12px 0 16px;
}
.featured-apartment-subtitle{
    font-size: 18px;
    color: var(--c-ink-soft);
    margin-bottom: 16px;
    font-style: italic;
}
.featured-apartment-meta{
    list-style: none;
    padding: 24px 0;
    margin: 24px 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.featured-apartment-meta li{
    font-size: 14px;
    color: var(--c-muted);
}
.featured-apartment-meta li strong{
    display: block;
    font-family: var(--font-serif);
    font-size: 24px;
    color: var(--c-primary);
    margin-bottom: 2px;
    font-weight: 600;
}
.featured-apartment-price{
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 24px;
}
.featured-apartment-price .price-from{
    font-size: 13px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.featured-apartment-price strong{
    font-family: var(--font-serif);
    font-size: 32px;
    color: var(--c-ink);
}
.featured-apartment-price .price-suffix{
    color: var(--c-muted);
    font-size: 14px;
}
.featured-apartment-actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 960px) {
.featured-apartment-grid{
        grid-template-columns: 1fr;
        gap: 32px;
    }
}/* ============================================================
   Excursion / Restaurant rows (alternating)
   ============================================================ */








/* ============================================================
   Builder CTA block
   ============================================================ */





.builder-cta--gradient .btn-primary{
    background: #fff;
    color: var(--c-primary);
}
.builder-cta--gradient .btn-primary:hover{
    background: var(--c-cream);
    color: var(--c-primary);
}

/* ============================================================
   Builder section wrapper (default)
   ============================================================ */

.builder-section{
    padding: var(--space-section) 0;
}
.builder-section > .section-inner.container{
    max-width: var(--bldr-max-width, 1440px);
    margin: var(--bldr-content-margin, 0 auto);
}
.builder-cards-section,
.builder-faq-section{
    padding: var(--space-section) 0;
}
.builder-faq-section{
    background: var(--c-cream);
}
.builder-section + .builder-section{
    padding-top: 0;
}
/* Section heading element renders inside .container */


/* ============================================================
   Apartment detail layout
   ============================================================ */

.apt-hero{
    position: relative;
    height: 70vh;
    min-height: 480px;
    background: var(--c-cream);
    overflow: hidden;
}
@media (max-width: 700px) {
.apt-hero{ height: 58vh; min-height: 400px; }
}
.apt-hero::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.45));
    z-index: 2;
    pointer-events: none;
}
.apt-hero-content{
    position: absolute;
    bottom: 48px;
    left: 0;
    right: 0;
    color: #fff;
    z-index: 3;
    pointer-events: none;
}
/* ── Hero slider (Swiper fade) — fotky galerie přes celý hero ── */
.apt-hero-swiper{
    position: absolute;
    inset: 0;
    z-index: 1;
}
.apt-hero-slide{
    position: relative;
    height: 100%;
    background: var(--c-cream);
}
.apt-hero-slide picture{
    display: block;
    width: 100%;
    height: 100%;
}
.apt-hero-slide-img,
.apt-hero-slide picture img,
.apt-hero-slide > a > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Odkaz kolem snímku musí vyplnit celou plochu, jinak by se fotka scvrkla */
.apt-hero-slide > a{
    display: block;
    width: 100%;
    height: 100%;
}
.apt-hero-swiper .apt-hero-nav{
    z-index: 4;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(20,22,34,0.28);
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background .15s ease, border-color .15s ease;
}
.apt-hero-swiper .apt-hero-nav:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.apt-hero-swiper .apt-hero-nav::after{
    font-size: 15px;
    font-weight: 700;
}
.apt-hero-swiper .apt-hero-pagination{
    z-index: 4;
    bottom: 18px;
}
.apt-hero-swiper .swiper-pagination-bullet{
    width: 9px;
    height: 9px;
    background: #fff;
    opacity: .45;
    transition: opacity .15s ease;
}
.apt-hero-swiper .swiper-pagination-bullet-active{ opacity: 1; }
.apt-detail-grid{
    display: grid;
    /* minmax(0,1fr) — holé 1fr se nesmí zmenšit pod obsah a kalendář
       obsazenosti / dlouhá adresa by roztáhly celou stránku. */
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 56px;
    padding: 56px 0 96px;
}
.apt-info-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.apt-info-item{
    background: var(--c-cream);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
}
.apt-info-label{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-muted);
    margin-bottom: 4px;
}
.apt-info-value{
    color: var(--c-ink);
    font-size: 16px;
}
.apt-rules{
    list-style: none;
    padding: 0;
    margin: 12px 0 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}
.apt-rules li{
    padding: 10px 14px;
    background: var(--c-cream);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--c-ink-soft);
}
.apt-policy{
    background: var(--c-cream);
    padding: 18px 22px;
    border-radius: var(--radius);
    color: var(--c-ink-soft);
    line-height: 1.65;
    margin-bottom: 24px;
}
.apt-map{
    margin: 16px 0 32px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.apt-amenities{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 24px 0;
}
.apt-amenities li{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--c-cream);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--c-ink-soft);
}
.apt-amenities li::before{
    content: '✓';
    color: var(--c-primary);
    font-weight: 700;
}
.apt-meta-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    margin: 32px 0;
}
.apt-meta-grid-item{
    text-align: center;
}
.apt-meta-grid-value{
    font-family: var(--font-serif);
    font-size: 28px;
    color: var(--c-primary);
    margin-bottom: 4px;
}
.apt-meta-grid-label{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-muted);
}
.apt-sidebar{
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: flex-start;
}

/* ============================================================
   Kalendář v rezervačním boxu (detail apartmánu)
   Inline flatpickr nad poli Příjezd/Odjezd — TÁŽ instance, kterou jinde
   otevírá klik do pole. Barvy obsazenosti dědí ze sekce „fp-occ-*" níž.
   ============================================================ */

/* Kontejner je v HTML `hidden`, dokud ho nenaplní JS — CSS display by atribut přebilo. */
.booking-cal[hidden]{ display: none; }
.booking-cal{
    margin: 0 0 14px;
}
.booking-cal-hint{
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.booking-cal-rules{
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-ink-soft);
}
.booking-cal-rules[hidden]{ display: none; }
.booking-cal-host{
    max-width: 100%;
    overflow-x: auto;
    /* overflow-y musí být explicitně hidden — samotné `overflow-x: auto` dělá
       z druhé osy taky `auto` a kalendář dostane svislý posuvník. */
    overflow-y: hidden;
}
/* Inline varianta: bez stínu a bez vytaženého z-indexu (není to popup). */
.booking-cal-host .flatpickr-calendar.inline{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    z-index: 1;
    margin: 0;
    box-shadow: none;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    background: #fff;
    padding-bottom: 4px;
}
/* Skrytý kalendář fáze, která se právě nevybírá. Autorské CSS jinak `hidden` přebije. */
.booking-cal-host .flatpickr-calendar.inline[hidden]{ display: none; }
.booking-cal-host .flatpickr-calendar.inline .flatpickr-innerContainer,
.booking-cal-host .flatpickr-calendar.inline .flatpickr-rContainer,
.booking-cal-host .flatpickr-calendar.inline .flatpickr-days,
.booking-cal-host .flatpickr-calendar.inline .dayContainer,
.booking-cal-host .flatpickr-calendar.inline .flatpickr-weekdaycontainer{
    width: 100%;
    min-width: 0;
    max-width: none;
}
.booking-cal-host .flatpickr-calendar.inline .flatpickr-day{
    max-width: none;
    height: 36px;
    line-height: 36px;
}
/* Hlavička: výšku určuje obsah, ne pevných 40 px + 6 px paddingu — jinak
   zůstane pod názvem měsíce prázdný pás (obsah je uvnitř absolutně pozicovaný). */
.booking-cal-host .flatpickr-calendar.inline .flatpickr-months{
    padding-bottom: 0;
}
.booking-cal-host .flatpickr-calendar.inline .flatpickr-month{
    height: 36px;
}
/* Šipky měsíců nesmí MIZET. Flatpickr je na kraji rozsahu skrývá přes
   `display: none`, takže hlavička při výběru poskakuje a vypadá rozbitě
   (typicky u odjezdu, kde je rozsah omezený max. počtem nocí). Zůstanou na místě
   ztlumené — host vidí, že dál už to nejde, místo aby šipka zmizela beze stopy. */
.booking-cal-host .flatpickr-calendar.inline .flatpickr-prev-month.flatpickr-disabled,
.booking-cal-host .flatpickr-calendar.inline .flatpickr-next-month.flatpickr-disabled{
    display: block;
    opacity: .22;
    pointer-events: none;
}
/* Legenda uvnitř kalendáře je v boxu užší — menší písmo, bez vnějšího odsazení. */
.booking-cal-host .flatpickr-calendar.inline .fp-legend{
    margin: 4px;
    padding: 8px 10px;
    font-size: 11px;
}
/* Pole termínu v boxu zůstávají nativní `input[type=date]`: mají segmenty
   den / měsíc / rok, šipky ↑↓ a vlastní validaci. Nativní ikonu kalendáře
   schováváme — kalendář je hned nad poli a dvě ikony by pletly. */
.booking-date-native{
    width: 100%;
    font: inherit;
}
.booking-date-native::-webkit-calendar-picker-indicator{
    display: none;
    -webkit-appearance: none;
}

/* Na mobilu box putuje z postranního sloupce do textu (site.js) — tam nesmí
   zůstat sticky ani mít šířku postranního panelu. */
.apt-sidebar--inflow{
    position: static;
    width: auto;
    margin: 0 0 32px;
}

/* ============================================================
   Gallery — grid mozaika s lightboxem (detail apartmánu)
   ============================================================ */

.apt-gallery-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 24px 0 40px;
}
.apt-gallery-grid-item{
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--c-cream);
}
.apt-gallery-grid-item:first-child{
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}
.apt-gallery-grid-item picture{
    display: block;
    width: 100%;
    height: 100%;
}
.apt-gallery-grid-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.apt-gallery-grid-item:hover .apt-gallery-grid-img{ transform: scale(1.05); }
@media (max-width: 700px) {
.apt-gallery-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Odkaz pod mapou lokality */
.apt-map-links{
    margin: -16px 0 32px;
    font-size: 14px;
    font-weight: 500;
}

/* ============================================================
   FAQ accordion
   ============================================================ */

.faq-accordion{
    max-width: 800px;
    margin: 0 auto;
}
.faq-item{
    border-bottom: 1px solid var(--c-line);
}
.faq-item summary{
    padding: 20px 0;
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-weight: 600;
    color: var(--c-ink);
    font-size: 17px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
    content: '+';
    font-size: 24px;
    color: var(--c-primary);
    font-weight: 300;
    transition: transform .2s;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item-body{
    padding: 0 0 20px;
    color: var(--c-muted);
    line-height: 1.65;
}
/* ============================================================
   Forms
   ============================================================ */

.form-group{
    margin-bottom: 20px;
}
.form-group label{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-soft);
    margin-bottom: 6px;
}
.form-input,
.form-textarea,
.form-select{
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 15px;
    color: var(--c-ink);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus{
    border-color: var(--c-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(185, 157, 117, 0.18);
}
.form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {
.form-row{ grid-template-columns: 1fr; gap: 12px; }
}/* Selector `.form-group label.form-checkbox` má specificity 0,1,2 — přebíjí
   base `.form-group label{ display: block }` (0,1,1) i normalize defaults.
Margin/font-size resety potlačují inheritu z `.form-group label`. */
.form-group label.form-checkbox,
label.form-checkbox{
    display: flex;
    align-items: center;       /* vertically centered checkbox vs. label */
    gap: 10px;
    cursor: pointer;
    line-height: 1.5;
    margin-bottom: 0;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
}
.form-group label.form-checkbox input,
label.form-checkbox input{
    margin: 0;
    flex-shrink: 0;
}
/* Multi-line labels (GDPR souhlas s odkazy) — checkbox kotví na první řádek,
   ne center, aby vícřádkový text vypadal přirozeně. */
.form-group label.form-checkbox.form-checkbox--top,
label.form-checkbox.form-checkbox--top,
.form-group label.form-checkbox:has(span > a),
label.form-checkbox:has(span > a){
    align-items: flex-start;
}
.form-group label.form-checkbox.form-checkbox--top input,
label.form-checkbox.form-checkbox--top input,
.form-group label.form-checkbox:has(span > a) input,
label.form-checkbox:has(span > a) input{
    margin-top: 4px;
}
/* Odkazy uvnitř GDPR/terms checkbox spanu — viditelné gold + underline */
.form-checkbox span a,
.booking-form .form-group span a{
    color: var(--c-gold-2, #c9a961);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color .15s ease;
}
.form-checkbox span a:hover,
.booking-form .form-group span a:hover{
    color: var(--c-gold, #c9a961);
    text-decoration-thickness: 2px;
}
/* ============================================================
   Footer
   ============================================================ */

.site-footer{
    background: var(--c-very-dark);
    color: rgba(255,255,255,0.65);
    padding: 0;
    margin-top: 0;
}
.site-footer h4{
    color: #fff;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 20px;
}
.site-footer a{
    color: rgba(255,255,255,0.7);
    display: block;
    padding: 4px 0;
    font-size: 14px;
}
.site-footer a:hover{
    color: #fff;
}
.site-footer-grid{
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 48px;
    margin-bottom: 48px;
}

.site-footer .site-logo{
    color: #fff;
    margin-bottom: 0;
}


/* ============================================================
   Flash messages
   ============================================================ */




/* ============================================================
   Lightbox galerie — swipe slider (JS: initGalleryLightbox)
   Struktura: .lb > .lb-backdrop + .lb-shell (bar / stage / nav /
   caption / thumbs). Stage je Swiper, .lb-shell se při tahu dolů
   posouvá a zavírá. Ovládací tlačítka jsou kulatá, ikony inline SVG.
   ============================================================ */

.lb{
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    opacity: 0;
    transition: opacity .22s ease;
}
.lb.is-open{ opacity: 1; }
.lb[hidden]{ display: none; }
body.lb-locked{ overflow: hidden; }

.lb-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(14, 16, 24, .97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity .18s ease;
}
.lb-shell{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 0 14px;
    transition: transform .25s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.lb.is-open .lb-shell{ animation: lb-rise .26s cubic-bezier(.22,.61,.36,1); }
@keyframes lb-rise{ from{ transform: translate3d(0, 24px, 0); } to{ transform: none; } }

/* Horní lišta: počitadlo vlevo, zavřít vpravo */
.lb-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    flex: 0 0 auto;
}
.lb-counter{
    color: rgba(255,255,255,.72);
    font-family: var(--font-sans);
    font-size: 14px;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}
.lb-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.lb-btn svg{ display: block; }
.lb-btn:hover{ background: var(--c-primary); border-color: var(--c-primary); }
.lb-btn:active{ transform: scale(.94); }
.lb-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

/* Plocha s fotkou */
.lb-stage{
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    /* Vodorovné listování i pinch zoom řídí Swiper — nativní gesta by mu
       do toho sahala a rozbila by tah dolů pro zavření. */
    touch-action: none;
}
.lb-stage .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}
.lb-stage .swiper-zoom-container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
/* <picture> je jen obal kolem <img> — nesmí zabírat vlastní rozměr, jinak by
   se fotka nevešla na výšku plochy. */
.lb-stage picture{
    display: contents;
}
.lb-stage img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
    user-select: none;
    -webkit-user-drag: none;
}
/* Fallback bez Swiperu — nativně odscrollovatelný pás se snapem */
.lb-stage--native .swiper-wrapper{
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.lb-stage--native .swiper-wrapper::-webkit-scrollbar{ display: none; }
.lb-stage--native .swiper-slide{ flex: 0 0 100%; scroll-snap-align: center; }

/* Šipky — na dotykových displejích stačí tah, tam je schováme */
.lb-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.lb-nav:active{ transform: translateY(-50%) scale(.94); }
.lb-prev{ left: 18px; }
.lb-next{ right: 18px; }
.lb-nav.swiper-button-disabled{ opacity: .35; pointer-events: none; }

.lb-caption{
    flex: 0 0 auto;
    margin: 12px auto 0;
    max-width: 900px;
    padding: 0 20px;
    text-align: center;
    color: rgba(255,255,255,.82);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    min-height: 21px;
}

/* Pruh náhledů */
.lb-thumbs{
    flex: 0 0 auto;
    width: 100%;
    max-width: 1100px;
    margin: 12px auto 0;
    padding: 0 16px;
}
.lb-thumbs .swiper-slide{
    width: 92px;
    height: 62px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: .45;
    transition: opacity .18s ease, box-shadow .18s ease;
}
.lb-thumbs .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lb-thumbs .swiper-slide:hover{ opacity: .8; }
.lb-thumbs .swiper-slide-thumb-active{
    opacity: 1;
    box-shadow: 0 0 0 2px var(--c-primary);
}

@media (max-width: 991px){
    .lb-thumbs .swiper-slide{ width: 72px; height: 50px; }
}
@media (max-width: 700px){
    .lb-nav{ display: none; }
    .lb-bar{ padding: 10px 12px; }
    .lb-btn{ width: 42px; height: 42px; }
    .lb-stage .swiper-slide{ padding: 0 6px; }
    .lb-caption{ font-size: 13px; padding: 0 14px; }
}
/* Nízké okno (mobil na šířku) — náhledy by sebraly místo fotce */
@media (max-height: 520px){
    .lb-thumbs{ display: none; }
    .lb-caption{ margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce){
    .lb, .lb-shell, .lb-backdrop, .lb-btn{ transition: none; }
    .lb.is-open .lb-shell{ animation: none; }
}










/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
:root{ --space-section: 32px; --space-section-lg: 48px; }
.nav-burger{ display: inline-flex; }
.site-nav{
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        gap: 0;
        padding: 16px 24px;
        border-bottom: 1px solid var(--c-line);
        box-shadow: var(--shadow);
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform .25s, opacity .25s;
    }
.site-nav.is-open{
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
.site-nav a{
        padding: 14px 0;
        border-bottom: 1px solid var(--c-line-soft);
        width: 100%;
    }
.site-nav a:last-child{ border-bottom: none; }
.site-header-actions .btn{ padding: 10px 16px; font-size: 12px; }
.apt-detail-grid{ grid-template-columns: 1fr; gap: 32px; }
.apt-sidebar{ position: static; }
.site-footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 480px) {
.site-footer-grid{ grid-template-columns: 1fr; }
.booking-widget-fields{ grid-template-columns: 1fr; }
.form-row{ grid-template-columns: 1fr; }
.lang-switcher{ display: none; }
}/* ============================================================
   COZYSTAY REDESIGN — nové sekce + polish
   ============================================================ */

/* Header — phone link */
.site-header-phone{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color .15s ease;
}
.site-header-phone:hover{ color: var(--c-primary); }
.site-header-phone svg{ width: 14px; height: 14px; opacity: 0.7; }
@media (max-width: 960px) { .site-header-phone { display: none; } }/* Welcome staggered section */








.welcome-action .btn{ padding: 14px 32px; }







/* Services grid (CozyStay 2x3 + side image) */





















/* Testimonials grid */
.testimonials-section{
    padding: var(--space-section-lg) 0;
}

.testimonials-section--light{ background: var(--c-bg); }

.testimonials-section--dark .testimonials-eyebrow{ color: var(--c-gold-2, #c9a961); }
.testimonials-section--dark .testimonials-heading{ color: #fff; }
/* Dark variant cards — transparent s gold border místo bílého pozadí */
.testimonials-section--dark .testimonial-card{
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid var(--c-gold-2, #c9a961);
    color: rgba(255, 255, 255, 0.88);
}

.testimonials-section--dark .testimonial-card-quote p{ color: rgba(255, 255, 255, 0.88); }
.testimonials-section--dark .testimonial-card-author cite{ color: #fff; }
.testimonials-section--dark .testimonial-card-location{ color: rgba(255, 255, 255, 0.55); }
.testimonials-section--dark .testimonial-card .star-empty{ color: rgba(255, 255, 255, 0.18); }


.testimonials-header{ text-align: center; margin-bottom: 56px; }
.testimonials-eyebrow{
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-primary);
    margin-bottom: 14px;
}
.testimonials-heading{
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.4vw, 44px);
    margin: 0;
}
.testimonial-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}


.testimonial-card{
    background: var(--c-bg);
    padding: 40px 32px;
    border-top: 2px solid var(--c-primary);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.testimonial-card .testimonial-stars{ display: flex; gap: 2px; }
.testimonial-card .star{ color: var(--c-primary); font-size: 18px; line-height: 1; }
.testimonial-card .star-empty{ color: var(--c-line); }
.testimonial-card-quote{
    margin: 0;
    padding: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: var(--c-ink);
    flex: 1;
}
.testimonial-card-quote p{ margin: 0; }
.testimonial-card-author{
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.testimonial-card-author cite{
    font-style: normal;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--c-ink);
}
.testimonial-card-location{
    font-size: 12px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

@media (max-width: 960px) {
.testimonial-grid{ grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}/* Newsletter section */
.newsletter-section{
    position: relative;
    padding: 110px 24px;
    background-color: var(--c-dark-teal);
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}
.newsletter-inner{
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.newsletter-eyebrow{
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 14px;
}
.newsletter-heading{
    font-family: var(--font-serif);
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.25;
    color: #fff;
    margin: 0 0 14px;
}
.newsletter-subheading{
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 32px;
}
.newsletter-form{ width: 100%; max-width: 480px; margin: 0 auto; }
.newsletter-form-row{
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.04);
}
.newsletter-input{
    flex: 1;
    padding: 16px 18px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-family: var(--font-sans);
    outline: none;
}
.newsletter-input::placeholder{ color: rgba(255,255,255,0.55); }
.newsletter-submit{
    border-radius: 0;
    padding: 0 28px;
    font-size: 12px;
    letter-spacing: 0.14em;
}


.newsletter-honeypot,
.bf-honeypot{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.newsletter-msg{
    min-height: 20px;
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.95);
}
.newsletter-msg.is-error{ color: #ffd7d7; }

@media (max-width: 540px) {
.newsletter-form-row{ flex-direction: column; }
.newsletter-submit{ padding: 14px; }
}/* Hero polish — větší typografie pro CozyStay vibe */
.hero{
    min-height: clamp(640px, 90vh, 920px);
}
.hero-title{
    font-size: clamp(40px, 6vw, 96px);
    line-height: 1.04;
    letter-spacing: 0.005em;
}
.hero-subtitle{ font-size: clamp(15px, 1.4vw, 18px); }
/* Booking widget — sage floating overlay variant */




/* Footer mini newsletter */


.footer-newsletter-form{
    display: flex;
    gap: 0;
    max-width: 380px;
}
.footer-newsletter-form input[type="email"]{
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 0;
}
.footer-newsletter-form input[type="email"]::placeholder{ color: rgba(255,255,255,0.5); }
.footer-newsletter-form button{
    padding: 0 20px;
    background: var(--c-primary);
    color: #fff;
    border: 0;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
}
.footer-newsletter-form button:hover{ background: var(--c-primary-2); }
/* Section-header eyebrow + heading for sections that don't have explicit class */
.section-header-eyebrow{
    font-family: var(--font-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-primary);
    margin-bottom: 12px;
}
/* Builder section spacing inside container fallback — KOMPAKTNÍ default.
   Předtím to bylo var(--space-section) = 140px → vytvářelo obří díry kolem
   krátkých sekcí (heading, text). Spacing teď řídí per-section padding
   z universal panelu (typeDefaults). Pokud admin nenastaví → 32px default. */
.builder-section{ padding: 32px 0; }
.builder-section:first-child{ padding-top: 0; }
/* Newsletter unsubscribe page */

/* ============================================================
   COZYSTAY ROUND 2 — boutique resort overhaul (2026-05-12)
   Lighter, more breathable, italic display, real CozyStay vibe.
   ============================================================ */

/* ── Display typography ─────────────────────────────────── */
h1, h2{
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.005em;
}
h1{ font-size: clamp(48px, 7.5vw, 110px); }
h2{ font-size: clamp(36px, 4.6vw, 64px); }
h3{ font-family: var(--font-display); font-weight: 500; }
/* ── Hero — full-bleed, lighter overlay, regular serif title ─── */
.hero{
    position: relative;
    min-height: clamp(640px, 56vw, 760px);
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 180px 48px 180px;
    color: #fff;
    overflow: hidden;
}
/* Alignment — schema fields v hero element (BuilderElements.php) generují class hero--align-{value}. */






.hero--align-left  .hero-eyebrow::before,
.hero--align-right .hero-eyebrow::before{ display: none; }
.hero-with-search{
    min-height: clamp(640px, 55.5vw, 749px);
    max-height: none;
    padding: 80px 84px 80px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    overflow: visible;
}
.hero-with-search .hero-content{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
    color: #fff;
}
.hero::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.06) 55%, rgba(0,0,0,0.22) 100%);
    pointer-events: none;
}
.hero-with-search::before{ display: none; }
.hero-content{
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
}
.hero-eyebrow{
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: rgba(255,255,255,0.9);
    margin-bottom: 28px;
}
.hero-eyebrow::before{
    content: "✦";
    display: block;
    font-size: 18px;
    margin-bottom: 12px;
    letter-spacing: 0;
    color: var(--c-primary);
    opacity: 0.9;
}
.hero-title{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(54px, 8.5vw, 120px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 28px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.hero-subtitle{
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.5;
    color: rgba(255,255,255,0.92);
    max-width: 620px;
    margin: 0 auto 36px;
}

/* ── Booking widget — floating overlap bar (CozyStay style) ── */
.booking-widget--inline{
    position: absolute;
    left: 50%;
    bottom: -54px;
    transform: translateX(-50%);
    width: calc(100% - 96px);
    max-width: 1340px;
    background: #fff;
    color: var(--c-ink);
    padding: 28px 36px;
    display: flex;
    align-items: flex-end;
    gap: 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    z-index: 5;
    border-top: 3px solid var(--c-primary);
}
.booking-widget--inline .booking-widget-fields{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    flex: 1;
}
.booking-widget--inline .booking-widget-field{ display: flex; flex-direction: column; gap: 8px; }
.booking-widget--inline label{
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--c-primary);
}
.booking-widget--inline input,
.booking-widget--inline select{
    border: 0;
    border-bottom: 1px solid var(--c-line);
    padding: 6px 0;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--c-ink);
    background: transparent;
    border-radius: 0;
    outline: none;
}
.booking-widget--inline input:focus,
.booking-widget--inline select:focus{
    border-bottom-color: var(--c-primary);
}
.booking-widget--inline .btn{
    align-self: stretch;
    padding: 16px 36px;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0.2em;
}
/* When booking widget overlaps, next section needs extra top padding */
.hero-with-search + section,
.hero + section.welcome-section,
.hero + .builder-section{
    padding-top: calc(var(--space-section-lg) + 60px);
}

@media (max-width: 960px) {
.booking-widget--inline{
        position: static;
        transform: none;
        width: auto;
        max-width: none;
        margin: 32px 24px -60px;
    }
.booking-widget--inline .booking-widget-fields{
        grid-template-columns: 1fr 1fr;
    }
.hero-with-search{ padding-bottom: 120px; }
}
@media (max-width: 540px) {
.booking-widget--inline{ flex-direction: column; align-items: stretch; }
.booking-widget--inline .booking-widget-fields{ grid-template-columns: 1fr; }
}/* ── Welcome — single column centered (CozyStay primary layout) ─ */









.welcome-action .btn{ padding: 16px 36px; font-size: 11px; letter-spacing: 0.22em; }

/* ── Section headers everywhere (consistent eyebrow + heading) ──
   margin-bottom řídí základní .section-header (0 auto 24px výše) — dřív tu
   byl override 64px, který dělal přehnané mezery pod nadpisy sekcí. */
.section-header{ text-align: center; }
.section-header-eyebrow,
.testimonials-eyebrow,
.services-eyebrow{
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--c-primary);
    margin-bottom: 14px;
}
.section-header h2,
.testimonials-heading,
.services-heading{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(36px, 4.6vw, 60px);
    line-height: 1.12;
    margin: 0 auto;
    max-width: 720px;
}
/* ── Featured apartment — bigger breathing ─────────────── */
.featured-apartment{
    padding: var(--space-section-lg) 0;
    background: var(--c-cream);
}
.featured-apartment-grid{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 96px;
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
}
.featured-apartment-image{
    aspect-ratio: 5 / 6;
    background-size: cover;
    background-position: center;
    min-height: 540px;
}
.featured-apartment h2{
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(36px, 4.6vw, 60px);
    margin: 0 0 20px;
}
.featured-apartment-meta{
    list-style: none;
    padding: 0;
    margin: 28px 0;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.featured-apartment-meta strong{ display: block; font-size: 26px; color: var(--c-ink); font-family: var(--font-display); letter-spacing: 0; }
.featured-apartment-price{
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 24px 0 32px;
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--c-ink);
}
.featured-apartment-price .price-from,
.featured-apartment-price .price-suffix{
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-muted);
}
.featured-apartment-actions{ display: flex; gap: 16px; flex-wrap: wrap; }
.featured-apartment-actions .btn{ padding: 16px 32px; font-size: 11px; letter-spacing: 0.22em; }

@media (max-width: 960px) {
.featured-apartment-grid{ grid-template-columns: 1fr; gap: 40px; }
}/* ── Cards section (Experience) ───────────────────────── */
.builder-cards-section{
    padding: var(--space-section-lg) 0;
}
.builder-cards-section .section-header{ margin-bottom: 72px; }
.card-grid{ gap: 40px; }
.card{
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: transform .25s ease;
}
.card-image{
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    margin-bottom: 28px;
    min-height: 480px;
}
.card-body{ padding: 0; }
.card-eyebrow{
    font-family: var(--font-sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--c-primary);
    margin-bottom: 10px;
}
.card-title{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    margin: 0 0 10px;
    color: var(--c-ink);
}
.card-text{
    color: var(--c-ink-soft);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 16px;
}
.card:hover{ transform: translateY(-4px); }
/* Cards on dark background (CozyStay Experience sekce) */

.builder-cards-section--dark .section-header h2,
.builder-cards-section--dark .card-title{ color: #fff; }
.builder-cards-section--dark .section-header-eyebrow,
.builder-cards-section--dark .card-eyebrow{ color: rgba(255,255,255,0.75); }
.builder-cards-section--dark .card{ background: transparent; border: 0; }
.builder-cards-section--dark .card-text{ color: rgba(255,255,255,0.78); }
.builder-cards-section--dark .btn-ghost{ color: var(--c-primary); border-color: rgba(255,255,255,0.25); }
.builder-cards-section--dark .btn-ghost:hover{ background: rgba(255,255,255,0.06); }
/* ============================================================
   COZYSTAY ROUND 3 — match-tracking detailů
   ============================================================ */

/* ============================================================
   UNIVERSAL IMAGE SLIDER — builder element image_slider
   Karusel/grid fotek bez vazby na text. Lightbox přes data-lightbox.
   ============================================================ */








.image-slider.swiper{
    overflow: visible;
    padding: 0 4px;
}






/* Grid varianta */







/* Swiper navigation styles — gold accent + clean */
.image-slider .swiper-button-prev,
.image-slider .swiper-button-next{
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    color: var(--c-text-strong, #1a2025);
    margin-top: -22px;
}
.image-slider .swiper-button-prev:after,
.image-slider .swiper-button-next:after{
    font-size: 16px;
    font-weight: 700;
}
.image-slider .swiper-button-prev:hover,
.image-slider .swiper-button-next:hover{
    background: var(--c-gold, #c9a961);
    color: #fff;
}
.image-slider .swiper-pagination{
    position: relative;
    margin-top: 18px;
    bottom: auto;
}
.image-slider .swiper-pagination-bullet{
    background: var(--c-text-muted, #5b6770);
    opacity: .35;
    width: 8px; height: 8px;
    transition: opacity .2s, background .2s;
}
.image-slider .swiper-pagination-bullet-active{
    opacity: 1;
    background: var(--c-gold, #c9a961);
    width: 24px;
    border-radius: 4px;
}

/* Mobile */

@media (max-width: 480px) {

.image-slider .swiper-button-prev,
    .image-slider .swiper-button-next{ display: none; }
}/* ── Welcome portraits — 4 vertical photos BELOW centered text ── */








/* ── Testimonials FEATURED (single large + photo) ── */



.testimonial-featured:not(:has(.testimonial-featured-image)) .testimonial-featured-body .testimonial-stars{ justify-content: center; }




.testimonial-featured-body .testimonial-stars{
    display: flex;
    gap: 4px;
    margin-bottom: 28px;
    font-size: 18px;
    color: var(--c-primary);
}





@media (max-width: 960px) {


.testimonial-featured-body .testimonial-stars{ justify-content: center; }

}/* ── Newsletter — light cream variant (CozyStay style) ── */


.newsletter-section--light .newsletter-eyebrow{ color: var(--c-primary); }
.newsletter-section--light .newsletter-heading{ color: var(--c-ink); }
.newsletter-section--light .newsletter-subheading{ color: var(--c-ink-soft); }
.newsletter-section--light .newsletter-form-row{
    border-color: var(--c-line);
    background: #fff;
}
.newsletter-section--light .newsletter-input{ color: var(--c-ink); }
.newsletter-section--light .newsletter-input::placeholder{ color: var(--c-muted); }

.newsletter-section--light .newsletter-msg{ color: var(--c-ink-soft); }
/* ── Services — text-based items (no icon) variant ── */

/* ============================================================
   COZYSTAY ROUND 4 — header overhaul + sage booking widget +
   gold border experience cards + hero typografie fix
   ============================================================ */

/* ── HEADER: transparent over hero, white text, dark gradient ── */
body.has-hero{ padding-top: 80px; }
body.has-hero .site-main{ padding-top: 0; }
.site-header--transparent{
    /* E030 (2026-05-14) — REF CDP spec [4]: header overlap-header 1904×121,
       position absolute, z-index 999.
       Separator (1px rgba(255,255,255,0.21) at Y=120) realizován jako ::after
       pseudo, ne jako border-bottom — REF site implementuje separator přes
       child div, takže border-color všech 4 stran zůstává inherited (currentColor
       z body = rgb(26,27,26)), což matchuje dispe�erův regression hint. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 80px;
    background: #fff;
    border-bottom: 1px solid var(--c-line-soft);
    z-index: 999;
}
.site-header--transparent::before{ display: none; }
.site-header--transparent::after{ display: none; }
/* Inner stránky (bez .has-hero): header je FIXED nahoře místo sticky.
   Sticky je rozbitý kvůli `body{ overflow-x: hidden }` — fixed funguje vždy.
Padding-top na body kompenzuje výšku headeru aby obsah nebyl pod ním. */
body:not(.has-hero) .site-header--transparent{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 0 var(--c-line-soft);
}
body:not(.has-hero){ padding-top: 80px; }
@media (max-width: 760px) {
body:not(.has-hero){ padding-top: 64px; }
body.has-hero{ padding-top: 64px; }
}body:not(.has-hero) .site-header--transparent::before{ display: none; }
body:not(.has-hero) .site-header--transparent .site-header-inner *,
body:not(.has-hero) .site-header-left a,
body:not(.has-hero) .site-header-right a:not(.btn-outline),
body:not(.has-hero) .site-logo-text{
    color: var(--c-ink);
}
/* Scrolled state — solid background even on hero pages */
.site-header.is-scrolled{
    position: fixed;
    background: rgba(255,255,255,0.97);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
/* Scrolled stav: hlavička drží stejnou výšku 80px i vzhled (Kinsley) — žádný shrink,
   žádné přebarvování CTA. Jen jemný stín (nastaven výše). */
.site-header.is-scrolled .site-header-inner{ min-height: 80px; height: 80px; }
.site-header.is-scrolled::before{ display: none; }
/* ── Header (Kinsley): logo vlevo / menu na střed / CTA vpravo, výška 80px ── */
.site-header .site-header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0 40px;
    height: 80px;
    min-height: 80px;
    max-width: none;
    margin: 0;
    color: var(--c-ink);
    position: relative;
}
.site-header .site-logo{ order: -1; margin: 0; }
.site-header .site-header-phone{ display: none; }
/* Responsive žebřík hlavičky:
   >=1400: plné menu na středu, gap 34
   1200–1399: menu na středu, gap 20, menší logo
   <1200: inline menu skryté -> burger + drawer (nic se nepřekrývá)
   <=700: skrýt jazykový přepínač */
/* (responsive žebřík hlavičky přesunut na konec souboru — autoritativní pozice) */

/* Aktivní podtržítko na spodní hraně headeru */
.site-header .site-nav-inline a.is-active::after{
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-gold);
}
.site-header-left{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    gap: 30px;
    justify-self: start;
}
.site-header-right{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    gap: 40px;
    justify-self: end;
}
/* ── Hamburger (CozyStay parity: 35×50, 3 lines, 1px thick, 8px apart)
   E023 reverted (2026-05-14): keep visible as flex on desktop. The REF CDP spec
   has display:flex with 35×50 bbox even on desktop; hiding via display:none
   collapsed bbox to 0×0 and caused dispatcher regression (-14pp). */
.nav-burger{
    /* E030 (2026-05-14) — REF CDP spec [13]: burger button.menu-toggle 35×50,
       display: flex (NOT inline-flex), position: relative, color white so
       computed borderColor = rgb(255,255,255) (matches dispatcher regression hint). */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    width: 35px;
    min-width: 35px;
    flex-shrink: 0;
    height: 50px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-color: #fff;
    cursor: pointer;
    color: #fff;
    line-height: 50px;
    text-align: center;
    z-index: 999;
    position: relative;
}
.nav-burger > span:not(.sr-only){
    display: block;
    width: 35px;
    height: 2px;
    background: #fff;
    border-radius: 0;
    transition: transform .25s, opacity .25s, background-color .25s;
}
/* Scrolled / non-hero header — invert burger lines to ink */
.site-header.is-scrolled .nav-burger,
body:not(.has-hero) .site-header .nav-burger{ color: var(--c-ink); }
.site-header.is-scrolled .nav-burger span:not(.sr-only),
body:not(.has-hero) .site-header .nav-burger span:not(.sr-only){ background: var(--c-ink); }
/* Burger sr-only span must not paint a line; stays absolutely positioned via .sr-only */
.nav-burger > .sr-only{ background: transparent; width: 1px; height: 1px; }
/* ── Site nav inline (CozyStay parity: Jost 500 13px, ls 0.05em, lh 60px) ──
   E030 (2026-05-14) — REF CDP spec: nav 336×60 (line-height 60 dává vertikální
   střed), Jost 13px 500 letter-spacing 0.05em uppercase white. Explicit Jost
   stack odpovídá REF computed fontFamily. */
.site-nav-inline{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    gap: 0;
    font-family: 'Jost', var(--font-sans), sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 60px;
    color: #fff;
    border-color: #fff;
}
.site-nav-inline a{
    color: #fff;
    padding: 0 15px;
    line-height: 60px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}
/* DEPREKOVÁNO 2026-05-26: white ::before underline duplikoval gold ::after
   z luxury-drawer.css → user viděl 2 čáry. Zachováno jen pro nav-toggle (které
   nemá vlastní gold ::after rule v luxury-drawer.css). */
.site-nav-inline > .nav-item > .nav-toggle::before{
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 18px;
    height: 1px;
    background: var(--c-gold, #c9a961);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}
.site-nav-inline > .nav-item > .nav-toggle:hover::before,
.site-nav-inline > .nav-item > .nav-toggle.is-active::before{ transform: scaleX(1); }
.site-nav-inline .nav-chev{
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0.85;
    transition: transform .2s ease, opacity .2s ease;
}
.site-nav-inline .nav-item.has-dropdown:hover .nav-chev,
.site-nav-inline .nav-item.has-dropdown.is-open .nav-chev{ transform: rotate(180deg); opacity: 1; }
@media (max-width: 1100px) { .site-nav-inline { display: none; } }/* Mobile drawer nav (controlled by burger toggle) */
.site-nav{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 360px;
    max-width: 86vw;
    background: var(--c-very-dark);
    color: #fff;
    padding: 80px 36px 36px;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 140;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,0.2);
}
.site-nav.is-open{ transform: translateX(0); }
.site-nav a{
    display: block;
    padding: 16px 0;
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: var(--font-sans);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}
.site-nav a:hover{ color: var(--c-primary); }
.nav-close{
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: all .2s;
}
.nav-close:hover{ background: var(--c-primary); border-color: var(--c-primary); }
/* Backdrop */
.nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 130;
}
.nav-backdrop.is-open{ opacity: 1; pointer-events: auto; }
body.nav-open{ overflow: hidden; }
/* ── Nav dropdown (desktop hover + mobile click) ─────────── */
.site-nav-inline .nav-item.has-dropdown{
    position: relative;
}


.nav-item.has-dropdown:hover .nav-chev,
.nav-item.has-dropdown.is-open .nav-chev{ transform: rotate(180deg); opacity: 1; }

.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown.is-open .nav-dropdown{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}



/* ── Logo centered with stars ── */
.site-logo{
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #fff;
    text-decoration: none;
}
.site-logo-text{
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
}


/* ── Right side: phone + lang + outlined Book Now (CozyStay parity) ── */
.site-header-phone{
    color: #fff;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    white-space: nowrap;
}
.site-header-phone:hover{ color: var(--c-primary); }
.site-header-phone svg{ display: none; }
@media (max-width: 1100px) { .site-header-phone { display: none; } }.lang-switcher{
    color: #fff;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    line-height: 20px;
    font-weight: 400;
    font-family: var(--font-sans);
}
.lang-switcher a{
    color: #fff;
    padding: 0;
    margin: 0;
    border-left: 0;
    text-transform: none;
    font-weight: 400;
    position: relative;
    text-decoration: none;
}
.lang-switcher a + a{
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}
.lang-sep{ padding: 0 4px; }
.lang-switcher a.is-active{
    color: #fff;
    font-weight: 400;
}
.lang-sep{ color: #fff; }
/* Outlined Book Now button — uses currentColor so it flips with parent text color */
.btn-outline{
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 14px 32px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    transition: all .2s;
    border-radius: 0;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
.btn-outline:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
/* Header CTA — transparent ghost button like CozyStay "Book Now" (thin border, white text over hero) */
.btn-book{
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    height: 44px;
    padding: 0 24px;
    font-family: 'Marcellus', var(--font-display), serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    transition: background .2s, border-color .2s, color .2s;
    border-radius: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}
/* E026 (2026-05-14) — Book Now inner span: REF CDP spec [49] expects display:block + Marcellus.
   Wrapping in <span> + this rule matches the REF element structure. */
.btn-book > span{
    display: block;
    font-family: 'Marcellus', var(--font-display), serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: inherit;
}
.btn-book:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
    font-weight: 600;
}
/* CTA v hlavičce: VŽDY amber pill (scroll i podstránky) — Kinsley Book now.
   Tmavý text na amber (bílá má nízký kontrast). */
.site-header.is-scrolled .btn-book,
body:not(.has-hero) .btn-book{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
    font-weight: 600;
}
.site-header.is-scrolled .btn-book:hover,
body:not(.has-hero) .btn-book:hover{
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
}

@media (max-width: 760px) {
/* Mobile compact header: 56px height. Selector matches base .site-header .site-header-inner
       (specificity 0,0,2,0) z CozyStay overrides (line 2428), který nastavuje 121px.
       Bez tohoto prefixu by base pravidlo přepsalo mobile výšku. */
    .site-header,
    .site-header--transparent{
        min-height: 64px;
        height: auto;
    }
.site-header .site-header-inner{
        height: 64px;
        min-height: 64px;
        padding: 0 16px;
        gap: 8px;
    }
.site-logo-text{ font-size: 18px; letter-spacing: .3px; }
.site-header .site-logo{ height: 64px; }
.site-header .site-logo-emblem{ height: 30px; }

.site-header-right .lang-switcher,
    .site-header-right .site-header-phone{ display: none; }
.btn-book{ height: 34px; padding: 0 12px; font-size: 11px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.nav-burger{ height: 38px; width: 32px; min-width: 32px; }
}
/* Velmi malé telefony (≤480px) — CTA "Rezervovat" v hlavičce přesahoval
   viewport. User má alternativní access v hamburger drawer (Rezervovat button
   v dolní části drawer). */
@media (max-width: 480px) {
.site-header .site-header-inner{ gap: 4px; padding-left: 12px; padding-right: 12px; }
/* Override base .site-header .btn-book{ display: inline-flex !important }
z CozyStay overrides (line 4797). Base pravidlo přichází POZDĚJI v souboru,
       takže potřebujeme vyšší specificity (body prefix → 0,0,2,1). */
    body .site-header .btn-book{ display: none; }
.site-logo-text{ font-size: 17px; letter-spacing: 0.16em; }
}/* ── Hero typography fix — regular Marcellus, NO italic, white centered ── */
.hero{
    padding-top: 160px;       /* tighter — closer to CozyStay rhythm */
}
.hero-eyebrow{
    margin-bottom: 18px;
}
.hero-eyebrow::before{ display: none; }   /* remove the icon glyph */
.hero-title{
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(40px, 5vw, 64px);   /* Kinsley page title měřítko */
    line-height: 1.15;
    letter-spacing: 0;
    color: #fff;
    text-shadow: none;
    max-width: 880px;
    margin: 0 auto 20px;
}
.hero-subtitle{
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(17px, 1.55vw, 21px);
    font-weight: 400;
    line-height: 1.66;
    color: rgba(255,255,255,0.92);
    margin-top: 20px;
    margin-bottom: 0;
    letter-spacing: 0;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
/* ── Booking widget — SAGE GREEN panel with gold-framed input cells (CozyStay match) ── */
/* Note: width/max-width/position handled by higher-specificity .hero.hero-with-search rule (line ~4670) */
.booking-widget--inline{
    background: var(--c-secondary);          /* sage green #53624e */
    color: #fff;
    padding: 30px;                            /* CozyStay: 30px all sides */
    border: 0;
    border-radius: 0;                         /* CozyStay: no radius */
    box-shadow: none;                         /* CozyStay: no shadow on widget */
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 15px;                                /* gutter between fields-group and button */
    position: relative;
    bottom: auto;
    top: auto;
    transform: none;
    z-index: 9;
    height: auto;
    box-sizing: border-box !important;
}
/* Next section needs padding-top to compensate for widget overlap */
.hero-with-search + section{
    padding-top: calc(var(--space-section) + 60px);     /* tighter — reduce big gap */
}
/* ── Custom counter widget for adults/children ────────── */



.counter-btn.is-disabled{
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

.booking-widget--inline .booking-widget-field--counter{
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    justify-content: space-between;
}
.booking-widget--inline .booking-widget-field--counter .counter-widget{
    height: 46px;
    line-height: 1;
    justify-content: flex-end;
    gap: 10px;
}
.booking-widget--inline .booking-widget-field--counter > input[type=hidden]{
    display: none;
}
/* ── Header bottom divider (CozyStay parity)
   Separator je realizován jako ::after pseudo na .site-header--transparent
   (viz blok 2314+). Tady jen hide ::after při scrolled state, kdy header
   přechází na světlé pozadí a border-bottom rgb(26,27,26) (currentColor)
   na 1px je vidět sám. */
.site-header.is-scrolled{ border-bottom: 1px solid var(--c-line-soft); }
.site-header.is-scrolled::after{ display: none; }
/* ── Hero subtitle better spacing ───────────────────── */
.hero-with-search .hero-subtitle{
    margin-top: 20px;
    margin-bottom: 0;
    padding-bottom: 0;
}
.hero-with-search .hero-content{
    padding-bottom: 0;
}
.booking-widget--inline .booking-widget-fields{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;                                 /* CozyStay: 7.5px gutter each side ≈ 15px between fields */
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    height: 48px;                              /* CozyStay: 48px input height */
}
.booking-widget--inline .booking-widget-field{
    background: transparent;
    border: 1px solid var(--c-primary);        /* CozyStay: 1px solid #B99D75 gold frame */
    padding: 0 15px;                           /* CozyStay: 5px 35px 5px 15px (inner) */
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 48px;
    height: 48px;
    min-width: 0;
    box-sizing: border-box !important;
    position: relative;
}
.booking-widget--inline .booking-widget-field:last-child{
    border-right: 1px solid var(--c-primary);  /* keep gold border on last field too */
}
.booking-widget--inline .booking-widget-field label{
    color: #fff;
    font-size: 16px;                           /* CozyStay: Marcellus 16px */
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.66;
    margin: 0;
    font-family: var(--font-serif);            /* CozyStay: Marcellus serif */
    display: inline-block;
}
.booking-widget--inline .booking-widget-field input,
.booking-widget--inline .booking-widget-field select{
    color: #fff;
    background: transparent;
    border: 0;
    font-size: 14px;
    font-family: var(--font-sans);             /* CozyStay: Jost 14px */
    padding: 0 18px 0 0;
    height: 46px;                              /* fits inside 48px field (1px border each side) */
    line-height: 28px;                         /* CozyStay: lh 28px */
    width: 100%;
    outline: none !important;
    text-align: right;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center;
    background-size: 12px 12px !important;
    opacity: 0.95;
}
.booking-widget--inline input::-webkit-calendar-picker-indicator{
    display: none;
}
.booking-widget--inline select option{
    color: var(--c-ink);
    background: #fff;
}
.booking-widget--inline label{
    color: rgba(255,255,255,0.92);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.05em;
    display: block;
}
.booking-widget--inline input,
.booking-widget--inline select{
    display: block;
    height: 22px;
    line-height: 22px;
    width: 100%;
}
.booking-widget--inline input,
.booking-widget--inline select{
    border: 0;
    border-bottom: 0;
    background: transparent;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 15px;
    padding: 0;
    outline: none;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
}
.booking-widget--inline input::placeholder{ color: rgba(255,255,255,0.6); }
.booking-widget--inline select option{ color: var(--c-ink); }
.booking-widget--inline input:focus,
.booking-widget--inline select:focus{ border-bottom: 0; }
.booking-widget--inline .booking-widget-field:focus-within{
    border-color: var(--c-primary);
}
.booking-widget--inline .btn,
.booking-widget--inline .btn.btn-block,
.booking-widget--inline button.btn-block{
    align-self: center !important;
    background: var(--c-primary);              /* CozyStay: #B99D75 gold */
    color: #fff;
    border: 0;
    margin-left: 0;
    padding: 0 15px;                           /* CozyStay: 15px horizontal */
    font-size: 16px;                           /* CozyStay: 16px Marcellus */
    font-weight: 400;
    letter-spacing: 0;
    transition: background .15s;
    flex: 1 1 0;                               /* equal column - matches 5th slot in reference */
    width: auto;
    min-width: 0;
    max-width: none;
    height: 48px;                              /* CozyStay: 48px height */
    line-height: 19.2px;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--font-serif);            /* CozyStay: Marcellus */
    box-sizing: border-box !important;
}

@media (max-width: 1280px) {
.booking-widget--inline{ padding: 20px; }
.booking-widget--inline .booking-widget-fields{ gap: 10px; }
.booking-widget--inline .booking-widget-field{ padding: 0 12px; }
.booking-widget--inline .booking-widget-field label{ font-size: 14px; }
.booking-widget--inline .btn{ font-size: 14px; padding: 0 12px; }
}.booking-widget--inline .btn:hover{
    background: var(--c-primary-2);
}

@media (max-width: 960px) {
.booking-widget--inline{ padding: 20px; }
.booking-widget--inline .booking-widget-fields{ grid-template-columns: 1fr 1fr; gap: 12px; }
.booking-widget--inline .btn{ margin-left: 0; margin-top: 12px; }
}/* ── Experience cards — gold border PROTRUDES outside image (overflow:visible) ── */
.builder-cards-section{
    overflow: visible;
}
.builder-cards-section .card-grid{
    overflow: visible;
}
.builder-cards-section .card{
    position: relative;
    overflow: visible;
    background: #fff;             /* white body below image */
    color: var(--c-ink);
    transition: transform .25s ease;
}
.builder-cards-section .card-image{
    position: relative;
    overflow: visible;
    background-color: transparent;  /* moved to inner wrapper */
}
/* Gold frame extends OUTSIDE image by 12px up-left (default), snaps flush on hover */
.builder-cards-section .card-image::before{
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid var(--c-primary);
    transition: top .5s ease, left .5s ease, right .5s ease, bottom .5s ease;
    pointer-events: none;
    z-index: 2;
}
.builder-cards-section .card:hover .card-image::before{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
/* The actual image sits inside a clipped wrapper (so image doesn't bleed past frame) */
.builder-cards-section .card-image{
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 5;
    min-height: 420px;
}
.builder-cards-section .card-body{
    padding: 28px 24px 32px;
    background: #fff;
    color: var(--c-ink);
}
/* On dark teal section — keep cards as white blocks below image */
.builder-cards-section--dark .card{ background: #fff; color: var(--c-ink); }
.builder-cards-section--dark .card-body{ background: #fff; }
.builder-cards-section--dark .card-title{ color: var(--c-ink); }
.builder-cards-section--dark .card-text{ color: var(--c-ink-soft); }
.builder-cards-section--dark .card-eyebrow{ color: var(--c-primary); }
.builder-cards-section--dark .btn-ghost{ color: var(--c-primary); border: 0; padding: 0; }
.builder-cards-section--dark .btn-ghost:hover{ color: var(--c-primary-2); }
/* ── Static stagger grid for welcome portraits (CozyStay-style) ── */


/* offsets create the staggered look — alternating up/down */









/* ── Flatpickr custom theme overrides (match boutique vibe) ─ */
.booking-widget--inline .flatpickr-input,
.booking-widget--inline .flatpickr-input.flatpickr-mobile{
    background: transparent;
    border: 0;
    color: #fff;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    width: 100%;
    cursor: pointer;
}
.flatpickr-calendar{
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    border-radius: 0;
    font-family: var(--font-sans);
}
.flatpickr-day.selected,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.flatpickr-day:hover{
    background: var(--c-cream);
}
/* ── Buttons standardize ─────────────────────────────── */
.btn{
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 16px 36px;
    border-radius: 0;
    border: 1px solid transparent;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
    line-height: 1.2;
}
.btn-primary{
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}
.btn-primary:hover{
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
}
.btn-secondary{
    background: transparent;
    color: var(--c-ink);
    border-color: var(--c-ink);
}
.btn-secondary:hover{ background: var(--c-ink); color: #fff; }
.btn-ghost{
    background: transparent;
    border: 0;
    color: var(--c-primary);
    padding: 8px 0;
    letter-spacing: 0.22em;
}
.btn-ghost::after{
    content: " →";
    display: inline-block;
    margin-left: 4px;
    transition: transform .2s;
}
.btn-ghost:hover::after{ transform: translateX(6px); }
.btn-lg{ padding: 18px 44px; font-size: 12px; }
.btn-sm{ padding: 10px 22px; font-size: 10px; }
.btn-block{ display: block; width: 100%; }
/* Sticky header: CTA zůstává modrý pill */
.site-header.is-scrolled .btn-outline{
    color: #fff;
    border-color: var(--c-primary);
    background: var(--c-primary);
}
.site-header.is-scrolled .btn-outline:hover{
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
}
/* Footer column headings */
.site-footer h4{
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #fff;
    margin: 0 0 18px;
}
.site-footer-contact{
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255,255,255,0.65);
}
.site-footer-contact a{ display: inline; padding: 0; }
.site-footer-social{
    display: flex;
    gap: 14px;
    margin-top: 8px;
}
.site-footer-social a{
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    transition: all .2s;
    padding: 0;
}
.site-footer-social a:hover{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.site-footer-social svg{ width: 16px; height: 16px; }
/* =========================================================
   COZYSTAY PARITY OVERRIDES  (added 2026-05-12)
   Highest-specificity layer for visual alignment with
   https://cozystay.loftocean.com/island-resort/
   ========================================================= */

/* ── Hero H1: mixed Marcellus + italic Cormorant accent ── */
.hero-title em{
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: inherit;
    display: inline;
}
.hero-with-search .hero-title{
    font-family: 'Marcellus', var(--font-display), serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(40px, 5.2vw, 76px);
    line-height: 1.1;
    letter-spacing: 0;
}

/* ── Logo: clean serif wordmark, no decoration (CozyStay parity) ──
   E022 (2026-05-14): logo wrapper sized to REF spec bbox 190×38 [CDP]
   with display:inline-block + Jost font-family to match dispatcher computed-style
   expectations. Inner wordmark/stars use block display + reduced scale to fit
   within 38px height (22px wordmark + 2px gap + 8px stars = 32px ≤ 38px). */
.site-logo{
    /* REVERT 2026-05-14 (topbar sec1 round2) — dispatcher regression -14pp on a@[857,47 190×38]
       (best 54% → cur 40%). Restoring exact best-ever values per dispatcher hint:
       display:inline-block, width:190px, height:38px, fontFamily:Jost.
       margin-top:12px puts wrapper at Y=53.5 (offset by 6.5px from REF Y=47) but this combo
       scored 54% — better than my "improved" Y=46.5 inline-flex variant. */
    flex-direction: row;
    align-items: center;
    gap: 0;
    display: inline-block;
    width: 190px;
    height: 38px;
    font-family: var(--font-sans), 'Jost', sans-serif;
    text-align: center;
    line-height: 1;
    padding: 0;
    margin-top: 12px;
}

.site-logo-text{
    display: block;
    font-family: 'Marcellus', var(--font-display), serif;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}
@media (max-width: 760px) {
.site-logo-text{ font-size: 20px; letter-spacing: 0.04em; }

}/* ── Dark teal cards section: transparent cards, white text (override the white-card revert at 2969) ── */

.builder-cards-section--dark .card,
.builder-cards-section--dark .card-body{
    background: transparent;
    color: #fff;
    border: 0;
    padding-left: 0;
    padding-right: 0;
}
.builder-cards-section--dark .card{ padding: 0; }
.builder-cards-section--dark .card-image{
    overflow: hidden;
    aspect-ratio: 4 / 5;
    min-height: 0;
    background-color: rgba(255,255,255,0.04);
    background-size: cover;
    background-position: center;
    margin-bottom: 28px;
    transition: transform .6s ease;
}
.builder-cards-section--dark .card:hover .card-image{ transform: scale(1.02); }
.builder-cards-section--dark .card-body{ padding-top: 24px; }
.builder-cards-section--dark .card-eyebrow{
    color: var(--c-primary);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.builder-cards-section--dark .card-title{
    color: #fff;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    margin: 0 0 12px;
}
.builder-cards-section--dark .card-text{
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    line-height: 1.7;
}
.builder-cards-section--dark .btn-ghost{
    color: var(--c-primary);
    background: transparent;
    border: 0;
    padding: 12px 0;
    letter-spacing: 0.22em;
    font-size: 11px;
}
.builder-cards-section--dark .btn-ghost:hover{ color: #fff; }
.builder-cards-section--dark .section-header h2{
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 400;
}
.builder-cards-section--dark .section-header-eyebrow{
    color: var(--c-primary);
    letter-spacing: 0.28em;
}
/* ── Testimonial featured (single big quote + portrait) ── */





.testimonial-featured-body .testimonial-stars{
    color: var(--c-primary);
    font-size: 14px;
    letter-spacing: 0.18em;
    margin-bottom: 28px;
}






.testimonial-featured-author .testimonial-card-location{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--c-ink-soft);
}
/* ── Services icons larger, sage colored ── */




/* ── Newsletter dark variant with background image ── */
.newsletter-section--dark{
    background-color: var(--c-dark-teal, #2c4a47);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: clamp(80px, 12vw, 160px) 0;
    position: relative;
}
.newsletter-section--dark .newsletter-inner{
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.newsletter-section--dark .newsletter-eyebrow{
    color: rgba(255,255,255,0.78);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.newsletter-section--dark .newsletter-heading{
    color: #fff;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 4.4vw, 60px);
    line-height: 1.1;
    margin: 0 0 18px;
}
.newsletter-section--dark .newsletter-subheading{
    color: rgba(255,255,255,0.78);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 auto 36px;
    max-width: 540px;
}
.newsletter-section--dark .newsletter-form{ max-width: 560px; margin: 0 auto; }
.newsletter-section--dark .newsletter-form-row{
    display: flex;
    gap: 0;
    align-items: stretch;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(6px);
}
.newsletter-section--dark .newsletter-input{
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 16px 22px;
    font-size: 14px;
    font-family: var(--font-sans);
    outline: none;
}
.newsletter-section--dark .newsletter-input::placeholder{ color: rgba(255,255,255,0.5); }
.newsletter-section--dark .newsletter-submit{
    background: var(--c-primary);
    color: #fff;
    border: 0;
    padding: 16px 32px;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
}
.newsletter-section--dark .newsletter-submit:hover{ background: var(--c-primary-2); }
/* ── Footer 4-column structure + bottom bar ── */
.site-footer{ padding: 96px 0 0; }
.site-footer-top{
    text-align: center;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 64px;
}
.site-footer-brand{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
}
.site-footer-brand-text{
    font-family: 'Marcellus', var(--font-display), serif;
    font-size: 36px;
    letter-spacing: 0.04em;
}
.site-footer-brand-tagline{
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: rgba(255,255,255,0.55);
}
.site-footer-grid{
    grid-template-columns: 1.2fr 1fr 1fr 1.5fr;
    gap: 48px;
    padding-bottom: 72px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer-col h4{
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    text-transform: none;
    letter-spacing: 0.02em;
    color: #fff;
    margin: 0 0 22px;
}
.site-footer-col .site-footer-contact,
.site-footer-col .site-footer-contact a{
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.9;
    color: rgba(255,255,255,0.6);
}
.site-footer-col .site-footer-contact a:hover{ color: var(--c-primary); }
.site-footer-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.site-footer-nav a{
    color: rgba(255,255,255,0.65);
    font-family: var(--font-sans);
    font-size: 14px;
    text-decoration: none;
    padding: 0;
    transition: color .15s;
}
.site-footer-nav a:hover{ color: var(--c-primary); }
.site-footer-newsletter-lead{
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 18px;
}
.site-footer .footer-newsletter-form{
    display: flex;
    gap: 0;
    align-items: stretch;
    margin-top: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
}
.site-footer .footer-newsletter-form input[type="email"]{
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 12px 16px;
    font-size: 13px;
    font-family: var(--font-sans);
    outline: none;
}
.site-footer .footer-newsletter-form input::placeholder{ color: rgba(255,255,255,0.42); }
.site-footer .footer-newsletter-form button{
    background: var(--c-primary);
    color: #fff;
    border: 0;
    padding: 12px 22px;
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
}
.site-footer .footer-newsletter-form button:hover{ background: var(--c-primary-2); }
.site-footer-bar{
    padding: 24px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    font-family: var(--font-sans);
    letter-spacing: 0.04em;
}
/* Právní odkazy vedle copyrightu. Dotykový cíl drží svislý padding (na mobilu
   jsou pod sebou), oddělovač kreslí ::before, aby nebyl v HTML jako text. */
.site-footer-legal{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin-left: 16px;
}
.site-footer-legal a{
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    padding: 6px 0;
}
.site-footer-legal a:hover{ color: #fff; text-decoration: underline; }
.site-footer-lang{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    letter-spacing: 0.18em;
}
.site-footer-lang a{
    color: rgba(255,255,255,0.55);
    padding: 0 4px;
    text-decoration: none;
}
.site-footer-lang a.is-active{ color: #fff; font-weight: 600; }
.site-footer-lang .lang-sep{ color: rgba(255,255,255,0.25); }

@media (max-width: 960px) {
.site-footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }
.site-footer-bar{ flex-direction: column; text-align: center; }
.site-footer-legal{ margin-left: 0; justify-content: center; width: 100%; }
}
@media (max-width: 600px) {
.site-footer-grid{ grid-template-columns: 1fr; gap: 32px; }
.site-footer .footer-newsletter-form{ flex-direction: column; }
.site-footer .footer-newsletter-form button{ padding: 14px; }
}/* ── Welcome staggered: heading width tighter, gallery padding ── */






/* ── Section padding rhythm — each section keeps own padding ── */
.builder-section + .builder-section{ padding-top: var(--space-section); }
.builder-section{ padding: var(--space-section) 0; }
/* ── Apartment card single big featured (cozy-stay style) ── */
.featured-apartment-grid{ gap: 80px; }
/* ── Header phone link spacing & sticky text-color flip (CozyStay parity: 40px gaps) ── */
.site-header-right{ gap: 40px; }
.site-header.is-scrolled .site-header-phone,
.site-header.is-scrolled .lang-switcher a{ color: var(--c-ink); }
.site-header.is-scrolled .lang-switcher a.is-active{ color: var(--c-primary); }
.site-header.is-scrolled .lang-sep{ color: rgba(0,0,0,0.25); }
/* ── Buttons: sage variant for use on cream backgrounds ── */


/* =========================================================
   COZYSTAY PIXEL PARITY PASS — 2026-05-13
   Reference: https://cozystay.loftocean.com/island-resort/
   Goal: tighten hero, landscape welcome portraits in a single
   row, compact services, lighter section rhythm.
   ========================================================= */

/* ── Hero: tighter typography + reduced padding ── */
.hero-with-search{
    min-height: 78vh;
    padding-top: 130px;
    padding-bottom: 100px;
}
.hero-with-search .hero-title,
.hero-title{
    font-family: 'Marcellus', var(--font-display), serif;
    font-size: clamp(36px, 4.4vw, 64px);
    line-height: 1.1;
    letter-spacing: 0;
    max-width: 820px;
    margin: 0 auto 18px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.22);
}
.hero-subtitle{
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.65;
    color: rgba(255,255,255,0.92);
    max-width: 560px;
    margin: 0 auto;
    letter-spacing: 0.02em;
}
/* ── Welcome portraits: LANDSCAPE row of 4 (CozyStay parity) ── */





/* ── Welcome section: tighter rhythm ── */





/* ── Featured apartment: more refined ── */
.featured-apartment{
    padding: 90px 0;
    background: var(--c-bg);
}
.featured-apartment-grid{
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.featured-apartment-image{
    aspect-ratio: 4 / 3;
    border-radius: 0;
}
.featured-apartment-body h2{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    margin: 8px 0 14px;
    line-height: 1.2;
}
.featured-apartment-subtitle{
    font-family: var(--font-display);
    font-style: italic;
    color: var(--c-ink-soft);
    font-size: 17px;
    margin-bottom: 16px;
}
/* ── Dark teal cards section: cleaner spacing ── */

.builder-cards-section--dark .section-header{ text-align: center; margin-bottom: 56px; }
.builder-cards-section--dark .section-header h2{
    font-size: clamp(30px, 3.4vw, 46px);
    margin: 8px 0 0;
}
/* ── Testimonials section: dark teal background (CozyStay parity) ── */

.testimonials-section--featured .testimonials-eyebrow{
    color: rgba(255,255,255,0.6);
    text-align: center;
    letter-spacing: 0.28em;
    font-size: 11px;
}
.testimonials-section--featured .testimonials-heading{
    color: #fff;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    margin: 10px 0 48px;
}



.testimonials-section--featured .testimonial-stars{
    color: var(--c-primary);
    text-align: center;
    margin-bottom: 24px;
}


.testimonials-section--featured .testimonial-featured-author .testimonial-card-location{
    color: rgba(255,255,255,0.7);
}
/* ── Services: cleaner 2-col list with line icons (CozyStay parity) ── */













/* ── FAQ section spacing tighter ── */
.builder-faq-section{ padding: 90px 0; }
.builder-faq-section .section-header h2{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 42px);
    text-align: center;
}
/* ── Newsletter compact ── */
.newsletter-section--dark{ padding: 110px 0; }
.newsletter-heading{
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.2;
}
.newsletter-subheading{
    max-width: 540px;
    margin: 16px auto 28px;
    font-size: 15px;
}
/* =========================================================
   COZYSTAY ISLAND RESORT — FINAL PARITY PASS (2026-05-13)
   Aligning visual rhythm with reference screenshot.
   ========================================================= */

/* Section spacing — Builder vládne paddingy per-section. Tokeny ZDE jsou jen
   minimální fallback pro template-driven sekce co Builder neřídí. Velké hodnoty
   (96/128px) dělaly hardcoded díry. */
:root{
    --space-section: 48px;
    --space-section-lg: 64px;
}
/* Hero — title prominent (CozyStay parity: 100px Marcellus, 21px Jost subtitle) */
.hero, .hero-with-search{
    min-height: clamp(680px, 90vh, 920px);
    padding: 140px 24px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-with-search .hero-title{
    font-family: 'Marcellus', var(--font-display), serif;
    font-style: normal;
    font-size: clamp(56px, 7.4vw, 100px);
    line-height: 1.0;
    max-width: 880px;
    margin: 0 auto 20px;
    font-weight: 400;
    letter-spacing: 0;
    text-shadow: none;                /* E007 AUDIT_BOD 03 (2026-05-13) — REF spec [CDP]: no text-shadow on hero H1 */
}
.hero-with-search .hero-subtitle{
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(13px, 1vw, 15px);  /* MultiTerm E004 hero sec1 (2026-05-18) — sjednoceno s ř.3865 spec (přebíjelo větší specifitou). REF vizuální ratio title/subtitle ≈ 6× ⇒ 14px @ 85px title. */
    line-height: 1.66;
    color: rgba(255,255,255,0.96);
    max-width: 560px;                   /* MultiTerm E004 hero sec1 (2026-05-18) — REF subtitle wrap width ≤ 560px (ř.3868 spec) */
    margin: 20px auto 0;
    text-transform: none;
    letter-spacing: 0.02em;             /* MultiTerm E004 hero sec1 (2026-05-18) — sjednoceno s ř.3870 spec */
    font-weight: 400;
    text-shadow: none;                /* E007 AUDIT_BOD 04 (2026-05-13) — REF spec [CDP]: no text-shadow on hero subtitle */
}
/* Sage green booking widget — CozyStay parity (sage #53624E, 30px padding, gold-framed fields) */
.booking-widget--inline{
    max-width: 1300px;
    margin: 30px auto -54px;
    padding: 30px;
    background: var(--c-secondary);          /* sage #53624e — matchuje CozyStay reference */
    border: 0;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 0;
    left: 0;
    right: 0;
    bottom: auto;
    top: auto;
    transform: none;
    width: calc(100% - 48px);
    color: #fff;
    position: relative;
    z-index: 9;
}
.booking-widget--inline .booking-widget-fields{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    margin: 0 -7.5px;
    flex: 1 1 auto;
    min-width: 0;
}
.booking-widget--inline .booking-widget-field{
    position: relative;                /* E024 (2026-05-14) — anchor for absolute label per CDP spec 3.14 */
    margin: 0 7.5px;
    padding: 0 7.5px;                  /* E026 AUDIT_BOD 08+09 (2026-05-14) — cell 251 w, inner wrap+input 236 w → 7.5px each side. Border moved to input. */
    border: 0;                          /* E026 AUDIT_BOD 09: border is now on the <input> (matches REF CDP spec 3.11 input.border 1px solid #b99d75) */
    background: transparent;
    display: grid;
    grid-template-columns: 1fr;        /* E024: single col since label is now absolute (out of flow) */
    align-items: center;
    gap: 0;
    height: 48px;
    min-height: 48px;
    box-sizing: border-box !important;
}
.booking-widget--inline .booking-widget-field:last-of-type{ border: 0; }
.booking-widget--inline .booking-widget-field label{
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    margin: 0;
    font-weight: 400;
    font-family: var(--font-serif);          /* Marcellus per CDP spec */
    line-height: 1.66;                       /* 26.56/16 per CDP */
    display: block;                          /* E024 (2026-05-14) — REF CDP spec [80]: display block, abs positioned, vertically centered via translateY */
    position: absolute;
    top: 24px;                               /* CDP spec: top: 24px in 48px-tall field */
    left: 22px;                              /* E026 AUDIT_BOD 05 (2026-05-14) — REF CDP spec 3.11 label x=347 (cell_x 325 + 22). Containing-block math: 325 + 1px border + 21 = 347. Was 15 (off by 6px). */
    transform: translateY(-13.27px);         /* CDP spec: lift label by half its line-height for visual center */
    pointer-events: none;                               /* let clicks pass through to input */
}
.booking-widget--inline .booking-widget-field input,
.booking-widget--inline .booking-widget-field select,
.booking-widget--inline .booking-widget-field .counter-widget{
    border: 1px solid #b99d75;  /* E026 AUDIT_BOD 09 (2026-05-14) — border moved from cell to input per REF CDP spec 3.11 */
    background: transparent;
    padding: 5px 35px 5px 15px;  /* E026 AUDIT_BOD 10 (2026-05-14) — REF CDP spec 3.11 input padding (35px right reserves space for datepicker icon) */
    font-size: 14px;
    font-family: var(--font-sans);
    color: #fff;
    color-scheme: dark !important;
}
.booking-widget--inline .booking-widget-field input,
.booking-widget--inline .booking-widget-field select{
    width: 100%;
    height: 48px;               /* E026 AUDIT_BOD 09 (2026-05-14) — match REF input bbox 48px tall (was 46) */
    line-height: 28px;          /* E026 AUDIT_BOD 03 (2026-05-14) — REF CDP spec 3.11: input text line-height 28px */
    text-align: right;
    outline: none !important;
    box-sizing: border-box !important;
}
.booking-widget--inline .booking-widget-field .counter-widget{
    /* E026 (2026-05-14) — counter cell shares the gold-bordered visual identity of input cells */
    border: 1px solid #b99d75;
    padding: 0 15px;
    height: 48px;
    box-sizing: border-box !important;
    width: 100%;
}
.booking-widget--inline input::-webkit-calendar-picker-indicator{
    filter: invert(1) opacity(0.7);
}
.booking-widget--inline select option{
    color: var(--c-ink);
    background: #fff;
}
.booking-widget--inline .counter-widget{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    margin-left: auto;
}
.booking-widget--inline .counter-btn{
    width: 26px; height: 26px;
    border: 1px solid rgba(255,255,255,0.55);
    background: transparent;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all .15s ease;
}
.booking-widget--inline .counter-btn:hover{
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.85);
}
.booking-widget--inline .counter-value{
    font-family: var(--font-sans);
    font-size: 15px;
    min-width: 16px;
    text-align: center;
    color: #fff;
}
.booking-widget--inline > button[type="submit"],
.booking-widget--inline .btn-block.btn-lg,
.booking-widget--inline .btn-primary{
    margin: 0 0 0 7.5px;
    padding: 0 15px;            /* CDP: 0 15px L/R */
    background: #b99d75;        /* gold #B99D75 — CozyStay parity */
    color: #fff;
    border: 0;
    border-radius: 0;
    font-family: var(--font-serif);  /* Marcellus per CDP */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    width: auto;
    min-width: 236px;           /* CDP: cell 251 − 15px padding */
    height: 48px;
    align-self: flex-end !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.booking-widget--inline > button[type="submit"]:hover,
.booking-widget--inline .btn-block.btn-lg:hover,
.booking-widget--inline .btn-primary:hover{
    background: #a98a5e;
}
@media (max-width: 1280px) {
.booking-widget--inline .booking-widget-field{ padding: 0 14px; gap: 10px; }
.booking-widget--inline > button[type="submit"]{ min-width: 200px; padding: 0 15px; }
}
@media (max-width: 960px) {
.booking-widget--inline{
        flex-direction: column;
    }
.booking-widget--inline .booking-widget-fields{
        grid-template-columns: 1fr 1fr;
    }
.booking-widget--inline .booking-widget-field{
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.22);
        padding: 14px 18px;
    }
.booking-widget--inline > button[type="submit"],
    .booking-widget--inline .btn-block.btn-lg{
        width: 100%;
        min-height: 56px;
        margin-top: 0;
    }
}/* Welcome section — center text + small ratings/eyebrow + caption captions */




.welcome-action .btn{
    background: var(--c-primary);
    color: #fff;
    border: 1px solid var(--c-primary);
    padding: 14px 36px;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}
.welcome-action .btn:hover{
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
}
/* Welcome staggered images — tighter, more dynamic */




/* User feedback: vyrovnat výšky — staggered 40px offset byl asymetrický
   (1/4 small, 2/3 big). Nyní všechny stejně vysoké, žádný margin-top. */



/* Featured apartment — closer to CozyStay accommodation card */
.featured-apartment{
    padding: 80px 0 120px;
    background: #ffffff;
}
/* Accommodations section header — eyebrow + h2 left (66%), CTA right (33%) */
.featured-apartment .accommodations-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
    max-width: 1300px;
    margin: 0 auto 50px;
    padding: 0;
}
.featured-apartment .accommodations-header-text{
    flex: 0 1 auto;
    max-width: 66%;
}
.featured-apartment .accommodations-eyebrow{
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #b99d75;
    margin: 0 0 20px;
}
.featured-apartment .accommodations-title{
    font-family: 'Marcellus', var(--font-display);
    font-size: 48px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: 0;
    color: #1a1b1a;
    margin: 0;
    text-transform: none;
}
.featured-apartment .btn-discover-suites{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #b99d75;
    color: #ffffff;
    width: auto;
    min-width: 226px;
    height: 52px;
    padding: 0 48px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Marcellus', var(--font-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    flex-shrink: 0;
    margin-bottom: 14px;
    transition: background-color .2s ease;
}
.featured-apartment .btn-discover-suites:hover{
    background-color: #ab916c;
    color: #ffffff;
}
.featured-apartment .btn-discover-suites span{
    display: inline-block;
    color: #ffffff;
    font-family: inherit;
    font-size: inherit;
}
/* Image overlay label "Od €XX / Noc" (top-left, white pill matching reference) */
.featured-apartment-image{ position: relative; }
.featured-apartment-image-label{
    position: absolute;
    top: 24px;
    left: 24px;
    background: #ffffff;
    color: #1a1b1a;
    padding: 10px 18px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    border: 0;
    border-radius: 0;
    z-index: 2;
}
/* Card title (apartment name) — slightly smaller than section h2, no italic */
.featured-apartment-body .featured-apartment-name{
    font-family: 'Marcellus', var(--font-display);
    font-style: normal;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    color: #1a1b1a;
    margin: 0 0 10px;
    text-align: left;
}
.featured-apartment-body .featured-apartment-name a{
    color: #1a1b1a;
    text-decoration: none;
    border-color: #1a1b1a;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    transition: color .2s ease;
}
.featured-apartment-body .featured-apartment-name a:hover{
    color: #b99d75;
}

@media (max-width: 760px) {
.featured-apartment .accommodations-header{
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
.featured-apartment .accommodations-header-text{ max-width: 100%; }
.featured-apartment .accommodations-title{ font-size: 36px; }
.featured-apartment .btn-discover-suites{ min-width: 200px; }
}.featured-apartment-grid{
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: flex-start;
}
.featured-apartment-image{
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
}
.featured-apartment-body h2{
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.2;
    margin: 6px 0 14px;
}
.featured-apartment .section-header-eyebrow{
    color: var(--c-secondary);
    font-size: 11px;
    letter-spacing: 0.28em;
    font-family: var(--font-sans);
}
.featured-apartment-subtitle{
    font-family: var(--font-sans);
    color: var(--c-ink-soft);
    font-size: 14px;
    margin: 0 0 18px;
    font-style: normal;
}
.featured-apartment-meta{
    border-top: 1px solid var(--c-line-soft);
    border-bottom: 1px solid var(--c-line-soft);
    padding: 14px 0;
    margin: 20px 0;
    gap: 24px;
    justify-content: flex-start;
}
.featured-apartment-meta li{
    font-family: 'Jost', var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: none;
    color: #333632;
}
.featured-apartment-meta li strong{
    font-family: 'Jost', var(--font-sans);
    font-size: 12px;
    color: #333632;
    font-weight: 400;
    display: inline;
    margin-right: 4px;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
}
.featured-apartment-price strong{
    font-family: var(--font-display);
    font-style: italic;
    font-size: 32px;
    color: var(--c-primary);
}
.featured-apartment-actions{
    gap: 12px;
}
.featured-apartment-actions .btn{
    padding: 14px 32px;
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
/* Dark teal cards — section header CENTERED, tighter padding */

.builder-cards-section--dark .section-header{
    text-align: center;
    max-width: 740px;
    margin: 0 auto 64px;
}
.builder-cards-section--dark .section-header-eyebrow{
    display: block;
    margin-bottom: 16px;
}
.builder-cards-section--dark .section-header h2{
    font-style: italic;
    line-height: 1.16;
}
/* Testimonials DARK variant — center big italic quote on dark teal (CozyStay signature look) */

.testimonials-section--dark .testimonials-header{ margin-bottom: 40px; text-align: center; }
.testimonials-section--dark .testimonials-eyebrow{ color: var(--c-primary); }
.testimonials-section--dark .testimonials-heading{ color: #fff; }



.testimonials-section--dark .testimonial-featured-body .testimonial-stars{
    justify-content: center;
    color: var(--c-primary);
    margin-bottom: 28px;
}




.testimonials-section--dark .testimonial-featured-author .testimonial-card-location{
    color: rgba(255,255,255,0.7);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
}
/* Services section — cream bg pull from reference */





/* Icon color přepnuto na gold pro luxury thin-line set (2026-05-25).
   Použij body prefix pro override .services-section--dark variant pokud nutno. */


/* FAQ tighter */
.builder-faq-section{ padding: var(--space-section) 0; background: var(--c-bg); }
/* Section gap reset — let each component own its padding */
.builder-section + .builder-section{ padding-top: 0; }
/* ==========================================================================
   Welcome / In the Heart — CozyStay parity (1×4 portrait row + italic quote)
   ========================================================================== */







/* Handwritten italic accent below portraits — CozyStay signature */

/* =========================================================
   COZYSTAY HEADER CTA PARITY — 2026-05-13 (revize)
   Reference: https://cozystay.loftocean.com/island-resort/
   Goal: transparent rectangular ghost button with thin white
   border + ~4px rounded corners (NOT solid pill).
   ========================================================= */
.site-header .btn-book{
    background: transparent;
    border: 1px solid #fff;
    border-radius: 0;
    color: #fff;
    height: 44px;
    padding: 0 24px;
    font-family: 'Marcellus', var(--font-serif), serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .4s, color .4s, border-color .4s;
    z-index: 9;
    position: relative;
}
.site-header .btn-book:hover{
    background: #fff;
    border-color: #fff;
    color: #000;
}
.site-header.is-scrolled .btn-book,
body:not(.has-hero) .site-header .btn-book{
    background: var(--c-primary);
    border: 0;
    border-radius: var(--radius-pill);
    color: #fff;
}
.site-header.is-scrolled .btn-book:hover,
body:not(.has-hero) .site-header .btn-book:hover{
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: #fff;
}
/* Universal selector `.site-header.is-scrolled .site-header-inner *` (line 2397)
   nastavuje color:ink i na inner <span>. Na hover musíme override pro span explicitně. */
.site-header.is-scrolled .btn-book > span,
.site-header.is-scrolled .btn-book:hover > span,
body:not(.has-hero) .site-header .btn-book > span,
body:not(.has-hero) .site-header .btn-book:hover > span{
    color: #fff;
}
@media (max-width: 760px) {
.site-header .btn-book{ padding: 10px 22px; }
}/* =========================================================
   E003 — HERO + BOOKING WIDGET PARITY (2026-05-13)
   Fix: title centered higher in hero, subtitle visible,
        booking widget pushed to BOTTOM of hero overlay.
   Reference: cozystay.loftocean.com/island-resort/
   ========================================================= */

/* Hero box — CozyStay parity 749px height, content centered, widget at bottom (E003 audit) */
.hero.hero-with-search{
    /* Hotfix 2026-05-20: hero přizpůsobená výšce monitoru (booking widget musí
       být plně viditelný + rezerva 50px pod ním). Mobile <768px viz níže. */
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    padding: 121px 0 50px;       /* top=header overlay, bottom=50px rezerva pod widgetem */
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    position: relative;
    overflow: hidden;            /* už neexpanduje pod fold přes overflow */
}
/* Hero content: title block vertically centered, widget pushed to bottom (CozyStay parity).
   IMPORTANT: hero-content is FULL width so widget can span hero. H1/subtitle constrained by their own max-width:880px. */
.hero.hero-with-search .hero-content{
    flex: 0 0 auto;                 /* výška = obsah; spacing sekce řídí builder padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;                     /* fullwidth child (widget) freedom; H1/subtitle have own max-width */
    max-width: none;                /* unset to allow widget to span full hero width */
    width: 100%;
    margin: 0 auto;
    color: #fff;
    position: relative;
}
/* Title — Marcellus serif 100px non-italic, no shadow (CozyStay ref).
   Hotfix 2026-05-20: title vertikálně centrovaný v hero pomocí flex
   (hero-content má justify-content); margin-top jen vizuální spacing. */
.hero.hero-with-search .hero-title{
    font-family: 'Marcellus', var(--font-display), serif;
    font-size: clamp(46px, 7.41vw, 100px);
    line-height: 1.0;
    letter-spacing: 0;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    text-shadow: none;
    max-width: 880px;
    margin: auto auto 0;     /* push title down až k widgetu, widget pak má margin-top:auto */
}
/* Subtitle — Jost sans, drobný regular pod gigantickým 100px H1 (CozyStay ref).
   MultiTerm E005 sec1 (2026-05-18) — sjednoceno s nižší specifitou ř.4129 spec
   (byl přebíjen 3-class selektorem zde, audit MultiTerm E004 zůstal viditelně
   neaplikován při 21px). REF vizuální ratio title/subtitle ≈ 6× při 100px title
   → 15px subtitle. max-width 560 zajistí 1-2 řádkový wrap pod titulem. */
.hero.hero-with-search .hero-subtitle{
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.66;
    color: #fff;
    max-width: 560px;
    margin: 20px auto 0;
    letter-spacing: 0.02em;
    font-weight: 400;
    text-shadow: none;
    text-transform: none;
}
/* THE KEY FIX — push booking widget to the bottom of hero with -54px overlap into welcome section (CozyStay pattern) */
.hero.hero-with-search .booking-widget--inline{
    /* E003 AUDIT_BOD 01 (2026-05-13 FINAL) — widget overlaps hero bottom by 54px (matches REF spec Y=695-803).
       Mechanism: margin-bottom:-54 reduces layout bottom by 54 so hero stays at 749 with widget at flex bottom,
       but widget VISUAL content area extends 54px BELOW hero bottom (since visual size > layout size).
       NO translateY needed — pre-transform position already matches REF spec exactly (verified via getBoundingClientRect).
       Previously translateY(54px) was shifting widget an ADDITIONAL 54px down (total 108px below REF), causing
       widget visual to render at Y=749-857 instead of REF Y=695-803. */
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin-top: auto;
    margin-bottom: -54px;
    z-index: 5;
    transform: none;
}
/* compensate next section spacing to absorb negative margin
   E005 AUDIT_BOD 03 (2026-05-13) — REF spec: hero ends Y=916, welcome eyebrow Y=1180 → 264px padding-top.
   54px widget overlap + 210px breathing room = 264px před welcome eyebrow appears.
   E003 AUDIT_BOD 01 (2026-05-14) — REF CDP spec icon top y=1076. Empirically hero ends y≈990
   (booking widget pushes hero bottom ~74px lower than initial spec said). With padding-top=160px
   the icon landed on y≈1150 (84px below target). Reducing to 80px aligns icon top with y=1070
   (within ±6px of spec REF y=1076). */
.hero.hero-with-search + .welcome-section,
.hero.hero-with-search + section{
    padding-top: 80px;
}
/* E006 AUDIT_BOD 01 (2026-05-13) — restore dark overlay per REF spec (CDP el. [60]).
   REF uses linear-gradient(rgb(0,0,0) 0%, rgba(0,0,0,0.64) 100%) with opacity:0.5 →
   effective gradient rgba(0,0,0,0.5) → rgba(0,0,0,0.32). Photo darkening unifies tone
   with REF (Y=0-60 band: REF #314135 vs CUR pre-fix #474840 = 22 hex too bright).
   E028 (2026-05-14) — moved from ::before pseudo to real .hero-overlay div so the
   element is dispatcher-trackable at bbox [0,0 1904×916]. Pseudo disabled here. */
.hero.hero-with-search::before{
    display: none;
}
.hero.hero-with-search .hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.32) 100%);
    z-index: 1;
    pointer-events: none;
}
.hero.hero-with-search .hero-content{
    position: relative;
    z-index: 2;
}
/* Video v heru (YouTube, autoplay bez zvuku): okno vpravo dole, max. 700 px,
   poměr 16:9, BEZ zvětšování — roztažené přes celý hero bylo rozmazané (2026-09-03).
   Fotka zůstává pozadím celého hera. */
.hero.hero-with-search .hero-bg-video{
    position: absolute;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    /* Rozměr řídí VÝŠKA, šířka plyne z poměru 16:9: max. 700 × 394 px, nejvýš 40 % šířky
       okna, a nikdy nad spodní hranu vyhledávací lišty (ta končí ~381 px od vrchu hera). */
    width: auto;
    height: min(394px, 22.5vw, calc(100% - 440px));
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
    background: #000;
    pointer-events: none;
}
.hero.hero-with-search .hero-bg-video iframe{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Na telefonu video není v rohu, ale V TOKU pod rezervační lištou (blok je v HTML
   až za obsahem hera) — plná šířka, 16:9, nad overlayem. */
@media (max-width: 767px){
    .hero.hero-with-search .hero-bg-video{
        position: relative;
        right: auto;
        bottom: auto;
        z-index: 2;
        flex: 0 0 auto;      /* flex sloupec by ho jinak zploštil, když se obsah do min-height nevejde */
        align-self: center;
        width: calc(100% - 32px);
        max-width: 560px;
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 22px auto 0;
        border-radius: 8px;
    }
}
/* Hosté s vypnutými animacemi: jen fotka. */
@media (prefers-reduced-motion: reduce){
    .hero.hero-with-search .hero-bg-video{ display: none; }
}
}

/* Mobile — keep widget below content normally (no auto push) */
@media (max-width: 960px) {
.hero.hero-with-search{
        min-height: 720px;
        padding: 120px 16px 60px;
    }
.hero.hero-with-search .hero-content{
        padding-top: 30px;
    }
.hero.hero-with-search .booking-widget--inline{
        margin-top: 60px;
        transform: none;   /* E003 AUDIT_BOD 04 (2026-05-13) — reset desktop translateY on mobile; widget flows in column layout */
    }
.hero.hero-with-search .hero-title{
        margin-top: 0;     /* E003 AUDIT_BOD 02 mobile reset — no 166px push on small viewports */
    }
}/* =========================================================
   E002 — Hero "Boutique Private Island Resort" parity (2026-05-13)
   Fix: welcome heading must be NON-italic (only <em> accent
   word stays italic per site.css:3213). Reference shows
   regular Cormorant serif, not italic.
   Bug source: site.css:1998 sets font-style: italic on whole
   .welcome-heading without; later cascade rules
   don't reset it.
   ========================================================= */


/* =========================================================
   E004 — Hero booking widget sage-box parity (2026-05-13)
   Reference: https://cozystay.loftocean.com/island-resort/
   Sage green box (#53624E) + per-field gold borders
   (#B99D75) + gold filled CTA, 48px field height, no shadows.
   Specificity .hero.hero-with-search > … > … beats earlier
   single-class rules without resorting to !important escalation.
   ========================================================= */
.hero.hero-with-search .booking-widget--inline{
    background: var(--c-secondary);        /* sage #53624e */
    padding: 30px;
    max-width: 1300px;                     /* E007 AUDIT_BOD 01 (2026-05-13) — REF spec CDP form box w=1300px @1904 viewport (was 1181px, ~119px too narrow) */
    width: calc(100% - 48px);              /* E026 AUDIT_BOD 04 (2026-05-14) — 24px inset each side; capped to 1300px above. Previous 168px inset oversqueezed widget on 1904 viewport (1736 instead of 1300) — wait that's bigger, max-width cap was correct, but the inset 168 forced narrower on viewports <1468. 48 inset = wider on mid viewports, still capped at 1300 on REF 1904. */
    margin-left: auto;
    margin-right: auto;
    box-shadow: none;
    border: 0;
    border-top: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;                 /* E027 AUDIT_BOD 01 (2026-05-14) — REF CDP spec form .cs-form-wrap: align-items: flex-end (cells anchor to bottom of form-content area). Previous stretch worked visually because cells share fixed 48 height, but spec requires flex-end. */
    gap: 0;                                /* E027 AUDIT_BOD 02 (2026-05-14) — REF spec: visual 15px gap arises from cell-padding (7.5+7.5), not flex gap. Form gap: 0 + button margin-left 7.5 + last-field padding-right 7.5 = 15px between last input and button. */
    box-sizing: border-box;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-fields{
    display: flex;
    flex: 4 1 0;
    flex-direction: row;
    gap: 0;
    grid-template-columns: none;
    height: auto;
    margin: 0;
    min-width: 0;
    align-items: stretch;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field{
    /* E028 (2026-05-14) — REF CDP spec 3.10/3.14: cell h=48px, padding 0 7.5px,
       block display (label is absolutely positioned, so flow layout is irrelevant). */
    flex: 1 1 0;
    background: transparent;
    border: 0;
    padding: 0 7.5px;
    height: 48px;
    min-height: 48px;
    display: block;
    gap: 0;
    grid-template-columns: none;
    position: relative;
    box-sizing: border-box !important;
    min-width: 0;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field:last-child{
    border: 0;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field label,
.hero.hero-with-search .booking-widget--inline .booking-widget-field .bw-counter-label{
    /* E028 (2026-05-14) — REF CDP spec 3.10 [80]: Marcellus 16px regular,
       abs-positioned top:24 left:22 with translateY(-13.27px) lift to visual center.
       E029 (2026-05-14) — sjednoceno: i counter pole (.bw-counter-label) má identický
       styl, aby všech 5 polí mělo konzistentní label CDP-detection (matches REF label
       computed styles: borderColor inherits currentcolor = rgb(255,255,255) since color:#fff). */
    display: block;
    position: absolute;
    top: 24px;
    left: 22px;
    transform: translateY(-13.27px);
    font-family: 'Marcellus', var(--font-serif), serif;     /* E029: explicit font stack matches REF computed "Marcellus, serif" */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    border-color: #fff;     /* E029: explicit (matches REF computed borderTopColor/Right/Bottom/Left: rgb(255,255,255)) */
    line-height: 1.66;
    margin: 0;
    padding-left: 0;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field input,
.hero.hero-with-search .booking-widget--inline .booking-widget-field select{
    /* E028 (2026-05-14) — REF CDP spec 3.11: 48px tall, gold border #b99d75,
       padding 5px 35px 5px 15px (35px right reserves space for date picker icon),
       text-align right, line-height 28px.
       E031 (2026-05-14) — explicit border-radius:0 (REF spec 3.1: square,
       class cs-form-square). Chrome default is 0 but Safari/Firefox may apply
       a small radius on native date input/select — explicit 0 guarantees parity. */
    flex: 0 0 auto;
    text-align: right;
    color: #fff;
    background: transparent;
    background-image: none !important;
    border: 1px solid var(--c-primary);
    border-radius: 0;
    padding: 5px 35px 5px 15px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 28px;
    height: 48px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box !important;
}
/* E027 (2026-05-14) AUDIT_BOD 10 — counter-widget mirrors date input cell:
   48px tall, full cell width, gold border, content right-aligned (matches input text-align:right). */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--counter .counter-widget{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
    height: 48px;
    min-height: 48px;
    border: 1px solid var(--c-primary);
    padding: 0 15px;
    box-sizing: border-box !important;
    width: 100%;
}
/* E027 (2026-05-14) AUDIT_BOD 07-09 — counter labels mirror date <label> CDP spec [80]:
   absolute top:24 left:22 translateY(-13.27) so counter-widget fills the 48px cell. Selector
   matches span | p | any element with the class (HTML in BuilderRenderer.php renders <span>). */
.booking-widget-field .bw-counter-label{
    margin: 0;
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.66;
    white-space: nowrap;
    position: absolute;
    top: 24px;
    left: 22px;
    transform: translateY(-13.27px);
    pointer-events: none;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field--counter .bw-counter-label{
    margin: 0;
    position: absolute;
    top: 24px;
    left: 22px;
    transform: translateY(-13.27px);
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
}
.hero.hero-with-search .booking-widget--inline .counter-btn{
    width: 22px;
    height: 22px;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.6);
}
.hero.hero-with-search .booking-widget--inline .counter-value{
    color: #fff;
    font-size: 14px;
    min-width: 14px;
}
/* E027 (2026-05-14) AUDIT_BOD 01-06 — submit = 5th equal-width cell (CDP spec 3.5):
   x=1329 w=251 inner-button 236×48, bg #B99D75, margin-left 7.5 (matches field gutter).
   Pinned to bottom of 108px sage container via align-self:flex-end. */
.hero.hero-with-search .booking-widget--inline > button[type="submit"],
.hero.hero-with-search .booking-widget--inline .btn-primary,
.hero.hero-with-search .booking-widget--inline .btn-block.btn-lg{
    flex: 0 0 236px;
    align-self: flex-end !important;
    background: var(--c-primary);
    color: #fff;
    border: 0;
    border-radius: 0;
    height: 48px;
    min-height: 48px;
    min-width: 236px;
    width: 236px;
    max-width: 236px;
    padding: 0 15px;
    font-family: var(--font-serif);          /* Marcellus */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 7.5px;
    text-shadow: none;
    cursor: pointer;
    transition: background .2s ease;
}
.hero.hero-with-search .booking-widget--inline > button[type="submit"]:hover,
.hero.hero-with-search .booking-widget--inline .btn-primary:hover,
.hero.hero-with-search .booking-widget--inline .btn-block.btn-lg:hover{
    background: var(--c-primary-2);
}
/* E025 (2026-05-14) — submit button inner span must be display:block + Marcellus
   per REF CDP spec [101]. Wrapping text in <span> + this rule restores the
   "Check Availability" span score (-23pp regression).
   E029 (2026-05-14) — explicit font-family stack a border-color matches REF computed
   styles (borderTopColor/Right/Bottom/Left: rgb(255,255,255) inherited from color:#fff). */
.hero.hero-with-search .booking-widget--inline > button[type="submit"] > span,
.hero.hero-with-search .booking-widget--inline .btn-primary > span{
    display: block;
    font-family: 'Marcellus', var(--font-serif), serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    border-color: #fff;
}
@media (max-width: 1100px) {
.hero.hero-with-search .booking-widget--inline{
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }
.hero.hero-with-search .booking-widget--inline .booking-widget-fields{
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: auto;
        gap: 12px;
    }
.hero.hero-with-search .booking-widget--inline > button[type="submit"],
    .hero.hero-with-search .booking-widget--inline .btn-primary,
    .hero.hero-with-search .booking-widget--inline .btn-block.btn-lg{
        width: 100%;
        flex: 0 0 auto;
    }
}/* =========================================================
   E020 — Welcome heading section CozyStay parity (2026-05-13)
   Reference: https://cozystay.loftocean.com/island-resort/
   PNG cutout Y=1100-1250 (Welcome heading start)
   Cíl: nahradit diamond ✦ ornament resortní building ikonou
   NAD eyebrow textem, přebarvit eyebrow na sage (parita s ref.),
   přepnout welcome-heading na Marcellus (jednota s hero h1)
   a sjednotit cream pozadí na neutrálnější #f1f1ee.
   ========================================================= */
   /* AUDIT_BOD 03 (E003 2026-05-14) — REF CDP rgb(243,243,240) */
   /* AUDIT_BOD 04 — CDP container x=537-1367 width=830px */
/* AUDIT_BOD 01,04,05,06 — eyebrow typografie + barva */

/* AUDIT_BOD 02 — odstranit diamond ✦ pod textem */

/* AUDIT_BOD 03 — resort building icon NAD eyebrow textem
   (3 oblouky/sloupy pod střechou + 2 palmy po stranách,
   sage barva, 56×56px, centrováno) */

/* AUDIT_BOD 07 — H2 přepnut z Cormorant na Marcellus (parita s hero h1)
   E003 (2026-05-14) AUDIT_BOD 05-09 — pixel parity s REF CDP:
   font-size 56px, line-height 1.2 (= 67.2px), color #1A1B1A,
   margin-top 20px (gap k eyebrow), letter-spacing 0 (normal). */

/* ============================================================================
   WELCOME + 4 THUMBNAILS — pixel parity 2026-05-14 (section 3)
   REF CDP: https://cozystay.loftocean.com/island-resort/  Y 1200-2400
   ============================================================================ */

/* AUDIT_BOD 01 — section bg #F3F3F0 (REF Y-band 240-330 distinctColors=1) */

/* AUDIT_BOD 02 — text wrap 830px (REF cs-title-wrap maxWidth) */

/* AUDIT_BOD 08-11 — body paragraph: Jost 18px / 1.66 / #333632 / 830px
   E05 (2026-05-14) — AUDIT_BOD 01,02 explicit font-weight 400 + letter-spacing 0
   (REF CDP SPEC 3.4: font-weight 400, letter-spacing normal) */



/* AUDIT_BOD 12-14 — 4 portrait thumbnails row
   REF: 4 items @ 412×618 (aspect 2/3), 32px efektivní gap, container 1300px wide */



/* AUDIT_BOD 15-19 — italic cursive quote
   REF: La Belle Aurore 26px / 1.35 / #53624E sage / left-align / 1300px wide / margin-top 20px */



/* =========================================================
   E030 — Booking widget <select> cells parity (2026-05-14)
   Reference: https://cozystay.loftocean.com/island-resort/
   REF "Rooms"/"Guests" cells render value as inline text +
   subtle chevron (cs-has-dropdown). CUR Adults/Children
   converted from counter widget to native <select> to match
   visual structure of REF (no -/+ buttons, clean text + arrow).
   Inputs and selects share identical box: 48px height,
   1px solid #b99d75 (gold) border, transparent bg, white Jost
   14px text right-aligned, 35px right padding for icon room.
   Floating label position identical to date cells.
   ========================================================= */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select{
    flex: 1 1 0;
    background: transparent;
    border: 0;
    padding: 0 7.5px;
    height: 48px;
    min-height: 48px;
    display: block;
    position: relative;
    box-sizing: border-box !important;
    min-width: 0;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select select{
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    flex: 0 0 auto;
    text-align: right;
    text-align-last: right !important;
    color: #fff;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.5'><polyline points='1,1.5 6,6.5 11,1.5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center;
    background-size: 10px 6px !important;
    border: 1px solid var(--c-primary);
    border-radius: 0;
    padding: 5px 35px 5px 15px;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 28px;
    height: 48px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box !important;
    cursor: pointer;
}
/* Native dropdown option list — readable text on white bg in browser-default popover */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select select option{
    color: #1a1b1a;
    background: #fff;
}
/* Floating label for select cells — identical position to date cells (REF spec [80,85,90,95]:
   absolute top:24 left:22, Marcellus 16/26.56 white, translateY(-13.27) lift). */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select label{
    display: block;
    position: absolute;
    top: 24px;
    left: 22px;
    transform: translateY(-13.27px);
    font-family: 'Marcellus', var(--font-serif), serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    line-height: 1.66;
    margin: 0;
    padding-left: 0;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
/* Focus state — keep gold border but slightly brighter (parity with date inputs) */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select select:focus{
    outline: none !important;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 1px var(--c-primary) inset;
}

/* Mobile fallback — match counter mobile rules (full width column) */
@media (max-width: 1100px) {
.hero.hero-with-search .booking-widget--inline .booking-widget-field--select{
        flex: 0 0 auto;
        width: 100%;
    }
}/* ==================================================================
   PARALLAX IMAGE SECTION (Resort waterfront fotka — CozyStay parity)
   Uses <img> element (not CSS background) for reliable full-page
   screenshot rendering and proper image scaling.
   ================================================================== */








/* ============================================================
   The Accommodations parity — light cards section (CozyStay)
   Targets non-dark cards sections only via :not(--dark).
   Reference: cozystay.loftocean.com/island-resort/
   ============================================================ */
.builder-cards-section:not(.builder-cards-section--dark){
    background: #ffffff;
    padding: 80px 0 100px;
}
.builder-cards-section:not(.builder-cards-section--dark) .container{
    max-width: 1300px;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header{
    text-align: left;
    max-width: none;
    margin: 0 0 56px;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header-eyebrow{
    color: var(--c-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: block;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header h2{
    color: var(--c-ink);
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0;
    text-transform: none;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header p{
    color: var(--c-muted);
    font-size: 16px;
    margin-top: 12px;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-grid{
    gap: 50px;
}
.builder-cards-section:not(.builder-cards-section--dark) .card{
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
.builder-cards-section:not(.builder-cards-section--dark) .card:hover{
    transform: none;
    box-shadow: none;
    border-bottom-color: transparent;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-image{
    aspect-ratio: 1 / 1;
    min-height: 0;
    margin-bottom: 22px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-image::before{
    content: none;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-image > div{
    transition: transform .6s ease;
}
.builder-cards-section:not(.builder-cards-section--dark) .card:hover .card-image > div{
    transform: scale(1.04);
}
.builder-cards-section:not(.builder-cards-section--dark) .card-body{
    padding: 0;
    background: transparent;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-eyebrow{
    color: var(--c-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-title{
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 1.2;
    color: var(--c-ink);
    margin: 0 0 12px;
    text-transform: none;
    letter-spacing: 0;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-text{
    color: var(--c-muted);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 18px;
}
/* (CozyStay ghost-link vzhled odstraněn — karta má modrý pill v overlay bloku) */
/* Section header: stacked centered (heading + CTA pod sebou).
   Side-by-side variant vypadal nezarovnaně — sjednoceno na centered. */
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 24px;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-text{
    flex: 0 0 auto;
    max-width: 800px;
    width: 100%;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-cta{
    flex: 0 0 auto;
    margin-bottom: 0;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-cta .btn-primary{
    background: var(--c-primary);
    color: #ffffff;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    padding: 18px 48px;
    border: 0;
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .25s ease;
}
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-cta .btn-primary:hover{
    background: var(--c-primary-2);
}
/* Per-card meta row (3 small icon+text items: m²/guests/beds equivalents) */
.builder-cards-section:not(.builder-cards-section--dark) .card-meta{
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-item{
    display: inline-flex;
    align-items: center;
    margin: 5px 0;
    padding-right: 22px;
    color: #333632;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    line-height: 28px;
    white-space: nowrap;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-text{
    display: block;
    color: #333632;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    height: 28px;
    border-color: #333632;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-item:last-child{
    padding-right: 0;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-icon{
    display: inline-flex;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    color: #333632;
    flex-shrink: 0;
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-icon svg{
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

@media (max-width: 960px) {
.builder-cards-section:not(.builder-cards-section--dark){
        padding: 64px 0 72px;
    }
.builder-cards-section:not(.builder-cards-section--dark) .section-header{
        margin-bottom: 40px;
    }
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split{
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-text{
        max-width: 100%;
        flex-basis: 100%;
    }
.builder-cards-section:not(.builder-cards-section--dark) .section-header--split .section-header-cta{
        margin-bottom: 0;
    }
.builder-cards-section:not(.builder-cards-section--dark) .card-grid{
        gap: 36px;
    }
.builder-cards-section:not(.builder-cards-section--dark) .card-title{
        font-size: 26px;
    }
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-item{
        font-size: 13px;
        padding-right: 16px;
    }
}/* =========================================================
   INTRO HEADING (element intro_heading) — Kinsley světlá verze
   -----------------------------------------------------------
   Centrovaný blok: SVG ikona + modrý eyebrow + nadpis + text,
   volitelně 3 portrétové karty dole zasahující do další sekce.
   Sloučeno do jediné definice u zdroje (2026-07-07): dřív byla
   třída definovaná 2× — tmavá DeJaBlue base (padding 200px na
   tvrdo, bílý text, Marcellus 72px) + kinsley override (světlá,
   38px, padding 90/0/40). Tmavou vrstvu + mrtvé breakpoint
   override (title 56/44/34, padding-top 120/80) přebíjel kinsley,
   proto odstraněny. Vertikální padding je zde; lze doladit i
   builder paddingem sekce (jde na .bldr-section-wrap wrapper).
   ========================================================= */
.intro-heading-section{
    position: relative;
    background: var(--c-bg);
    padding: 0;   /* vertikální spacing řídí builder (padding sekce), fallback v getTypeDefaults */
    text-align: center;
    color: var(--c-ink);
    overflow: visible;
    isolation: isolate;
}
.intro-heading-section.intro-heading-section--bg{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.intro-heading-section .intro-heading-overlay{ display: none; }
.intro-heading-section .container{
    position: relative;
    z-index: 1;
    max-width: 1538px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.intro-heading-section .intro-heading-wrap{
    max-width: 880px;
    margin: 0 auto;
}
.intro-heading-section .intro-heading-icon{
    margin: 0 auto 20px;
    display: inline-flex;
    opacity: 0.85;
}
.intro-heading-section .intro-heading-icon svg{
    width: 40px;
    height: 40px;
    display: block;
}
.intro-heading-section .intro-heading-icon svg,
.intro-heading-section .intro-heading-icon path{
    stroke: var(--c-primary);
    fill: var(--c-primary);
}
.intro-heading-section .intro-heading-eyebrow{
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-primary);
    margin: 0 0 12px;
}
.intro-heading-section .intro-heading-title{
    font-family: var(--font-sans);
    font-size: 38px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--c-ink);
    margin: 0 0 20px;
}
.intro-heading-section .intro-heading-title em{
    font-style: normal;
    color: var(--c-primary);
}
.intro-heading-section .intro-heading-body{
    font-family: 'Jost', sans-serif;
    font-size: 21px;
    line-height: 1.66;
    color: var(--c-muted);
    margin: 0 auto;
    max-width: 640px;
}
.intro-heading-section .intro-heading-cards{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    max-width: 1356px;
    margin: 110px auto -180px;
    padding: 0 24px;
    box-sizing: border-box;
}
.intro-heading-section .intro-heading-card{
    margin: 0;
    aspect-ratio: 412 / 618;
    overflow: hidden;
    background: #1a1a1a;
}
.intro-heading-section .intro-heading-card img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intro-heading-section .intro-heading-card:hover img{
    transform: scale(1.03);
}

@supports not (aspect-ratio: 1) {
.intro-heading-section .intro-heading-card{ height: 618px; }
}
@media (max-width: 1200px) {
.intro-heading-section .intro-heading-cards{ margin-bottom: -140px; }
}
@media (max-width: 960px) {
.intro-heading-section.intro-heading-section--bg{ background-attachment: scroll; }
.intro-heading-section .container{ padding: 0 30px; }
.intro-heading-section .intro-heading-body{ font-size: 16px; }
.intro-heading-section .intro-heading-cards{ gap: 16px; margin: 70px auto -80px; padding: 0 30px; }
}
@media (max-width: 640px) {
.intro-heading-section .intro-heading-icon svg{ width: 32px; height: 32px; }
.intro-heading-section .intro-heading-cards{
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 56px auto -40px;
    }
.intro-heading-section .intro-heading-card{ aspect-ratio: 4 / 5; }
}/* =========================================================================
   E040 — Welcome / Outstanding Views — final pixel-parity overrides (2026-05-14)
   Reference: https://cozystay.loftocean.com/island-resort/ (page Y 1538-2156)
   AUDIT_BOD 01-07 (Welcome / Outstanding Views section)
   Cíl: gallery šíře 1740px (4× 412 + 3× 32 gap), images portrait 412/618,
   pseudo-arrow buttons (prev disabled left, next active right) jako v REF.
   ========================================================================= */
/* AUDIT_BOD 01-02 (E042 2026-05-14) — uvolnit .container max-width specificky pro welcome-section
   aby 1740px gallery row mohla žít. .welcome-text + .welcome-italic-quote mají vlastní
   max-width + auto margins, zůstanou centrované. */
.welcome-section > .container{
    position: relative;
    max-width: none;
    padding: 0 24px;
}





/* AUDIT_BOD 05 & 06 — kulaté arrow buttons (Prev disabled vlevo, Next active vpravo)
   REF: 60×60 white circle, box-shadow 0 2px 40px -10px rgba(83,54,36,0.1),
   position absolute na úrovni vertikálního středu galerie, z-index 99 */



/* AUDIT_BOD 07 — italic quote umístění + spacing pod galerií (REF gallery margin-bottom 100px,
   quote pod ní; v CUR držet konzistentní vzhled bez přilepení na další sekci) */

/* AUDIT_BOD 06 (E044 2026-05-17) — REF section ends at Y=870 (sharp edge ?=525 to dark teal next section).
   Quote spans Y=810-870, so padding-bottom je minimální. Bumped 200→30px.
   AUDIT_BOD 01 (E045 2026-05-18) — REF welcome-text končí těsně před crop Y=1450 (gallery začíná crop Y=60);
   CUR welcome-body bleeded into crop top (welcome-text začínal o ~180px později) → reduce padding-top
   from calc(--space-section-lg + 60px)=260px to 80px → posune celou welcome-section o 180px nahoru,
   gallery z CUR Y=240 na REF Y=60, italic quote z CUR Y=900 na REF Y=720. */


@media (max-width: 1799px) {
/* viewport menší než REF — gallery zúžit do containeru, šipky o kus dovnitř */
    

}

/* ─────────────────────────────────────────────────────────────
   Builder static replacement classes (2026-05-20)
   Nahrazují inline styly co byly historicky hardcoded v PHP rendereru.
   Dynamické hodnoty (bg-image z JSONu, cols, opacity) jsou teď v <style>
   bloku emitovaném BuilderRenderer::emitDynamicCss() s unikátními ID.
   ───────────────────────────────────────────────────────────── */

/* Centered section heading uvnitř builder modulů (galerie, kalendář) */

/* Availability calendar — všechny rozměry byly dříve inline */







/* Login page (formerly inline styles in views/auth/login.php) */







/* Contact page 2/1 grid (formerly inline) */
.apt-detail-grid--2-1{ grid-template-columns: 2fr 1fr; }
@media (max-width: 768px) {
.apt-detail-grid--2-1{ grid-template-columns: 1fr; }
}/* Error pages (formerly inline styles in views/errors/*.php) */



/* Home.php fallback card placeholders (formerly inline background-color) */




/* Apartment detail (formerly inline) */
.apt-map-iframe{
    border: 0;
    border-radius: var(--radius);
}
.booking-widget-quote-row--mb{ margin-bottom: 12px; }
/* Vysvětlivka pod cenou za osobu (z čeho číslo vychází) — sedí těsně pod řádkem
   s cenou, proto se ruší jeho spodní mezera. */
.booking-widget-quote-row--mb:has(+ .booking-widget-price-note){ margin-bottom: 2px; }
.booking-widget-price-note{
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-muted);
}
/* Booking success list (formerly inline list-style:none;padding:0) */


/* ─────────────────────────────────────────────────────────────
   Hotfix 2026-05-20 — duplicate menu visibility (Monika report)
   Na desktopu se zobrazoval drawer (.site-nav) i inline nav (.site-nav-inline)
   současně + nav-burger byl vidět vždy → "Kontakt 2×" v menu.
   Drawer/burger jsou MOBILE-ONLY (≤960px), inline nav DESKTOP-ONLY (>960px).
   ───────────────────────────────────────────────────────────── */

/* Desktop: drawer + burger schované */
.site-nav{ display: none; }
.nav-burger{ display: none; }

/* Mobile breakpoint — inline schovat, drawer + burger ukázat */
@media (max-width: 960px) {
.site-nav-inline{ display: none; }
.site-nav{ display: flex; }
.nav-burger{ display: flex; }
}/* ─────────────────────────────────────────────────────────────
   Page hero (2026-05-20) — auto-hero pro podstránky s background image.
   Vychází z `.hero` ale lehčí: min-height 380px (mobile 240px), centered text.
   ───────────────────────────────────────────────────────────── */
.page-hero{
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    margin-bottom: 0;
}
.page-hero-content{
    padding: 60px 24px;
}
.page-hero-title{
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.1;
    margin: 0 0 12px;
    color: #fff;
}
.page-hero-subtitle{
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.92);
}
@media (max-width: 768px) {
.page-hero{ min-height: 240px; }
.page-hero-content{ padding: 36px 20px; }
}/* ─────────────────────────────────────────────────────────────
   Apartment detail gallery slider (2026-05-20)
   Místo grid 11 obrázků zobrazuje swiper carousel.
   ───────────────────────────────────────────────────────────── */
.apt-gallery-slider{
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin: 12px 0 32px;
}
.apt-gallery-slider{
    height: 500px;
    max-height: 60vh;
}
.apt-gallery-slider .swiper-wrapper{ height: 100%; }
.apt-gallery-slider .swiper-slide{
    width: 100%;
    height: 500px;
    max-height: 60vh;
    background: var(--c-cream, #f5efe4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.apt-gallery-slide-img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.apt-gallery-slider .swiper-button-prev,
.apt-gallery-slider .swiper-button-next{
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    transition: background .2s ease;
}
.apt-gallery-slider .swiper-button-prev:hover,
.apt-gallery-slider .swiper-button-next:hover{
    background: var(--c-primary);
}
.apt-gallery-slider .swiper-button-prev::after,
.apt-gallery-slider .swiper-button-next::after{ font-size: 16px; font-weight: 700; }
.apt-gallery-slider .swiper-pagination-bullet{
    background: #fff;
    opacity: 0.6;
}
.apt-gallery-slider .swiper-pagination-bullet-active{
    background: var(--c-primary);
    opacity: 1;
}
@media (max-width: 768px) {
.apt-gallery-slider{ height: 320px; max-height: 50vh; }
.apt-gallery-slider .swiper-slide{ height: 320px; }
.apt-gallery-slider .swiper-button-prev,
    .apt-gallery-slider .swiper-button-next{ width: 36px; height: 36px; }
}/* Fallback bez JS / Swiper se nenačetl — CSS-only horizontal scroll */
.apt-gallery-slider:not(.swiper-initialized) .swiper-wrapper{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
}
.apt-gallery-slider:not(.swiper-initialized) .swiper-slide{
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.apt-gallery-slider:not(.swiper-initialized) .swiper-pagination,
.apt-gallery-slider:not(.swiper-initialized) .swiper-button-prev,
.apt-gallery-slider:not(.swiper-initialized) .swiper-button-next{ display: none; }
/* ─────────────────────────────────────────────────────────────
   Hotfix 2026-05-20 (Monika feedback round 2)
   1) Button "Prohlédnout apartmán" — odsadit od textu (margin-top 32px)
   2) Welcome portraits — zmenšit dvojnásobné margin-top (96px+100px)
   3) Cards dark teal a testimonials dark — sjednotit jako jeden vizuální blok,
      odstranit ~210px díru mezi nimi.
   ───────────────────────────────────────────────────────────── */

/* 1) Button v welcome-action — margin-top od textu */

/* 2) Welcome portraits row — sjednocený margin-top jako ostatní sekce */


/* 3a) Cards dark teal — menší bottom padding (návaznost na testimonials) */

/* 3b) Testimonials dark teal po cards — top padding 0 (jeden vizuální blok),
       bottom padding zachovaný pro odsazení od services_grid */


/* ============================================================
   Cards section — dark + light: čisté card-meta + spacing
   ============================================================ */
.builder-cards-section .card-meta{
    list-style: none !important;
    padding: 0;
    margin: 6px 0 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}
.builder-cards-section .card-meta-item{
    list-style: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-family: 'Jost', sans-serif;
    font-size: 13.5px;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.82);
}
.builder-cards-section:not(.builder-cards-section--dark) .card-meta-item{
    color: #555852;
}
.builder-cards-section .card-meta-item::before,
.builder-cards-section .card-meta-item::marker{ content: none !important; display: none; }
.builder-cards-section .card-meta-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}
.builder-cards-section .card-meta-icon svg{
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
}
.builder-cards-section .card-meta-text{
    display: inline-block;
    color: currentColor;
    font-weight: 400;
}
/* Section header split — heading centered + CTA centered below.
   Žádný side-by-side layout který vypadá disbalanced (button visel vpravo). */
.builder-cards-section .section-header--split{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 56px;
}
.builder-cards-section .section-header--split .section-header-text{ width: 100%; max-width: 800px; }
.builder-cards-section .section-header--split .section-header-cta{ flex: 0 0 auto; }
.builder-cards-section .section-header--split .section-header-cta .btn{
    padding: 12px 32px;
    white-space: nowrap;
}
@media (max-width: 720px) {
.builder-cards-section .section-header--split{
        gap: 18px;
        margin-bottom: 36px;
    }
}/* ============================================================
   Services grid — kompaktní service-item, ne grid v gridu
   ============================================================ */






/* Admin preview banner — viditelný jen u nahledu z /admin/stranky/{id}/nahled */



/* Welcome portraits slider — Swiper nav buttons + pagination */

.welcome-portraits--slider .swiper-wrapper{
    display: flex;
    align-items: stretch;
}
.welcome-portraits--slider .welcome-portrait.swiper-slide{
    /* V slider módu zrušíme base .welcome-portrait omezení (aspect-ratio + overflow),
       aby caption pod fotkou nebyl ořezán. Aspect ratio se aplikuje jen na .welcome-portrait-img. */
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    flex-shrink: 0;
    height: auto;
    display: flex;
    flex-direction: column;
}



.welcome-portraits--slider .swiper-button-prev,
.welcome-portraits--slider .swiper-button-next{
    --swiper-navigation-size: 22px;
    --swiper-navigation-color: var(--c-dark-teal, #2c4a47);
    top: 42%;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    transition: background .15s;
}
.welcome-portraits--slider .swiper-button-prev:hover,
.welcome-portraits--slider .swiper-button-next:hover{
    background: #fff;
}
.welcome-portraits--slider .swiper-pagination{
    bottom: 0;
}
.welcome-portraits--slider .swiper-pagination-bullet{
    background: var(--c-dark-teal, #2c4a47);
    opacity: .35;
}
.welcome-portraits--slider .swiper-pagination-bullet-active{
    opacity: 1;
}
.welcome-portraits--slider .swiper-slide{
    height: auto;
}
@media (max-width: 720px) {
.welcome-portraits--slider .swiper-button-prev,
    .welcome-portraits--slider .swiper-button-next{ display: none; }
}/* ============================================================
   LUXURY GOLD ACCENTS — global overrides
   Champagne gold pro CTA primary + rámečky fotek + boutique badges.
   Aplikováno přes append blok aby nepřepisovaly base styles
   (existující "warm beige" #b99d75 zůstává jako sekundární tone).
   ============================================================ */

/* Primary CTA buttons — luxury gold s subtilním gradientem */
.btn-primary,
.builder-cards-section .btn-primary,
.section-header--split .btn-primary,
.featured-apartment-actions .btn-primary,
.btn.btn-primary{
    background: var(--grad-gold);
    color: #1a1b1a;
    border: 1px solid transparent;
    letter-spacing: .04em;
    font-weight: 500;
    transition: filter .15s, transform .15s, box-shadow .15s;
}
.btn-primary:hover{
    filter: brightness(1.05);
    box-shadow: 0 6px 24px rgba(201, 169, 97, .35);
    transform: translateY(-1px);
}
/* Secondary/ghost buttons s gold border */
.btn-ghost{
    border: 1px solid var(--c-gold);
    color: var(--c-gold-2);
    background: transparent;
    transition: all .15s;
}
.btn-ghost:hover{
    background: var(--c-gold);
    color: #1a1b1a;
}
/* Na dark sekcich gold rozsviti */
.builder-cards-section--dark .btn-ghost,
.testimonials-section--dark .btn-ghost{
    color: var(--c-gold-light);
    border-color: rgba(230, 213, 166, .55);
}
.builder-cards-section--dark .btn-ghost:hover,
.testimonials-section--dark .btn-ghost:hover{
    background: var(--c-gold);
    color: #1a1b1a;
    border-color: var(--c-gold);
}
/* Photo frames — subtilní zlatý rámeček (BEZ bílého paspartu).
   Předtím tu byl 6px bílý border-shadow + 1px gold inner + 1px gold outer.
   Po user feedbacku odstraněn bílý frame, ponechány jen 2 gold akcenty + měkký drop shadow. */
.featured-apartment-image,
.card-image,
.welcome-portrait-img,
.intro-heading-card .intro-heading-card-img,
.builder-image img,
.services-side-image img,
.apt-gallery-slider .swiper-slide img{
    box-shadow:
        0 0 0 1px rgba(201, 169, 97, .35),
        0 12px 36px rgba(0, 0, 0, .12);
    transition: box-shadow .25s;
}
.featured-apartment-image:hover,
.card-image:hover,
.welcome-portrait:hover .welcome-portrait-img{
    box-shadow:
        0 0 0 1px rgba(201, 169, 97, .65),
        0 18px 48px rgba(0, 0, 0, .18);
}
/* Boutique gold badges — pro karty apartmánů (Resale, Sea View, Ready to move...) */



/* Logo + section eyebrow — zlatý odstín */
.section-header-eyebrow,
.welcome-eyebrow,
.accommodations-eyebrow,
.testimonials-eyebrow,
.services-eyebrow,
.newsletter-eyebrow{
    color: var(--c-gold-2);
    font-weight: 500;
    letter-spacing: .14em;
}
.builder-cards-section--dark .section-header-eyebrow,
.testimonials-section--dark .testimonials-eyebrow,
.newsletter-section--dark .newsletter-eyebrow{
    color: var(--c-gold-light);
}
/* Card eyebrow + card-meta icons taky gold akcent */
.card-eyebrow{
    color: var(--c-gold-2);
}
.builder-cards-section--dark .card-eyebrow{
    color: var(--c-gold-light);
}
/* Heading underline accent — golden line below H1/H2 (volitelné, jen kde má smysl) */


/* Newsletter / CTA dark — gold submit button už pokryto výše */

/* Footer gold separator pod logem — centrovaná, jinak vznikne osamělá čárka
   vlevo (user feedback 2026-05-26 — pobočka zlata utekla). */
.site-footer .site-footer-brand-text::after{
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: var(--c-gold);
    margin: 14px auto;
}
/* ════════════════════════════════════════════════════════════════════
   WEATHER WIDGET — server-side rendered, pozicovaný POD header menu.
   Data z wttr.in (30 min cache). Transparent design jako stránky (border + blur).
   ════════════════════════════════════════════════════════════════════ */
/* global-header-template wrapper z BuilderRenderer.render() v __header__ template.
   Pokrývá celý viewport jako overlay vrstva — děti uvnitř (weather widget atd.) se
   pozicují absolute vůči celé stránce. pointer-events:none = nezablokuje interakci
   s hero pod tím; děti (.weather-widget-mount) musí mít pointer-events:auto. */



/* Pokud admin v builderu nastavil wrapper position (bldr-section-wrap má position),
   widget uvnitř přebírá pozici z wrapperu — vlastní position-mount už nepoužíváme. */
.bldr-section-wrap .weather-widget-mount{
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
}







/* ── Builder elementy pro header/footer (site_logo, header_cta, footer_*) ── */
/* Specificity wrapper — site.css:1216 .site-footer a{display:block;} přebíjí
.bldr-site-logo. Použijeme .site-footer .bldr-site-logo a .bldr-footer
   prefix aby pravidla vyhrála (2 classes vs 1class+1elem). */
.bldr-site-logo,
.site-footer .bldr-site-logo,
.bldr-footer .bldr-site-logo{
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    text-decoration: none;
    color: inherit;
    padding: 0;
}
.bldr-site-logo-text,
.site-footer .bldr-site-logo .bldr-site-logo-text,
.bldr-footer .bldr-site-logo-text{
    display: block;
    font-family: 'Marcellus', var(--font-serif, var(--font-display)), serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--c-gold-2, #c9a961);
    padding: 0;
}
.bldr-site-logo-sub,
.site-footer .bldr-site-logo .bldr-site-logo-sub,
.bldr-footer .bldr-site-logo-sub{
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    padding: 0;
}



/* footer_full — kompletní patička jako builder element */














.bldr-footer-newsletter-form .form-input{
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 4px;
    min-width: 0;
}
.bldr-footer-newsletter-form .btn{ flex-shrink: 0; }







/* ===== zdroj: luxury.css ===== */
/* ============================================================
   LUXURY ELEMENTS (Fáze 14.4) — hero_video, apartment_listing,
   investment_cards, investment_potential, lifestyle_quote, day_timeline
   ============================================================ */

/* ── Newsletter buttony (footer + newsletter sekce) — gold accent ──
   Specificity via body. prefix místo !important. */
body .site-footer .footer-newsletter-form button,
body .footer-newsletter-form button,
body .newsletter-section .newsletter-submit,
body .newsletter-section--dark .newsletter-submit,
body .newsletter-form .newsletter-submit{
    background: var(--grad-gold);
    color: #1a1b1a;
    border: 0;
    letter-spacing: 0.14em;
    font-weight: 600;
    transition: filter .15s, box-shadow .15s, transform .15s;
}
body .site-footer .footer-newsletter-form button:hover,
body .footer-newsletter-form button:hover,
body .newsletter-section .newsletter-submit:hover,
body .newsletter-section--dark .newsletter-submit:hover{
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(201, 169, 97, .35);
    background: var(--grad-gold);
}
/* ── Apartment image label — gold + clean badge ── */
body .featured-apartment-image-label{
    background: rgba(0, 0, 0, .55);
    color: var(--c-gold-light);
    border: 1px solid var(--c-gold);
    border-radius: 0;
    padding: 8px 18px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* ── Footer hustší layout — body prefix pro specificity ── */
body .site-footer{ padding: 80px 0 0; }
body .site-footer-top{ padding-bottom: 56px; gap: 40px; }
body .site-footer-brand{ text-align: center; }
.site-footer-brand-text{
    font-family: var(--font-serif);
    font-size: 36px;
    letter-spacing: .04em;
}
.site-footer-brand-text::after{
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: var(--c-gold);
    margin: 14px auto 14px;
}
.site-footer-brand-tagline{
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    max-width: 580px;
    margin: 0 auto;
}
.site-footer h4{
    font-family: var(--font-serif);
    color: var(--c-gold-light);
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 18px;
    font-weight: 500;
}
.site-footer p, .site-footer a, .site-footer li{
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    line-height: 1.7;
}
.site-footer a:hover{ color: var(--c-gold-light); }
.site-footer ul{ list-style: none; padding: 0; margin: 0; }
.site-footer ul li{ padding: 3px 0; }

/* ── Lifestyle quote — full image without text column (chain class for specificity) ── */



/* ── Builder video element — error/empty states (no inline styles) ── */


/* ── Standalone booking widget bar — samostatný builder element ──
   DESIGN: dark teal bg + jednotlivé fieldy = bílá karta s gold border,
   label uvnitř vlevo + hodnota vpravo (jako original homepage hero). */





/* HERO variant — bílá karta s gold accent line (jako original homepage) */

.booking-widget-bar--hero .container{
    max-width: 1340px;
    padding: 0 24px;
}

/* Bg override pro form jde přes CSS var nastavený na wrapperu — ne přes
   `background: inherit` (to blokovalo stacking context / z-index). */

/* Když je v booking widgetu otevřený custom select dropdown, celá widget
   wrapper se zvedne v stacking pořadí — dropdown přebije všechny následující sekce. */
.booking-widget-bar:has(.dba-custom-select.is-open),
.booking-widget-bar-form:has(.dba-custom-select.is-open),
.bldr-section-wrap:has(.dba-custom-select.is-open){
    position: relative;
    z-index: 9998;
}
/* Force overflow visible aby dropdown přečuhoval z bookingu ven (nad welcome). */
.booking-widget-bar,
.booking-widget-bar-form,
.booking-widget-bar-fields,
.booking-widget-bar-field,
.bldr-section-wrap.bldr-wrap-booking_widget{
    overflow: visible;
}
/* --hero variant zdědí inline label+value design z base .booking-widget-bar-field
   (definovaný níže). Hero override jen wrapper layout + grid columns. */


/* Tablet — 4-col fields se nevejdou (datum "26. 05. 2026" potřebuje ~180px).
   Zvýšeno z 720px na 960px aby tablet/landscape phone přepnul na 2-col. */
@media (max-width: 960px) {
.booking-widget-bar--hero .container{ padding: 0 14px; }



}

/* HERO CARD variant — bílá karta s gold akcentem, jako původní hero booking_search */
/* (stará --hero block CSS odstraněna ve fázi 14.16 — nahrazena novou
   field-card konstrukcí níže. Hero variant nyní jen overriduje bg.) */



/* Mobile safety — booking widget form a card-stacked fields nesmí přesahovat container
   (user feedback: pravý border zmizel). Vynucujeme box-sizing + 100% max-width + min-width:0
   na všech grid children aby gold border zůstal viditelný na obou stranách. */
@media (max-width: 760px) {



.booking-widget-bar--hero .container{ padding: 0 12px; }
}/* Field overflow handling — datum/select hodnoty nesmí vytékat z gold-bordered
   karty. Inputy + selecty stačí min-width: 0 a text-overflow: clip pro hover. */
.booking-widget-bar-field input,
.booking-widget-bar-field select,
.booking-widget-bar-field .dba-custom-select{
    min-width: 0;
    max-width: 100%;
}
/* (hardcoded marginy mezi hero a booking_widget odstraněny — řídí builder) */

/* Labels title case (Příjezd, ne PŘÍJEZD) — base field design */

/* ─── Flatpickr calendar — luxury styling ────────────────────── */
.flatpickr-calendar{
    z-index: 9999;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
    border: 1px solid var(--c-gold-light);
    border-radius: 6px;
    font-family: var(--font-sans);
}
/* Header — gold accent line. Necháváme default flatpickr layout (absolute current-month) */
.flatpickr-calendar .flatpickr-months{
    background: linear-gradient(180deg, #fffefb 0%, #fdfaf3 100%);
    border-bottom: 1px solid rgba(201, 169, 97, .35);
    padding-bottom: 6px;
}
.flatpickr-calendar .flatpickr-month{
    color: var(--c-ink);
    overflow: visible;
    height: 40px;
}
.flatpickr-calendar .flatpickr-current-month{
    padding-top: 6px;
    font-size: 15px;
    font-weight: 500;
    /* Default flatpickr má translate3d(0,0,0) — vytváří stacking context co
       uvězní můj custom dropdown za calendar days. Override: žádný transform. */
    transform: none;
}
/* Místo toho zvýšit z-index celé header sekce nad calendar grid */
.flatpickr-calendar .flatpickr-months{
    position: relative;
    z-index: 5;
}
/* Hide native month select + year input — replaced by custom buttons via JS */
.flatpickr-calendar .flatpickr-monthDropdown-months,
.flatpickr-calendar .numInputWrapper{
    display: none;
}
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month{
    color: var(--c-gold-2);
    fill: var(--c-gold-2);
    padding: 8px 10px;
    transition: color .15s, background .15s;
    border-radius: 4px;
}
.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover{
    color: var(--c-ink);
    fill: var(--c-ink);
    background: rgba(201, 169, 97, .12);
}
/* Custom month + year buttons injected by JS — vypadají jako custom select */
.fp-custom-trigger{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 10px 4px 10px;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--c-ink);
    cursor: pointer;
    line-height: 1.2;
    transition: background .12s, border-color .12s;
}
.fp-custom-trigger:hover{
    background: rgba(201, 169, 97, .08);
    border-color: var(--c-gold-light);
}
.fp-custom-trigger[aria-expanded="true"]{
    background: rgba(201, 169, 97, .12);
    border-color: var(--c-gold);
}
.fp-custom-trigger-chevron{
    display: inline-flex;
    color: var(--c-gold-2);
    transition: transform .15s;
}
.fp-custom-trigger[aria-expanded="true"] .fp-custom-trigger-chevron{
    transform: rotate(180deg);
}
.fp-custom-wrap{
    position: relative;
    display: inline-flex;
}
.fp-custom-list{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    margin-top: 6px;
    list-style: none;
    padding: 6px 0;
    min-width: 150px;
    max-height: 480px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--c-gold);
    border-radius: 4px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    z-index: 999999;
    transition: opacity .12s, transform .12s;
}
/* Open state — push wrap to top stacking context */
.fp-custom-wrap.is-open{
    z-index: 999999;
}
.fp-custom-wrap.is-open .fp-custom-list{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.fp-custom-option{
    padding: 8px 14px;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--c-ink);
    cursor: pointer;
    text-align: center;
    transition: background .12s, color .12s;
}
.fp-custom-option:hover{
    background: rgba(201, 169, 97, .12);
    color: var(--c-gold-2);
}
.fp-custom-option.is-disabled{
    color: var(--c-muted);
    opacity: .45;
    cursor: not-allowed;
}
.fp-custom-option.is-disabled:hover{
    background: transparent;
    color: var(--c-muted);
}
.fp-custom-option.is-current{
    background: var(--c-cream);
    color: var(--c-gold-2);
    font-weight: 600;
}
.flatpickr-calendar .flatpickr-weekday{
    color: var(--c-muted);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* Vybraný den = gold fill. Žádné označení dnešního data. */
.flatpickr-day{
    color: var(--c-ink);
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month{ cursor: pointer; }
/* Flatpickr default přidává border na dnešní datum — přepsat. */
.flatpickr-calendar .flatpickr-day.today,
.flatpickr-calendar .flatpickr-day.today:focus{
    border-color: transparent;
    background: transparent;
    color: var(--c-ink);
    font-weight: 400;
}
.flatpickr-calendar .flatpickr-day.today:not(.selected):hover{
    background: rgba(201, 169, 97, .15);
    border-color: var(--c-gold-light);
    color: var(--c-ink);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange{
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: #1a1b1a;
    font-weight: 600;
}
.flatpickr-day:not(.selected):not(.flatpickr-disabled):hover{
    background: rgba(201, 169, 97, .15);
    border-color: var(--c-gold-light);
}
/* Disabled dny — tmavá čísla viditelná + malý X křížek (50% buňky) uprostřed */
/* Nedostupný den (minulost, min. délka pobytu, pravidla sezóny) = jen zešedne.
   Křížek byl zrušen (2026-09-03): host ho četl jako „obsazeno". Červená patří
   VÝHRADNĚ obsazenosti (níže). */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay{
    color: var(--c-muted);
    opacity: 0.4;
    background: transparent;
    cursor: not-allowed;
    text-decoration: none;
    pointer-events: none;
    position: relative;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
    color: var(--c-muted);
    opacity: 0.55;
}
/* ── Obsazenost dnů (JS decorateDay v site.js) ──────────────────────
   fp-occ-full = obě noci kolem dne obsazené → plná červená výplň
   fp-occ-pm   = den PŘÍJEZDU cizí rezervace → obsazená jen 2. půlka dne
                 (diagonálně pravá dolní) — lze vybrat jako odjezd
   fp-occ-am   = den ODJEZDU cizí rezervace → obsazená jen 1. půlka dne
                 (diagonálně levá horní) — lze vybrat jako příjezd */
/* Prefix .flatpickr-calendar zvedá specificitu nad pravidlo `.today`
   (jinak dnešní den ztratí výplň obsazenosti). */
.flatpickr-calendar .flatpickr-day.fp-occ-full{
    background: rgba(200, 91, 91, .24);
    border-color: transparent;
}
.flatpickr-calendar .flatpickr-day.fp-occ-pm{
    background: linear-gradient(135deg, transparent 0 50%, rgba(200, 91, 91, .24) 50% 100%);
    border-color: transparent;
}
.flatpickr-calendar .flatpickr-day.fp-occ-am{
    background: linear-gradient(135deg, rgba(200, 91, 91, .24) 0 50%, transparent 50% 100%);
    border-color: transparent;
}
/* Obsazený den je červený vždy naplno, i když ho nejde vybrat. */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fp-occ-full,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fp-occ-pm,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fp-occ-am{
    opacity: 1;
    color: var(--c-ink-soft);
}
/* Volný den, ze kterého se nevejde minimální pobyt (hned za ním začíná cizí
   rezervace). Není obsazený ani nedostupný — jde použít jako den ODJEZDU — takže
   nesmí vypadat ani červeně, ani jako šedý zakázaný den. */
.flatpickr-calendar .flatpickr-day.fp-short-gap{
    background: repeating-linear-gradient(135deg,
        rgba(0, 0, 0, .05) 0 3px, transparent 3px 7px);
    color: var(--c-ink-soft);
}

/* Turnus (týden sobota → sobota): najetí na kterýkoli den zvýrazní celý pobyt.
   Překryv přes box-shadow, aby zůstala vidět i půlená výplň krajních dnů. */
.flatpickr-calendar .flatpickr-day.fp-turnus-hover{
    box-shadow: inset 0 0 0 999px rgba(46, 158, 95, .16);
    border-color: transparent;
}
/* Legenda pod kalendářem (JS appendLegend) */
.flatpickr-calendar .fp-legend{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 6px 6px 6px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--c-bg-soft);
    border: 1px solid rgba(0, 0, 0, .06);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--c-ink-soft);
    text-align: left;
}
.flatpickr-calendar .fp-legend-item{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.flatpickr-calendar .fp-legend-swatch{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex: 0 0 auto;
    background: rgba(200, 91, 91, .3);
    border: 1px solid rgba(200, 91, 91, .35);
}
.flatpickr-calendar .fp-legend-swatch--half{
    background: linear-gradient(135deg, #fff 0 50%, rgba(200, 91, 91, .3) 50% 100%);
    border: 1px solid rgba(0, 0, 0, .12);
}
.flatpickr-calendar .fp-legend-swatch--gap{
    background: repeating-linear-gradient(135deg,
        rgba(0, 0, 0, .05) 0 3px, #fff 3px 7px);
    border: 1px solid rgba(0, 0, 0, .12);
}
.flatpickr-calendar .fp-legend-swatch--off{
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    opacity: .5;
}
/* ── Vybraný pobyt = zeleně (příjezd..odjezd, oba kalendáře) ────────
   Dny uvnitř rozsahu jsou v odjezdovém kalendáři často disabled (min. pobyt)
   — zelená má přednost před křížkem i obsazeností. */
.flatpickr-calendar .flatpickr-day.fp-stay,
.flatpickr-calendar .flatpickr-day.fp-stay:hover,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fp-stay,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fp-stay:hover{
    background: rgba(46, 158, 95, .18);
    border-color: transparent;
    color: var(--c-ink);
    opacity: 1;
}
.flatpickr-calendar .flatpickr-day.fp-stay-edge,
.flatpickr-calendar .flatpickr-day.fp-stay-edge:hover,
.flatpickr-calendar .flatpickr-day.selected.fp-stay-edge,
.flatpickr-calendar .flatpickr-day.selected.fp-stay-edge:hover,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fp-stay-edge,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled.fp-stay-edge:hover{
    background: #2e9e5b;
    border-color: #2e9e5b;
    color: #fff;
    font-weight: 600;
    opacity: 1;
}
.flatpickr-day.flatpickr-disabled.fp-stay::after,
.flatpickr-day.flatpickr-disabled.fp-stay-edge::after{
    background-image: none;
}






/* Každý field = bílá karta s gold border. Layout přes grid:
   label vlevo (auto width) + value vpravo (flex 1 1 0 — bere zbylou šířku).
   `gap` mezi label a value zajistí že číslo nikdy nepřilepí na label. */



/* Hodnota — input bere zbytek šířky, ellipsuje pokud nevejde. */

/* Custom select wrap — overflow MUSÍ být visible aby dropdown přečuhoval. */
.booking-widget-bar-field .dba-custom-select{
    min-width: 0;
    width: 100%;
    overflow: visible;
    background: transparent;
    color: var(--c-ink);
}


/* Custom select wrapper — flex pro alignment trigger right */
.booking-widget-bar-field .dba-custom-select{
    display: flex;
    justify-content: flex-end;
    appearance: none;
}
.booking-widget-bar-field .dba-custom-select-trigger{
    border: 0;
    background: transparent;
    padding: 0;
    height: auto;
    color: var(--c-ink);
    box-shadow: none;
    font-family: inherit;
    font-size: 14.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.booking-widget-bar-field .dba-custom-select-trigger:hover,
.booking-widget-bar-field .dba-custom-select-trigger:focus,
.booking-widget-bar-field .dba-custom-select-trigger:focus-visible,
.booking-widget-bar-field .dba-custom-select.is-open .dba-custom-select-trigger{
    border-color: transparent;
    box-shadow: none;
    outline: none;
}
.booking-widget-bar-field .dba-custom-select-label{
    overflow: visible;
    color: var(--c-ink);
}
.booking-widget-bar-field .dba-custom-select-chevron{
    color: var(--c-gold-2);
    margin: 0;
}
.booking-widget-bar-field .dba-custom-select-list{
    min-width: 80px;
    right: 0;
    left: auto;
}




/* HERO variant — sits ABOVE/OVERLAPPING hero photo (negative margin-top) */
.hero + .booking-widget-bar--hero,
.hero-video + .booking-widget-bar--hero,
.booking-widget-bar--hero{
    margin-top: -28px;
    padding: 0 0 28px;
}
/* ── Native select hidden when custom select wrapper present (JS adds class, ne inline) ── */
.dba-custom-select-native-hidden{
    display: none;
}
/* Lightbox body-scroll lock (JS adds class, ne inline) */

/* ── Video lightbox — fullscreen modal s iframe ────────────────────── */

.video-lightbox.is-open{
    display: flex;
}




/* Disabled play btn na parallax sekci — když není video nastavené */

/* parallax-play-btn jako <button> (ne <a>) — odstranit default button styling */

/* ── Flatpickr altInput — JS přidá tuto class místo inline width:100% ── */
.flatpickr-altinput-sized{
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
/* ── Custom select — luxury dropdown (used in booking widget) ── */
.dba-custom-select{
    position: relative;
    display: inline-block;
    width: 100%;
}
.dba-custom-select-trigger{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 38px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 0;
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    text-align: left;
}
.dba-custom-select-trigger:hover{ border-color: var(--c-gold); }
.dba-custom-select.is-open .dba-custom-select-trigger{
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, .15);
}
.dba-custom-select-label{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dba-custom-select-chevron{
    flex-shrink: 0;
    margin-left: 8px;
    color: var(--c-muted);
    transition: transform .15s;
    display: inline-flex;
}
.dba-custom-select.is-open .dba-custom-select-chevron{ transform: rotate(180deg); }
.dba-custom-select-list{
    list-style: none;
    padding: 4px 0;
    margin: 6px 0 0;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 100%;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--c-gold);
    border-radius: 4px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .12s, transform .12s;
}
/* Dropdown otevíraný uvnitř bookng widget fieldu — pozicovaný k FIELDU
   ne k trigger (custom-select nemá relative). */
.booking-widget-bar-field .dba-custom-select-list{
    right: 0;
    left: auto;
    min-width: 100px;
    margin-top: 12px;
}
/* Open select má vyšší stacking context (isolation) — dropdown nelze přebít. */
.dba-custom-select.is-open{
    z-index: 9999;
    position: relative;
}
.dba-custom-select.is-open .dba-custom-select-list{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.dba-custom-select-option{
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--c-ink);
    transition: background .12s, color .12s;
}
.dba-custom-select-option:hover{
    background: rgba(201, 169, 97, .12);
    color: var(--c-gold-2);
}
.dba-custom-select-option.is-selected{
    background: var(--c-cream);
    color: var(--c-gold-2);
    font-weight: 500;
}
/* (.booking-rebook-widget mrtvý kód odstraněn ve fázi 14.22 — /rezervace
   používá teď standalone booking_widget builder element přes BuilderRenderer) */





/* Děkovací stránka po odeslání rezervace ------------------------------------
   Rezervace je zatím předběžná, takže hlavní sdělení stránky není cena, ale to,
   co bude dál — proto blok odlišuje proužek a teplé pozadí. */
.booking-next-steps {
    margin-top: 32px;
    padding: 20px 24px;
    border-left: 3px solid var(--c-primary);
    background: var(--c-cream);
    border-radius: var(--radius-lg);
}
.booking-next-steps h3 { margin: 0 0 12px; }
.booking-next-steps p { margin: 0 0 8px; }
.booking-next-steps p:last-child { margin-bottom: 0; }

.booking-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.booking-summary-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--c-line-soft);
}
.booking-summary-list li:last-child { border-bottom: 0; }

@media (max-width: 600px) {
    .booking-next-steps { padding: 16px; }
}

.booking-summary-body[hidden],
.booking-summary-empty[hidden],
.booking-summary-breakdown[hidden],
.booking-summary-row[hidden],
[data-summary-cleaning-row][hidden],
[data-summary-discount-row][hidden],
[data-summary-deposit-row][hidden],
[data-summary-children-wrap][hidden]{ display: none; }
/* Cenový rozpis — separátor + heading vlevo */


/* Celkem řádek — větší font, gold accent na hodnotu */





[data-summary-night-meta]{
    color: var(--c-ink-soft, #9a9a9a);
    font-size: 13px;
    font-weight: 400;
    margin-left: 6px;
    letter-spacing: 0;
}
/* Každý řádek souhrnu — VELKÝ label vlevo, VELKÁ hodnota vpravo (jak ve screenshot) */






/* Mobile — mírně menší fonty + těsnější padding */

/* ── Validation error styly ─────────────────────────── */
/* Scroll margin top pro sticky header (cca 90px) — když JS scrolluje k chybnému poli,
   nemá končit pod headerem. */
.form-group,
.booking-widget-bar-field{
    scroll-margin-top: 110px;
}



.form-group.has-error .form-input,
.form-group.has-error .form-textarea{
    border-color: #c8836a;
    background: linear-gradient(180deg, #fff 0%, #fdf6f1 100%);
    box-shadow: 0 0 0 2px rgba(200, 131, 106, .12);
}
.form-group.has-error label{ color: #a8412a; }
/* Field error stav — subtle ruby tint, žádné křiklavé barvy. Zachovává
   luxury cream + gold estetiku, jen field získá vinný/červeno-béžový tón. */
.booking-widget-bar-field.has-error{
    background: linear-gradient(180deg, #fff 0%, #fdf3ee 100%);
    box-shadow: inset 0 0 0 1px #c8836a;
}
.booking-widget-bar-field.has-error label{
    color: #a8412a;
    letter-spacing: .06em;
}
/* Helper text pod fieldem — italic, čistý, bez boxu/arrow.
   Sedí pod calendar (z-index nižší), ale calendar otevírá na pravo dolů,
   takže obvykle nepřekrývá tento text. Plus tooltip není v cestě klikání. */


@keyframes bw-error-fade {
from{ opacity: 0; transform: translateY(-3px); }
to{ opacity: 1; transform: translateY(0); }
}
/* ── Live AJAX unavailable state ──────────────────────────── */

.booking-widget-quote.is-dimmed{
    opacity: 0.5;
    transition: opacity .25s ease;
}
.btn.is-disabled,
button[type="submit"].is-disabled,
button[type="submit"]:disabled{
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(.35);
}
/* ── Globální error banner pod submit tlačítkem (luxury minimal) ─── */








/* ── Booking widget inline — better responsive (stack 2x2 on narrow) ── */
.card .booking-widget--inline{
    max-width: 100%;
}
@media (max-width: 900px) {
.booking-widget--inline .booking-widget-fields{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
.booking-widget--inline .booking-widget-fields{
        grid-template-columns: 1fr;
    }
}.booking-widget-field label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.booking-widget--inline .btn{ white-space: nowrap; }
/* ── Reservation form / form layout polish ── */
.bookings-form .card{
    border: 1px solid rgba(201, 169, 97, .25);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .06);
}
.bookings-form .card-body{ padding: 32px; }
.form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 640px) {
.form-row{ grid-template-columns: 1fr; }
.bookings-form .card-body{ padding: 24px 18px; }
}/* ── Vizuální kontrast mezi hero_video a lifestyle_quote ──
   ŽÁDNÉ bílé díry. Lifestyle sekce po hero dostane cream pozadí
   (kontrast oproti tmavému hero photo) → harmonický přechod
   bez prázdného prostoru. */
.hero-video + .lifestyle-quote-section,
.hero-video + .bldr-section-wrap + .lifestyle-quote-section,
.hero-video-section + .lifestyle-quote-section{
    background: var(--c-cream);
}


/* Investment_potential po hero — gold separator line místo bílé díry */

/* Pokud jdou 2 stejné typy sekcí (např. lifestyle_quote + lifestyle_quote),
   alternuj bg pro vizuální oddělení */


/* Investment_cards následující po lifestyle_quote — světlá varianta s cream bg */

/* ── Italic gold accent v lifestyle_quote heading + day_timeline heading ── */
.lifestyle-quote-heading em,
.day-timeline-title em,
.apartment-listing-heading em,
.investment-potential-heading em,
.investment-cards-section .section-header h2 em{
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--c-gold-2);
    font-weight: 400;
}
.builder-cards-section--dark em,
.testimonials-section--dark em,
.investment-cards-section--dark .section-header h2 em,
.investment-potential-heading em{
    color: var(--c-gold-light);
}
/* ── Investment potential stats — vždy 4 v řadě (desktop), 2 (tablet), 1 (mobile) ── */





/* ── Apartment listing buttons (Detail / Konzultace) - centrovat text ── */
.apartment-listing-actions .btn,
.apt-detail-card-actions .btn,
.hero-video-actions .btn,
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 22px;
    line-height: 1.2;
}
.btn-lg{ padding: 14px 28px; }
.btn-sm{ padding: 8px 16px; }
/* Block buttons full-width still centered */
.btn-block{ display: flex; width: 100%; }
/* ── Contact-form-section: vlastní (kompaktní) padding, NE hardcoded var(--space-section) ── */
.contact-form-section{
    padding: 24px 0 56px;
}
@media (max-width: 720px) { .contact-form-section { padding: 16px 0 40px; } }/* Pokud builder content předchází (lifestyle_quote nebo jiný) — žádný top padding navíc */
.lifestyle-quote-section + .contact-form-section,
.bldr-section-wrap + .contact-form-section,
section + .contact-form-section{ padding-top: 0; }
/* Nadpisová sekce těsně před formulářem nemá dělat velkou spodní mezeru
   (jinak section padding-bottom + section-header margin = přehnaná díra). */
.section:has(+ .contact-form-section){ padding-bottom: 0; }
/* Sekce template-driven (kontakt fallback, bookings) — ne všudypřítomné 140px paddingy.
   Spacing teď řídí Builder per-element + jejich vlastní content padding. */

/* ── Contact + booking form cards — vnitřní padding + hover bez nalepeného stínu ── */
.contact-form-section .card,
.bookings-form .card{
    border: 1px solid rgba(201, 169, 97, .22);
    background: #fff;
    transition: box-shadow .25s, border-color .25s, transform .25s;
    overflow: visible;
}
.contact-form-section .card .card-body,
.bookings-form .card .card-body{
    padding: 32px 28px;
}
@media (max-width: 720px) {
.contact-form-section .card .card-body,
    .bookings-form .card .card-body{ padding: 24px 20px; }
}.contact-form-section .card:hover,
.bookings-form .card:hover{
    box-shadow: 0 18px 48px rgba(201, 169, 97, .15);
    border-color: var(--c-gold);
    transform: translateY(-1px);
}
.contact-form-section .form-input,
.contact-form-section .form-textarea,
.contact-form-section .form-select,
.bookings-form .form-input,
.bookings-form .form-textarea{
    padding: 12px 14px;
    border: 1px solid var(--c-line);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
    font-size: 14.5px;
    border-radius: 0;
    color: var(--c-ink);
    width: 100%;
    box-sizing: border-box;
}
.contact-form-section .form-input:hover,
.contact-form-section .form-textarea:hover,
.contact-form-section .form-select:hover{
    border-color: var(--c-gold);
}
.contact-form-section .form-input:focus,
.contact-form-section .form-textarea:focus,
.contact-form-section .form-select:focus{
    outline: 0;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, .15);
}
.contact-form-section .form-group{ margin-bottom: 16px; }
.contact-form-section .form-group label{
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--c-ink-soft);
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* ── Featured apartment block on homepage — fix labels overlap ── */
.featured-apartment-grid{
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
}
@media (max-width: 960px) {
.featured-apartment-grid{ grid-template-columns: 1fr; gap: 32px; }
}.featured-apartment-image{ position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.featured-apartment-image-label{
    position: absolute;
    bottom: auto;
    left: 18px;
    z-index: 2;
}

/* ══════════════════════════════════════════════════════════════════════════
   COOKIE CONSENT BAR — fixed bottom + dark luxury + slide-up animation
   ══════════════════════════════════════════════════════════════════════════ */

/* =============================================================
   COOKIE LIŠTA + EXTERNÍ OBSAH (port z jta.cz, 2026-09-03)
   ============================================================= */
.dba-cookies {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    padding: 16px; display: flex; justify-content: center; pointer-events: none;
}
.dba-cookies[hidden] { display: none; }
.dba-cookies__panel {
    pointer-events: auto; width: 100%; max-width: 1100px; max-height: calc(100vh - 32px); overflow-y: auto;
    padding: 22px 26px; background: var(--c-secondary); color: #e6e8f2;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.dba-cookies__nadpis { margin: 0 0 6px; font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1.25; color: #fff; }
.dba-cookies__text { margin: 0 0 6px; font-size: 14px; line-height: 1.55; max-width: 78ch; color: #d7dbe8; }
.dba-cookies__odkaz-radek { margin: 0; }
.dba-cookies__odkaz { font-size: 14px; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.dba-cookies__odkaz:hover { color: #fff; }
.dba-cookies__podrobnosti {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px;
    margin: 18px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14);
}
.dba-cookies__podrobnosti[hidden] { display: none; }
.dba-cookies__prepinac { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; }
.dba-cookies__prepinac input { width: 18px; height: 18px; accent-color: var(--c-primary); cursor: pointer; }
.dba-cookies__prepinac input:disabled { cursor: default; }
.dba-cookies__vzdy { font-size: 12px; font-weight: 500; color: var(--c-primary); white-space: nowrap; }
.dba-cookies__popis { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #c9cede; }
.dba-cookies__akce { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* „Přijmout vše" a „Jen nezbytné" jsou ZÁMĚRNĚ stejné — odmítnutí nesmí být nenápadnější. */
.dba-cookies__btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 50px; background: transparent; color: #fff;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.dba-cookies__btn:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.dba-cookies__btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.dba-cookies__btn--hlavni { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.dba-cookies__btn--hlavni:hover { background: var(--c-primary-2); border-color: var(--c-primary-2); color: var(--c-on-primary); }
.dba-cookies__btn--tichy { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.dba-cookies__btn--vyber { display: none; }
.dba-cookies__podrobnosti:not([hidden]) ~ .dba-cookies__akce .dba-cookies__btn--vyber { display: inline-flex; }
@media (max-width: 680px) {
    .dba-cookies { padding: 8px; }
    .dba-cookies__panel { padding: 16px 16px 18px; border-radius: 12px; }
    .dba-cookies__akce .dba-cookies__btn { flex: 1 1 100%; }
}
/* Externí obsah bez souhlasu: iframe schovaný, místo něj vysvětlení + tlačítko.
   Specificita musí přebít pravidla konkrétních iframů (hero video má display:block). */
iframe[data-souhlas-obsah]:not(.is-povoleno),
.hero.hero-with-search .hero-bg-video iframe[data-souhlas-obsah]:not(.is-povoleno),
.builder-video iframe[data-souhlas-obsah]:not(.is-povoleno),
.builder-map iframe[data-souhlas-obsah]:not(.is-povoleno),
.apt-map iframe[data-souhlas-obsah]:not(.is-povoleno) { display: none; }
/* Okno hero videa bez souhlasu zmizí celé (jinak by zůstal černý rámeček) */
.hero.hero-with-search .hero-bg-video:has(iframe[data-souhlas-obsah]:not(.is-povoleno)) { display: none; }
.souhlas-obsah {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    min-height: 220px; padding: 24px; text-align: center;
    background: var(--c-bg-soft); border: 1px dashed var(--c-line); border-radius: 10px; color: var(--c-muted);
}
.souhlas-obsah[hidden] { display: none; }
.souhlas-obsah-text { margin: 0; max-width: 52ch; font-size: 14px; line-height: 1.55; }
.builder-video .souhlas-obsah, .builder-map .souhlas-obsah { height: 100%; }
.apt-map .souhlas-obsah { min-height: 400px; }

















/* ── Hero video — fullscreen + overlay text ────────────────── */








/* Iframe vždy 100%×100% parent — žádný gap pod headerem.
   Aspect ratio neperfektní ale celá hero plocha je vyplněna (žádné stripy).
   Některé embed providers (AirVuz) renderují vlastní letterbox uvnitř iframe. */












.hero-video-actions .btn-lg{
    padding: 14px 32px;
    font-size: 14px;
}
/* ── Apartment listing (boutique hotel-style) ──────────────── */

















/* Mobile: stack single column aby zalamování bylo elegantní */




.apartment-listing-actions .btn{
    flex: 1 1 auto;
    min-width: 140px;
}
/* ── Investment cards — 4 luxury icon karty ────────────────── */



.investment-cards-section .section-header{ text-align: center; margin-bottom: 64px; }
.investment-cards-section .section-header h2{
    font-family: var(--font-serif);
    font-size: clamp(32px, 4vw, 48px);
    margin: 12px 0 0;
}
.investment-cards-section--dark .section-header h2{ color: #fff; }




/* Vykreslení SVG luxury ikon uvnitř investment-card kruhu */





/* ── Investment potential (dark luxury) ────────────────────── */


.investment-potential-section .section-header-eyebrow{
    color: var(--c-gold-light);
    margin-bottom: 14px;
}








/* ── Lifestyle quote — text + fullscreen image ─────────────── */












/* ── Apartment detail — hero gallery + sticky sidebar ──────── */









.apt-hero-gallery .swiper-button-prev,
.apt-hero-gallery .swiper-button-next{
    --swiper-navigation-color: var(--c-gold-light);
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, .35);
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 97, .5);
    transition: background .15s, border-color .15s;
}
.apt-hero-gallery .swiper-button-prev:hover,
.apt-hero-gallery .swiper-button-next:hover{
    background: rgba(0, 0, 0, .65);
    border-color: var(--c-gold);
}
.apt-hero-gallery .swiper-pagination-bullet{
    background: var(--c-gold-light);
    opacity: .45;
}
.apt-hero-gallery .swiper-pagination-bullet-active{ opacity: 1; }
/* 2-col detail layout */

.apt-detail-grid{
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 64px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 24px 110px;
    align-items: start;
}
@media (max-width: 960px) {
.apt-detail-grid{ grid-template-columns: 1fr; gap: 40px; padding: 48px 16px 72px; }
}














.apt-detail-card-actions .btn{
    width: 100%;
    padding: 14px 18px;
    text-align: center;
}
/* ── Day timeline — Morning / Afternoon / Evening ──────────── */














/* =========================================================
   DeJaBlue Icon System — luxury thin-line gold
   =========================================================
   Aplikuje gold barvu a (volitelně) ozdobný kruh za ikony
   napříč všemi kontexty Builderu (icon_grid, features) i
   hardcoded SVG ve views, které dědí .feature-icon /
   .why-us-icon / .luxe-icon wrapper.

   Princip: ikony renderují SVG s `stroke="currentColor"`,
   takže `color: var(--c-gold)` na rodiči je vybarví.
   ───────────────────────────────────────────────────────── */
.why-us-icon,
.feature-icon,
.luxe-icon,
.service-icon,
.amenity-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-gold-2, #c9a961);
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    position: relative;
    transition: color .25s ease, transform .25s ease;
}
.why-us-icon svg,
.feature-icon svg,
.luxe-icon svg,
.service-icon svg,
.amenity-icon svg{
    width: 36px;
    height: 36px;
    stroke-width: 1.25;
    transition: transform .35s ease;
}
/* Subtle gold ring behind icon — luxury hotel detail */
.why-us-icon::before,
.feature-icon::before,
.luxe-icon::before,
.service-icon::before,
.amenity-icon::before{
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--c-gold, #c9a961);
    border-radius: 50%;
    opacity: 0.35;
    transition: opacity .25s ease, transform .25s ease;
}
.why-us-card:hover .why-us-icon,
.feature-item:hover .feature-icon,
.service-item:hover .service-icon,
.luxe-icon:hover{
    color: var(--c-gold, #c9a961);
}
.why-us-card:hover .why-us-icon::before,
.feature-item:hover .feature-icon::before,
.service-item:hover .service-icon::before,
.luxe-icon:hover::before{
    opacity: 0.7;
    transform: scale(1.05);
}
.why-us-card:hover .why-us-icon svg,
.feature-item:hover .feature-icon svg,
.service-item:hover .service-icon svg{
    transform: scale(1.05);
}
/* Compact varianta — pro inline použití v textu / seznamech */


/* No-ring varianta pro decoy/list položky kde kruh ruší layout */

/* Override existující site.css pravidel pro .service-icon (line 6509–6518)
   — luxury sjednocení rozměrů + ring */



/* Mobile: zmenšit kruh aby nezabíral příliš místa */
@media (max-width: 540px) {
.why-us-icon,
    .feature-icon,
    .luxe-icon,
    .service-icon,
    .amenity-icon{
        width: 56px;
        height: 56px;
        margin-bottom: 14px;
    }
.why-us-icon svg,
    .feature-icon svg,
    .luxe-icon svg,
    .service-icon svg,
    .amenity-icon svg{
        width: 28px;
        height: 28px;
    }
}/* ============================================================
   Booking widget — stay rules info banner
   ============================================================
   Zobrazuje se když user vybere datum mimo min/max nights pravidla
   nebo když auto-fill check-out posunul výběr. Auto-mizí po 5s
   (kromě error variantu).
   V horizontálních widgetech (lišta /rezervace, hero search) MUSÍ být
   absolutně pozicovaný — jako flex-item by smrsknul pole doleva.
   ============================================================ */
.bw-stay-info{
    background: #fff; border-radius: 8px;
    border-left: 3px solid var(--c-primary);
    box-shadow: 0 10px 34px rgba(0,0,0,.14);
    padding: 10px 16px; font-size: 13px; line-height: 1.5; color: var(--c-ink);
    transition: opacity .5s ease, transform .5s ease;
}
.bw-stay-info--error{ border-left-color: var(--c-error); }
.booking-widget-bar-form{ position: relative; }
.booking-widget-bar-form .bw-stay-info,
.booking-widget--inline .bw-stay-info{
    position: absolute; top: calc(100% + 18px); left: 0; z-index: 30; max-width: 480px;
}
.bw-stay-info.is-fading{
    opacity: 0;
    transform: translateY(-3px);
}

/* ============================================================
   News (novinky) — list + detail design
   ============================================================ */

















/* Detail */























/* Builder element news_list — používá stejné karty jako veřejná stránka */







/* ===== zdroj: luxury-drawer.css ===== */
/* ============================================================
   LUXURY SIDE DRAWER + reduced top menu (Fáze 14.7)
   Top inline nav = 4 primary items (always visible desktop+mobile)
   Side drawer = ALL items, slide-in from left, gold accents
   ============================================================ */

/* Hamburger viditelný vždy (desktop i mobil) */
.nav-burger.nav-burger--always{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-right: 14px;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    transition: opacity .15s;
}
.nav-burger.nav-burger--always:hover{ opacity: .75; }
.nav-burger.nav-burger--always span:not(.sr-only){
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    transition: transform .25s, opacity .25s;
}
.site-header--transparent .nav-burger.nav-burger--always{
    color: rgba(255, 255, 255, .92);
}
.site-header--solid .nav-burger.nav-burger--always,
body:not(.has-hero) .nav-burger.nav-burger--always{
    color: var(--c-ink);
}
/* Když je drawer otevřený → hamburger se změní v X */
.nav-burger.nav-burger--always[aria-expanded="true"] span:not(.sr-only):nth-child(2){ transform: translateY(6.5px) rotate(45deg); }
.nav-burger.nav-burger--always[aria-expanded="true"] span:not(.sr-only):nth-child(3){ opacity: 0; }
.nav-burger.nav-burger--always[aria-expanded="true"] span:not(.sr-only):nth-child(4){ transform: translateY(-6.5px) rotate(-45deg); }
/* Top inline menu — kompaktní 4 items max */
.site-nav-inline{
    display: inline-flex;
    align-items: center;
    gap: 28px;
}
.site-nav-inline > a{
    color: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 6px 0;
    position: relative;
    transition: color .2s;
    white-space: nowrap;
}
.site-nav-inline > a::after{
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0;
    height: 1px;
    background: var(--c-gold);
    transition: width .25s ease;
}
.site-nav-inline > a:hover::after,
.site-nav-inline > a.is-active::after{ width: 100%; }
.site-nav-inline > a.is-active{ color: var(--c-gold-light); }
.site-header--transparent .site-nav-inline > a{ color: rgba(255, 255, 255, .92); }
.site-header--transparent .site-nav-inline > a:hover{ color: var(--c-gold-light); }

@media (max-width: 720px) {
/* Mobile — schovej inline menu (jen primary CTA + hamburger zůstanou) */
    .site-nav-inline{ display: none; }
}/* === Side drawer === */
nav.site-drawer,
.site-nav.site-drawer{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    background: #0f1714;
    color: rgba(255, 255, 255, .92);
    padding: 0;
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 24px 0 64px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: 0;
    align-items: stretch;
    margin: 0;
}
nav.site-drawer.is-open,
.site-nav.site-drawer.is-open{ transform: translateX(0); }
@media (max-width: 720px) {
nav.site-drawer,
    .site-nav.site-drawer{
        max-width: 100%;
    }
}.site-drawer-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid rgba(201, 169, 97, .18);
    flex-shrink: 0;
}
.site-drawer-logo{
    color: var(--c-gold-light);
    text-decoration: none;
}
.site-drawer-logo-text{
    font-family: var(--font-serif);
    font-size: 26px;
    letter-spacing: .04em;
}
.nav-close{
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .8);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all .15s;
}
.nav-close:hover{
    border-color: var(--c-gold);
    color: var(--c-gold-light);
    background: rgba(201, 169, 97, .08);
}
.site-drawer-body{
    flex: 1 1 auto;
    padding: 32px 32px 16px;
    overflow-y: auto;
}
.site-drawer-eyebrow{
    color: rgba(201, 169, 97, .65);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .22em;
    margin-bottom: 18px;
    font-weight: 500;
}
.site-drawer-list{
    list-style: none !important;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.site-drawer-list li{
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.site-drawer-list li:last-child{ border-bottom: 0; }
.site-drawer-list a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 4px;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    transition: color .15s, padding .2s;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.2;
}
.site-drawer-list a:hover{
    color: var(--c-gold-light);
    padding-left: 12px;
}
.site-drawer-list a.is-active{
    color: var(--c-gold-light);
}
.site-drawer-list a.is-active .site-drawer-link-arrow{ color: var(--c-gold); }
.site-drawer-link-arrow{
    color: rgba(255, 255, 255, .35);
    transition: color .15s, transform .2s;
    flex-shrink: 0;
}
.site-drawer-list a:hover .site-drawer-link-arrow{
    color: var(--c-gold-light);
    transform: translateX(4px);
}
.site-drawer-footer{
    flex-shrink: 0;
    padding: 24px 32px 36px;
    border-top: 1px solid rgba(201, 169, 97, .18);
    background: rgba(0, 0, 0, .15);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* Specificity boost: .site-nav a { padding: 16px 0 } (0,0,1,1) by jinak přebíjelo.
   .site-drawer a.site-drawer-phone = (0,0,2,1) → vyhrává. */
.site-drawer a.site-drawer-phone{
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    padding: 0;
    color: var(--c-gold-light);
    text-decoration: none;
    font-size: 15px;
    letter-spacing: .03em;
    white-space: nowrap;
    transition: color .15s;
}
.site-drawer-phone:hover{ color: #fff; }
.site-drawer-phone svg{ opacity: .75; }
/* CTA tlačítko v drawer — specificity boost proti .site-nav a:hover {color:--c-primary}
   které by jinak nastavilo text na barvu pozadí (nečitelné). Plus padding override
   proti .site-nav a {padding:16px 0}. */
.site-drawer a.site-drawer-cta{
    width: 100%;
    text-align: center;
    padding: 14px 24px;
    font-size: 12px;
    letter-spacing: .18em;
    color: #fff;
    background: var(--c-primary, #b99d75);
    border: 1px solid var(--c-primary, #b99d75);
}
/* Touch zařízení — hover state zůstává "stuck" po tapu, takže ho zakážeme.
   Na desktop @media (hover: hover) hover funguje normálně. */
@media (hover: hover) {
    .site-drawer a.site-drawer-cta:hover {
        background: var(--c-primary-2, #ab916c);
        border-color: var(--c-primary-2, #ab916c);
        color: #fff;
    }
}
.site-drawer a.site-drawer-cta:active {
    transform: scale(0.98);
}
/* ── Lang switcher v drawer ──
   Hlavička ho na mobilu skrývá → musí být v drawer. Design:
   - jemný label „Jazyk" s ikonou globusu
   - segmented control pod ním (full-width, equal columns)
   - active = gold gradient + černý text + jemný shadow
   - každý segment má kód (CS/EN/DE) + plný název (Čeština/English/Deutsch) pod */
.site-drawer-lang-block{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 2px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(201, 169, 97, .15);
}
.site-drawer-lang-label{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .42);
    padding: 0 2px;
}
.site-drawer-lang-label svg{
    opacity: .55;
    flex-shrink: 0;
    display: block;
}
.site-drawer-lang-segments{
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 6px;
    padding: 6px;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(201, 169, 97, .15);
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
/* Specificity boost stejně jako u phone — .site-nav a { padding: 16px 0 } přebíjelo. */
.site-drawer a.site-drawer-lang-link{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 46px;
    padding: 8px 4px;
    box-sizing: border-box;
    font-family: inherit;
    color: rgba(255, 255, 255, .58);
    text-decoration: none;
    background: transparent;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease, transform .15s ease;
    position: relative;
}


.site-drawer a.site-drawer-lang-link:hover{
    color: var(--c-gold-light, #d4b779);
    background: rgba(201, 169, 97, .07);
}
.site-drawer a.site-drawer-lang-link:active{ transform: scale(0.97); }
/* Specificita (a.…) nutná — jinak vyhraje `background: transparent`
   z .site-drawer a.site-drawer-lang-link a aktivní jazyk splyne s pozadím. */
.site-drawer a.site-drawer-lang-link.is-active{
    color: #1a1b1a;
    background: linear-gradient(180deg, #d4b779 0%, #c9a961 60%, #b89953 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    pointer-events: none;
    cursor: default;
}
.site-drawer-lang-link.is-active .site-drawer-lang-name{
    color: rgba(26, 27, 26, .55);
}
.site-drawer-lang-code{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
}
.site-drawer-lang-name{
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .35);
    line-height: 1;
    margin-top: 3px;
    text-transform: capitalize;
}
.site-drawer-lang-link:hover .site-drawer-lang-name{
    color: rgba(255, 255, 255, .55);
}

/* Backdrop */
.nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: 1100;
}
.nav-backdrop.is-open{
    opacity: 1;
    pointer-events: auto;
}
/* Při otevřeném drawer scroll body lock */


@media (max-width: 480px) {
.site-drawer{ max-width: 100%; }
.site-drawer-header{ padding: 18px 22px; }
.site-drawer-body{ padding: 24px 22px; }
.site-drawer-footer{ padding: 20px 22px 28px; }
.site-drawer-list a{ font-size: 19px; padding: 16px 4px; }
}

/* ===== zdroj: kinsley.css ===== */
/* =============================================================
   kinsley.css — redesign vrstvy dle šablony Kinsley (bslthemes)
   Světlý, vzdušný minimalismus: mátové pozadí, font Jost,
   modrý akcent, pill tlačítka, jemné zaoblené karty.
   Načítá se JAKO POSLEDNÍ → přepisuje luxury.css přes pořadí
   (žádné !important, žádné inline styly).
   ============================================================= */

/* ---------- 1) Token override (kaskáduje do celého webu) ---------- */
:root {
    /* Barvy */
    --c-primary:     #eba744;   /* oranžový (amber) akcent – CTA, aktivní */
    --c-primary-2:   #d8912f;   /* hover – tmavší amber */
    --c-accent:      #eba744;
    --c-on-primary:  #2a2c3c;   /* text na amber pozadí – tmavý pro čitelnost (bílá má nízký kontrast) */
    --c-secondary:   #383a4e;   /* nadpisy / silný text */
    --c-secondary-2: #2a2c3c;

    --c-bg:          #f2ffff;   /* pastelová máta – pozadí stránky */
    --c-bg-soft:     #ffffff;
    --c-cream:       #ffffff;
    --c-cream-2:     #e9f6f6;
    --c-ink:         #383a4e;
    --c-ink-soft:    #4a4d63;
    --c-muted:       #64688c;
    --c-line:        #e2ecec;
    --c-line-soft:   #edf4f4;

    /* Sytá zeleň rezervačního flow (vybraný pobyt v kalendáři, „nejvýhodnější" cena).
       --c-success je tlumená šalvěj, na odznak je málo čitelná. */
    --c-success-strong: #2e9e5b;

    /* Teplý akcent (hvězdičky/rating) — jediný „hotelový" detail */
    --c-gold:        #eba744;
    --c-gold-2:      #d8912f;
    --c-gold-light:  #f3c98a;
    --c-gold-dark:   #c98b2a;
    --grad-gold:     linear-gradient(135deg, #f0b968 0%, #eba744 45%, #d8912f 100%);

    /* Sekce „experience" — světlá varianta místo tmavého teal */
    --c-dark-teal:   #eef8f8;
    --c-very-dark:   #383a4e;

    /* Typografie — vše Jost (sans), žádný serif */
    --font-sans:    'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-serif:   'Jost', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Jost', -apple-system, 'Helvetica Neue', Arial, sans-serif;

    /* Zaoblení – Kinsley pill/rounded */
    --radius-sm: 8px;
    --radius:    10px;
    --radius-lg: 20px;
    --radius-pill: 50px;

    /* Velmi jemné difúzní stíny */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow:    0 2px 48px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.08);
}

/* ---------- 2) Základ ---------- */
body {
    background-color: var(--c-bg);
    color: var(--c-muted);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 1px;
}
p { color: var(--c-muted); line-height: 1.75; letter-spacing: 1px; }

/* Nadpisy – Jost 600, bez serifu, bez uppercase přebytku */
h1, h2, h3, h4, h5, h6,
.section-header-title, .card-title, .apt-title, .welcome-heading {
    font-family: var(--font-sans);
    color: var(--c-ink);
    font-weight: 600;
    letter-spacing: normal;
}

/* Eyebrow labely – jemné prostrkání */
.section-header-eyebrow, .card-eyebrow, .welcome-eyebrow, .eyebrow {
    color: var(--c-primary);
    letter-spacing: 2px;
    font-weight: 500;
}

a { color: var(--c-primary); }
a:hover { color: var(--c-primary-2); }

/* ---------- 3) Tlačítka – pill ---------- */
.btn,
a.btn,
button.btn {
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* Vyšší specificita — přebíjí zlatý gradient ze site.css (.btn.btn-primary).
   Tmavý text na amber (bílá má na světlé oranžové nízký kontrast). */
.btn.btn-primary,
.builder-cards-section .btn-primary,
.section-header--split .btn-primary,
.featured-apartment-actions .btn-primary {
    background: var(--c-primary);
    background-image: none;
    border: 1px solid var(--c-primary);
    color: var(--c-on-primary);
    letter-spacing: 2px;
    font-weight: 600;
}
.btn.btn-primary:hover,
.featured-apartment-actions .btn-primary:hover {
    background: var(--c-primary-2);
    border-color: var(--c-primary-2);
    color: var(--c-on-primary);
    filter: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(235, 167, 68, 0.25);
}
.btn-secondary {
    background-color: var(--c-secondary);
    border-color: var(--c-secondary);
    color: #fff;
}
.btn-secondary:hover { background-color: var(--c-secondary-2); border-color: var(--c-secondary-2); color: #fff; }
.btn-outline, .btn-book {
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
    background: transparent;
}
.btn-outline:hover, .btn-book:hover {
    background-color: var(--c-primary);
    color: #fff;
}
.btn-ghost { color: var(--c-ink); }

/* ---------- 4) Karty – bílé, zaoblené, měkký stín ---------- */
.card,
.testimonial-card,
.service-card,
.apt-card,
.apartment-card {
    background-color: var(--c-surface, #fff);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--c-line-soft);
}
.card:hover,
.apartment-card:hover,
.apt-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.card, .apartment-card, .apt-card { transition: transform .3s ease, box-shadow .3s ease; }
.card-image, .card-image img, .apt-card-image img, .apartment-card img {
    border-radius: var(--radius);
}
.card-title, .apt-title { color: var(--c-ink); font-weight: 600; }
.card-meta-text, .card-text, .apt-meta { color: var(--c-muted); }

/* Rating hvězdičky – teplý akcent */


/* ---------- 5) Header – bílý, čistý ---------- */
.site-header, .luxury-header, header.site-header {
    background-color: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--c-line-soft);
}
.site-header a, .luxury-header a { color: var(--c-ink); }
.site-header a:hover { color: var(--c-primary); }
.nav-link.is-active, .menu-item.is-active > a { color: var(--c-primary); }

/* ---------- 6) Sekce ---------- */
.section-header-eyebrow { color: var(--c-primary); }

.builder-cards-section--dark .section-header-title,
.builder-cards-section--dark h2,
.builder-cards-section--dark .card-title { color: var(--c-ink); }
.builder-cards-section--dark .section-header-text,
.builder-cards-section--dark .card-text { color: var(--c-muted); }


.testimonials-section--light { background-color: var(--c-bg); }

/* ---------- 7) Booking widget / hero ---------- */
.booking-widget, .booking-search-box {
    background-color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.booking-widget .btn-primary,
.booking-search-box .btn-primary { border-radius: var(--radius-pill); }

/* ---------- 8) Newsletter tmavá sekce → tmavě modrošedá ---------- */
.newsletter-section--dark { background-color: var(--c-secondary); }
.newsletter-section--dark .newsletter-submit {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    border-radius: var(--radius-pill);
}

/* ---------- 9) Footer – tmavě modrošedý místo černé ---------- */
.site-footer, footer.site-footer {
    background-color: var(--c-secondary);
    color: #c7cade;
}
.site-footer a { color: #c7cade; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-heading, .site-footer h4 { color: #fff; }

/* ---------- 10) Inputy – jemně zaoblené ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea, .custom-select, .flatpickr-input {
    border-radius: var(--radius-sm);
    border-color: var(--c-line);
}
input:focus, select:focus, textarea:focus { border-color: var(--c-primary); }

/* Ceny – akcent tmavou/silnou */

.featured-apartment-price .price-from,
.featured-apartment-price .price-suffix { color: var(--c-muted); }
.featured-apartment-price strong { color: var(--c-primary); }

/* Skrýt prázdné hlavičky apartment_card (u listingu se opakovaly „Náš apartmán") */
.accommodations-eyebrow:empty,
.accommodations-title:empty { display: none; }
.accommodations-header:has(.accommodations-title:empty):has(.accommodations-eyebrow:empty) {
    display: none;
}

/* Intro-heading styl (světlá Kinsley verze) je sloučen u zdroje —
   viz sekce „INTRO HEADING" výše. Zde už žádné override. */

/* ---------- 11) Světlé sekce (Kinsley airy look) ---------- */
/* Nadpisy o něco výraznější (Kinsley 500–600) */
.section-header-title,
.welcome-heading,
.accommodations-title,
.services-heading,
.newsletter-heading,
.card-title { font-weight: 500; }

/* Umírnit přehnané vertikální paddingy (200/120px → vzdušné, ale ne prázdné) */


/* Parallax obrázek – nižší, aby nebyl přebujelý */


/* Rezervační lišta – modrý CTA + akcenty (místo zlaté) */
.btn.booking-widget-bar-cta,
.booking-widget-bar-cta {
    background: var(--c-primary);
    background-image: none;
    border-color: var(--c-primary);
    color: var(--c-on-primary);
    font-weight: 600;
    border-radius: var(--radius-pill);
}
.btn.booking-widget-bar-cta:hover { background: var(--c-primary-2); filter: none; }
/* Na /rezervace se aktualizuje automaticky na pozadí (JS přidá .is-auto) —
   tlačítko Aktualizovat je pak zbytečné; bez JS zůstává viditelné jako fallback. */
.booking-widget-bar-form.is-auto .booking-widget-bar-cta { display: none; }






/* Ceny / akcenty na kartách */
.featured-apartment-image-label {
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--radius-pill);
    font-weight: 500;
}

/* Zmírnit vertikální mezery mezi stacked apartment kartami */
.featured-apartment { padding-top: 56px; padding-bottom: 56px; }
.featured-apartment-image img,
.featured-apartment-image { border-radius: var(--radius); }

/* Karty v experience sekci – zaoblené obrázky, jemný hover */
.builder-cards-section .card-image,
.builder-cards-section .card-image img { border-radius: var(--radius); }

/* ---------- 12) Obsahové stránky (ceník, řád, VOP) ---------- */
.page-content .lead, .lead {
    font-size: 18px;
    color: var(--c-ink);
    line-height: 1.6;
    margin-bottom: 24px;
}
.page-content .muted, .muted { color: var(--c-muted); font-size: 13px; }

.pricing-table-wrap { overflow-x: auto; margin: 24px 0 32px; }
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.pricing-table thead th {
    background: var(--c-secondary);
    color: #fff;
    font-weight: 500;
    text-align: left;
    padding: 16px 20px;
    font-size: 14px;
    letter-spacing: .3px;
}
.pricing-table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-ink);
    font-size: 15px;
    vertical-align: top;
}
.pricing-table tbody tr:nth-child(even) td { background: #f7fdfd; }
.pricing-table tbody td:first-child { font-weight: 500; }
.pricing-table .muted { display: block; color: var(--c-muted); font-size: 12px; margin-top: 4px; }
/* Název sloupce (apartmánu) v buňce — na širokém displeji stačí záhlaví,
   na mobilu se ale odroluje pryč a bez toho nepoznáš, čí cena to je. */
.pricing-table-colname { display: none; }
@media (max-width: 700px) {
    .pricing-table-colname {
        display: block;
        font-size: 11px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--c-primary);
        margin-bottom: 2px;
    }
    .pricing-table tbody td { padding: 12px 14px; }
}

/* Ceník generovaný z databáze (pricing_auto) — jedna buňka nese víc cenových
   pásem pod sebou; první (plná obsazenost) je ta hlavní, ostatní tlumené. */
.pricing-table-tier { display: block; }
.pricing-table-tier + .pricing-table-tier { margin-top: 8px; }
.pricing-table-tier--main { font-weight: 500; }
.pricing-table-unit { color: var(--c-muted); font-size: 13px; }
.pricing-table-pp {
    display: block;
    color: var(--c-primary);
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
}
.pricing-table-tier.muted { font-size: 14px; margin-top: 8px; }
.pricing-table-tier.muted .pricing-table-pp { color: var(--c-muted); }

/* ── PRICE MENU — nabídkový list služeb (builder element price_menu) ──
   Karta se skupinami a položkami: název … tečkovaná linka … cena.
   Stejný panelový vzor jako ostatní Kinsley karty (bílá, r10, jemný stín). */
.price-menu { max-width: 860px; margin: 0 auto; }
.price-menu-head { text-align: center; margin-bottom: 28px; }
.price-menu-eyebrow {
    display: block; color: var(--c-primary); font-size: 13px; letter-spacing: 2px;
    text-transform: uppercase; font-weight: 500; margin-bottom: 10px;
}
.price-menu-heading { font-size: clamp(26px, 3vw, 34px); font-weight: 600; margin: 0 0 8px; }
.price-menu-subheading { color: var(--c-muted); font-size: 15px; margin: 0; }
.price-menu-card {
    background: #fff; border-radius: 10px; padding: 30px 34px;
    box-shadow: 0 2px 48px rgba(0,0,0,.05);
}
.price-menu-group {
    font-size: 19px; font-weight: 600; color: var(--c-ink);
    margin: 26px 0 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--c-line-soft);
}
.price-menu-group:first-child { margin-top: 0; }
.price-menu-group-note { font-size: 14px; font-weight: 400; color: var(--c-muted); margin-left: 6px; }
.price-menu-row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 7px 0; font-size: 15px;
}
.price-menu-label { color: var(--c-ink); flex: 0 1 auto; min-width: 0; }
.price-menu-label-note { color: var(--c-muted); font-size: 13px; }
.price-menu-dots {
    flex: 1 1 24px; min-width: 24px;
    border-bottom: 2px dotted var(--c-line, #d9e3e3);
    transform: translateY(-4px);
}
.price-menu-price { color: var(--c-primary); font-weight: 600; white-space: nowrap; }
.price-menu-note { color: var(--c-muted); font-size: 13.5px; line-height: 1.6; margin: 6px 0 4px; }
.price-menu-footnote {
    max-width: 860px; margin: 14px auto 0; text-align: center;
    color: var(--c-muted); font-size: 13.5px; line-height: 1.6;
}
@media (max-width: 600px) {
    .price-menu-card { padding: 20px 16px; }
    .price-menu-row { font-size: 14px; }
    .price-menu-label-note { display: block; margin-top: 2px; }
}

/* Nadpisy uvnitř obsahových stránek */
.page-content h2 { font-size: 28px; margin: 32px 0 16px; }
.page-content h3 { font-size: 22px; margin: 28px 0 12px; }
.page-content h4 { font-size: 17px; margin: 20px 0 8px; }
.page-content ul { padding-left: 20px; }
.page-content li { margin-bottom: 8px; color: var(--c-muted); }

/* =============================================================
   KINSLEY KOMPONENTY (v2) — skutečná struktura předlohy
   ============================================================= */

/* ---------- HERO: hvězdy + velký nadpis + bílá pill lišta ---------- */
/* Hero: ŽÁDNÝ padding v CSS — spacing řídí výhradně builder (universal panel).
   Fotku + overlay maluje wrapper (.bldr-wrap-booking_search), padding fotku neořezává. */
.hero.hero-with-search { min-height: 0; display: flex; align-items: center; padding: 0; }
/* Fotku + overlay maluje wrapper → vnitřní hero a jeho overlay musí být průhledné */
.bldr-wrap-booking_search .hero.hero-with-search { background: transparent; }
.bldr-wrap-booking_search .hero.hero-with-search .hero-overlay { background: none; }
/* Ken Burns + parallax hero fotky (2026-09-03 přepsáno).
   Dřív animace měnila `background-size: 105% → 118% auto` přímo na wrapperu — sizing
   podle ŠÍŘKY, takže na mobilu a nižších monitorech byla fotka nižší než sekce a nahoře
   i dole zůstaly šedé pruhy. Teď fotku (i s overlay gradientem, přes `background: inherit`)
   maluje ::before s `cover` a animují se transformační vlastnosti `scale` / `translate`:
   fotka pokrývá celou výšku vždy, zoom i posun jsou jen nad rámec. */
.bldr-wrap-booking_search{
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.bldr-wrap-booking_search::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    scale: 1.06;
    translate: 0 0;
    animation: heroZoom 18s ease-in-out infinite alternate;
    will-change: scale, translate;
}
@keyframes heroZoom {
    from { scale: 1.06; }
    to   { scale: 1.18; }
}
/* Parallax: scroll-driven (Chrome/Edge). Posun ±2,5 % se vejde do rezervy scale ≥ 1.06. */
@supports (animation-timeline: scroll()) {
    .bldr-wrap-booking_search::before{
        animation: heroParallax linear both, heroZoom 18s ease-in-out infinite alternate;
        animation-timeline: scroll(root), auto;
        animation-range: 0 120vh, normal;
    }
    @keyframes heroParallax {
        from { translate: 0 2.5%; }
        to   { translate: 0 -2.5%; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .bldr-wrap-booking_search::before{ animation: none; scale: 1; translate: 0 0; }
}
/* Scroll-down myš: tečka uvnitř animovaně klesá (bob) */
@keyframes mouseBob {
    0%,100% { background-position: bottom 10px center; }
    50%     { background-position: bottom 2px center; }
}
.hero.hero-with-search .hero-content::after { animation: mouseBob 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .bldr-wrap-booking_search, .hero.hero-with-search .hero-content::after { animation: none; }
}
/* ---------- Mobil: nejdřív fotka, pod ní rezervační lišta (2026-09-10) ----------
   Lišta se čtyřmi poli má na telefonu přes 440 px a překryla celý srub — z fotky
   zbyla nahoře jen obloha. Obaly `.hero-copy` (nadpis) a `.hero-search` (lišta)
   proto na mobilu přestanou být průhledné a rozdělí hero na dvě části.

   Světlý pruh pod fotkou kreslí pseudoprvek `.hero-search::before`, který přesahuje
   na všechny strany. Díky tomu končí fotka PŘESNĚ tam, kde lišta začíná — nezávisle
   na tom, jaké odsazení má sekce nastavené ve stavebnici. Pruh leží nad ztmavením
   fotky (`.hero-overlay` má z-index 1, `.hero-content` 2), takže se závoj na světlý
   podklad nepřenáší. */
.hero.hero-with-search .hero-copy,
.hero.hero-with-search .hero-search { display: contents; }

@media (max-width: 767px) {
    /* Fotku kreslí ::before wrapperu přes CELOU výšku sekce, takže by v horním pásu
       byla vidět jen její horní část (obloha). Na mobilu se proto zkrátí na pás
       s nadpisem — s rezervou 160 px, kterou stejně překryje světlý pruh lišty.
       Rezerva je schválně velkorysá: kdyby byl ::before naopak KRATŠÍ než pás,
       zůstal by nad lištou světlý proužek. */
    .bldr-wrap-booking_search { --hero-mob-foto: 42vh; }
    .bldr-wrap-booking_search::before {
        bottom: auto;
        height: calc(var(--hero-mob-foto) + 160px);
    }
    .hero.hero-with-search {
        min-height: 0;
        padding: 0 16px;
        overflow: visible;     /* pruh musí přesáhnout přes spodní odsazení sekce; ořízne ho wrapper */
    }
    .hero.hero-with-search .hero-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: var(--hero-mob-foto, 42vh);   /* pás, ve kterém je srub vidět */
        padding: 20px 0 26px;
    }
    .hero.hero-with-search .hero-search {
        display: block;
        position: relative;
        width: 100%;
        align-self: stretch;   /* .hero-content je flex se `align-items: center` → jinak se obal smrskne na obsah */
        padding-top: 20px;
    }
    /* Světlý pruh pod fotkou. Kreslí ho pseudoprvek, ne samotný obal: přesahuje
       na všechny strany (i pod spodní hranu sekce) bez ohledu na to, kolik
       odsazení mají nadřazené prvky, a přitom nezužuje lištu uvnitř. Přebytek
       ořízne wrapper (`.bldr-wrap-booking_search` má overflow: hidden).
       Záporný z-index drží pruh pod lištou, ale nad ztmavením fotky —
       `.hero-content` je vlastní vrstva (position + z-index), takže se pruh
       nepropadne až pod ni. */
    .hero.hero-with-search .hero-search::before {
        content: "";
        position: absolute;
        left: -600px;
        right: -600px;
        top: 0;
        bottom: -960px;
        background: var(--c-bg, #f2ffff);
        z-index: -1;
    }
    .hero.hero-with-search .booking-widget--inline {
        margin: 0 auto;        /* přebíjí desktopový přesah -54px i mobilní margin-top 60px */
        max-width: 560px;
    }
}

.hero.hero-with-search .hero-content {
    max-width: 1268px; margin: 0 auto; text-align: center; padding: 0 24px; width: 100%;
}
.hero.hero-with-search .hero-title {
    color: #fff; font-family: var(--font-sans); font-weight: 600;
    font-size: clamp(2.6rem, 6vw, 78px); line-height: 1.2; letter-spacing: normal;
    margin: 0 0 10px;
}
.hero.hero-with-search .hero-title em { font-style: normal; color: var(--c-gold); }
.hero.hero-with-search .hero-subtitle {
    color: rgba(255,255,255,.85); font-size: 18px; margin: 0 auto 40px; max-width: 640px;
}
/* ---------- FEATURE KARTY (Kinsley: bílý panel + 4 vnitřní karty, překrývá hero) ---------- */
/* Spacing sekce (margin/padding) řídí builder per-section nastavení — v CSS jen vnitřní layout */
.builder-section.section-features { position: relative; z-index: 5; padding-left: 24px; padding-right: 24px; }
/* Vnější bílý panel – přesné Kinsley hodnoty */
.builder-section.section-features .builder-features {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    max-width: var(--container-max, 1240px); margin: 0 auto;
    background: #fff; border-radius: 10px; padding: 10px;
    box-shadow: 0 2px 48px rgba(0,0,0,.04);
}
/* Vnitřní karty – jemný mátový gradient */
.builder-section.section-features .feature-item {
    background: linear-gradient(180deg, #f7fdfd 0%, #eef9f9 100%);
    border-radius: 8px; padding: 30px 20px; text-align: center;
    transition: background .3s ease; margin: 0;
}
.builder-section.section-features .feature-item + .feature-item { margin-left: 4px; }
.builder-section.section-features .feature-item:hover { background: linear-gradient(180deg, #eef9f9 0%, #e4f4f4 100%); }
.builder-section.section-features .feature-icon {
    width: 64px; height: 64px; margin: 0 auto 14px; color: var(--c-primary);
    border: 1px solid rgba(235,167,68,.3); border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.builder-section.section-features .feature-icon svg { width: 30px; height: 30px; display: block; stroke-width: 1.4; }
.builder-section.section-features .feature-title { font-size: 16px; font-weight: 500; color: var(--c-ink); margin: 0 0 3px; letter-spacing: normal; }
.builder-section.section-features .feature-description { font-size: 13px; color: var(--c-muted); margin: 0; letter-spacing: .3px; }

/* ---------- SPLIT SEKCE (Kinsley: bílý zaoblený panel, foto flush + text s paddingem) ---------- */
.builder-section.section-text_image { padding-left: 24px; padding-right: 24px; }
.builder-section.section-text_image .text-image-wrap {
    /* minmax(0, 1fr) — holé `1fr` se nesmí zmenšit pod obsah, takže dlouhá URL
       v textu nafoukne sloupec nad šířku displeje a vytlačí obsah z okraje. */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch;
    max-width: var(--container-max, 1240px); margin: 0 auto; padding: 10px;
    background: #fff; border-radius: 10px; box-shadow: 0 2px 48px rgba(0,0,0,.04);
    overflow: hidden;
}
.builder-section.section-text_image .text-image-left { direction: rtl; }
.builder-section.section-text_image .text-image-left > * { direction: ltr; }
.builder-section.section-text_image .text-image-figure { margin: 0; }
.builder-section.section-text_image .text-image-figure img,
.builder-section.section-text_image .text-image-figure picture {
    width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: none; display: block;
}
.builder-section.section-text_image .text-image-text {
    display: flex; flex-direction: column; justify-content: center;
    padding: 40px 48px;
}
/* Dva splity za sebou = JEDEN velký banner: fotky se kříží ve špičce, žádná mezera */
/* Pár bannerů = jeden blok. Kulaté rohy PŘÍMO NA FOTKÁCH:
   ř.1 (foto vlevo) pouze levý-horní; ř.2 (foto vpravo) pouze pravý-spodní.
   Vše ostatní ostré — fotky se kříží ve špičce. */
.builder-section.section-text_image:has(+ .builder-section.section-text_image) .text-image-wrap {
    border-radius: 10px 0 0 0; padding-bottom: 0;
}
.builder-section.section-text_image + .builder-section.section-text_image .text-image-wrap {
    border-radius: 0 0 10px 0; padding-top: 0;
}
.builder-section.section-text_image:has(+ .builder-section.section-text_image) .text-image-figure img,
.builder-section.section-text_image:has(+ .builder-section.section-text_image) .text-image-figure picture,
.builder-section.section-text_image + .builder-section.section-text_image .text-image-figure img,
.builder-section.section-text_image + .builder-section.section-text_image .text-image-figure picture {
    border-radius: 0;
}
.builder-section.section-text_image:has(+ .builder-section.section-text_image) .text-image-figure img {
    border-top-left-radius: 10px;
}
.builder-section.section-text_image + .builder-section.section-text_image .text-image-figure img {
    border-bottom-right-radius: 10px;
}
.builder-section.section-text_image .text-image-text h2 {
    font-size: 38px; font-weight: 600; color: var(--c-ink);
    line-height: 1.2; margin: 0 0 20px; letter-spacing: normal;
}
.builder-section.section-text_image .text-image-content { color: var(--c-muted); line-height: 1.75; font-size: 15px; letter-spacing: 1px; }
.builder-section.section-text_image .text-image-content p { margin: 0 0 14px; }
.builder-section.section-text_image .text-image-content .btn { margin-top: 14px; align-self: flex-start; }

/* ---------- STATISTIKY (Kinsley: bílý panel + mátové karty jako features) ---------- */
.builder-section.section-stats { padding-left: 24px; padding-right: 24px; }
.builder-section.section-stats .builder-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    max-width: var(--container-max, 1240px); margin: 0 auto; padding: 10px; text-align: center;
    background: #fff; border-radius: 10px; box-shadow: 0 2px 48px rgba(0,0,0,.04);
}
.builder-section.section-stats .stat-item {
    position: relative; padding: 34px 20px;
    background: linear-gradient(180deg, #f7fdfd 0%, #eef9f9 100%); border-radius: 8px;
}
.builder-section.section-stats .stat-item + .stat-item { margin-left: 4px; }
.builder-section.section-stats .stat-number { font-size: 44px; font-weight: 700; color: var(--c-primary); line-height: 1; }
.builder-section.section-stats .stat-suffix { font-size: 22px; }
.builder-section.section-stats .stat-label { margin-top: 10px; color: var(--c-ink); font-size: 16px; font-weight: 600; letter-spacing: normal; }

/* ---------- Centrované sekční nadpisy (bold Kinsley) ---------- */
/* (intro-heading-title je sloučen u zdroje — viz sekce „INTRO HEADING") */
.builder-cards-section .section-header-title,
.services-section .section-header-title,
.testimonials-section .section-header-title,
.builder-faq-section .section-header-title,
.newsletter-section .section-header-title { font-weight: 600; font-size: 38px; line-height: 1.2; letter-spacing: normal; margin-bottom: 20px; }
/* Sekční subtitle pod nadpisem – muted, centrovaný */
.intro-heading-section .intro-heading-subtitle,
.section-header-text { color: var(--c-muted); font-size: 15px; line-height: 1.75; letter-spacing: 1px; max-width: 640px; margin-left: auto; margin-right: auto; }
/* Eyebrow nad sekčním nadpisem – modrý, malý, prostrkaný */
/* (intro-heading-eyebrow je sloučen u zdroje — viz sekce „INTRO HEADING") */
.section-header-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--c-primary); margin-bottom: 12px; }

/* Karty zážitků – zaoblené, zlatý pill štítek přes obrázek */
/* Karta zážitku: bílý panel s vnitřním paddingem (Kinsley room card) */
.builder-cards-section .card { position: relative; border-radius: 10px; overflow: hidden; background: #fff; padding: 10px; }
.builder-cards-section .card-image { border-radius: 8px; overflow: hidden; }
/* Zlatý štítek PŘES roh fotky (Kinsley „View from the sea") */
.builder-cards-section .card-eyebrow {
    position: absolute; top: 24px; right: 24px; z-index: 2; margin: 0;
    display: inline-block; background: var(--c-gold); color: #fff; font-weight: 500;
    font-size: 12px; letter-spacing: .5px; padding: 5px 14px; border-radius: 4px; text-transform: none;
}
.builder-cards-section .card-body { padding: 20px 14px 14px; }

/* ---------- HERO booking pole: čisté na bílé liště ---------- */
.hero.hero-with-search .booking-widget--inline .booking-widget-field label,
.hero.hero-with-search .booking-widget--inline .booking-widget-field .bw-counter-label {
    position: static; transform: none; top: auto; left: auto;
    font-family: var(--font-sans); font-size: 12px; font-weight: 500;
    color: var(--c-muted); letter-spacing: .3px; margin-bottom: 4px;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field { position: relative; padding: 6px 22px; }
.hero.hero-with-search .booking-widget--inline .booking-widget-field .flatpickr-altinput-sized,
.hero.hero-with-search .booking-widget--inline .booking-widget-field input.form-control,
.hero.hero-with-search .booking-widget--inline .booking-widget-field input,
.hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select,
.hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select-trigger {
    border: none; background: transparent; box-shadow: none; padding: 0; margin: 0;
    color: var(--c-ink); font-size: 15px; font-weight: 500; height: auto; min-height: 0; width: 100%;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select-label { color: var(--c-ink); }
.hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select-chevron { color: var(--c-muted); }
.hero.hero-with-search .booking-widget--inline .booking-widget-field input::placeholder { color: var(--c-muted); }
/* Nativní select je nahrazen custom-selectem → v hero liště úplně skrýt */
.hero.hero-with-search .booking-widget-field select.dba-custom-select-native-hidden { display: none; }

/* =============================================================
   PIXEL-MATCH v3 — přesné hodnoty vytažené z kinsley.bslthemes.com
   ============================================================= */
/* Menu: bez uppercase, 15px, ls 1px, weight 400 (Kinsley nav) */
.site-nav-inline a, .site-nav a, .luxury-nav a {
    text-transform: none; font-size: 15px; letter-spacing: 1px; font-weight: 400;
}
/* Tlačítka: přesné Kinsley rozměry (15px/400/ls2, výška 50, padding 0 30, radius 50) */
.btn, a.btn, button.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 50px; padding: 0 30px; line-height: 1;
    font-size: 15px; text-transform: none;
}
.btn-lg { min-height: 56px; padding: 0 38px; }
.btn-sm { min-height: 40px; padding: 0 22px; font-size: 13px; }
/* "Book now" v hlavičce (header CTA) = amber pill, tmavý text pro čitelnost */
.header-cta, .site-header .btn-book, .header-book-btn {
    background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); font-weight: 600;
}


/* ---------- Apartmány (rooms) – kompaktnější, méně whitespace ---------- */
.featured-apartment { padding-top: 48px; padding-bottom: 48px; }
.featured-apartment-grid { align-items: center; gap: 48px; }
.featured-apartment-image { max-height: 430px; border-radius: var(--radius-lg); overflow: hidden; }
.featured-apartment-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); }


/* ---------- IMAGE SLIDER (Kinsley rooms gallery): zlaté štítky přes roh fotky ---------- */
.image-slider-section .swiper-slide figure, .image-slider-section figure { position: relative; margin: 0; }
.image-slider-section .image-slider-caption {
    position: absolute; top: 20px; right: 20px; z-index: 2;
    background: var(--c-gold); color: #fff; font-size: 12px; font-weight: 500;
    letter-spacing: .5px; padding: 5px 14px; border-radius: 4px;
}
.image-slider-section img { border-radius: 10px; }

/* ---------- Experience karty – kompaktní (Kinsley room card: foto nahoře, text pod) ---------- */
.builder-cards-section .section-header { text-align: center; }
.builder-cards-section .section-header-eyebrow,
.builder-cards-section .section-header h2 { text-align: center; }
.builder-cards-section .card { display: block; }
.builder-cards-section .card-image {
    width: 100%; height: 230px; border-radius: 8px;
    background-size: cover; background-position: center;
}
.builder-cards-section .card-image picture { display: block; width: 100%; height: 100%; }
.builder-cards-section .card-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.builder-cards-section .card-body { padding: 24px; }
.builder-cards-section .card-text { font-size: 14px; line-height: 1.7; }
/* padding sekce cards řídí builder (default 100/100) */

/* =============================================================
   PIXEL-MATCH v4 — hlavička solid bílá + footer (Kinsley)
   ============================================================= */
/* Hlavička VŽDY solid bílá (Kinsley nemá průhlednou nad hero) */
.site-header.site-header--transparent,
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--c-line-soft);
    position: relative;
}
/* Tmavý text v hlavičce (nad bílou) */
.site-header--transparent .site-nav-inline a,
.site-header--transparent .site-header-phone,
.site-header--transparent .site-logo-text,
.site-header--transparent .site-header-lang a,
.site-header .site-nav-inline a,
.site-header .site-header-phone { color: var(--c-ink); }
/* Jazykový přepínač — dřívější pravidla ho barvila bíle podle původní průhledné
   hlavičky, takže aktivní jazyk na bílém pozadí zmizel. Selektor výše míří na
   `.site-header-lang`, což je třída, kterou šablona nepoužívá — skutečná je
   `.lang-switcher`. Aktivní jazyk musí být poznat, proto akcentová barva. */
.site-header .lang-switcher,
.site-header .lang-switcher a { color: var(--c-muted); }
.site-header .lang-switcher a.is-active { color: var(--c-primary); font-weight: 600; }
.site-header .lang-switcher a:hover { color: var(--c-ink); }
.site-header .lang-sep { color: var(--c-line); }
.site-header .site-logo-text { color: var(--c-ink); }
.site-header .site-logo-subtext { color: var(--c-muted); }
.site-header .site-nav-inline a:hover { color: var(--c-primary); }
/* CTA "Rezervovat" v hlavičce = amber pill (Kinsley "Book now"), tmavý text pro čitelnost */
.site-header .site-header-cta, .site-header a.btn-book, .site-header .header-cta {
    background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary);
    border-radius: var(--radius-pill); min-height: 50px; padding: 0 28px; font-weight: 600;
}
.site-header .site-header-cta:hover { background: var(--c-primary-2); color: var(--c-on-primary); }


/* Footer nadpisy 20px/600/světlé/bez uppercase (Kinsley) */
.site-footer .footer-heading, .site-footer h3, .site-footer h4, .site-footer h5 {
    font-size: 20px; font-weight: 600; color: #ecfafb; text-transform: none; letter-spacing: normal; margin-bottom: 18px;
}
.site-footer a, .site-footer p, .site-footer li { font-size: 15px; color: #c7cade; letter-spacing: .5px; }
.site-footer a:hover { color: #fff; }

/* ---------- Podstránky – hero nadpisy bold (Kinsley page titles) ---------- */
.apt-hero .hero-title, .page-hero-title { font-weight: 600; font-family: var(--font-sans); letter-spacing: normal; }
.apt-hero .hero-eyebrow, .page-hero .page-hero-eyebrow { letter-spacing: 2px; font-weight: 500; }
/* Obsahové stránky – konzistentní typografie */
.page-content h2 { font-size: 32px; font-weight: 600; }
.page-content h3 { font-size: 22px; font-weight: 600; }
.page-content, .page-content p, .page-content li { font-size: 15px; line-height: 1.75; letter-spacing: 1px; }

/* =============================================================
   HERO — scroll-down myš (search/hvězdy/subtitle viz autoritativní blok níže)
   ============================================================= */
.hero.hero-with-search .hero-subtitle { font-size: 16px; margin: 0 auto 34px; }
/* Scroll-down myš pod lištou */
.hero.hero-with-search .hero-content::after {
    content: "Scroll down"; display: block; margin-top: 40px; color: rgba(255,255,255,.7);
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    padding-bottom: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' viewBox='0 0 22 34' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2'%3E%3Crect x='1' y='1' width='20' height='32' rx='10'/%3E%3Cline x1='11' y1='7' x2='11' y2='13' stroke='rgba(255,255,255,0.9)' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: bottom center;
}

/* =============================================================
   PIXEL-MATCH v6 — hlavička: logo vlevo / menu střed / CTA vpravo (Kinsley)
   ============================================================= */
.site-header .site-header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; }
/* Logo vlevo */
.site-header .site-logo { order: -1; margin: 0; text-align: left; }
/* Hamburger skrýt na desktopu (Kinsley má plné inline menu) */
@media (min-width: 992px) {
    .site-header .nav-burger, .site-header .nav-burger--always { display: none; }
    /* Menu absolutně na střed hlavičky */
    .site-header .site-nav-inline {
        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
        display: flex; gap: 34px; align-items: center;
    }
    .site-header .site-header-left { position: static; }
}

/* =============================================================
   PIXEL-MATCH v7 — zrušit kurzívu nadpisů (bez !important, specificitou)
   Přebíjí .builder-faq-section .section-header h2 (site.css 4095, 0-2-1)
   ============================================================= */
.builder-faq-section .section-header h2,
.testimonials-section .section-header h2,
.services-section .section-header h2,
.builder-cards-section .section-header h2,
.builder-cards-section:not(.builder-cards-section--dark) .section-header h2,
.newsletter-section .section-header h2,
.section-header h2 {
    font-style: normal; font-weight: 600; font-size: 38px; line-height: 1.2;
    letter-spacing: normal; font-family: var(--font-sans); color: var(--c-ink);
}
/* Card titles také bez kurzívy (byly Cormorant italic) */
.card-title, .builder-cards-section .card-title, .testimonial-card-quote {
    font-style: normal; font-family: var(--font-sans);
}
.testimonial-card-quote { font-style: italic; } /* citace může zůstat kurzívou */
h1, h2, h3, h4, h5, h6 { font-style: normal; }

/* =============================================================
   PIXEL-MATCH v8 — TOP BAR přesně dle Kinsley
   výška 80px, fixed, bez tmavého ::before stínu, bez telefonu,
   aktivní podtržítko na spodní hraně headeru
   ============================================================= */
/* Fixní hlavička, výška 80px, čistá bílá, jemný spodní okraj */
.site-header, .site-header.site-header--transparent {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    background: #fff; border-bottom: 1px solid var(--c-line-soft); box-shadow: none;
}
/* Zrušit tmavý gradientový overlay (černý stín) transparentní hlavičky */
.site-header::before, .site-header::after,
.site-header.site-header--transparent::before,
.site-header.site-header--transparent::after { display: none; content: none; }
/* Výška 80px, žádné velké paddingy */
.site-header .site-header-inner { min-height: 80px; height: 80px; padding-top: 0; padding-bottom: 0; }
/* Obsah stránky pod fixní hlavičku */
body { padding-top: 80px; }
/* Telefon v hlavičce pryč (dle zadání) */
.site-header .site-header-phone { display: none; }
/* Nav položky plní celou výšku headeru → podtržítko na spodní hraně */
@media (min-width: 992px) {
    .site-header .site-nav-inline { height: 80px; top: 0; transform: translateX(-50%); align-items: stretch; }
    .site-header .site-nav-inline a { height: 80px; display: inline-flex; align-items: center; position: relative; }
}
/* Aktivní podtržítko: zlaté, výška 4px (Kinsley), na spodní hraně headeru */
.site-header .site-nav-inline a.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: var(--c-gold); border-radius: 0;
}
/* Hover: jemné světlejší podtržítko (Kinsley má jen na aktivní; hover ponechán decentní) */
.site-header .site-nav-inline a:not(.is-active):hover::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: var(--c-gold-light);
}

/* ---------- LOGO: emblém (silueta srubu) + „Srub Výtoňka", horizontálně, vycentrované ---------- */
.site-header .site-logo {
    display: inline-flex; align-items: center; gap: 12px; height: 80px;
    text-decoration: none; line-height: 1;
}
.site-header .site-logo-emblem { height: 40px; width: auto; display: block; flex: 0 0 auto; }
.site-header .site-logo-text {
    font-family: var(--font-sans); font-size: 25px; font-weight: 600;
    color: var(--c-ink); letter-spacing: .3px; line-height: 1; white-space: nowrap;
}
.site-header .site-logo-stars { display: none; }

/* ---------- CTA „Rezervovat" s ikonou (bookmark, Kinsley „Book now") ---------- */
.site-header .btn-book {
    display: inline-flex; align-items: center; gap: 8px;
    height: 50px; min-height: 50px; padding: 0 26px; font-size: 15px; letter-spacing: .5px;
    background: var(--c-primary); border: 0; color: #fff; border-radius: var(--radius-pill);
    text-transform: none; white-space: nowrap;
}
.site-header .btn-book:hover { background: var(--c-primary-2); color: #fff; }
.site-header .btn-book::before {
    content: ""; width: 16px; height: 16px; flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}

/* Fix: .site-header--transparent měl min-height:121px (luxury.css) → 80px */
.site-header.site-header--transparent, .site-header--transparent { min-height: 80px; }
.site-header--transparent .site-header-inner { min-height: 80px; height: 80px; }

/* ---------- NAV DROPDOWN (vyskakovací menu, Kinsley styl) ---------- */
.site-header .site-nav-inline .site-nav-item {
    position: relative; height: 80px; display: flex; align-items: center;
}
.site-header .site-nav-inline .site-nav-item > a { height: 80px; }
/* caret u položek s dropdownem */
.site-header .site-nav-caret {
    display: inline-block; width: 8px; height: 8px; margin-left: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); opacity: .55; transition: transform .2s ease;
}
.site-header .site-nav-item.has-dropdown:hover .site-nav-caret { transform: translateY(0) rotate(45deg); opacity: .9; }
/* dropdown panel */
.site-header .site-nav-dropdown {
    position: absolute; top: 78px; left: 50%; transform: translateX(-50%) translateY(10px);
    min-width: 200px; background: #fff; border-radius: 5px; padding: 10px;
    box-shadow: 0 2px 48px rgba(0,0,0,.08);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease;
    z-index: 1001;
}
.site-header .site-nav-item.has-dropdown:hover .site-nav-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.site-header .site-nav-dropdown a {
    display: block; height: auto; padding: 9px 16px; border-radius: 4px;
    font-size: 15px; letter-spacing: normal; color: var(--c-ink); white-space: nowrap; text-align: left;
}
.site-header .site-nav-dropdown a:hover { background: var(--c-cream-2); color: var(--c-primary); }
.site-header .site-nav-dropdown a::after { display: none; } /* žádné podtržítko v dropdownu */

/* =============================================================================
   HERO — HVĚZDY + REZERVAČNÍ LIŠTA (přesně dle Kinsley) — autoritativní
   ============================================================================= */
/* ---- Hvězdy: pill 120×23 rgba(255,255,255,.2) r15, 5 zlatých hvězd ---- */
.hero.hero-with-search .hero-content::before {
    content: ""; display: inline-block; width: 120px; height: 23px; margin: 0 auto 24px;
    background-color: rgba(255,255,255,.2); border-radius: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='81' height='13' viewBox='0 0 81 13' fill='%23eba744'%3E%3Cdefs%3E%3Cpath id='s' d='M6.5 0l1.7 4.3 4.6.3-3.5 3 1.1 4.5-3.4-2.5-3.4 2.5 1.1-4.5-3.5-3 4.6-.3z'/%3E%3C/defs%3E%3Cuse href='%23s' x='0'/%3E%3Cuse href='%23s' x='17'/%3E%3Cuse href='%23s' x='34'/%3E%3Cuse href='%23s' x='51'/%3E%3Cuse href='%23s' x='68'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; letter-spacing: 0;
}

/* ---- Bílá pill lišta ---- */
.hero.hero-with-search .booking-widget--inline {
    background: #fff; border-radius: 100px; box-shadow: 0 0 0 10px rgba(255,255,255,.15);
    display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 26px; max-width: 1220px; margin: 0 auto;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-fields { display: flex; flex: 1; align-items: center; gap: 0; }
/* Field = label vlevo + mátový input box vpravo */
.hero.hero-with-search .booking-widget--inline .booking-widget-field {
    display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 0 14px; border: 0; flex: 1; position: relative;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field label,
.hero.hero-with-search .booking-widget--inline .booking-widget-field .bw-counter-label {
    position: static; transform: none; top: auto; left: auto; margin: 0; flex: 0 0 auto;
    font: 400 15px/1 var(--font-sans); color: var(--c-muted); letter-spacing: 1px; white-space: nowrap;
}
/* Mátový input box (#ecfafb, r10, v50) */
.hero.hero-with-search .booking-widget--inline .booking-widget-field input,
.hero.hero-with-search .booking-widget--inline .booking-widget-field .flatpickr-altinput-sized,
.hero.hero-with-search .booking-widget--inline .booking-widget-field input.form-control,
.hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select,
.hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select-trigger {
    background-color: #ecfafb; border: 0; border-radius: 10px; height: 50px; min-height: 50px;
    padding: 0 18px; color: var(--c-muted); font: 400 15px var(--font-sans); box-shadow: none;
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center;
}
.hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select-label { color: var(--c-muted); }
.hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select-chevron { color: var(--c-muted); margin-left: auto; }
/* Kalendářová ikona u datumových polí — ::after na field (imunní vůči input pravidlům) */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--date { position: relative; }
.hero.hero-with-search .booking-widget--inline .booking-widget-field--date input { padding-right: 42px; text-align: left; }
.hero.hero-with-search .booking-widget--inline .booking-widget-field--date::after {
    content: ""; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364688c' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}
/* Text datumu nesmí podtéct pod ikonu kalendáře (delší DE/EN formáty na užších
   šířkách). Selektor s třídou altinputu (6 tříd) přebíjí obecné mátové pravidlo
   výše (5 tříd), které nastavovalo padding 0 18px. */
.hero.hero-with-search .booking-widget--inline .booking-widget-field--date input.form-control,
.hero.hero-with-search .booking-widget--inline .booking-widget-field--date .flatpickr-altinput-sized,
.hero.hero-with-search .booking-widget--inline .booking-widget-field--date input {
    padding-right: 44px;
}
/* V řádkovém režimu potřebují datumová pole víc místa než selecty s jednou
   číslicí — jinak se dlouhý datum (DE) tlačil pod ikonu. */
@media (min-width: 1101px) {
    .hero.hero-with-search .booking-widget--inline .booking-widget-field--date { flex: 1.25 1 0; }
    .hero.hero-with-search .booking-widget--inline .booking-widget-field--select { flex: 0.85 1 0; }
    /* Trigger selectu se nesmí smáčknout na nulu vedle dlouhého labelu
       („Erwachsene") — hodnota (1–2 číslice) + šipka potřebují min. šířku. */
    .hero.hero-with-search .booking-widget--inline .booking-widget-field--select .dba-custom-select-trigger { min-width: 72px; }
}
/* Round modré search tlačítko */
.hero.hero-with-search .booking-widget--inline .btn.btn-primary {
    width: 56px; min-width: 56px; height: 56px; min-height: 56px; padding: 0; flex: 0 0 auto;
    border-radius: 50%; font-size: 0; background: var(--c-primary); border: 0; position: relative; overflow: hidden;
}
.hero.hero-with-search .booking-widget--inline .btn.btn-primary > span { font-size: 0; opacity: 0; }
.hero.hero-with-search .booking-widget--inline .btn.btn-primary::after {
    content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}

/* ---- RESPONSIVE (postupné skákání pod sebe) ---- */
@media (max-width: 1500px) {
    .hero.hero-with-search .booking-widget--inline { max-width: 1100px; }
    .hero.hero-with-search .booking-widget--inline .booking-widget-field { padding: 0 10px; gap: 8px; }
}
@media (max-width: 1300px) {
    .hero.hero-with-search .booking-widget--inline .booking-widget-field label { font-size: 14px; }
    .hero.hero-with-search .booking-widget--inline .booking-widget-field input,
    .hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select { padding: 0 12px; }
}
@media (max-width: 1100px) {
    /* pill se rozšíří na 2 řady polí. Widget je v tomto pásmu flex COLUMN
       (CozyStay @1100) a má jen 2 děti (fields grid + tlačítko) → wrap NESMÍ
       být zapnutý: při omezené výšce hero by column-wrap rozlámal obsah do
       sloupců vedle sebe (tlačítko uteklo doprava mimo kartu). */
    .hero.hero-with-search .booking-widget--inline { flex-wrap: nowrap; border-radius: 28px; padding: 16px; max-width: 640px; width: calc(100% - 32px); }
    .hero.hero-with-search .booking-widget--inline .booking-widget-fields { flex-wrap: wrap; gap: 12px; }
    .hero.hero-with-search .booking-widget--inline .booking-widget-field { flex: 1 1 45%; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; }
    .hero.hero-with-search .booking-widget--inline .booking-widget-field input,
    .hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select { width: 100%; }
    /* max-width:none ruší strop 236px z E027 bloku (jinak tlačítko nebylo přes
       celou šířku a lepilo se k pravému okraji přes pole Kinder/Děti).
       POZOR: widget je v tomto pásmu flex COLUMN → flex-basis by znamenal
       VÝŠKU (tlačítko pak uteklo do druhého sloupce vpravo). Proto flex:0 0 auto
       + width:100%; stretch drží šířku v cross ose. */
    .hero.hero-with-search .booking-widget--inline .btn.btn-primary {
        width: 100%; min-width: 0; max-width: none; flex: 0 0 auto;
        height: 56px; min-height: 56px;
        border-radius: 50px; margin: 6px 0 0; align-self: stretch !important;
    }
    .hero.hero-with-search .booking-widget--inline .btn.btn-primary::after { background-position: center; }
}
@media (max-width: 600px) {
    /* vše pod sebe, plná šířka */
    .hero.hero-with-search .booking-widget--inline { max-width: 100%; }
    .hero.hero-with-search .booking-widget--inline .booking-widget-field { flex: 1 1 100%; }
    .hero.hero-with-search .hero-title { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* =============================================================================
   PLÁN300 — G/H/I/J/K/L/M/N/O (Kinsley komponenty, jednotný panelový vzor)
   ============================================================================= */

/* ---------- G. CTA (151–165): tlačítko s bílým prstencem ---------- */
.builder-cta { text-align: center; }
.builder-cta .container { max-width: 860px; margin: 0 auto; }
.builder-cta h2 { font-size: 38px; font-weight: 600; margin: 0 auto 16px; text-align: center; }
.builder-cta .builder-cta-text { max-width: 640px; margin: 0 auto 28px; color: var(--c-muted); }
.builder-cta .btn-primary { box-shadow: 0 0 0 8px #fff; }
.builder-cta .btn-primary:hover { box-shadow: 0 0 0 8px #fff, 0 8px 20px rgba(235,167,68,.25); }

/* ---------- H. SLIDER (166–190): full-bleed, rámečky, střídavé výšky, kulaté šipky ---------- */
.image-slider-section .container { max-width: none; padding: 0; }
.image-slider-section .swiper { padding: 30px 0 40px; overflow: hidden; }
.image-slider-section .swiper-slide {
    background: #fff; border-radius: 10px; padding: 10px;
    box-shadow: 0 2px 48px rgba(0,0,0,.06);
    height: auto; align-self: center; box-sizing: border-box;
}
.image-slider-section .swiper-slide figure { position: relative; margin: 0; }
.image-slider-section .swiper-slide img {
    display: block; width: 100%; height: 360px; object-fit: cover; border-radius: 8px;
}
/* fotky jednotné výšky (dle předlohy) */
/* šipky: kulaté bílé 48px, ink šipka, hover modrá */
.image-slider-section .swiper-button-prev,
.image-slider-section .swiper-button-next {
    width: 48px; height: 48px; border-radius: 50%; background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.12); color: var(--c-ink);
    transition: background .2s ease, color .2s ease;
}
.image-slider-section .swiper-button-prev::after,
.image-slider-section .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.image-slider-section .swiper-button-prev:hover,
.image-slider-section .swiper-button-next:hover { background: var(--c-primary); color: #fff; }
.image-slider-section .swiper-button-prev,
.image-slider-section .swiper-button-next { display: none; }
/* zlaté štítky přes roh (caption) */
.image-slider-section .image-slider-caption {
    position: absolute; top: 20px; right: 20px; z-index: 2;
    background: var(--c-gold); color: #fff; font-size: 12px; font-weight: 500;
    letter-spacing: .5px; padding: 5px 14px; border-radius: 4px;
}

/* ---------- I. ZÁŽITKY (191–225): hover rozbalení detailu s tlačítkem ---------- */
/* Hover (Kinsley): popisek + tlačítko se ANIMOVANĚ zobrazí PŘÍMO NA FOTCE
   (tmavý overlay na obrázku, text uprostřed, modrý pill pod ním).
   Text i tlačítko jsou absolutní → nerezervují místo → žádná díra pod kartami. */
.builder-cards-section .card-grid { align-items: start; }
.builder-cards-section .card { transition: transform .3s ease, box-shadow .3s ease; }
.builder-cards-section .card-image { position: relative; }
.builder-cards-section .card-image::after {
    content: ""; position: absolute; inset: 0; border-radius: 8px;
    background: linear-gradient(rgba(24,28,44,.45), rgba(24,28,44,.78));
    opacity: 0; transition: opacity .3s ease;
}
.builder-cards-section .card:hover .card-image::after,
.builder-cards-section .card:focus-within .card-image::after { opacity: 1; }
/* popisek přes fotku (fotka: top 10px karty, výška 230) */
.builder-cards-section .card-text {
    position: absolute; top: 10px; left: 10px; right: 10px; height: 230px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    margin: 0; padding: 18px 26px 64px; z-index: 2; pointer-events: none;
    color: #fff; font-size: 14px; line-height: 1.65; letter-spacing: .3px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
}
/* tlačítko přes fotku, pod textem — konzistentní modrý pill (bez borderu/podtržení) */
.builder-cards-section .card-body .btn-ghost {
    position: absolute; z-index: 3; left: 50%; top: 172px;
    transform: translateX(-50%) translateY(10px);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-primary); color: #fff; border: 0; border-radius: var(--radius-pill);
    min-height: 40px; padding: 0 22px; font-size: 13px; letter-spacing: 1px;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease .06s, transform .3s ease .06s, background .2s ease;
}
.builder-cards-section .card-body .btn-ghost::after { display: none; }
.builder-cards-section .card-body .btn-ghost span { color: #fff; }
.builder-cards-section .card:hover .card-text,
.builder-cards-section .card:focus-within .card-text {
    opacity: 1; transform: translateY(0);
}
.builder-cards-section .card:hover .btn-ghost,
.builder-cards-section .card:focus-within .btn-ghost {
    opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.builder-cards-section .card-body .btn-ghost:hover { background: var(--c-primary-2); color: #fff; }
.builder-cards-section .card:hover,
.builder-cards-section .card:focus-within {
    transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.10);
}
/* (styl tlačítka karty definován v hover-overlay bloku níže) */
.builder-cards-section .card-meta { margin-top: 8px; }
.builder-cards-section .card-meta-text { font-size: 12px; }

/* ---------- J. NOVINKY (226–240) ---------- */
/* Karta + grid jsou sdílené: builder výpis, archiv /novinky i „Další novinky" v detailu */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1240px; margin: 0 auto; }
.news-card-image { height: 210px; border-radius: 8px; background-size: cover; background-position: center; }
.news-card-image--placeholder { background: linear-gradient(135deg, var(--c-cream-2) 0%, #dff1f1 100%); }
.news-card-link { display: block; color: inherit; text-decoration: none; }
.news-card-cta { font-size: 13px; color: var(--c-primary); letter-spacing: .5px; font-weight: 500; }
.news-card {
    background: #fff; border-radius: 10px; padding: 10px;
    box-shadow: 0 2px 48px rgba(0,0,0,.04); transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.10); }
.news-card img { width: 100%; height: 210px; object-fit: cover; border-radius: 8px; display: block; }
.news-card-body { padding: 18px 14px 14px; }
.news-card-date {
    position: absolute; top: 24px; right: 24px; z-index: 2;
    background: var(--c-gold); color: #fff; font-size: 12px; font-weight: 500;
    padding: 5px 12px; border-radius: 4px;
}
.news-card h3, .news-card-title { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.news-card p { font-size: 14px; color: var(--c-muted); margin: 0 0 10px; }
.builder-news-eyebrow { display: block; text-align: center; color: var(--c-primary); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; margin-bottom: 12px; }
.builder-news-heading { text-align: center; font-size: 38px; font-weight: 600; margin-bottom: 40px; }
.builder-news-cta-wrap { text-align: center; margin-top: 32px; }

/* Archiv /novinky */
.news-hero { text-align: center; padding: 34px 0 6px; }
.news-hero-eyebrow { display: block; color: var(--c-primary); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; margin-bottom: 12px; }
.news-hero-title { font-family: var(--font-sans); font-size: clamp(36px, 4.5vw, 52px); font-weight: 600; letter-spacing: normal; line-height: 1.15; }
.news-hero-subtitle { color: var(--c-muted); font-size: 16px; margin-top: 10px; }
.news-list-section { padding: 36px 0 84px; }
.news-empty { text-align: center; color: var(--c-muted); padding: 50px 0; }

/* Detail novinky */
.news-detail-cover {
    position: relative; min-height: 420px;
    background-size: cover; background-position: center;
    display: flex; align-items: flex-end;
}
.news-detail-cover-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(42,44,60,.08) 0%, rgba(42,44,60,.28) 55%, rgba(42,44,60,.66) 100%);
}
.news-detail-cover-content { position: relative; z-index: 1; padding: 70px 0 44px; }
.news-detail-cover .news-detail-title { color: #fff; }
.news-detail-date {
    display: inline-block; background: var(--c-primary); color: var(--c-on-primary);
    font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
    padding: 5px 14px; border-radius: var(--radius-pill);
}
.news-detail-title {
    font-family: var(--font-sans); font-size: clamp(30px, 4vw, 46px);
    font-weight: 600; line-height: 1.15; margin: 14px 0 0;
}
.news-detail-header { text-align: center; padding: 40px 0 0; }
.news-detail-content { max-width: 800px; margin: 0 auto; padding: 46px 20px 30px; }
.news-detail-lead { font-size: 19px; line-height: 1.6; color: var(--c-ink); font-weight: 500; margin: 0 0 20px; }
.news-detail-body { font-size: 16px; line-height: 1.75; color: var(--c-ink-soft); }
.news-detail-body p { margin: 0 0 16px; }
.news-detail-body h2 { font-size: 26px; font-weight: 600; margin: 28px 0 12px; }
.news-detail-body h3 { font-size: 21px; font-weight: 600; margin: 24px 0 10px; }
.news-detail-body img { max-width: 100%; border-radius: var(--radius); }
.news-detail-body ul, .news-detail-body ol { padding-left: 22px; margin: 0 0 16px; }
.news-detail-back { margin: 34px 0 0; }
.news-detail-back a { color: var(--c-primary); text-decoration: none; font-weight: 500; }
.news-detail-back a:hover { color: var(--c-primary-2); }
.news-related { background: var(--c-cream-2); padding: 64px 0 84px; margin-top: 40px; }
.news-related-heading { text-align: center; font-size: clamp(26px, 3vw, 34px); font-weight: 600; margin-bottom: 36px; }

@media (max-width: 991px){
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-detail-cover { min-height: 320px; }
}
@media (max-width: 600px){
    .news-grid { grid-template-columns: 1fr; }
    .news-list-section { padding-bottom: 60px; }
    .news-detail-content { padding: 32px 16px 20px; }
    .news-related { padding: 48px 0 60px; }
}

/* ---------- K. BEDROOMS (241–260): horizontální scroll apartmánů ---------- */
.apartment-listing-header { text-align: center; margin-bottom: 36px; }
.apartment-listing-eyebrow { color: var(--c-primary); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; margin-bottom: 12px; }
.apartment-listing-heading { font-size: 38px; font-weight: 600; }
/* Bedrooms = plnohodnotný slider (JS initListingSliders); grid styl jen jako no-JS fallback */
.apartment-listing-section .apartment-listing-grid {
    display: flex; gap: 20px; overflow-x: auto; padding: 10px 4px 26px;
}
.listing-swiper { overflow: hidden; padding: 10px 4px 44px; }
.listing-swiper .apartment-listing-card { width: 100%; flex: none; }
.apartment-listing-card {
    flex: 0 0 390px;
    background: #fff; border-radius: 10px; padding: 10px;
    box-shadow: 0 2px 48px rgba(0,0,0,.04); transition: transform .3s ease, box-shadow .3s ease;
}
.apartment-listing-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.10); }
.apartment-listing-image-wrap { position: relative; }
.apartment-listing-image, .apartment-listing-image-wrap img { width: 100%; height: 240px; object-fit: cover; border-radius: 8px; display: block; }
.apartment-listing-image-wrap .lux-badge-stack { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.apartment-listing-image-wrap .lux-badge {
    background: var(--c-gold); color: #fff; border: 0; font-size: 12px; font-weight: 500;
    letter-spacing: .5px; padding: 5px 12px; border-radius: 4px;
}
.apartment-listing-body { padding: 18px 14px 14px; }
.apartment-listing-title { font-size: 22px; font-weight: 600; margin: 0 0 10px; }
.apartment-listing-meta { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.apartment-listing-meta li { font-size: 13px; color: var(--c-muted); display: inline-flex; align-items: center; gap: 6px; }
.apartment-listing-meta-icon svg { width: 15px; height: 15px; display: block; color: var(--c-primary); }
.apartment-listing-price { margin: 0 0 14px; }
.apartment-listing-price-val { font-size: 20px; font-weight: 700; color: var(--c-primary); }
.apartment-listing-price-note { font-size: 13px; color: var(--c-muted); margin-left: 6px; }
.apartment-listing-body .btn { min-height: 44px; padding-left: 22px; padding-right: 22px; font-size: 13px; }
@media (max-width: 640px){ .apartment-listing-card { flex-basis: 300px; } }

/* Rozložení „mřížka" — počet sloupců řídí dynamické CSS sekce (grid-template-columns).
   Vodorovný scroll výš platí jen pro variantu slider; tady se karty zalomí do řádků,
   takže jsou vidět všechny bez posouvání. */
.apartment-listing-section .apartment-listing-grid[data-listing-layout="grid"] {
    display: grid;
    gap: 20px;
    overflow: visible;
    padding: 10px 4px 12px;
}
.apartment-listing-grid[data-listing-layout="grid"] .apartment-listing-card {
    flex: none;
    display: flex;
    flex-direction: column;
}
.apartment-listing-grid[data-listing-layout="grid"] .apartment-listing-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Tlačítko dole na společné lince i u karet s různě dlouhým textem. */
.apartment-listing-grid[data-listing-layout="grid"] .apartment-listing-actions { margin-top: auto; }
/* Popisek u ceny („/ osoba a noc při plné obsazenosti") je na vlastní řádek —
   vedle částky by v užším sloupci zalomil uprostřed. */
.apartment-listing-grid[data-listing-layout="grid"] .apartment-listing-price-note {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    line-height: 1.35;
}
/* Čtyři karty vedle sebe = užší sloupec, takže o něco drobnější typografie. */
@media (min-width: 1241px) {
    .apartment-listing-grid[data-listing-layout="grid"] .apartment-listing-image,
    .apartment-listing-grid[data-listing-layout="grid"] .apartment-listing-image-wrap img { height: 200px; }
    .apartment-listing-grid[data-listing-layout="grid"] .apartment-listing-title { font-size: 20px; }
    .apartment-listing-grid[data-listing-layout="grid"] .apartment-listing-price-val { font-size: 18px; }
}

/* ---------- L. REFERENCE (261–270) ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1240px; margin: 0 auto; }
.testimonial-card {
    background: #fff; border-radius: 10px; padding: 28px 24px 22px;
    box-shadow: 0 2px 48px rgba(0,0,0,.04); border: 0; position: relative;
}
.testimonial-card::before {
    content: "\201C"; display: block; font-size: 56px; line-height: 1; color: var(--c-gold);
    font-family: Georgia, serif; margin-bottom: 6px;
}
.testimonial-stars { color: var(--c-gold); font-size: 15px; letter-spacing: 3px; margin-bottom: 10px; }
.testimonial-card-quote { font-style: italic; font-size: 15px; line-height: 1.75; color: var(--c-muted); margin-bottom: 14px; }
.testimonial-card-author { font-size: 16px; font-weight: 600; color: var(--c-ink); }
.testimonial-card-location { font-size: 13px; color: var(--c-muted); }
@media (max-width: 992px){ .testimonial-grid { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- M. FAQ (271–278) ---------- */
.faq-accordion { max-width: 900px; margin: 0 auto; }
.faq-item {
    background: #fff; border-radius: 10px; box-shadow: 0 2px 48px rgba(0,0,0,.04);
    margin-bottom: 12px; padding: 4px 22px; border: 0;
}
.faq-item summary { font-size: 16px; font-weight: 600; color: var(--c-ink); cursor: pointer; padding: 16px 0; }
.faq-item summary:hover { color: var(--c-primary); }
.faq-item-body { padding: 0 0 18px; color: var(--c-muted); font-size: 15px; line-height: 1.75; }

/* ---------- N. NEWSLETTER (279–288): pill lišta ---------- */
.newsletter-form-row {
    display: flex; gap: 8px; background: #fff; border-radius: 50px; padding: 8px;
    max-width: 560px; margin: 0 auto;
}
.newsletter-input {
    flex: 1; border: 0; background: transparent; padding: 0 18px; font-size: 15px;
    color: var(--c-ink); min-height: 46px;
}
.newsletter-input:focus { outline: none; }
.newsletter-form .btn, .newsletter-submit {
    border-radius: 50px; min-height: 46px; padding-left: 26px; padding-right: 26px; background: var(--c-primary);
    color: #fff; border: 0; font-size: 14px; letter-spacing: 1px;
}
.newsletter-section .newsletter-heading { font-size: 38px; font-weight: 600; }

/* ---------- O. FOOTER (289–300) ---------- */
.site-footer-social { display: flex; gap: 10px; }
.site-footer-social a {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
    display: inline-flex; align-items: center; justify-content: center; color: #ecfafb;
    transition: background .2s ease, border-color .2s ease;
}
.site-footer-social a:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.site-footer-social a svg { width: 16px; height: 16px; display: block; }

/* =============================================================================
   PLÁN300B — RESPONSIVE MEDIA (sekce) + booking column fix
   ============================================================================= */
@media (max-width: 1100px) {
    /* booking: sloupcová pole — ikona kalendáře k inputu (spodních 50px), ne na střed */
    .hero.hero-with-search .booking-widget--inline .booking-widget-field--date::after {
        top: auto; bottom: 17px; transform: none;
    }
    /* USP 2×2 */
    .builder-section.section-features .builder-features { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .builder-section.section-features .feature-item + .feature-item { margin-left: 0; }
}
@media (max-width: 992px) {
    /* Kříž bannerů: sloupce pod sebe (foto, text / foto, text) */
    .builder-section.section-text_image .text-image-wrap { grid-template-columns: minmax(0, 1fr); }
    .builder-section.section-text_image .text-image-left { direction: ltr; }
    .builder-section.section-text_image .text-image-figure img { height: 280px; }
    .builder-section.section-text_image .text-image-text { padding: 28px 24px; }
    .builder-section.section-text_image .text-image-text h2 { font-size: 28px; }
    /* Zážitky: responsive řeší renderer (ID media 641–960 = 2 sloupce) */
}
@media (max-width: 900px) {
    /* Stats 2×2 */
    .builder-section.section-stats .builder-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .builder-section.section-stats .stat-item + .stat-item { margin-left: 0; }
}
@media (max-width: 600px) {
    .builder-section.section-features .builder-features { grid-template-columns: 1fr; }
    .hero.hero-with-search .hero-content::after { display: none; } /* scroll-down pryč na mobilu */
    .newsletter-form-row { flex-direction: column; border-radius: 24px; }
    .newsletter-form .btn, .newsletter-submit { width: 100%; }
}
@media (max-width: 520px) {
    .builder-section.section-stats .builder-stats { grid-template-columns: 1fr; }
}

/* ── RESPONSIVE ŽEBŘÍK HLAVIČKY (jediný autoritativní blok) ──
   Breakpointy dimenzované na NEJŠIRŠÍ jazykovou mutaci (DE, 8 položek vč.
   Fotogalerie) — menu se nikdy nesmí dotknout jazykového přepínače.
   >=1780  logo | menu absolutně na středu (gap 34) | CS+CTA
   1430–1779 logo | menu v toku, symetricky centrované, kompakt | CS+CTA kompakt
   <1430   logo + burger | CTA (drawer menu)
   <=760   header 64px
   <=700   bez CS
   <=480   bez CTA (jen drawer) */
.site-header .site-header-right{ display: flex; align-items: center; gap: 12px; }
@media (min-width: 1430px){
    .site-header .nav-burger, .site-header .nav-burger--always{ display: none; }
    .site-header .site-nav-inline{ height: 80px; display: flex; align-items: center; gap: 34px; }
    .site-header .site-nav-inline a{ height: 80px; display: inline-flex; align-items: center; position: relative; white-space: nowrap; }
}
/* Absolutní centrování menu až od 1640px — mezi 1400–1639 se delší jazykové
   mutace (DE „Service & Wellness", „Startseite"…) vešly do jazykového přepínače
   a menu ho překrývalo. V kompaktním režimu se menu centruje v toku mezi logem
   a pravou částí, takže se nikdy nepřekryje. */
@media (min-width: 1780px){
    .site-header .site-nav-inline{ position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
}
@media (min-width: 1430px) and (max-width: 1779px){
    .site-header .site-header-inner{ justify-content: flex-start; }
    .site-header .site-header-left{ flex: 1 1 auto; display: flex; justify-content: center; }
    .site-header .site-nav-inline{ position: static; transform: none; margin: 0; gap: 12px; }
    .site-header .site-nav-inline a{ font-size: 13px; }
    .site-header .site-logo{ flex: 0 0 auto; }
    .site-header .site-logo-text{ font-size: 18px; }
    .site-header .site-logo-emblem{ height: 34px; }
    .site-header .site-header-right{ flex: 0 0 auto; gap: 10px; }
    .site-header .btn-book{ padding: 0 18px; min-height: 44px; font-size: 14px; }
}
/* Nejtěsnější pásmo kompaktního režimu — EN mutace („Photo gallery",
   „Services & Wellness") je nejširší; bez zhuštění se při ~1430 dotýkala
   jazykového přepínače. */
@media (min-width: 1430px) and (max-width: 1535px){
    .site-header .site-nav-inline{ gap: 8px; }
    .site-header .site-nav-inline a{ font-size: 12.5px; }
}
@media (max-width: 1429px){
    .site-header .site-nav-inline{ display: none; }
    .site-header .nav-burger, .site-header .nav-burger--always{ display: inline-flex; align-items: center; justify-content: center; }
    .site-header .site-header-left{ order: 2; margin-left: auto; }
    .site-header .site-logo{ order: -1; }
    .site-header .site-header-right{ order: 3; }
}
@media (max-width: 760px){
    .site-header .btn-book{ min-height: 40px; padding: 0 16px; font-size: 13px; }
}
@media (max-width: 700px){
    .site-header .lang-switcher{ display: none; }
}

/* Drawer: dropdown děti odsazené pod rodičem */
.site-drawer-item--child a { padding-left: 22px; opacity: .85; font-size: 14px; }

/* ---------- SLIDER TEČKY (Kinsley) — šedé kuličky, aktivní modrý pill ---------- */
.image-slider-section .swiper-pagination,
.listing-swiper .swiper-pagination { position: static; margin-top: 18px; }
.swiper-pagination-bullet {
    width: 8px; height: 8px; background: var(--c-line); opacity: 1;
    border-radius: 4px; transition: width .25s ease, background .25s ease; margin: 0 4px;
}
.swiper-pagination-bullet-active { width: 22px; background: var(--c-primary); }

/* ---------- HAMBURGER: čárky VŽDY viditelné (ink), ne až po scrollu ---------- */
.site-header .nav-burger { color: var(--c-ink); }
.site-header .nav-burger span:not(.sr-only) { background: var(--c-ink); }

/* =============================================================================
   PODSTRÁNKY — APARTMÁN DETAIL (Kinsley)
   ============================================================================= */
/* KRITICKÉ: grid item s galerií musí mít min-width:0, jinak swiper roztáhne
   sloupec na intrinsic šířku a sidebar (rezervace) dostane 0px. */
.apt-detail-main { min-width: 0; }
.apt-detail-grid > * { min-width: 0; }
.apt-gallery-slider, .apt-gallery-slider .swiper { overflow: hidden; }
/* Typografie detailu: žádné 64px obry — Kinsley měřítko */
.apt-detail-main h2 { font-size: 32px; font-weight: 600; letter-spacing: normal; margin-bottom: 16px; }
.apt-detail-main h3 { font-size: 22px; font-weight: 600; letter-spacing: normal; margin-bottom: 12px; }
/* Hero detailu: vše centrované na jedné ose (Kinsley page title) */
.apt-hero .container, .apt-hero-content { text-align: center; }
.apt-hero-eyebrow { font-size: 13px; letter-spacing: 2px; display: block; text-align: center; }
.apt-hero h1 { font-size: clamp(40px, 5vw, 56px); font-weight: 600; text-align: center; margin: 8px auto 6px; }
/* Sidebar rezervace: panelový vzor */
.apt-sidebar .booking-widget { border-radius: 10px; box-shadow: 0 2px 48px rgba(0,0,0,.06); }
@media (max-width: 992px) {
    .apt-detail-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   PODSTRÁNKY — jednotná typografie (Kinsley): žádné 100px obry, vše Jost
   ============================================================================= */
.site-main .section-header h1 {
    font-family: var(--font-sans); font-size: clamp(36px, 4.5vw, 52px);
    font-weight: 600; line-height: 1.15; letter-spacing: normal; text-align: center;
}
.site-main .section-header { text-align: center; }
.site-main .page-content h2,
.site-main .section .section-header h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: normal; }
.site-main .page-content h3 { font-size: 22px; font-weight: 600; letter-spacing: normal; }

/* Novinky: kompletní styly v sekci J. NOVINKY výše */
/* Nadpisy uvnitř karet (kontakt formulář apod.): karta = komponenta, ne sekce */
.site-main .card h2 { font-size: 24px; font-weight: 600; letter-spacing: normal; }

/* =============================================================================
   DROPDOWN PODMENU — odkazy roztažené přes celou šířku panelu
   ============================================================================= */
.site-nav-dropdown a {
    display: block; width: 100%; box-sizing: border-box;
    padding: 9px 14px; border-radius: 6px; white-space: nowrap;
}
.site-nav-dropdown a:hover { background: #ecfafb; color: var(--c-primary); }
/* Responsive žebřík hlavičky (≥1300) nastavuje VŠEM odkazům v .site-nav-inline
   height:80px + inline-flex — dopadalo i na položky dropdownu (obří mezery).
   Vyšší specificita vrací kompaktní výšku položek podmenu. */
.site-header .site-nav-inline .site-nav-dropdown a {
    height: auto; min-height: 0; display: block; padding: 9px 14px;
    line-height: 1.5; font-size: 15px;
}
/* Aktivní/hover podtržítko hlavního menu nemá v dropdownu co dělat */
.site-header .site-nav-inline .site-nav-dropdown a::after { content: none; display: none; }

/* =============================================================================
   APARTMÁN DETAIL — komponentový polish (Kinsley)
   ============================================================================= */
/* meta karty (hosté / ložnice / m² / terasa) jako mátové dlaždice */
.apt-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.apt-meta-grid-item {
    background: linear-gradient(180deg, #f7fdfd 0%, #eef9f9 100%);
    border-radius: 8px; padding: 18px 12px; text-align: center;
}
.apt-meta-grid-value { font-size: 26px; font-weight: 700; color: var(--c-primary); line-height: 1.1; }
.apt-meta-grid-label { font-size: 13px; color: var(--c-muted); margin-top: 4px; }
/* vybavení jako pill chipy */
.apt-amenities { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.apt-amenities li {
    background: #ecfafb; border-radius: 50px; padding: 7px 16px;
    font-size: 13px; color: var(--c-ink); margin: 0;
}
/* info o pobytu jako dlaždice */
.apt-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.apt-info-item { background: #fff; border-radius: 8px; padding: 14px 16px; box-shadow: 0 2px 24px rgba(0,0,0,.04); }
.apt-info-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--c-muted); }
.apt-info-value { font-size: 15px; color: var(--c-ink); margin-top: 4px; }
/* mapa + galerie zaoblení */
.apt-map, .apt-map iframe { border-radius: 10px; overflow: hidden; }
@media (max-width: 760px) {
    .apt-meta-grid { grid-template-columns: repeat(2, 1fr); }
    .apt-info-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   REZERVACE (/rezervace) — Kinsley: panelový widget, formulář + sticky souhrn
   ============================================================================= */
.bookings-form { padding: 36px 0 70px; }
.bookings-form .section-heading h1,
.bookings-form h1 {
    font-family: var(--font-sans); font-size: clamp(32px, 4vw, 44px);
    font-weight: 600; text-align: center; letter-spacing: normal; margin: 0 0 26px;
}

/* ── Horní lišta (termín + hosté) jako bílý panel ── */
.booking-widget-bar {
    background: #fff; border-radius: 10px; box-shadow: 0 2px 48px rgba(0,0,0,.06);
    padding: 22px; max-width: 1240px; margin: 0 auto 32px;
    position: relative;
}
/* Načítání ceny/dostupnosti po změně termínu: overlay + spinner přes lištu.
   pointer-events none — jen vizuální signál, neblokuje interakci. */
.booking-widget-bar.is-updating::before {
    content: ""; position: absolute; inset: 0; z-index: 8; border-radius: 10px;
    background: rgba(255,255,255,.55); pointer-events: none;
}
.booking-widget-bar.is-updating::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px;
    margin: -13px 0 0 -13px; z-index: 9; pointer-events: none;
    border: 3px solid var(--c-line); border-top-color: var(--c-primary); border-radius: 50%;
    animation: bw-spin .7s linear infinite;
}
@keyframes bw-spin { to { transform: rotate(360deg); } }
.booking-widget-bar-form { display: flex; align-items: flex-end; gap: 14px; }
.booking-widget-bar-fields {
    flex: 1 1 auto; min-width: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end;
}
.booking-widget-bar-form > .btn, .booking-widget-bar-form > button[type="submit"] { flex: 0 0 auto; }
.booking-widget-bar-field label {
    display: block; font-size: 13px; color: var(--c-muted); margin-bottom: 6px; letter-spacing: .3px;
}
.booking-widget-bar-field input,
.booking-widget-bar-field select,
.booking-widget-bar-field .dba-custom-select-trigger {
    width: 100%; background: #ecfafb; border: 0; border-radius: 10px;
    height: 48px; min-height: 48px; padding: 0 14px; font: 400 15px var(--font-sans);
    color: var(--c-ink); box-shadow: none;
}
.booking-widget-bar .btn, .booking-widget-bar button[type="submit"] {
    min-height: 48px; padding: 0 26px; border-radius: var(--radius-pill);
    background: var(--c-primary); color: #fff; border: 0; font-size: 14px; letter-spacing: 1px;
}
.booking-widget-bar .btn:hover { background: var(--c-primary-2); }

/* ── Dvousloupec: vlevo výběr apartmánu + formulář, vpravo sticky souhrn ──
   Souhrn je grid item přes oba řádky s align-self:start → drží se v zorném
   poli po celou dobu vyplňování (dřív padal pod karty a nikdo na něj nedošel). */
.section-booking_form .booking-form-wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 32px; row-gap: 24px;   /* svislé mezery mezi kroky drží pod 50 px */
    align-items: start; max-width: 1240px; margin: 0 auto;
}
/* Řádek 1 = výběr apartmánu, řádek 2 = termín a hosté, řádek 3 = případná výzva
   k výběru — vše přes celou šířku. Řádek 4 = formulář vlevo, souhrn vpravo;
   oba začínají na STEJNÉ horní hraně. */
.section-booking_form .apt-picker             { grid-column: 1 / -1; grid-row: 1; }
.section-booking_form .booking-datum-anchor   { grid-column: 1 / -1; grid-row: 2; }
.section-booking_form .booking-form-locked-note { grid-column: 1 / -1; grid-row: 3; }
.section-booking_form .card.booking-form      { grid-column: 1; grid-row: 4; }
.section-booking_form .booking-summary {
    grid-column: 2; grid-row: 4;
    position: sticky; top: 100px; align-self: start;
    max-height: calc(100vh - 120px); overflow-y: auto;
}
/* Hlášky (obsazeno / nejbližší termín) přes celou šířku levého sloupce */
.section-booking_form .booking-widget-error,
.section-booking_form .booking-next-avail { grid-column: 1 / -1; }

/* Lišta termínu uvnitř sekce — bílá karta jako ostatní bloky, bez vnějšího odsazení */
.section-booking_form .booking-datum-anchor { scroll-margin-top: 92px; }
/* Nadpis kroku — stejná typografie jako „Vyberte apartmán" */
.booking-datum-heading {
    font-size: 20px; font-weight: 600; color: var(--c-ink); margin: 0 0 16px;
}
.section-booking_form .booking-widget-bar { padding: 0; background: transparent; }
.section-booking_form .booking-widget-bar > .container { padding: 0; max-width: none; }
.section-booking_form .booking-widget-bar-form {
    background: #fff; border-radius: 10px; box-shadow: 0 2px 48px rgba(0,0,0,.06); padding: 18px 20px;
}
/* Duplicitní rozpis uvnitř formuláře — rozpis žije v souhrnu vpravo */
.booking-widget-quote--hidden { display: none; }

/* Karty apartmánů: všechny vedle sebe přes celou šířku, kompaktní.
   Formulář tak začíná dřív a celý první krok je vidět na jeden pohled. */
.section-booking_form .apt-picker-grid {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px;
}
.section-booking_form .apt-picker { margin-bottom: 0; }
.section-booking_form .apt-picker-card-media { aspect-ratio: 16 / 10; }
.section-booking_form .apt-picker-card-body { padding: 12px 14px; gap: 4px; }
.section-booking_form .apt-picker-card-name { font-size: 15px; }
.section-booking_form .apt-picker-card-meta { font-size: 12px; gap: 10px; }
.section-booking_form .apt-picker-card-price { font-size: 13px; }
.section-booking_form .apt-picker-card-price strong { font-size: 16px; }
.section-booking_form .apt-picker-card-cta { padding: 7px 14px; font-size: 12px; }
.section-booking_form .apt-picker-badge { font-size: 10px; padding: 3px 8px; }

/* ── Dokud není vybraný apartmán: formulář i souhrn vidět, ale neaktivní ── */
.booking-form-locked-note {
    margin: 0; padding: 14px 18px; cursor: pointer;
    background: #fff7e9; border: 1px dashed var(--c-primary); border-radius: 10px;
    color: var(--c-ink); font-size: 14px; font-weight: 500;
}
.booking-form-locked-note:hover { background: #fff1da; }
.card.booking-form.is-locked { opacity: .45; filter: saturate(.5); user-select: none; }
.booking-form-wrap.is-unselected .booking-summary-body,
.booking-form-wrap.is-unselected .booking-summary-breakdown,
.booking-form-wrap.is-unselected .booking-summary-coupon,
.booking-form-wrap.is-unselected .booking-summary-empty { display: none; }
.booking-form-wrap.is-unselected .booking-summary-cta { opacity: .45; pointer-events: none; }
.booking-summary-hint { margin: 0; color: var(--c-muted); font-size: 14px; line-height: 1.55; }

/* Zvýraznění výběru po kliknutí na zamčenou poznámku */
.apt-picker.is-flash .apt-picker-grid {
    outline: 2px solid var(--c-primary); outline-offset: 8px; border-radius: 12px;
    transition: outline-color .3s ease;
}
/* Klik na kartu — okamžitá odezva, než se stránka překreslí */
.apt-picker-card.is-loading { opacity: .75; }
.apt-picker-card.is-loading .apt-picker-card-cta { background: var(--c-primary-2); }

/* Kotva #booking-form pod fixed hlavičkou */
#booking-form { scroll-margin-top: 96px; }

/* Doplňky ve dvou sloupcích — formulář se tím zkrátí o polovinu jejich výšky */
.section-booking_form .booking-extras {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.section-booking_form .booking-extra-row { padding: 10px 14px; }
.section-booking_form .booking-extra-row--mandatory { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .section-booking_form .booking-extras { grid-template-columns: 1fr; }
}

/* Souhrn */
.booking-summary {
    background: #fff; border-radius: 10px; box-shadow: 0 2px 48px rgba(0,0,0,.06);
    padding: 24px 24px 18px;
    /* drží výšku při swapu body/empty a načítání ceny — box neposkakuje */
    min-height: 150px;
}
.booking-summary-heading { font-size: 20px; font-weight: 600; margin: 0 0 12px; }
.booking-summary-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 9px 0; border-bottom: 1px dashed var(--c-line-soft); font-size: 14px;
}
.booking-summary-label { color: var(--c-muted); }
.booking-summary-value { color: var(--c-ink); font-weight: 500; white-space: nowrap; }
.booking-summary-row--total { border-bottom: 0; border-top: 2px solid var(--c-line-soft); margin-top: 6px; padding-top: 14px; }
.booking-summary-row--total .booking-summary-label { color: var(--c-ink); font-weight: 600; }
.booking-summary-row--total .booking-summary-value { font-size: 20px; font-weight: 700; color: var(--c-primary); }
.booking-summary-row--deposit .booking-summary-value { color: var(--c-primary); }
.booking-summary-value--discount { color: #2e9e6b; }
.booking-summary-breakdown { margin-top: 4px; transition: opacity .2s ease; }
/* Přenačítání ceny: ztlumit místo skrýt — souhrn drží výšku, neposkakuje */
.booking-summary-breakdown.is-loading { opacity: .45; }
/* Kupón u ceny + CTA, které je vidět bez scrollování na konec formuláře */
.booking-summary-coupon { margin-top: 16px; }
.booking-summary-coupon label {
    display: block; font-size: 13px; color: var(--c-muted); margin-bottom: 6px; letter-spacing: .3px;
}
.booking-summary-cta { margin-top: 16px; }

/* Formulářová karta */
.card.booking-form { background: #fff; border-radius: 10px; box-shadow: 0 2px 48px rgba(0,0,0,.06); border: 0; }
.card.booking-form .card-body { padding: 28px; }
.card.booking-form h2 { font-size: 22px; font-weight: 600; margin: 0 0 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; color: var(--c-muted); margin-bottom: 6px; letter-spacing: .3px; }
.form-input, .form-textarea, .form-select,
.card.booking-form .form-input, .card.booking-form .form-textarea, .card.booking-form .form-select,
.booking-form-wrap input.form-input, .booking-form-wrap textarea.form-textarea {
    width: 100%; background: #ecfafb; border: 0; border-radius: 10px;
    min-height: 48px; padding: 12px 14px; font: 400 15px var(--font-sans);
    color: var(--c-ink); box-shadow: none;
}
.form-textarea { min-height: 110px; resize: vertical; }
.form-input:focus, .form-textarea:focus { outline: 2px solid rgba(235,167,68,.35); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--c-muted); }
.form-checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-primary); }
.card.booking-form .btn[type="submit"], .card.booking-form button[type="submit"] {
    width: 100%; min-height: 52px; border-radius: var(--radius-pill);
    background: var(--c-primary); color: #fff; border: 0; font-size: 15px; letter-spacing: 1px; margin-top: 8px;
}
.card.booking-form button[type="submit"]:hover { background: var(--c-primary-2); }

/* Responsive */
@media (max-width: 1100px) {
    .booking-widget-bar-form { flex-wrap: wrap; }
    .booking-widget-bar-fields { grid-template-columns: 1fr 1fr; flex-basis: 100%; }
    .booking-widget-bar-form > .btn { width: 100%; }
}
@media (max-width: 992px) {
    /* Jeden sloupec: karty → souhrn s cenou → formulář. Souhrn zůstává nad
       formulářem, aby host viděl cenu dřív, než začne vyplňovat údaje. */
    /* Jeden sloupec: karty → termín → výzva → souhrn s cenou → formulář.
       minmax(0, 1fr) — NE holé 1fr: `1fr` má implicitní min-width:auto, takže
       jediná položka, která se neumí zalomit, roztáhne celý sloupec nad šířku
       displeje a kvůli overflow-x:clip se pak ořízne úplně všechno pod ní. */
    .section-booking_form .booking-form-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
    .section-booking_form .apt-picker             { grid-column: 1; grid-row: 1; }
    .section-booking_form .booking-datum-anchor   { grid-column: 1; grid-row: 2; }
    .section-booking_form .booking-form-locked-note { grid-column: 1; grid-row: 3; }
    .section-booking_form .booking-summary {
        grid-column: 1; grid-row: 4;
        position: static; max-height: none; overflow: visible;
    }
    .section-booking_form .card.booking-form { grid-column: 1; grid-row: 5; }
    /* Na úzkém dvě karty vedle sebe */
    .section-booking_form .apt-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .section-booking_form .booking-widget-bar-form { padding: 14px 16px; }
    .booking-datum-heading, .apt-picker-heading { font-size: 18px; margin-bottom: 12px; }
}
@media (max-width: 600px) {
    .booking-widget-bar-fields { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    /* Souhrn: dlouhé hodnoty (termín) se na úzkém displeji smí zalomit,
       jinak `white-space: nowrap` roztáhne řádek a stránka jede do šířky. */
    .booking-summary { padding: 18px 16px 16px; }
    .booking-summary-row { gap: 10px; }
    .booking-summary-value { white-space: normal; text-align: right; }
    .booking-summary-heading { font-size: 18px; }
    .section-booking_form .booking-widget-bar-form { padding: 12px 14px; }
    .section-booking_form .apt-picker-grid { gap: 10px; }
    .section-booking_form .apt-picker-card-body { padding: 10px 12px; }
    .section-booking_form .apt-picker-card-name { font-size: 14px; }
    .section-booking_form .booking-extras { grid-template-columns: 1fr; }
    .card.booking-form .card-body { padding: 20px 16px; }
}

/* =============================================================
   BOOKING WIDGET (hero search) — MOBIL/TABLET: čistý vertikální stack
   Dřív si pole drželo fixní height:48px i ve stacku (label nad
   polem) + input měl height:50px → label a pole se překrývaly a
   kalendářová ikona „skákala". Navíc flex-wrap:wrap z @1100 lámal
   pole do sloupců vedle sebe. Tady vynutíme čistý stack: auto
   výška, mezery mezi poli, vertikální vycentrování obsahu.
   ============================================================= */
@media (max-width: 991px) {
    .hero.hero-with-search .booking-widget--inline .booking-widget-fields {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;      /* zrušit wrap z @1100 → jinak sloupce pole zalomí vedle sebe */
        align-items: stretch;
        gap: 0;
        height: auto;
        width: 100%;
    }
    .hero.hero-with-search .booking-widget--inline .booking-widget-field {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0;
        margin: 0 0 14px;
        border: 0;
    }
    .hero.hero-with-search .booking-widget--inline .booking-widget-field label,
    .hero.hero-with-search .booking-widget--inline .booking-widget-field .bw-counter-label {
        position: static;
        margin: 0;
        line-height: 1.3;
    }
    .hero.hero-with-search .booking-widget--inline .booking-widget-field input,
    .hero.hero-with-search .booking-widget--inline .booking-widget-field select,
    .hero.hero-with-search .booking-widget--inline .booking-widget-field .flatpickr-altinput-sized,
    .hero.hero-with-search .booking-widget--inline .booking-widget-field input.form-control,
    .hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select,
    .hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select-trigger {
        flex: 0 0 48px;          /* zrušit flex-grow:1 z desktopu → jinak input roste na výšku rodiče */
        height: 48px;
        min-height: 48px;
        max-height: 48px;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 14px;
        box-sizing: border-box;
    }
    /* Skrytý nativní select nesmí být vidět (můj obecný `select` výše ho omylem
       zviditelnil vedle custom selectu → prázdný rámeček navíc). */
    .hero.hero-with-search .booking-widget--inline .booking-widget-field select.dba-custom-select-native-hidden {
        display: none;
    }
    /* Trigger je dítě .dba-custom-select (flex ROW) → `flex: 0 0 48px` výše by
       mu nastavil ŠÍŘKU 48px (číslo + šipka nalepené vlevo). Šířkově musí růst,
       48px má zůstat jen výška. */
    .hero.hero-with-search .booking-widget--inline .booking-widget-field .dba-custom-select-trigger {
        flex: 1 1 auto;
        justify-content: space-between;
    }
    /* Kalendářová ikona (::after) svisle na střed viditelného pole (48px dole ve
       fieldu), ne posunutá pod něj jako v @1100 (kde byl label uvnitř pole). */
    .hero.hero-with-search .booking-widget--inline .booking-widget-field--date::after {
        top: auto;
        bottom: 0;
        height: 48px;
        right: 14px;
        transform: none;
    }
    .hero.hero-with-search .booking-widget--inline .booking-widget-field--date input {
        padding-right: 40px;
    }
    /* Submit (lupa) přes celou šířku pod poli */
    .hero.hero-with-search .booking-widget--inline .btn {
        width: 100%;
        margin-top: 4px;
    }
}

/* =============================================================
   VÝBĚR APARTMÁNU na /rezervace (.apt-picker) + kalendářová ikona
   rebook lišty. Dostupné karty = odkaz, obsazené ztlumené.
   ============================================================= */
.apt-picker { margin: 0 0 32px; }
.apt-picker-heading { font-size: 20px; font-weight: 600; color: var(--c-ink); margin: 0 0 8px; }
.apt-picker-note { font-size: 14px; color: var(--c-muted); margin: 0 0 16px; }
.apt-picker.is-collapsed .apt-picker-note { display: none; }
.apt-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* ── Sbalený výběr: „Vybraný apartmán: … [Změnit apartmán]" ──────────
   Řídí JS (třída is-collapsed) — bez JS je grid vidět celý (fallback). */
.apt-picker.is-collapsed .apt-picker-heading,
.apt-picker.is-collapsed .apt-picker-grid { display: none; }
.apt-picker-chosen {
    display: none; align-items: center; justify-content: space-between; gap: 16px;
    background: #fff; border: 2px solid var(--c-primary); border-radius: var(--radius);
    padding: 12px 16px;
}
.apt-picker.is-collapsed .apt-picker-chosen { display: flex; }
.apt-picker-chosen-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.apt-picker-chosen-img {
    width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; display: block;
}
.apt-picker-chosen-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apt-picker-chosen-eyebrow {
    font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--c-muted);
}
.apt-picker-chosen-name {
    font-size: 17px; font-weight: 600; color: var(--c-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apt-picker-change { flex: 0 0 auto; white-space: nowrap; }
/* Na úzkém displeji se řádek nevejde na jednu linku: obrázek + „VYBRANÝ APARTMÁN"
   + nezalomitelné tlačítko mají dohromady větší min-content než viewport, takže
   by roztáhly sloupec mřížky a ořízly celý zbytek stránky. Proto se tlačítko
   přesune pod info a roztáhne na celou šířku — zároveň je z něj lepší cíl na dotyk. */
@media (max-width: 600px) {
    .apt-picker-chosen { flex-wrap: wrap; gap: 12px; padding: 12px; }
    .apt-picker-chosen-info { flex: 1 1 100%; min-width: 0; }
    .apt-picker-change { flex: 1 1 100%; width: 100%; justify-content: center; }
}
/* .btn-ghost přidává „ →" přes ::after — u tohoto tlačítka nechceme */
.apt-picker-change::after { content: none; }
.apt-picker-card {
    display: flex; flex-direction: column; background: #fff; border: 2px solid var(--c-line);
    border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Karta = div; klikací plocha je vnitřní odkaz .apt-picker-card-main (2026-09-03).
   Nedostupná karta už NENÍ ztlumená celá — jen její hlavní odkaz; pod ním zůstává
   plně čitelný blok s nabídkou (nejbližší volný termín + akce). */
.apt-picker-card-main { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.apt-picker-card:not(.is-unavailable):hover { border-color: var(--c-primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.apt-picker-card.is-selected { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.apt-picker-card.is-current { border-color: var(--c-secondary); box-shadow: 0 0 0 1px var(--c-secondary); }
.apt-picker-card.is-unavailable .apt-picker-card-main { opacity: .55; pointer-events: none; }
.apt-picker-card.is-loading { opacity: .7; }
.apt-picker-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--c-line-soft); overflow: hidden; }
.apt-picker-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apt-picker-card.is-unavailable .apt-picker-card-media img { filter: grayscale(.7); }
/* Nabídka pod nedostupnou kartou */
.apt-picker-card-alt {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 16px 14px; border-top: 1px dashed var(--c-line);
    background: var(--c-bg-soft); font-size: 13px; color: var(--c-ink);
}
/* display:flex / .btn by přebily atribut hidden — explicitně (stejná past jako .apt-picker-chosen) */
.apt-picker-card-alt[hidden],
.apt-picker-alt-next[hidden],
.apt-picker-alt-none[hidden],
.apt-picker-alt-actions .btn[hidden],
.apt-picker-card-cta[hidden] { display: none; }
.apt-picker-alt-label { font-size: 12px; letter-spacing: .3px; text-transform: uppercase; color: var(--c-muted); }
.apt-picker-card-alt .apt-picker-alt-pick { width: 100%; flex-direction: column; gap: 1px; padding: 9px 12px; line-height: 1.25; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.apt-picker-card-alt .apt-picker-alt-pick .apt-picker-alt-price { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: .9; }
.apt-picker-alt-detail {
    display: inline-block; align-self: center; margin-top: 2px;
    font-size: 13px; font-weight: 500; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px;
}
.apt-picker-alt-detail:hover { color: var(--c-primary); }
.apt-picker-alt-none { color: var(--c-muted); }
.apt-picker-alt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.apt-picker-alt-actions .btn {
    flex: 1 1 auto; justify-content: center; text-align: center; white-space: normal;
    overflow-wrap: normal; word-break: normal; hyphens: manual;
}
/* Úzké karty (2 sloupce na mobilu): menší tlačítka a jen „Jiný termín" bez jména apartmánu */
@media (max-width: 600px) {
    .apt-picker-card-alt .apt-picker-alt-pick { font-size: 12px; letter-spacing: 0; padding: 8px 6px; }
    .apt-picker-card-alt .apt-picker-alt-pick .apt-picker-alt-price { font-size: 11px; }
    .apt-picker-alt-other-full { display: none; }
    .apt-picker-card-alt { padding: 10px 10px 12px; font-size: 12px; }
    .apt-picker-alt-label { font-size: 11px; }
}
.apt-picker-alt-other::after { content: none; }
.apt-picker-alt-other-short { display: none; }
@media (max-width: 600px) { .apt-picker-alt-other-short { display: inline; } }
.apt-picker-card.is-loading .apt-picker-alt-actions .btn { pointer-events: none; opacity: .6; }
.apt-picker-badge {
    position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 50px; color: #fff; letter-spacing: .3px;
}
.apt-picker-badge--occupied { background: rgba(56, 58, 78, .88); }
.apt-picker-badge--current { background: var(--c-secondary); color: #fff; }
.apt-picker-badge--selected { background: var(--c-primary); color: var(--c-on-primary); }
/* Nejlevnější volná varianta — vpravo, ať se nepotká s „Vybráno" vlevo */
.apt-picker-badge--best { left: auto; right: 10px; background: var(--c-success-strong); color: #fff; }
.apt-picker-card.is-best { border-color: var(--c-success-strong); }
.apt-picker-card.is-best:not(.is-unavailable):hover,
.apt-picker-card.is-best.is-selected { border-color: var(--c-primary); }
/* Hláška „vybraný apartmán je obsazený" + nejbližší volný termín */
.booking-occupied-note { grid-column: 1 / -1; }
.booking-occupied-next {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin-top: 10px; font-size: 14px;
}
.booking-occupied-next .btn { white-space: nowrap; }
/* Přenačítání sekce rezervace při AJAX přepnutí apartmánu */
.booking-form-wrap.is-loading { position: relative; }
.booking-form-wrap.is-loading::after {
    content: ""; position: absolute; inset: 0; z-index: 5;
    background: rgba(242, 255, 255, .55); cursor: progress;
}
.apt-picker-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.apt-picker-card-name { font-size: 16px; font-weight: 600; color: var(--c-ink); }
.apt-picker-card-meta { display: flex; gap: 12px; font-size: 13px; color: var(--c-muted); }
.apt-picker-card-price { font-size: 14px; color: var(--c-ink); margin-top: auto; }
.apt-picker-card-price strong { color: var(--c-primary); font-size: 17px; }
.apt-picker-card-price--muted { color: var(--c-muted); font-size: 13px; font-weight: 500; }
.apt-picker-card-cta {
    display: block; text-align: center; margin-top: 8px; padding: 9px 14px;
    background: var(--c-primary); color: var(--c-on-primary); font-weight: 600; font-size: 14px;
    border-radius: 50px;
}
.apt-picker-card.is-selected .apt-picker-card-cta { background: var(--c-primary-2); }
.booking-next-avail .btn { margin-top: 4px; }
@media (max-width: 600px) { .apt-picker-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Kalendářová ikona i pro rebook lištu (.booking-widget-bar-field) na /rezervace */
.booking-widget-bar-field[data-field="from"],
.booking-widget-bar-field[data-field="to"] { position: relative; }
.booking-widget-bar-field[data-field="from"] input,
.booking-widget-bar-field[data-field="to"] input { padding-right: 38px; }
.booking-widget-bar-field[data-field="from"]::after,
.booking-widget-bar-field[data-field="to"]::after {
    content: ""; position: absolute; right: 14px; bottom: 13px; width: 16px; height: 16px; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364688c' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}

/* =============================================================
   LAST MINUTE — akční termíny na blízko
   ============================================================= */
.last-minute {
    padding: var(--space-section) 0;
    background: var(--c-bg-soft);
}
.last-minute-head {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}
.last-minute-eyebrow {
    margin-bottom: 10px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-primary);
}
.last-minute-title {
    margin: 0 0 12px;
    color: var(--c-secondary);
}
.last-minute-subtitle {
    margin: 0;
    color: var(--c-muted);
    line-height: 1.65;
}

.last-minute-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.lm-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--c-line-soft);
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
    transition: transform .2s ease, box-shadow .2s ease;
}
.lm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.lm-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--c-cream-2);
    background-size: cover;
    background-position: center;
}
.lm-card-image--empty { background-color: var(--c-line-soft); }

/* Sleva musí být první, co oko chytne */
.lm-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 50px;
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.lm-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px;
}
.lm-card-title {
    margin: 0 0 6px;
    font-size: 20px;
    color: var(--c-secondary);
}
.lm-card-dates {
    margin-bottom: 12px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-ink);
}
.lm-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--c-muted);
}
.lm-card-when { color: var(--c-primary-2); font-weight: 600; }

.lm-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: auto;
}
.lm-price-before {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--c-muted);
    text-decoration: line-through;
}
.lm-price-after {
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 700;
    color: var(--c-secondary);
}
.lm-price-unit {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--c-muted);
}
.lm-card-total {
    margin-top: 4px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--c-muted);
}
.lm-card-saved {
    margin: 4px 0 16px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-primary-2);
}
.lm-card-cta { width: 100%; text-align: center; }

.last-minute--empty .last-minute-head { margin-bottom: 0; }

@media (max-width: 600px) {
    .last-minute-grid { gap: 20px; }
    .lm-card-body { padding: 16px; }
    .lm-price-after { font-size: 21px; }
}

/* ─── Mobil: dotykové cíle v patičce ────────────────────────────────────────
   Odkazy v patičce měly na telefonu jen 20–27 px na výšku, tedy pod hranicí
   24 px doporučenou pro pohodlné trefení prstem. Zvětšuje se jen klikací
   plocha (svislý padding), rozestupy a typografie zůstávají beze změny. */
@media (max-width: 600px) {
    .site-footer-nav a,
    .site-footer-contact a,
    .site-footer-lang a {
        display: inline-block;
        padding-block: 5px;
    }
}

/* ─── Galerie z DB (builder element gallery_lightbox) ───────────────────────
   Styly .gallery-grid* se ztratily při CSS merge (stejně jako drawer jazyky) —
   bez aspect-ratio měly položky nulovou výšku a galerie byla neviditelná.
   Obnoveno ze site.css DeJaBlue + Kinsley zaoblení/heading. */
.builder-gallery { max-width: 1240px; margin: 0 auto; }
.builder-gallery .builder-section-heading {
    text-align: center; margin-bottom: 28px;
    font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: normal;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin: 0 0 12px;
}
.gallery-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991px) {
    .gallery-grid--cols-3, .gallery-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gallery-grid-item {
    aspect-ratio: 4 / 3;
    background-color: var(--c-cream-2, #eef9f9);
    border-radius: 8px;
    overflow: hidden;
    display: block;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
/* Náhled je <img> (WebP + srcset), ne background — prohlížeč tak umí vybrat
   zmenšenou variantu a načíst ji až když se blíží do záběru. */
.gallery-grid-item picture,
.gallery-grid-item .gallery-grid-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-grid-item:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }

/* Builder element „Galerie" (mřížka z nahraných fotek, volitelný lightbox) —
   dosud bez vlastních stylů, fotky se roztahovaly v původním poměru. */
.builder-gallery.gallery-cols-2,
.builder-gallery.gallery-cols-3,
.builder-gallery.gallery-cols-4 {
    display: grid;
    gap: 12px;
    max-width: 1240px;
    margin: 0 auto;
}
.builder-gallery.gallery-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.builder-gallery.gallery-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.builder-gallery.gallery-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.builder-gallery .gallery-item { margin: 0; }
.builder-gallery .gallery-item picture,
.builder-gallery .gallery-item-img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}
.builder-gallery .gallery-item figcaption {
    margin-top: 6px;
    font-size: 13px;
    color: var(--c-muted);
    text-align: center;
}
@media (max-width: 991px) {
    .builder-gallery.gallery-cols-3,
    .builder-gallery.gallery-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ─── Způsob platby — volby jako karty ──────────────────────────────────────
   Víceřádkové popisky (záloha 50 % + doplatek…) dřív splývaly do jednoho bloku
   textu a nebylo poznat, kde volba začíná a končí. Každá volba je teď vizuálně
   ohraničená karta, radio kotví na první řádek, vybraná volba se zvýrazní. */
label.form-checkbox.pay-option,
.form-group label.form-checkbox.pay-option{
    align-items: flex-start;
    gap: 12px;
    background: #f7fdfd;
    border: 1px solid var(--c-line-soft, #e4eaea);
    border-radius: 10px;
    padding: 13px 16px;
    line-height: 1.55;
    transition: border-color .15s ease, background .15s ease;
}
label.form-checkbox.pay-option input,
.form-group label.form-checkbox.pay-option input{
    margin-top: 3px;
    flex-shrink: 0;
}
label.form-checkbox.pay-option.mt-small{ margin-top: 10px; }
label.form-checkbox.pay-option:hover{ border-color: var(--c-primary, #3b61dd); }
label.form-checkbox.pay-option:has(input:checked){
    border-color: var(--c-primary, #3b61dd);
    background: #ecfafb;
    box-shadow: 0 0 0 1px var(--c-primary, #3b61dd);
}
/* Viditelný focus pro ovládání klávesnicí (GPT review) */
label.form-checkbox.pay-option:focus-within{
    outline: 2px solid var(--c-primary, #3b61dd);
    outline-offset: 2px;
}

/* ─── Pojistka proti dlouhým nezalomitelným řetězcům ────────────────────────
   Vložená URL („www.stezkakorunamistromu.cz") nebo dlouhé slovo se na úzkém
   displeji nemá kam zalomit a roztáhne obsah přes okraj — kvůli overflow-x:clip
   se pak ořízne i vše okolo. `break-word` zasáhne jen tehdy, když by slovo
   jinak přeteklo; běžnou sazbu nijak nemění. Vlastnost se dědí, takže stačí
   nastavit ji na kořeni. */
body { overflow-wrap: anywhere; }