/* === Kemp Sluníčko homepage CSS === */
/* Extracted verbatim from DONE_upload.html (3 inline <style> blocks). */
/* Do not optimize at this stage — exact-visual-parity is the goal. */

/* ---------- Block 1: main stylesheet (lines 8-283 of source) ---------- */
/* Consolidated :root variables (merged from 3 successive global blocks; last-writer-wins). */:root { --bg: #F3F1EB; --bg-alt: #ECE8DE; --card-bg: #FAF8F2; --ink: #1D1B17; --muted: #676158; --primary: #2A4A24; --dark: #1F2D1B; --line: rgba(31,45,27,.12); --ks-lime: #2A4A24; --ks-lime-hover: #355D2E; --ks-dark: #1F2D1B; --ks-green-dark: #1F2D1B; --ks-white-soft: #F8FAF4; --shadow-soft: 0 10px 30px -24px rgba(31,45,27,.28); --shadow-strong: 0 28px 72px -42px rgba(31,45,27,.42); --ks-shadow-soft-hover: 0 2px 6px rgba(0,0,0,0.06), 0 10px 28px rgba(0,0,0,0.08); --radius: 24px; --radius-lg: 32px; --container: 1280px; --gutter: 24px; --display: "Freigeist",Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif; --sans: "Freigeist",Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif; --surface: #FAF8F2; --surface-muted: #ECE8DE; --primary-hover: #355D2E; } /* ======================================================================
      §0 · FONTS · FREIGEIST FAMILY
      ====================================================================== */@font-face { font-family: "Freigeist"; src: url("fonts/freigeist-thin.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Freigeist"; src: url("fonts/freigeist-regular.woff2") format("woff2"),url("fonts/freigeist-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Freigeist"; src: url("fonts/freigeist-medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Freigeist"; src: url("fonts/freigeist-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } @media (max-width: 700px) { html {  scroll-padding-top: 78px; } } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } h1, h2, h3, h4 { font-family: var(--display); margin: 0; color: var(--dark); font-weight: 500; } h1 { font-size: clamp(48px,7.6vw,88px); line-height: 1.02; letter-spacing: -.03em; } h2 { font-size: clamp(34px,4.4vw,56px); line-height: 1.06; letter-spacing: -.03em; } h3 { font-size: clamp(20px,2vw,24px); line-height: 1.2; letter-spacing: -.02em; } h4 { font-size: 15px; font-weight: 500; letter-spacing: -.01em; } p { margin: 0 0 1em; } .lede { font-size: 17px; color: var(--muted); max-width: 58ch; } .eyebrow { display: inline-block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ks-dark); font-weight: 500; margin-bottom: 16px; } .section { padding: 96px 0; } .section--hero-follow { padding: 72px 0 112px; } .section--feature { padding: 150px 0; } .section--compact { padding: 72px 0; } @media (max-width:1100px) { .section {  padding: 72px 0; }  .section--hero-follow {  padding: 56px 0 88px; }  .section--feature {  padding: 110px 0; }  .section--compact {  padding: 56px 0; } } @media (max-width:700px) { .section {  padding: 56px 0; }  .section--hero-follow {  padding: 40px 0 64px; }  .section--feature {  padding: 80px 0; }  .section--compact {  padding: 40px 0; } } .section--soft { background: #FAF8F2; } .section--alt { background: var(--bg-alt); } .section--deep { background: #E8E0CF; } .section--atmosphere { background: radial-gradient(circle at 20% 10%,rgba(215,242,74,.10),transparent 28%),linear-gradient(180deg,#ECE6D8 0%,#E4DCCB 100%); } /* Lower-page energy: Contact gets a subtle warm tonal shift */#kontakt { background: radial-gradient(circle at 85% 8%,rgba(215,242,74,.07),transparent 32%),linear-gradient(180deg,#EDE5D2 0%,#E3DAC3 100%); } .section--dark { background: var(--dark); color: #E6E2D4; } .section-head { max-width: 720px; margin-bottom: 48px; } .section-head h2 { margin-bottom: 20px; } .section-head .lede { margin: 0; } /* Intentional per-section spacing variation (break the 96/96/96 feel) */#ubytovani .section-head { margin-bottom: 64px; } #cenik .section-head { margin-bottom: 36px; } #recenze .section-head { margin-bottom: 32px; } #faq > .container > *:first-child + .faq-list { margin-top: -4px; } #ubytovani-detail .section-head { max-width: 760px; margin-bottom: 58px; padding-left: 6px; } #ubytovani-detail .section-head h2 { letter-spacing: -.03em; } #ubytovani-detail .section-head .lede { max-width: 62ch; font-size: 17px; line-height: 1.65; } .section.crosssell-section { padding-top: 64px; padding-bottom: 96px; } .crosssell-section--reverse { padding-top: 96px; padding-bottom: 64px; } /* ======================================================================
      §0c · BASE · IMAGE CONTAINER NORMALIZATION (.ph / hero-bg / etc.)
      ====================================================================== */.ph, .hero-bg, .ks-footer__bg, .ks-overlay-card__img, .over-card__media, .xp-tile__img, .cross .ph, .food .ph, .lake .ph, .contact-map .ph, .crosssell__img { overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; } .ph { background-color: var(--bg-alt); border: 1px dashed rgba(35,35,31,.18); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 20px; border-radius: var(--radius); position: relative; } .ph::before { content: "Foto — " attr(data-ph); display: block; max-width: 90%; } .ph[style*="background-image"], .ks-overlay-card__img[style*="background-image"], .hero-bg[style*="background-image"], .ks-footer__bg[style*="background-image"], .crosssell__img[style*="background-image"] { border: none; } .ph[style*="background-image"]::before, .ks-overlay-card__img[style*="background-image"]::before, .hero-bg[style*="background-image"]::after, .ks-footer__bg[style*="background-image"]::after { display: none; } /* ======================================================================
      §0d · BUTTONS · KS BUTTON SYSTEM
      ====================================================================== */.ks-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 54px; padding: 0 22px; border-radius: 999px; border: none; font-family: "Freigeist",Inter,sans-serif; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -.02em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: all .25s ease; box-shadow: none; } .ks-btn__icon { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; background: rgba(8,42,23,.08); color: inherit; flex-shrink: 0; transition: transform .25s ease, background-color .25s ease; } .ks-btn:hover .ks-btn__icon { transform: translate(2px,-2px); } .ks-btn--primary { background: #D7F24A; color: #082A17; } .ks-btn--primary:hover { background: #CBE83E; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.08); } .ks-btn--light { background: var(--ks-white-soft); color: var(--ks-dark); } .ks-btn--light:hover { background: #fff; } .ks-btn--outline-light { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ks-btn--outline-light .ks-btn__icon { background: rgba(255,255,255,.18); color: #fff; } .ks-btn--outline-light:hover { background: rgba(255,255,255,.16); border-color: #fff; } .ks-btn--ghost { background: transparent; color: var(--ks-dark); border: 1px solid rgba(9,40,23,.22); } .ks-btn--ghost:hover { border-color: rgba(9,40,23,.44); } @media (max-width:767px) { .ks-btn {  width: 100%;  height: 56px;  padding: 0 22px;  font-size: 17px; }  .ks-btn__icon {  width: 38px;  height: 38px;  font-size: 17px; } } .nav .ks-btn { height: 48px; padding: 0 20px; font-size: 15px; gap: 12px; width: auto; } .nav .ks-btn__icon { width: 32px; height: 32px; font-size: 15px; } /* ======================================================================
      §0e · HEADER
      ====================================================================== */header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s ease,border-color .3s ease; } header.nav.scrolled { background: rgba(245,242,234,.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 20px; } .logo { font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -.01em; color: var(--dark); } header.nav:not(.scrolled) .logo { color: #fff; } header.nav:not(.scrolled) { color: #fff; } .nav-links { display: flex; gap: 26px; font-size: 15px; font-weight: 400; } .nav-links a { opacity: .92; } .nav-links a:hover { opacity: 1; } @media (min-width:768px) and (max-width:900px) { .nav-links {  display: flex;  gap: 16px;  font-size: 14px; } } @media (max-width:767px) { .nav-links {  display: none; } } /* ===== §1 HERO — split editorial ===== */.hero { position: relative; min-height: auto; padding-bottom: 64px; color: #fff; overflow: hidden; display: flex; align-items: stretch; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 42%; background-repeat: no-repeat; background-color: #1F2A20; } .hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(8,42,23,.38) 0%,rgba(8,42,23,.18) 42%,rgba(8,42,23,.62) 100%); } .hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 140px var(--gutter) 64px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; } .hero-block { max-width: 760px; } .hero-label { display: inline-block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.74); margin-bottom: 20px; font-weight: 500; } .hero h1 { color: #fff; margin-bottom: 24px; font-size: clamp(48px, 8.2vw, 110px); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; } .hero-sub { font-size: clamp(16px,1.3vw,19px); color: rgba(255,255,255,.92); margin-bottom: 32px; max-width: 48ch; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .hero-meta-col { align-self: end; display: grid; gap: 4px 0; max-width: 240px; padding-bottom: 6px; } .hero-meta-col span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 500; padding-top: 14px; } .hero-meta-col strong { font-weight: 500; color: #fff; letter-spacing: 0; text-transform: none; font-size: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.14); display: block; } .hero-meta-col > *:first-child { padding-top: 0; } .hero-meta-col > strong:last-child { border-bottom: none; } @media (max-width:900px) { .hero-inner {  grid-template-columns: 1fr;  padding: 120px var(--gutter) 56px; }  .hero-meta-col {  display: none; } } /* ===== §2 BOOKING — horizontal booking bar (final styles in BOOKING — PHASE 3 LOCK at end of CSS) ===== */.book-wrap { position: relative; z-index: 10; } .booking-caption { margin: 28px auto 0; max-width: 720px; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.6; font-style: italic; letter-spacing: .005em; } /* ===== §3 OVERVIEW — Accommodation Overview (self-contained, locked) =====
   All grid + visual + responsive rules live here. No trailing override. *//* Grid: 3 cols × 320px rows (rows 1+2). Strip auto-flows to row 3. */.over { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 320px; gap: 24px; } /* Card base: flex column, transparent, no border. */.over-card { background: transparent; border: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; position: relative; z-index: 1; } /* Media — image container. 24px radius normalized for all small cards. */.over-card__media { position: relative; height: 100%; overflow: hidden; background-color: #E8E1D0; flex: 1; border-radius: 24px; } .over-card__media .ph { position: absolute; inset: 0; border: none; border-radius: 0; background-color: #E8E1D0; width: 100%; height: 100%; } /* Badge — neutral, used only on feature card. */.over-card__badge { position: absolute; top: 16px; left: 16px; z-index: 3; background: rgba(255,255,255,.90); color: var(--ks-dark); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .over-card-body { padding: 18px 0 0; display: flex; flex-direction: column; flex: 0 0 auto; } /* Small-card typography: title 19, body 14 muted, max-width 42ch. */.over-card h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.2; color: var(--ks-dark); } .over-card p { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 42ch; } /* Subtle link CTA. No card hover lift, no transforms. */.over-card__cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; font-weight: 500; color: var(--ks-dark); border-bottom: 1px solid rgba(8,42,23,.22); padding-bottom: 2px; transition: border-color .2s ease; } .over-card__cta:hover { border-bottom-color: var(--ks-dark); } .over-card__cta svg { width: 13px; height: 13px; } /* Feature card (1st) — spans 2 cols × 2 rows. Only card with shadow. */.over-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; flex-direction: column; border-radius: 32px; overflow: hidden; box-shadow: var(--shadow-strong); z-index: 2; } .over-card:nth-child(1) .over-card__media { height: 100%; position: absolute; inset: 0; border-radius: 0; } .over-card:nth-child(1) .over-card-body { position: relative; z-index: 2; margin-top: auto; padding: 40px; background: linear-gradient(to top, rgba(8,42,23,.38), rgba(8,42,23,.08)); color: #fff; } .over-card:nth-child(1) h3 { color: #fff; font-size: clamp(30px, 3vw, 42px); margin-bottom: 12px; letter-spacing: -.02em; line-height: 1.06; } .over-card:nth-child(1) p { color: rgba(255,255,255,.86); font-size: 15px; max-width: 48ch; margin-bottom: 18px; line-height: 1.6; } .over-card:nth-child(1) .over-card__cta { color: #fff; border-bottom-color: rgba(255,255,255,.45); font-size: 14px; } .over-card:nth-child(1) .over-card__cta:hover { border-bottom-color: #fff; } .over-card:nth-child(1) .over-card__badge { background: rgba(255,255,255,.90); color: var(--ks-dark); top: 26px; left: 26px; } /* Editorial offset — controlled grid rhythm via margin-top.
    No transforms. Subtle, max ±24px. */.over-card:nth-child(2) { margin-top: 20px; } .over-card:nth-child(3) { margin-top: -12px; } /* Bottom strip (4th) — editorial row, full width. No card chrome. */.over-card:nth-child(4) { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 380px 1fr; flex-direction: unset; gap: 32px; align-items: center; background: transparent; border: none; padding-top: 32px; } .over-card:nth-child(4) .over-card__media { position: relative; height: 100%; min-height: 240px; border-radius: 24px; overflow: hidden; } .over-card:nth-child(4) .over-card-body { padding: 8px 0; justify-content: center; } .over-card:nth-child(4) h3 { font-size: 24px; margin-bottom: 10px; letter-spacing: -.02em; } .over-card:nth-child(4) p { font-size: 15px; max-width: 52ch; line-height: 1.6; } /* Tablet — 2 columns, feature + strip span full width. Reset offsets. */@media (max-width: 1100px) { .over {  grid-template-columns: repeat(2, 1fr);  grid-auto-rows: auto; }  .over-card:nth-child(1), .over-card:nth-child(4) {  grid-column: 1 / -1;  grid-row: auto; }  .over-card:nth-child(1) {  min-height: 440px; }  .over-card:nth-child(2), .over-card:nth-child(3) {  margin-top: 0;  display: flex;  flex-direction: column;  min-height: auto; }  .over-card:nth-child(2) .over-card__media, .over-card:nth-child(3) .over-card__media {  height: 260px;  min-height: 260px;  flex: 0 0 260px; }  .over-card:nth-child(2) .over-card-body, .over-card:nth-child(3) .over-card-body {  padding-top: 18px; }  .over-card:nth-child(4) {  grid-template-columns: 1fr; }  .over-card:nth-child(4) .over-card__media {  height: 240px; } } /* Mobile — single column. */@media (max-width: 600px) { .over {  grid-template-columns: 1fr; }  .over-card:nth-child(1) {  min-height: 380px; }  .over-card:nth-child(1) .over-card-body {  padding: 28px; }  .over-card:not(:nth-child(1)):not(:nth-child(4)) {  min-height: 340px; }  .over-card:nth-child(2) .over-card__media, .over-card:nth-child(3) .over-card__media {  height: 240px;  min-height: 240px;  flex-basis: 240px; } } /* ===== §4 LAKE — asymmetric overlap layout ===== */.lake-section { position: relative; } .lake { position: relative; display: flex; flex-direction: column; min-height: 670px; padding-bottom: 16px; } .lake-photo { position: relative; width: 100%; height: 600px; border-radius: 32px; margin-left: 0; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; box-shadow: var(--shadow-strong); } .lake-callout { position: absolute; top: 24px; left: 24px; background: #fff; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ks-dark); box-shadow: 0 12px 34px -24px rgba(8,42,23,.22); display: inline-flex; align-items: center; gap: 8px; z-index: 4; } .lake-callout::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ks-dark); } .lake-content { position: absolute; right: 40px; top: 315px; width: min(480px, calc(100% - 80px)); min-height: 320px; background: #F8F6F0; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 32px; padding: clamp(36px,3vw,44px); box-shadow: 0 28px 70px -36px rgba(8,42,23,.38); z-index: 3; } .lake-content .eyebrow { margin-bottom: 14px; } .lake-content h2 { margin: 0 0 16px; font-size: clamp(28px,3vw,38px); line-height: 1.08; } .lake-content .lede { font-size: 15px; line-height: 1.65; max-width: 48ch; margin: 0 0 26px; } .lake-blocks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 24px; } .lake-block { min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); } .lake-block h3 { font-size: 13px; margin: 0 0 4px; font-weight: 500; letter-spacing: .02em; color: var(--ks-dark); } .lake-block p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; } /* Reduce oversized photo-copy headline 40% on desktop — scoped to #jezero only */#jezero .photo-copy h3 { font-size: clamp(28px,3.6vw,56px); line-height: 1; letter-spacing: -.02em; margin-bottom: 16px; } #jezero .photo-copy__label { font-size: 10px; margin-bottom: 14px; } #jezero .photo-copy p { font-size: 14px; max-width: 38ch; } /* Lower grid — anchors left reasons block, right column is breathing room */.lake-lower { display: grid; grid-template-columns: minmax(0, 620px) 1fr; gap: 64px; margin-top: 44px; align-items: start; } /* Reasons block — locked into left column with anchor line */.lake-reasons { width: 100%; max-width: 580px; margin-top: 0; padding-left: 0; grid-column: 1; border-top: 1px solid var(--line); padding-top: 28px; } .lake-reasons > span { display: block; margin-bottom: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .lake-reasons h3 { margin: 0 0 24px; font-size: clamp(22px,2vw,30px); line-height: 1.15; letter-spacing: -.02em; color: var(--ks-dark); max-width: 24ch; } .lake-reasons__text { max-width: 48ch; margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--muted); } .lake-reasons ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .lake-reasons li { display: grid; grid-template-columns: 132px 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); } .lake-reasons li:last-child { padding-bottom: 0; } .lake-reasons strong { font-size: 13px; color: var(--ks-dark); font-weight: 500; } .lake-reasons small { font-size: 13px; color: var(--muted); line-height: 1.55; } /* Tablet — stack image → card → reasons */@media (max-width: 980px) { .lake {  min-height: 0;  padding-bottom: 0; }  .lake-photo {  height: 420px;  border-radius: 32px; }  .lake-content {  position: relative;  right: auto;  top: auto;  width: 92%;  margin: -48px auto 0;  padding: 32px;  min-height: 0; }  .lake-lower {  display: block;  margin-top: 40px; }  .lake-reasons {  width: 92%;  max-width: none;  margin: 0 auto; }  .lake-reasons h3 {  font-size: 28px;  max-width: 24ch; } } /* Mobile — clean stacked list */@media (max-width: 600px) { .lake {  padding-bottom: 0; }  .lake-photo {  height: 320px;  border-radius: 24px; }  .lake-content {  width: 94%;  margin: -40px auto 0;  padding: 24px;  border-radius: 24px;  min-height: 0; }  .lake-lower {  margin-top: 32px; }  .lake-reasons__text {  max-width: none; }  .lake-reasons {  width: 94%;  margin: 0 auto; }  .lake-reasons h3 {  max-width: none;  font-size: 23px; }  .lake-reasons li {  grid-template-columns: 1fr;  gap: 4px;  padding: 14px 0; }  .lake-blocks {  grid-template-columns: 1fr; } } /* ===== §5 EXPERIENCE — magazine spread ===== */.xp { display: grid; grid-template-columns: repeat(12,1fr); gap: 24px; } .xp-tile { display: flex; flex-direction: column; gap: 16px; } .xp-tile__img { position: relative; overflow: hidden; background-color: #E8E1D0; box-shadow: var(--shadow-soft); } .xp-tile__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55) 100%); z-index: 1; } .xp-tile__img .ph { position: absolute; inset: 0; border: none; border-radius: 0; background-color: #E8E1D0; width: 100%; height: 100%; } .xp-tile__img .lbl { position: absolute; left: 28px; bottom: 24px; color: #fff; font-family: var(--display); font-weight: 500; letter-spacing: -.03em; z-index: 2; text-shadow: 0 2px 10px rgba(0,0,0,.4); line-height: 1; } .xp-tile__desc { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.55; padding: 0 6px; } .xp-tile--primary { grid-column: 1/span 7; grid-row: 1/span 2; } .xp-tile--primary .xp-tile__img { aspect-ratio: 6/7; border-radius: 40px; box-shadow: var(--shadow-strong); } .xp-tile--primary .xp-tile__img::after { background: linear-gradient(180deg,transparent 42%,rgba(0,0,0,.18) 62%,rgba(0,0,0,.68) 100%); } .xp-tile--primary .lbl { font-size: clamp(48px,6.2vw,88px); left: 36px; bottom: 32px; letter-spacing: -.035em; line-height: .94; } .xp-tile--primary .xp-tile__desc { font-size: 16px; padding: 0 8px; } .xp-tile--secondary { grid-column: 8/span 5; grid-row: 1; } .xp-tile--secondary .xp-tile__img { aspect-ratio: 5/4; border-radius: 28px; } .xp-tile--secondary .lbl { font-size: clamp(24px,2.4vw,32px); } .xp-tile--editorial { grid-column: 8/span 5; grid-row: 2; background: rgba(248,246,240,.72); border: 1px solid rgba(35,35,31,.06); border-radius: 24px; padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; justify-content: center; min-height: 260px; } .xp-tile--editorial .eyebrow { margin-bottom: 14px; } .xp-tile--editorial blockquote { font-family: var(--display); font-size: clamp(22px,2.2vw,30px); line-height: 1.25; letter-spacing: -.02em; color: var(--ks-dark); margin: 0 0 16px; font-weight: 500; } .xp-tile--editorial blockquote em { font-style: italic; color: rgba(8,42,23,.7); } .xp-tile--editorial small { font-size: 13px; color: var(--muted); line-height: 1.5; } @media (max-width:980px) { .xp {  grid-template-columns: 1fr; }  .xp-tile--primary, .xp-tile--secondary, .xp-tile--editorial {  grid-column: 1/-1;  grid-row: auto; }  .xp-tile--primary .xp-tile__img {  aspect-ratio: 4/3; } } /* ===== §6 DETAIL TABS — only two button types: ghost white + active ghost ===== */.ks-tabs__nav { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 42px; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ks-tabs__nav::-webkit-scrollbar { display: none; } .ks-tabs__tab { flex: 0 0 auto; border: 1px solid rgba(31,45,27,.18); border-radius: 999px; background: rgba(255,255,255,.9); cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 500; color: rgba(31,45,27,.68); letter-spacing: -.01em; padding: 12px 17px; margin: 0; outline: none; box-shadow: none; transition: background .22s ease, color .22s ease, border-color .22s ease; white-space: nowrap; } .ks-tabs__tab:hover { color: var(--ks-dark); background: #fff; border-color: rgba(31,45,27,.32); } .ks-tabs__tab.is-active { background: #fff; color: var(--ks-dark); border-color: var(--ks-dark); box-shadow: inset 0 0 0 1px var(--ks-dark); font-weight: 500; } .ks-tabs__tab.is-active:hover { background: #fff; color: var(--ks-dark); border-color: var(--ks-dark); } .ks-tabs__tab:focus, .ks-tabs__tab:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(31,45,27,.10); } .ks-tabs__panel { display: none; } .ks-tabs__panel.is-active { display: block; animation: ksTabsFade .35s ease; } @keyframes ksTabsFade { from {  opacity: 0;  transform: translateY(6px); }  to {  opacity: 1;  transform: none; } } .ks-overlay-card { display: grid; grid-template-columns: 1.42fr .88fr; gap: 0; background: none; border-radius: 0; overflow: visible; min-height: 560px; position: relative; isolation: isolate; box-shadow: none; align-items: center; } .ks-overlay-card__img { position: relative; inset: auto; width: 100%; height: 100%; min-height: 560px; border-radius: 32px; object-fit: cover; object-position: center center; background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #1F2A20; box-shadow: 0 28px 72px -42px rgba(31,45,27,.42); } #panel-chatky .ks-overlay-card__img { background-position: center 45%; } #panel-typi .ks-overlay-card__img { background-position: center 48%; } .ks-overlay-card__shade { display: none; } .ks-overlay-card__content { position: relative; max-width: 520px; min-height: auto; padding: clamp(40px, 3.6vw, 56px); display: flex; flex-direction: column; justify-content: center; color: var(--ink); background: #F8F6F0; border: 1px solid rgba(31,45,27,.06); border-radius: 32px; box-shadow: 0 20px 54px -34px rgba(8,42,23,.34); z-index: 3; margin-left: -72px; transform: translateY(-18px); align-self: center; } .ks-overlay-card__content h3 { margin: 0 0 18px; font-family: var(--display); font-size: clamp(34px, 3.4vw, 48px); line-height: 1.03; font-weight: 500; letter-spacing: -.035em; color: var(--ks-dark); } .ks-overlay-card__content p { max-width: 48ch; margin: 0 0 26px; font-size: 15px; line-height: 1.65; color: var(--muted); } .ks-overlay-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin: 0 0 30px; padding-top: 22px; border-top: 1px solid rgba(31,45,27,.10); color: var(--ks-dark); font-size: 13px; } .ks-overlay-card__meta span { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: none; } .ks-overlay-card__meta span + span { padding-left: 0; border-left: none; } .ks-overlay-card__meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(31,45,27,.45); flex-shrink: 0; } .ks-overlay-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; } @media (max-width:900px) { .ks-tabs__nav {  margin-bottom: 40px;  overflow-x: auto;  flex-wrap: nowrap;  gap: 8px; }  .ks-tabs__tab {  flex: 0 0 auto; }  #ubytovani-detail .ks-overlay-card {  display: grid !important;  grid-template-columns: 1fr !important;  gap: 20px !important;  min-height: 0 !important;  align-items: stretch !important; }  #ubytovani-detail .ks-overlay-card__img {  order: 1 !important;  width: 100% !important;  height: auto !important;  min-height: 0 !important;  aspect-ratio: 4 / 3 !important;  border-radius: 24px !important; }  #ubytovani-detail .ks-overlay-card__content {  order: 2 !important;  margin: 0 !important;  transform: none !important;  width: 100% !important;  max-width: none !important;  border-radius: 24px !important;  padding: 28px !important;  align-self: stretch !important; }  .ks-overlay-card__meta {  grid-template-columns: 1fr; } } @media (max-width: 600px) { .ks-overlay-card__img {  min-height: 300px; }  .ks-overlay-card__content {  padding: 24px; }  .ks-overlay-card__content h3 {  font-size: 30px; }  .ks-overlay-card__meta {  grid-template-columns: 1fr; }  .ks-room-gallery__item {  transform: none; } } /* ===== §6.5 ROOM GALLERY — organic 3-col mini-gallery per panel ===== */#ubytovani-detail .ks-room-gallery { display: grid; grid-template-columns: 1.15fr .85fr 1fr; gap: 14px; margin-top: 14px; align-items: start; } #ubytovani-detail .ks-room-gallery__item { position: relative; border: 1px solid rgba(31,45,27,.08); padding: 0; cursor: pointer; border-radius: 20px; overflow: hidden; background: #E8E1D0; box-shadow: none; } #ubytovani-detail .ks-room-gallery__item:nth-child(1) { aspect-ratio: 4 / 3; transform: translateY(10px); } #ubytovani-detail .ks-room-gallery__item:nth-child(2) { aspect-ratio: 1 / 1; transform: translateY(-8px); } #ubytovani-detail .ks-room-gallery__item:nth-child(3) { aspect-ratio: 5 / 4; transform: translateY(18px); } #ubytovani-detail .ks-room-gallery__item .ph { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 0; background-size: cover; background-position: center; background-color: transparent; padding: 0; } #ubytovani-detail .ks-room-gallery__item .ph::before { content: none; } #ubytovani-detail .ks-room-gallery__item::after { content: "↗"; position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.86); color: var(--ks-dark); font-size: 15px; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; } #ubytovani-detail .ks-room-gallery__item:hover::after { opacity: 1; transform: translateY(0); } @media (max-width: 900px) { #ubytovani-detail .ks-room-gallery {  grid-template-columns: repeat(3, 1fr);  gap: 10px; }  #ubytovani-detail .ks-room-gallery__item, #ubytovani-detail .ks-room-gallery__item:nth-child(1), #ubytovani-detail .ks-room-gallery__item:nth-child(2), #ubytovani-detail .ks-room-gallery__item:nth-child(3) {  transform: none !important;  aspect-ratio: 4 / 3 !important; } } @media (max-width: 600px) { #ubytovani-detail .ks-room-gallery {  display: flex;  grid-template-columns: none;  overflow-x: auto;  gap: 12px;  margin-top: 16px;  padding-bottom: 4px;  scrollbar-width: none; }  #ubytovani-detail .ks-room-gallery::-webkit-scrollbar {  display: none; }  #ubytovani-detail .ks-room-gallery__item, #ubytovani-detail .ks-room-gallery__item:nth-child(1), #ubytovani-detail .ks-room-gallery__item:nth-child(2), #ubytovani-detail .ks-room-gallery__item:nth-child(3) {  flex: 0 0 72%;  transform: none !important;  aspect-ratio: 4 / 3 !important;  border-radius: 18px; } } /* ===== §6.6 LIGHTBOX — vanilla, scoped to room gallery ===== */.ks-lightbox[hidden] { display: none; } .ks-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; } .ks-lightbox__backdrop { position: absolute; inset: 0; background: rgba(8,20,14,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ks-lightbox__frame { position: relative; z-index: 2; width: min(1100px, 92vw); max-height: 86vh; border-radius: 28px; overflow: hidden; background: #111; } .ks-lightbox__img { width: 100%; height: 100%; max-height: 86vh; object-fit: contain; display: block; } .ks-lightbox__close { position: fixed; top: 24px; right: 24px; z-index: 3; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .ks-lightbox__close:hover { background: rgba(255,255,255,.18); } /* (Old §7 CENÍK price-block system deleted — replaced by .ks-price-widget calculator below.) *//* ===== §8 STEPS — calm editorial booking row ===== */.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 36px; } .step { background: none; border: none; border-top: 1px solid rgba(31,45,27,.12); padding: 22px 0 0; position: relative; } .step__icon { display: none; } .step .n { display: block; font-family: var(--display); font-weight: 500; font-size: 42px; line-height: .95; letter-spacing: -.04em; color: var(--ks-dark); opacity: .22; margin-bottom: 18px; } .step h3 { font-size: 18px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; color: var(--ks-dark); margin: 0 0 8px; } .step p { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 30ch; margin: 0; } .step-note { margin-top: 42px; max-width: 620px; font-size: 13px; line-height: 1.6; color: var(--muted); opacity: .9; text-align: center; font-style: italic; margin-left: auto; margin-right: auto; } @media (max-width: 900px) { .steps {  grid-template-columns: 1fr 1fr;  gap: 34px 32px; }  .step .n {  font-size: 38px; } } @media (max-width: 600px) { .steps {  grid-template-columns: 1fr;  gap: 0; }  .step {  display: grid;  grid-template-columns: 56px 1fr;  column-gap: 18px;  padding: 22px 0;  border-top: 1px solid rgba(31,45,27,.12); }  .step:last-child {  border-bottom: 1px solid rgba(31,45,27,.12); }  .step .n {  font-size: 34px;  margin-bottom: 0;  align-self: start; }  .step h3 {  margin-bottom: 6px; }  .step p {  max-width: none; }  .step-note {  margin-top: 28px;  text-align: left;  max-width: none; } } /* ============================================================
   §8 RESERVATION STEPS — editorial + active-card stack
   Scoped to .res-steps. Active card driven by JS, not hover.
   ============================================================ */.res-steps { position: relative; isolation: isolate; overflow: hidden; z-index: 1; background: var(--bg); padding: clamp(88px, 9vw, 130px) 0; } .res-steps-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(360px, .7fr) minmax(540px, 1.1fr); gap: clamp(40px, 5vw, 72px); align-items: center; } /* Left text column */.res-steps-left { max-width: 620px; padding-top: 0; } .res-steps-left .eyebrow { font-size: 12px; letter-spacing: .2em; font-weight: 500; color: var(--ks-dark); margin-bottom: 28px; text-transform: uppercase; } .res-steps-title { font-family: var(--display); font-size: clamp(58px, 5.1vw, 74px); line-height: 1.08; letter-spacing: -.045em; font-weight: 500; color: var(--ks-dark); margin: 0; max-width: 11.8ch; } .res-steps-lede { margin: 52px 0 0; font-size: 18px; line-height: 1.75; color: rgba(31,45,27,.58); max-width: 39ch; } .res-steps-trust { margin-top: 42px; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; max-width: 440px; color: rgba(31,45,27,.62); font-size: 15px; line-height: 1.58; } .res-steps-trust__icon { width: 64px; height: 64px; border-radius: 999px; background: rgba(31,45,27,.075); display: flex; align-items: center; justify-content: center; color: var(--ks-dark); flex: 0 0 auto; } .res-steps-trust__icon svg { width: 24px; height: 24px; display: block; } /* Right card stack — contained, active-card driven */.res-steps-right { position: relative; height: 560px; min-width: 0; width: 100%; max-width: 720px; perspective: 1400px; perspective-origin: 50% 50%; overflow: visible; } .res-card { --x: 0px; --y: 0px; --r: 0deg; --active-x: 0px; --active-y: 0px; --active-r: 0deg; --scale: 1; --reveal-y: 24px; --reveal-o: 0; position: absolute; top: 46px; left: 0; width: 260px; height: 400px; border-radius: 32px; background: #FBFAF5; border: 1px solid rgba(31,45,27,.06); box-shadow: 0 28px 78px -48px rgba(31,45,27,.42); padding: 30px 28px 34px; display: flex; flex-direction: column; justify-content: flex-end; opacity: var(--reveal-o); transform: translate3d(
      calc(var(--x) + var(--active-x)),
      calc(var(--y) + var(--active-y) + var(--reveal-y)),
      0
    )
    rotate(calc(var(--r) + var(--active-r)))
    scale(var(--scale)); transform-origin: center bottom; backface-visibility: hidden; transition: transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .42s ease; will-change: transform; cursor: pointer; outline: none; } .res-card.is-revealed { --reveal-y: 0px; --reveal-o: 1; } .res-card[data-index="1"] { --x: 0px; --y: 62px; --r: -7deg; z-index: 1; } .res-card[data-index="2"] { --x: 60px; --y: 42px; --r: -4deg; z-index: 2; } .res-card[data-index="3"] { --x: 120px; --y: 24px; --r: -1deg; z-index: 3; } .res-card[data-index="4"] { --x: 180px; --y: 30px; --r: 3deg; z-index: 4; } .res-card[data-index="5"] { --x: 240px; --y: 0px; --r: 5deg; z-index: 5; } /* Active card — barely noticeable lift, rotates back to 0 */.res-card.is-active { --active-y: -6px; --active-r: calc(var(--r) * -1); --scale: 1.008; z-index: 50; box-shadow: 0 34px 86px -48px rgba(31,45,27,.44); } .res-card:not(.is-active) { opacity: 1; } .res-steps-right.is-interacting .res-card:not(.is-active) { filter: none; } /* Hit zones — invisible buttons that drive activation */.res-card-hit { position: absolute; top: 20px; height: 480px; z-index: 100; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; outline: none; } .res-card-hit--1 { left: 0; width: 82px; } .res-card-hit--2 { left: 82px; width: 82px; } .res-card-hit--3 { left: 164px; width: 82px; } .res-card-hit--4 { left: 246px; width: 82px; } .res-card-hit--5 { left: 328px; width: 284px; } .res-card-hit:focus-visible { outline: 2px solid rgba(31,45,27,.20); outline-offset: -8px; border-radius: 24px; } /* Card content — number top-left, icon below, title + body at bottom */.res-card__num { position: absolute; top: 36px; left: 34px; right: auto; font-family: var(--display); font-size: 56px; line-height: 1; font-weight: 400; letter-spacing: -.04em; color: rgba(31,45,27,.11); } .res-card__icon { position: absolute; top: 150px; left: 36px; transform: none; width: 40px; height: 40px; color: rgba(31,45,27,.68); opacity: 1; } .res-card__icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.45; } .res-card__title { font-family: var(--display); font-size: 22px; line-height: 1.13; font-weight: 400; letter-spacing: -.028em; color: rgba(31,45,27,.88); margin: 0 0 20px; max-width: 9ch; } .res-card__text { font-size: 14px; line-height: 1.72; font-weight: 400; color: rgba(31,45,27,.56); margin: 0; max-width: 17ch; } .res-card[data-index="5"] .res-card__title { max-width: 9ch; } .res-card[data-index="5"] .res-card__text { max-width: 18ch; } /* Tablet — collapse to single column, center the stack, keep the fan */@media (max-width: 1180px) and (min-width: 901px) { .res-steps-inner {  grid-template-columns: 1fr;  gap: 54px; }  .res-steps-left {  max-width: 680px; }  .res-steps-title {  max-width: 12ch;  font-size: clamp(54px, 7vw, 72px); }  .res-steps-right {  width: 100%;  min-width: 0;  max-width: 720px;  height: 540px;  transform: none;  margin-left: auto;  margin-right: auto; } } /* Mobile / tablet — horizontal swipe cards, no fan, no active state */@media (max-width: 900px) { .res-steps {  padding: 80px 0; }  .res-steps-inner {  grid-template-columns: 1fr;  gap: 42px; }  .res-steps-left {  max-width: 640px; }  .res-steps-title {  font-size: clamp(42px, 12vw, 58px);  max-width: 11ch; }  .res-steps-lede {  margin-top: 28px;  font-size: 16px; }  .res-steps-right {  height: auto;  display: flex;  overflow-x: auto;  -webkit-overflow-scrolling: touch;  scrollbar-width: none;  gap: 16px;  padding: 8px var(--gutter) 28px;  margin: 0;  perspective: none; }  .res-steps-right::-webkit-scrollbar {  display: none; }  .res-card {  position: relative;  top: auto;  left: auto;  width: 270px;  height: 360px;  flex: 0 0 270px;  transform: none !important;  opacity: 1 !important;  filter: none !important; }  .res-card.is-active {  transform: none !important;  box-shadow: 0 28px 76px -46px rgba(31,45,27,.45); }  .res-card-hit {  display: none; } } /* Reduced motion — no transitions, static fan revealed */@media (prefers-reduced-motion: reduce) { .res-card {  transition: none !important;  --reveal-y: 0px !important;  --reveal-o: 1 !important; } } /* ===== §9 & §11b CROSS-SELL — separate editorial sections ===== */.crosssell-section { padding: 80px 0; } .crosssell { display: grid; grid-template-columns: minmax(340px,.9fr) 1fr; gap: clamp(48px,6vw,96px); align-items: center; max-width: 1320px; margin: 0 auto; } .crosssell--right { grid-template-columns: 1fr minmax(340px,.9fr); } .crosssell__img { width: 100%; aspect-ratio: 4/5; border-radius: 24px; transform: none; box-shadow: 0 12px 34px -24px rgba(8,42,23,.22); background-size: cover; background-position: center center; background-color: #E8E1D0; } .crosssell--right .crosssell__img { transform: none; } .crosssell__body { max-width: 46ch; } .crosssell__body .eyebrow { font-size: 11px; color: var(--ks-dark); margin-bottom: 14px; letter-spacing: .14em; opacity: .7; } .crosssell__body h3 { font-size: clamp(26px,2.6vw,34px); margin: 0 0 18px; line-height: 1.12; color: var(--ks-dark); font-weight: 500; letter-spacing: -.02em; } .crosssell__body p { font-size: 15px; color: var(--muted); margin: 0 0 22px; line-height: 1.6; } .crosssell__details { font-size: 14px; color: var(--muted); margin: 0 0 26px; padding-top: 18px; border-top: 1px solid var(--line); line-height: 1.6; } @media (max-width:900px) { .crosssell-section {  padding: 60px 0; }  .crosssell, .crosssell--right {  grid-template-columns: 1fr;  gap: 32px;  max-width: 672px; }  .crosssell--right .crosssell__body {  order: 2; }  .crosssell--right .crosssell__img {  order: 1; }  .crosssell__img {  max-width: 432px;  aspect-ratio: 4/5;  margin-left: auto;  margin-right: auto;  transform: none; }  .crosssell--right .crosssell__img {  margin: 0 auto;  transform: none; } } /* ===== §10 FOOD — editorial spread with drop-cap ===== */.food-section { display: flex; flex-direction: column; gap: 72px; } .food-photo { width: 100%; aspect-ratio: 16/9; border-radius: 32px; background-size: cover; background-position: center center; background-color: #E8E1D0; box-shadow: 0 12px 34px -24px rgba(8,42,23,.22); } .food-body { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(48px,7vw,88px); align-items: start; } .food-body__head .eyebrow { margin-bottom: 16px; } .food-body__head h2 { margin: 0 0 22px; font-size: clamp(32px,3.8vw,56px); letter-spacing: -.03em; line-height: 1.04; } .food-body__lede { font-size: clamp(16px,1.3vw,18px); color: var(--muted); line-height: 1.55; margin: 0; max-width: 38ch; } .food-body__copy { max-width: 56ch; } .food-body__copy .food-body__open { font-size: clamp(17px,1.35vw,20px); line-height: 1.55; color: var(--ink); margin: 0 0 20px; } .food-body__copy p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; } /* Drop-cap removed — clean editorial paragraph start, no decorative tricks. */.food-info { display: flex; gap: 0; padding: 22px 0 0; border-top: 1px solid rgba(31,45,27,.08); } .food-info__card { flex: 1; background: none; border: none; padding: 0 22px; box-shadow: none; border-right: 1px solid rgba(31,45,27,.08); display: flex; flex-direction: column; gap: 6px; } .food-info__card:first-child { padding-left: 0; } .food-info__card:last-child { border-right: none; padding-right: 0; } .food-info__card h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; font-weight: 500; line-height: 1; } .food-info__card p { font-size: 14px; color: var(--ks-dark); margin: 0; line-height: 1.4; font-weight: 500; } .food-note { font-size: 13px; color: var(--muted); margin: 0; max-width: 720px; line-height: 1.6; } @media (max-width:900px) { .food-section {  gap: 56px; }  .food-body {  grid-template-columns: 1fr;  gap: 24px; }  .food-info {  flex-direction: column;  padding: 22px 0 0; }  .food-info__card {  border-right: none;  border-bottom: 1px solid rgba(31,45,27,.08);  padding: 14px 0; }  .food-info__card:first-child {  padding-top: 0; }  .food-info__card:last-child {  border-bottom: none;  padding-bottom: 0; } } /* ===== §11 TESTIMONIALS — asymmetric Bento ===== */.tst-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px 56px; align-items: start; } .tst { background: none; border: none; padding: 0; box-shadow: none; border-radius: 0; } .tst--primary { grid-column: 1; grid-row: 1/span 2; padding-right: 24px; } .tst--primary blockquote { font-family: var(--display); font-size: clamp(22px,2.2vw,30px); line-height: 1.3; letter-spacing: -.015em; color: var(--ks-dark); margin: 0 0 16px; font-weight: 500; } .tst--primary blockquote::before { content: "„"; display: block; font-family: var(--display); font-size: 96px; color: #D7F24A; line-height: .5; margin-bottom: 8px; opacity: .9; } .tst--primary .sig { font-size: 13px; color: var(--muted); font-style: italic; } .tst--sm { grid-column: 2; border-left: 2px solid var(--line); padding-left: 28px; } .tst--sm:nth-of-type(2) { grid-row: 1; } .tst--sm:nth-of-type(3) { grid-row: 2; } .tst--sm blockquote { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--ink); } .tst--sm blockquote::before { display: none; } .tst--sm .sig { font-size: 12px; color: var(--muted); font-style: italic; letter-spacing: .01em; } .tst-note { font-size: 12px; color: var(--muted); margin: 14px 0 0; font-style: italic; opacity: .7; letter-spacing: .02em; } @media (max-width:900px) { .tst-grid {  grid-template-columns: 1fr;  gap: 32px; }  .tst--primary, .tst--sm {  grid-column: 1;  grid-row: auto;  padding: 0;  border-left: none; }  .tst--sm {  padding-top: 20px;  border-top: 1px solid var(--line); } } /* ===== §12 FAQ — naked accordion ===== */.faq-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px,5vw,72px); align-items: start; } @media (max-width:900px) { .faq-grid {  grid-template-columns: 1fr; } } .faq-list { display: flex; flex-direction: column; gap: 0; background: none; border: none; border-radius: 0; overflow: visible; box-shadow: none; } .faq-item { border-bottom: 1px solid rgba(8,42,23,.10); background: none; } .faq-item:last-child { border-bottom: none; } .faq-q { width: 100%; background: none; border: none; text-align: left; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--display); font-size: clamp(17px,1.3vw,19px); font-weight: 500; color: var(--ks-dark); cursor: pointer; transition: color .2s ease; } .faq-q:hover { color: var(--dark); } .faq-q .plus { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: transform .3s ease, color .3s ease; flex-shrink: 0; } .faq-q .plus svg { width: 100%; height: 100%; display: block; } .faq-item.open .faq-q .plus { transform: rotate(45deg); color: var(--ks-dark); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-item.open .faq-a { max-height: 500px; } .faq-a-inner { padding: 0 0 28px 28px; border-left: 2px solid #D7F24A; margin-bottom: 4px; color: var(--ink); font-size: 15px; max-width: 60ch; line-height: 1.7; } .faq-item:not(.open) .faq-a-inner { border-left-color: transparent; } /* ===== §13 CONTACT — address / underline form / full-bleed map ===== */.contact { display: grid; grid-template-columns: .7fr 1fr; gap: clamp(40px,6vw,96px); align-items: start; } @media (max-width:900px) { .contact {  grid-template-columns: 1fr; } } .contact-list { display: flex; flex-direction: column; gap: 0; } .contact-list .eyebrow { margin-bottom: 10px; } .contact-list .contact-title { font-family: var(--display); font-size: clamp(24px,2.4vw,32px); margin: 0 0 28px; font-weight: 500; letter-spacing: -.02em; color: var(--ks-dark); line-height: 1.15; } .contact-row { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--line); } .contact-row:last-of-type { border-bottom: none; } .contact-row .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .contact-row .v { font-family: var(--display); font-size: 17px; color: var(--ks-dark); font-weight: 500; } .contact-row .v a:hover { opacity: .7; } .contact-group-text { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 20px 0 0; max-width: 42ch; padding-top: 20px; border-top: 1px solid var(--line); } .contact-form-wrap .eyebrow { margin-bottom: 10px; } .contact-form-wrap h3 { font-size: clamp(24px,2.4vw,32px); margin: 0 0 28px; font-weight: 500; letter-spacing: -.02em; color: var(--ks-dark); } .contact-form { display: flex; flex-direction: column; gap: 24px; background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .contact-form label { display: flex; flex-direction: column; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 500; gap: 8px; } .contact-form input, .contact-form textarea { font-family: var(--sans); font-size: 16px; padding: 14px 0; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); resize: vertical; line-height: 1.45; transition: border-color .2s ease; width: 100%; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--ks-dark); } .contact-form .ks-btn { align-self: flex-start; margin-top: 12px; } .contact-visual { margin-top: 80px; display: grid; grid-template-columns: .42fr .58fr; gap: 20px; align-items: stretch; } .contact-visual__photo { width: 100%; aspect-ratio: 4/5; border-radius: 28px; background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #E8E1D0; box-shadow: var(--shadow-soft); } .contact-visual__map { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-soft); } .contact-visual__map .ph { border: none; border-radius: 0; height: 100%; min-height: 420px; aspect-ratio: auto; background-color: #E4DCCB; background-image: radial-gradient(circle at 60% 45%,rgba(215,242,74,.14),transparent 35%),linear-gradient(135deg,#ECE6D8 0%,#D9D0B9 100%); } .contact-visual__tag { position: absolute; top: 20px; left: 20px; z-index: 2; background: #fff; padding: 10px 16px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--ks-dark); box-shadow: var(--shadow-soft); display: inline-flex; align-items: center; gap: 8px; } .contact-visual__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #D7F24A; } @media (max-width:900px) { .contact-form__row {  grid-template-columns: 1fr; }  .contact-visual {  grid-template-columns: 1fr;  margin-top: 56px; }  .contact-visual__photo {  aspect-ratio: 3/2;  max-height: 360px; }  .contact-visual__map .ph {  min-height: 320px; } } /* ===== Elevation =====
   .over-card removed from this block. Hover lift + shadow translation
   are no longer applied to accommodation cards. SAFE LOCK at end owns
   the accommodation card shadow/transform behavior. */.faq-list, .price-block, .food-info__card { transition: box-shadow .25s ease, transform .25s ease; } .price-block:hover { transform: translateY(-2px); box-shadow: var(--ks-shadow-soft-hover); } /* ===== §14 FOOTER — Tropica clone with italic accent + edge hairline ===== */.ks-footer { position: relative; overflow: clip; display: flex; flex-direction: column; isolation: isolate; background: #1F2A20; color: #fff; } .ks-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent 0%,rgba(215,242,74,.35) 50%,transparent 100%); z-index: 3; } .ks-footer__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 0; background-color: #1F2A20; background-size: cover; background-position: center center; background-repeat: no-repeat; } .ks-footer__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.32) 42%,rgba(0,0,0,.72) 100%); } .ks-footer__cta { position: relative; z-index: 2; padding: 140px 50px 70px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 24px; min-height: 560px; opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .ks-footer__cta.is-visible { opacity: 1; transform: translateY(0); } .ks-footer__cta h2 { max-width: 760px; margin: 0; font-family: "Freigeist",Inter,sans-serif; font-size: clamp(44px,5.8vw,82px); line-height: 1.05; font-weight: 500; letter-spacing: -.025em; color: #fff; } .ks-footer__cta h2 em { font-style: italic; color: rgba(215,242,74,.88); font-weight: 400; } .ks-footer__cta p { max-width: 560px; margin: 0; font-size: clamp(17px,1.4vw,20px); line-height: 1.4; font-weight: 400; color: rgba(255,255,255,.9); } .ks-footer__cta .ks-btn { margin-top: 4px; } .ks-footer__group-strip { position: relative; z-index: 2; padding: 22px clamp(20px, 4vw, 65px); border-top: 1px solid rgba(255,255,255,.12); text-align: center; } .ks-footer__group-strip p { margin: 0 auto; max-width: 90ch; } .ks-footer__group-strip a { text-decoration: none; } .ks-footer__group-strip a:hover { text-decoration: underline; } .ks-footer__bar { position: relative; z-index: 2; padding: 24px 65px 48px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: clamp(40px,7vw,100px); } .ks-footer__nav { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 40px; max-width: 420px; } .ks-footer__nav a { font-family: "Freigeist",Inter,sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; color: #fff; transition: opacity .2s ease; } .ks-footer__nav a:hover { opacity: .7; } .ks-footer__brand { font-family: "Freigeist",Inter,sans-serif; font-size: 28px; line-height: 1; font-weight: 500; letter-spacing: -.01em; color: #fff; white-space: nowrap; position: relative; } .ks-footer__brand::before { content: ""; position: absolute; left: calc(clamp(40px,7vw,100px) * -.5); top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,.14); } .ks-footer__copy { flex: 1; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-family: "Freigeist",Inter,sans-serif; font-size: 14px; line-height: 1.4; font-weight: 500; color: #fff; position: relative; } .ks-footer__copy::before { content: ""; position: absolute; left: calc(clamp(40px,7vw,100px) * -.5); top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,.14); } .ks-footer__copy small { font-size: 12px; font-weight: 400; opacity: .7; margin-top: 2px; letter-spacing: .01em; } @media (max-width:900px) { .ks-footer__cta {  padding: 80px 28px 40px;  min-height: 380px;  gap: 22px; }  .ks-footer__bar {  flex-direction: column;  gap: 20px;  padding: 24px 28px 40px; }  .ks-footer__brand {  order: 1;  font-size: 26px; }  .ks-footer__brand::before, .ks-footer__copy::before {  display: none; }  .ks-footer__nav {  order: 2;  flex: none;  max-width: none;  justify-content: center;  gap: 28px;  flex-wrap: wrap; }  .ks-footer__copy {  order: 3;  flex: none;  align-items: center;  text-align: center; } } @media (max-width:600px) { .ks-footer__cta {  padding: 68px 20px 32px;  min-height: auto;  gap: 20px; }  .ks-footer__cta h2 {  font-size: clamp(34px,9vw,52px);  line-height: 1.08; }  .ks-footer__cta p {  font-size: 16px; }  .ks-footer__bar {  padding: 18px 20px 30px;  gap: 16px; }  .ks-footer__brand {  font-size: 24px; }  .ks-footer__nav {  gap: 22px;  font-size: 14px; }  .ks-footer__nav a {  font-size: 13px; } } /* ======================================================================
      §R1 · REFINEMENT LAYER A · type rhythm + section pacing
      (Audit pass — adjusts §1–§14 in place; intentionally late in cascade.)
      ====================================================================== */.section { padding: 108px 0; } .section--compact { padding: 88px 0; } .section--feature { padding: 150px 0 132px; } .section-head { margin-bottom: 56px; } .section-head .lede { font-size: 16px; line-height: 1.68; } /* (Hero rules removed — consolidated into HEADER + HERO FINAL LOCK at end of CSS.) *//* (Booking-card audit-pass override removed — consolidated into BOOKING — PHASE 3 LOCK at end of CSS.) *//* (Audit-pass .over rules deleted: grid-auto-rows: 315px, 38px hero radius,
   heavy .40 hero shadow, 72px hero body padding, oversized hero h3 (clamp 36-58),
   .over-card:nth-child(2) translateY(34px), .over-card:nth-child(3) translateY(-18px),
   strip padding-top 42 / gap 44, strip media border-radius 26.
   SAFE LOCK at end of CSS owns all these now.) */.xp { gap: 28px; } .xp-tile--primary { grid-column: 1/span 8; } .xp-tile--primary .xp-tile__img { aspect-ratio: 7/7; border-radius: 44px; } .xp-tile--primary .lbl { font-size: clamp(54px,7vw,104px); max-width: 640px; } .xp-tile--secondary, .xp-tile--editorial { grid-column: 9/span 4; } .xp-tile--editorial { border: none; background: rgba(250,247,239,.78); box-shadow: 0 20px 46px -34px rgba(8,42,23,.35); } .ks-overlay-card { grid-template-columns: 1.42fr .88fr; min-height: 610px; } .ks-overlay-card__img { min-height: 610px; border-radius: 42px; box-shadow: 0 34px 74px -32px rgba(8,42,23,.46); } .ks-overlay-card__content { margin-left: -72px; border-radius: 34px; background: rgba(250,247,239,.96); box-shadow: 0 34px 74px -32px rgba(8,42,23,.40); } .ks-overlay-card__content h3 { font-size: clamp(34px,3.6vw,52px); } #cenik { background: #FAF8F2; } .price-blocks { grid-template-columns: .95fr 1.22fr .95fr; gap: 22px; } .price-block { border-radius: 24px; border: 1px solid rgba(8,42,23,.09); box-shadow: none; background: #fffdf7; } .price-block--primary { transform: translateY(-18px); box-shadow: 0 22px 54px -36px rgba(8,42,23,.36); } .price-block--primary h3 { font-size: 30px; } /* (Old §8 STEPS decorative overrides removed — minimal grid lives in base block above.) */.crosssell-section { padding-top: 92px; padding-bottom: 98px; } .crosssell { max-width: 1392px; } .crosssell__img { border-radius: 24px; box-shadow: 0 12px 34px -24px rgba(8,42,23,.22); } .crosssell__body h3 { font-size: clamp(26px,2.6vw,34px); } #recenze { padding: 112px 0; background: #FAF8F2; } #recenze .container { display: block !important; } #recenze .section-head { max-width: 760px; margin-bottom: 60px; } #recenze .section-head h2 { font-size: clamp(42px,5.4vw,76px); } #recenze .tst-grid { display: grid !important; grid-template-columns: 1.22fr .78fr; gap: 70px 88px; align-items: start; } #recenze .tst { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; } #recenze .tst--primary { grid-column: 1; grid-row: 1/span 2; max-width: 650px; } #recenze .tst--primary blockquote { font-size: clamp(30px,3vw,44px); line-height: 1.18; letter-spacing: -.025em; color: var(--ks-dark); position: relative; margin: 0 0 22px !important; } #recenze .tst--primary blockquote::before { content: "„"; position: absolute; left: -40px; top: -36px; font-size: 148px; line-height: .7; color: var(--ks-lime); opacity: .88; } #recenze .tst--sm { grid-column: 2; border-left: 1px solid rgba(8,42,23,.13) !important; padding-left: 28px !important; max-width: 360px; } #recenze .tst--sm:nth-child(2) { margin-top: 36px; } #recenze .tst--sm:nth-child(3) { margin-top: 130px; } .food-audit { background: #F4F0E6; padding: 104px 0; } .food-audit__head { max-width: 680px; margin-bottom: 48px; } .food-audit__head h2 { font-size: clamp(34px,4vw,56px); line-height: 1.05; letter-spacing: -.03em; margin-bottom: 16px; color: var(--ks-dark); } .food-audit__grid { display: grid; grid-template-columns: .95fr 1.1fr; gap: clamp(46px,7vw,84px); align-items: center; } .food-audit__media { height: 330px; border-radius: 30px; background-size: cover; background-position: center center; box-shadow: 0 18px 48px -30px rgba(8,42,23,.35); background-color: #E8E1D0; } .food-audit__lead { font-size: clamp(18px,1.5vw,22px); line-height: 1.5; color: var(--ink); margin-bottom: 18px; } .food-audit__copy p:not(.food-audit__lead) { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 26px; } .food-audit__meta { display: flex; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .food-audit__meta span { padding: 18px 22px; border-right: 1px solid var(--line); font-size: 13px; color: var(--ks-dark); } .food-audit__meta span:first-child { padding-left: 0; } .food-audit__meta span:last-child { border-right: none; } .faq-waveyu { padding: 126px 0; background: #F7F5EF; } .faq-waveyu .faq-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: .9fr 1.35fr; gap: clamp(70px,9vw,140px); align-items: start; } .faq-waveyu .faq-left { min-height: 620px; display: flex; flex-direction: column; } .faq-waveyu .faq-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ks-dark); font-weight: 500; display: inline-block; margin-bottom: 28px; } .faq-waveyu h2 { font-size: clamp(44px,5.2vw,82px); line-height: 1.02; letter-spacing: -.03em; color: var(--ink); max-width: 440px; } .faq-help-card { margin-top: auto; width: min(330px,100%); background: #FAF7EF; border: 1px solid rgba(8,42,23,.08); border-radius: 32px; padding: 34px; box-shadow: 0 24px 70px -48px rgba(8,42,23,.38); } .faq-help-icon { width: 58px; height: 58px; border-radius: 999px; background: #E9E0CF; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 42px; } .faq-help-card h3 { font-size: 22px; color: var(--ink); margin-bottom: 18px; } .faq-help-card p { font-size: 16px; color: var(--muted); line-height: 1.5; margin-bottom: 42px; } .faq-help-link { display: flex; align-items: center; justify-content: space-between; color: var(--ink); font-weight: 500; font-size: 16px; } .faq-help-link span { width: 52px; height: 52px; border-radius: 999px; background: var(--ks-lime); color: var(--ks-dark); display: flex; align-items: center; justify-content: center; } .faq-waveyu .faq-right { display: flex; flex-direction: column; } .faq-waveyu .faq-item { position: relative; border-bottom: 1px solid rgba(8,42,23,.14); padding: 28px 0 26px 74px; background: none; } .faq-waveyu .faq-num { position: absolute; left: 0; top: 33px; font-size: 13px; color: var(--muted); } .faq-waveyu .faq-q { width: 100%; background: none; border: none; padding: 0 72px 0 0; display: block; text-align: left; font-family: var(--display); font-size: clamp(22px,2.1vw,31px); line-height: 1.2; font-weight: 400; letter-spacing: -.025em; color: var(--ink); cursor: pointer; position: relative; } .faq-waveyu .faq-q::after { content: "⌄"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 999px; background: #EFEDE8; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--ink); transition: .25s ease; } .faq-waveyu .faq-item.open .faq-q::after { transform: translateY(-50%) rotate(180deg); } .faq-waveyu .faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden; transition: grid-template-rows .32s ease, opacity .32s ease; } .faq-waveyu .faq-a > * { min-height: 0; } .faq-waveyu .faq-item.open .faq-a { grid-template-rows: 1fr; opacity: 1; } .faq-waveyu .faq-a-inner { padding: 20px 70px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 680px; border-left: none; margin: 0; } /* ===== INSERTED FROM preview.html: exact preview sections support ===== */.overview-atelier { background: #F4F0E6; padding: 118px 0 132px; } .overview-atelier .section-head { display: grid; grid-template-columns: .85fr 1fr; gap: 60px; align-items: end; max-width: none; margin-bottom: 56px; } .overview-atelier .section-head h2 { font-size: clamp(46px,6vw,92px); line-height: .98; letter-spacing: -.03em; } .overview-atelier .section-head .lede { max-width: 52ch; font-size: 16px; line-height: 1.7; padding-bottom: 8px; } .stay-gallery { display: grid; grid-template-columns: 1.35fr .65fr; gap: 24px; align-items: stretch; } .stay-hero { position: relative; min-height: 660px; border-radius: 44px; overflow: hidden; box-shadow: 0 34px 84px -40px rgba(8,42,23,.50); background-size: cover; background-position: center; } .stay-hero::after, .stay-tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.04) 24%,rgba(0,0,0,.78) 100%); } .stay-hero__content { position: absolute; left: 44px; right: 44px; bottom: 40px; z-index: 2; color: #fff; max-width: 610px; } .stay-hero__badge, .stay-tile__badge { display: inline-flex; align-items: center; background: var(--ks-lime); color: var(--ks-dark); border-radius: 999px; padding: 7px 13px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 500; margin-bottom: 18px; } .stay-hero h3 { font-size: clamp(38px,4.8vw,72px); line-height: .98; color: #fff; margin-bottom: 16px; } .stay-hero p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 56ch; } .stay-hero .over-card__cta { color: #fff; border-bottom-color: rgba(255,255,255,.55); font-size: 14px; } .stay-side { display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 18px; } .stay-tile { position: relative; border-radius: 28px; overflow: hidden; min-height: 200px; background: #E8E0CF; box-shadow: 0 16px 44px -36px rgba(8,42,23,.42); } .stay-tile__media { position: absolute; inset: 0; background-size: cover; background-position: center; } .stay-tile__body { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #fff; } .stay-tile__badge { background: rgba(255,255,255,.92); margin-bottom: 12px; } .stay-tile h3 { font-size: 24px; color: #fff; margin-bottom: 6px; } .stay-tile p { font-size: 13px; line-height: 1.48; color: rgba(255,255,255,.84); margin: 0; } .restaurant-atmos { background: #E9E0CF; padding: 126px 0; } .restaurant-atmos__wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0; align-items: center; } .restaurant-atmos__image { min-height: 560px; border-radius: 32px; background-size: cover; background-position: center; box-shadow: 0 12px 34px -24px rgba(8,42,23,.22); } .restaurant-atmos__card { margin-left: -70px; background: rgba(250,247,239,.96); border: 1px solid rgba(8,42,23,.08); border-radius: 34px; padding: clamp(34px,4vw,56px); box-shadow: 0 34px 84px -46px rgba(8,42,23,.45); } .restaurant-atmos__card h2 { font-size: clamp(32px,3.8vw,56px); line-height: 1.04; letter-spacing: -.03em; margin-bottom: 22px; color: var(--ks-dark); } .restaurant-atmos__lead { font-size: clamp(16px,1.3vw,18px); line-height: 1.55; color: var(--ink); margin-bottom: 20px; max-width: 38ch; } .restaurant-atmos__card p:not(.restaurant-atmos__lead) { font-size: 15px; line-height: 1.7; color: var(--muted); margin-bottom: 16px; } .restaurant-atmos__card p:not(.restaurant-atmos__lead):last-of-type { margin-bottom: 28px; } .restaurant-atmos__disclaimer { padding: 14px 16px; background: rgba(248,246,240,.7); border-left: 2px solid #D7F24A; border-radius: 6px; margin-bottom: 24px !important; } .restaurant-atmos__actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; } .restaurant-atmos__meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; padding-top: 22px; border-top: 1px solid rgba(31,45,27,.08); } .restaurant-atmos__meta-item { display: flex; flex-direction: column; gap: 6px; padding: 0 22px; border-right: 1px solid rgba(31,45,27,.08); } .restaurant-atmos__meta-item:first-child { padding-left: 0; } .restaurant-atmos__meta-item:last-child { padding-right: 0; border-right: 0; } .restaurant-atmos__meta-label { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; line-height: 1; } .restaurant-atmos__meta-value { font-family: var(--sans); font-size: 14px; color: var(--ks-dark); line-height: 1.4; font-weight: 500; } /* Legacy single-span fallback — older markup still gets reasonable styling */.restaurant-atmos__meta > span { font-size: 14px; color: var(--ks-dark); padding: 0; border: 0; } @media (min-width:1200px) { .restaurant-atmos__wrap {  gap: 28px; }  .restaurant-atmos__card {  margin-left: -28px; } } @media (max-width:1100px) { .stay-gallery, .restaurant-atmos__wrap {  grid-template-columns: 1fr; }  .restaurant-atmos__wrap {  gap: 56px; }  .overview-atelier .section-head {  grid-template-columns: 1fr;  gap: 24px; }  .stay-hero {  min-height: 520px; }  .stay-side {  grid-template-rows: auto; }  .restaurant-atmos__card {  margin-left: 0;  margin-top: 0;  width: 100%;  justify-self: stretch; } } @media (max-width:700px) { .stay-hero {  min-height: 440px;  border-radius: 30px; }  .stay-hero__content {  left: 26px;  right: 26px;  bottom: 28px; }  .stay-side {  grid-template-columns: 1fr; }  .restaurant-atmos__image {  min-height: 380px;  border-radius: 30px; }  .restaurant-atmos__card {  width: 94%;  padding: 30px; }  .restaurant-atmos__meta {  grid-template-columns: 1fr;  gap: 0; }  .restaurant-atmos__meta-item {  flex-direction: row;  align-items: baseline;  justify-content: space-between;  gap: 16px;  padding: 14px 0;  border-right: 0;  border-bottom: 1px solid rgba(31,45,27,.08); }  .restaurant-atmos__meta-item:first-child {  padding-top: 0; }  .restaurant-atmos__meta-item:last-child {  padding-bottom: 0;  border-bottom: 0; } } /* ======================================================================
      §R3 · IMPORTED SECTION STYLES · gallery + xp-board
      ====================================================================== *//* §2 GALLERY — grid + tile placement consolidated into PHASE 4 LOCK at end of CSS. */.gallery__hero, .gallery__tile { position: relative; overflow: hidden; background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #E8E1D0; color: #fff; display: flex; } .gallery__hero::after, .gallery__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 35%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.78) 100%); z-index: 1; } .gallery__strip { grid-column: 1/-1; grid-row: 3; display: grid; grid-template-columns: minmax(320px,.85fr) 1fr; gap: clamp(32px,4vw,56px); padding-top: clamp(40px,4vw,64px); border-top: 1px solid var(--line); align-items: center; } .gallery__strip-img { width: 100%; aspect-ratio: 4/3; border-radius: 20px; background-size: cover; background-position: center center; background-color: #E8E1D0; } .gallery__body { position: relative; z-index: 2; padding: clamp(24px,3vw,36px); margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .gallery__hero .gallery__body { padding: clamp(36px,4vw,48px); } .gallery__badge { position: absolute; top: 20px; left: 20px; z-index: 2; background: rgba(255,255,255,.94); color: var(--ks-dark); padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); } .gallery__hero h3, .gallery__tile h3 { color: #fff; margin: 0;  /* sizes consolidated into PHASE 4 LOCK at end of CSS */ } .gallery__hero p { color: rgba(255,255,255,.88); font-size: 15px; margin: 6px 0 0; max-width: 44ch; line-height: 1.5; } .gallery__tile p { color: rgba(255,255,255,.84); font-size: 13px; margin: 4px 0 0; line-height: 1.5; max-width: 34ch; } .gallery__link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #fff; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.55); margin-top: 10px; transition: gap .2s ease, border-color .2s ease; } .gallery__link:hover { gap: 12px; border-bottom-color: #fff; } .gallery__link svg { width: 13px; height: 13px; } .gallery__strip-body { display: flex; flex-direction: column; gap: 12px; } .gallery__strip-body .eyebrow { margin-bottom: 6px; } .gallery__strip-body h3 { font-family: "Freigeist",Inter,sans-serif; font-weight: 500; font-size: clamp(24px,2.4vw,32px); margin: 0; letter-spacing: -.02em; color: var(--ks-dark); line-height: 1.15; } .gallery__strip-body p { font-size: 14px; color: var(--muted); margin: 0; max-width: 50ch; line-height: 1.6; } .gallery__strip-body .gallery__link { color: var(--ks-dark); border-bottom-color: rgba(8,42,23,.28); } .gallery__strip-body .gallery__link:hover { border-bottom-color: var(--ks-dark); } /* (Foundation gallery @media (max-width:1000px) removed — consolidated into ACCOMMODATION OVERVIEW — PHASE 4 LOCK at end of CSS.) *//* §3 XP BOARD — cinematic nature/activity */.xp-board { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: 380px 380px; gap: 20px; } .xp-board__hero { grid-column: 1; grid-row: 1/span 2; min-height: 780px; position: relative; overflow: hidden; border-radius: 28px; background-size: cover; background-position: center center; background-color: #2B382B; color: #fff; display: flex; box-shadow: 0 18px 40px -18px rgba(8,42,23,.3); } .xp-board__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 40%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.8) 100%); z-index: 1; } .xp-board__hero-content { position: relative; z-index: 2; padding: clamp(36px,4vw,56px); margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .xp-board__hero-content h3 { color: #fff; font-family: "Freigeist",Inter,sans-serif; font-weight: 500; font-size: clamp(40px,5.2vw,76px); margin: 0; letter-spacing: -.035em; line-height: .98; } .xp-board__hero-content p { color: rgba(255,255,255,.88); font-size: 16px; margin: 8px 0 0; max-width: 42ch; line-height: 1.5; } .xp-board__hero .xp-board__tag { color: rgba(255,255,255,.82); border-bottom-color: rgba(255,255,255,.3); } .xp-board__tile { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; border-radius: 24px; background-size: cover; background-position: center center; color: #fff; display: flex; box-shadow: 0 12px 32px -16px rgba(8,42,23,.22); } .xp-board__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 42%,rgba(0,0,0,.68) 100%); z-index: 1; } .xp-board__tile-content { position: relative; z-index: 2; padding: clamp(24px,2.6vw,32px); margin-top: auto; display: flex; flex-direction: column; gap: 6px; } .xp-board__tile-content h3 { color: #fff; font-size: clamp(22px,2.2vw,28px); margin: 0; letter-spacing: -.02em; line-height: 1.1; font-weight: 500; } .xp-board__tile-content p { color: rgba(255,255,255,.82); font-size: 13px; margin: 2px 0 0; line-height: 1.5; max-width: 32ch; } .xp-board__tile .xp-board__tag { color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.28); } .xp-board__text { grid-column: 2; grid-row: 2; position: relative; border-radius: 24px; background: rgba(248,246,240,.82); border: 1px solid rgba(35,35,31,.06); padding: clamp(28px,3vw,40px); display: flex; flex-direction: column; justify-content: center; gap: 10px; } .xp-board__text blockquote { font-family: "Freigeist",Inter,sans-serif; font-weight: 500; font-size: clamp(20px,1.9vw,26px); line-height: 1.25; letter-spacing: -.02em; color: var(--ks-dark); margin: 4px 0 0; } .xp-board__text blockquote em { font-style: italic; color: rgba(8,42,23,.68); } .xp-board__text small { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 4px; } .xp-board__tag { display: inline-block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ks-dark); font-weight: 500; align-self: flex-start; padding-bottom: 4px; border-bottom: 1px solid rgba(8,42,23,.22); } @media (max-width:1000px) { .xp-board {  grid-template-columns: 1fr;  grid-template-rows: auto;  gap: 18px; }  .xp-board__hero {  grid-column: 1;  grid-row: auto;  min-height: 520px; }  .xp-board__tile {  grid-column: 1;  grid-row: auto;  aspect-ratio: 5/4;  min-height: 0; }  .xp-board__text {  grid-column: 1;  grid-row: auto; } } /* ======================================================================
      §R4 · PHOTO-TEXT DOCTRINE · large photo card overlays
      ====================================================================== */.lake-photo, .ks-overlay-card__img, .restaurant-atmos__image, .crosssell__img { position: relative; overflow: hidden; } .lake-photo::after, .ks-overlay-card__img::after, .restaurant-atmos__image::after, .crosssell__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.03) 24%,rgba(0,0,0,.20) 58%,rgba(0,0,0,.82) 100%); z-index: 1; pointer-events: none; } .photo-copy { position: absolute; left: clamp(28px,3.4vw,54px); right: clamp(24px,3vw,48px); bottom: clamp(28px,3.4vw,54px); z-index: 2; color: #fff; max-width: 760px; } .photo-copy__label { display: inline-block; font-size: 11px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.82); padding-bottom: 9px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.32); font-weight: 500; } .photo-copy h3 { color: #fff; font-family: var(--display); font-size: clamp(40px,6vw,92px); line-height: .96; letter-spacing: -.045em; font-weight: 500; margin: 0 0 20px; } .photo-copy p { color: rgba(255,255,255,.88); font-size: clamp(15px,1.25vw,18px); line-height: 1.48; max-width: 52ch; margin: 0; } .photo-copy--medium h3 { font-size: clamp(30px,3.9vw,58px); max-width: 12ch; } .photo-copy--small { left: 28px; right: 28px; bottom: 28px; max-width: 420px; } .photo-copy--small .photo-copy__label { font-size: 10px; margin-bottom: 14px; padding-bottom: 7px; } .photo-copy--small h3 { font-size: clamp(24px,2.6vw,38px); line-height: 1.02; margin-bottom: 10px; letter-spacing: -.035em; } .photo-copy--small p { font-size: 13px; line-height: 1.45; } @media (max-width:900px) { .photo-copy h3 {  font-size: clamp(32px,9vw,56px); }  .photo-copy--small h3 {  font-size: clamp(24px,7vw,36px); }  .photo-copy {  left: 26px;  right: 26px;  bottom: 28px; } } /* §R5 · GALLERY PHOTO DOCTRINE — removed.
   Decorative per-tile data-label pseudos + KEMPOVÁNÍ strip pseudo +
   oversized h3 sizes were the main source of "still feels the same"
   visual noise. All gallery typography + structure is now consolidated
   into ACCOMMODATION OVERVIEW — PHASE 4 LOCK at end of CSS. *//* ======================================================================
      §R6 · FINAL SYSTEM FIX · Waveyu-grade pass (tone, scale, rhythm)
      ====================================================================== */html, body { background: var(--bg) !important; color: var(--ink); } body { font-size: 16px; line-height: 1.58; } .container { max-width: var(--container); padding-left: var(--gutter); padding-right: var(--gutter); } h1, h2, h3, h4 { color: var(--dark); font-weight: 500; } h1 { font-size: clamp(54px,8vw,112px); line-height: .98; letter-spacing: -.045em; } h2 { font-size: clamp(42px,5.2vw,82px); line-height: 1.02; letter-spacing: -.03em; } h3 { letter-spacing: -.02em; } .lede { font-size: clamp(16px,1.2vw,18px); line-height: 1.7; color: var(--muted); } .eyebrow, .hero-label, .faq-eyebrow { letter-spacing: .16em; font-size: 11px; color: var(--ks-dark); } .section, .section--compact, .section--feature, .section--hero-follow, .restaurant-atmos, .faq-waveyu, .crosssell-section { background: var(--bg) !important; } .section--soft, #recenze, #cenik, .faq-waveyu { background: var(--bg) !important; } .section--alt, .section--deep, .section--atmosphere, #kontakt, .restaurant-atmos { background: var(--bg-alt) !important; background-image: none !important; } .section { padding: 104px 0 !important; } .section--compact { padding: 92px 0 !important; } .section--feature { padding: 128px 0 !important; } .section--hero-follow { padding: 0 0 104px !important; background: var(--bg) !important; } .section-head { max-width: 820px; margin-bottom: 56px !important; } .section-head h2 { margin-bottom: 18px; } #ubytovani .section-head, #ubytovani-detail .section-head, #recenze .section-head { margin-bottom: 56px !important; } /* Unified buttons — all CTA buttons back to green */.ks-btn, .button, button[type=submit], input[type=submit] { height: 56px; min-height: 56px; padding: 0 24px; border-radius: 999px !important; font-size: 16px; font-weight: 500; letter-spacing: -.015em; transition: background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease; } .ks-btn--primary, .ks-btn--light, .faq-help-link span { background: var(--primary) !important; color: #fff !important; border: 1px solid var(--primary) !important; } .ks-btn--primary:hover, .ks-btn--light:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; transform: translateY(-1px); box-shadow: 0 12px 28px -20px rgba(31,45,27,.55); } .ks-btn--ghost { background: transparent !important; color: var(--primary) !important; border: 1px solid rgba(42,74,36,.38) !important; } .ks-btn--ghost:hover { background: rgba(42,74,36,.07) !important; border-color: var(--primary) !important; } .ks-btn--outline-light { background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.72) !important; } .ks-btn__icon { background: rgba(255,255,255,.18) !important; color: inherit !important; } .nav.scrolled .ks-btn__icon, .booking-card .ks-btn__icon, .price-block .ks-btn__icon, .ks-overlay-card .ks-btn__icon, .crosssell .ks-btn__icon, .pre-contact-cta .ks-btn__icon, .contact .ks-btn__icon { background: rgba(255,255,255,.18) !important; color: inherit !important; } .gallery__badge, .stay-hero__badge, .stay-tile__badge, .price-block--primary::before, .step::before, .contact-visual__tag::before { background: var(--primary) !important; color: #fff !important; } .ks-tabs__tab.is-active { border-bottom-color: var(--primary) !important; color: var(--primary) !important; } .tst--primary blockquote::before, #recenze .tst--primary blockquote::before { color: var(--primary) !important; } /* (Header + Hero rules removed — consolidated into HEADER + HERO FINAL LOCK at end of CSS.) *//* Booking — section-level only; card styling consolidated in BOOKING — PHASE 3 LOCK at end of CSS. */.section--hero-follow#rezervace { padding-top: 0 !important; } .book-wrap { position: relative; z-index: 10; } .booking-caption { margin-top: 24px; } /* Accommodation overview — gallery rules removed.
   All gallery grid / radius / shadow / typography is consolidated
   into ACCOMMODATION OVERVIEW — PHASE 4 LOCK at end of CSS.
   The shared shadow rule below preserves the prior treatment for
   out-of-scope siblings (xp-board, restaurant-atmos, lake-photo,
   ks-overlay-card, crosssell). The .stay-hero radius is preserved
   for its own component (separate accommodation-detail page). */.xp-board__hero, .xp-board__tile, .restaurant-atmos__image, .lake-photo, .ks-overlay-card__img { box-shadow: var(--shadow-strong) !important; } /* cross-sell uses the soft editorial shadow per spec, not the strong shared one */.crosssell__img { box-shadow: 0 12px 34px -24px rgba(8,42,23,.22) !important; } .stay-hero { border-radius: 36px !important; } .gallery__link { font-weight: 500; } /* Experience */.xp-board { gap: 24px; grid-template-rows: 360px 360px; } .xp-board__hero { min-height: 744px; border-radius: 36px; } .xp-board__tile, .xp-board__text { border-radius: 26px; } .xp-board__text { background: var(--surface) !important; border: 1px solid var(--line) !important; } /* Detail cards */.ks-tabs__nav { margin-bottom: 48px; } .ks-overlay-card { grid-template-columns: 1.38fr .92fr; min-height: 580px !important; } .ks-overlay-card__img { min-height: 580px !important; border-radius: 36px !important; } .ks-overlay-card__content { background: var(--surface) !important; border: 1px solid var(--line) !important; margin-left: -56px !important; border-radius: 32px !important; } .ks-overlay-card__content h3 { font-size: clamp(32px,3.2vw,46px) !important; } /* Pricing */.price-blocks { gap: 24px; align-items: stretch; } .price-block { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 24px !important; padding: 32px !important; box-shadow: none !important; } .price-block--primary { transform: none !important; box-shadow: var(--shadow-soft) !important; border-top: 1px solid var(--line) !important; } .price-block .ks-btn { margin-top: auto; } .price-note-top { margin-top: -18px; margin-bottom: 40px; } /* Steps + CTA */.pre-contact-cta { background-color: var(--bg) !important; background-image: linear-gradient(rgba(244,240,230,.88),rgba(244,240,230,.88)),url("https://dev.kempslunicko.cz/wp-content/uploads/2026/04/14_naplanujte-si-pobyt.png") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } .pre-contact-cta h2 { color: var(--dark) !important; } /* Restaurant */.restaurant-atmos { padding: 112px 0 !important; } .restaurant-atmos__image { border-radius: 32px !important; box-shadow: 0 12px 34px -24px rgba(8,42,23,.22) !important; } .restaurant-atmos__card { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 32px !important; } .restaurant-atmos__card h2 { font-size: clamp(32px,3.8vw,56px) !important; line-height: 1.04 !important; letter-spacing: -.03em !important; } /* Reviews */#recenze .tst-grid { gap: 56px 72px !important; } #recenze .tst--sm:nth-child(2), #recenze .tst--sm:nth-child(3) { margin-top: 0 !important; } /* Cross-sell */.crosssell-section { padding: 88px 0 !important; } .crosssell__img { transform: none !important; border-radius: 24px !important; aspect-ratio: 4/5 !important; box-shadow: 0 12px 34px -24px rgba(8,42,23,.22) !important; } .crosssell--right .crosssell__img { transform: none !important; } .crosssell__body h3 { font-size: clamp(26px,2.6vw,34px) !important; line-height: 1.12 !important; letter-spacing: -.02em !important; } /* ============================================================
      CROSS-SELL — editorial rhythm (Borný + Srdíčko)
      Class-based selectors used instead of :nth-of-type so the
      rules can't bleed onto unrelated sibling <section> elements.
      ============================================================ *//* Borný — first cross-sell — odd cadence */.crosssell-section.crosssell-section--reverse { padding-top: 64px !important; padding-bottom: 96px !important; } .crosssell-section.crosssell-section--reverse .crosssell__body { max-width: 44ch; } .crosssell-section.crosssell-section--reverse .crosssell { align-items: center; } /* Srdíčko — second cross-sell — even cadence */.crosssell-section:not(.crosssell-section--reverse) { padding-top: 96px !important; padding-bottom: 64px !important; } .crosssell-section:not(.crosssell-section--reverse) .crosssell__body { max-width: 48ch; } .crosssell-section:not(.crosssell-section--reverse) .crosssell { align-items: start; } .crosssell-section:not(.crosssell-section--reverse) .crosssell__img { aspect-ratio: 5/6 !important; } /* Soften the details separator — less UI, more editorial */.crosssell__details { border-top: 1px solid rgba(31,45,27,.08) !important; } /* Quiet inline CTA — replaces the loud lime button on these editorial cross-sells.
   No button styling, no green, no icon. Just a thin underline. */.crosssell__cta { font-size: 14px; color: var(--ks-dark); border-bottom: 1px solid rgba(31,45,27,.22); padding-bottom: 2px; display: inline-block; margin-top: 4px; text-decoration: none; font-family: var(--sans); letter-spacing: 0; line-height: 1.2; } .crosssell__cta:hover { border-bottom-color: var(--ks-dark); } /* ============================================================
      CROSS-SELL — single floating supporting photo (Waveyu CTA feel).
      Main image stays exactly as-is. ONE small photo overlaps a corner
      with a quiet 3° tilt. Selectors are .crosssell-section-scoped so
      they beat the layered tablet/mobile !important overrides.
      ============================================================ *//* MAIN IMAGE — LOCK. Stable, never rotates, soft editorial shadow. */.crosssell-section .crosssell__img, .crosssell-section .crosssell__img.crosssell__img--main { transform: none !important; aspect-ratio: 4/5; border-radius: 24px; box-shadow: 0 12px 34px -24px rgba(8,42,23,.22); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* ZERO-ROTATION HARD RULE — every cross-sell image, every breakpoint.
   Nothing in cross-sell may rotate. Ever. */.crosssell__img, .crosssell__img--main, .crosssell__float-img, .crosssell--right .crosssell__img, .crosssell--right .crosssell__float-img, .crosssell--left .crosssell__img, .crosssell--left .crosssell__float-img, .crosssell__media img, .crosssell__media .ph { transform: none !important; } /* MEDIA WRAPPER */.crosssell-section .crosssell__media { position: relative; width: 100%; max-width: 528px; padding: 24px; margin: 0 auto; } .crosssell-section .crosssell__img.crosssell__img--main { position: relative; z-index: 1; } /* FLOATING IMAGE — exactly one per section. Top-right of media wrapper.
   Subtle ~2deg tilt is permitted on the float (NOT the main).
   Frame must fill completely — no inner gap, no fallback color, no border. */.crosssell-section .crosssell__float-img { position: absolute; top: 8px; right: 4px; bottom: auto; left: auto; width: 28%; aspect-ratio: 4/5; border-radius: 20px; background-size: cover; background-position: center center; background-repeat: no-repeat; background-clip: border-box; background-color: transparent; box-shadow: 0 14px 32px -26px rgba(8,42,23,.26); border: 0; padding: 0; margin: 0; overflow: hidden; z-index: 3; transform: none; } /* Reverse-layout safety — slightly narrower so the float stays comfortably
   inside the media column and never enters the text column. */.crosssell-section .crosssell--right .crosssell__float-img { width: 26%; } /* Tablet */@media (max-width: 1199px) { .crosssell-section .crosssell__float-img {  width: 26%;  top: 6px;  right: 4px; }  .crosssell-section .crosssell--right .crosssell__float-img {  width: 24%; } } /* Mobile — same overlap logic, smaller wrapper.
   No detached thumbnail, no bottom placement, no horizontal overflow.
   Main image stays centered; float remains absolute at top-right. */@media (max-width: 820px) { .crosssell-section .crosssell__media {  max-width: 360px;  margin: 0 auto;  padding: 18px; }  .crosssell-section .crosssell__img.crosssell__img--main {  position: relative;  z-index: 1;  transform: none !important; }  .crosssell-section .crosssell__float-img {  position: absolute !important;  top: 0 !important;  right: 0 !important;  bottom: auto !important;  left: auto !important;  width: 32% !important;  transform: none !important;  margin: 0 !important;  z-index: 3; }  .crosssell-section .crosssell--right .crosssell__float-img {  width: 30% !important; } } /* FAQ */.faq-waveyu { padding: 112px 0 !important; } .faq-waveyu .faq-container { max-width: var(--container); gap: clamp(56px,7vw,104px); } .faq-help-card { background: var(--surface) !important; border: 1px solid var(--line) !important; } .faq-help-icon { background: var(--surface-muted) !important; } .faq-waveyu .faq-q::after { background: var(--surface-muted) !important; } /* Contact */#kontakt { background: var(--bg-alt) !important; } .contact { grid-template-columns: .82fr 1.18fr; } .contact-map .ph { min-height: 420px; background: #DED8CB !important; border: 1px solid rgba(31,45,27,.10) !important; border-radius: 28px !important; } .contact-row .v { font-family: var(--sans) !important; font-size: 16px !important; } /* Footer */.ks-footer__cta { min-height: 520px; } .ks-footer__cta h2 { font-size: clamp(44px,5.4vw,76px); } /* Mobile / tablet hardening */@media (max-width:1100px) { :root {  --container: 960px; }  .section {  padding: 76px 0 !important; }  .section--feature {  padding: 88px 0 !important; }  .section--hero-follow {  padding: 0 0 76px !important; }  .hero-inner {  padding-bottom: 96px !important; }  /* (Booking tablet rules removed — consolidated into BOOKING — PHASE 3 LOCK at end of CSS.) */ .ks-overlay-card {  grid-template-columns: 1fr !important; }  .ks-overlay-card__content {  margin-left: 0 !important; }  .restaurant-atmos__wrap {  grid-template-columns: 1fr;  gap: 56px !important; }  .restaurant-atmos__card {  margin-left: 0 !important;  margin-top: 0 !important;  width: 100%;  justify-self: stretch; }  .faq-waveyu .faq-container {  grid-template-columns: 1fr !important; }  .faq-waveyu .faq-left {  min-height: auto !important; }  .faq-help-card {  margin-top: 32px; } } @media (max-width:767px) { :root {  --gutter: 20px; }  h1 {  font-size: clamp(42px,12vw,62px) !important; }  h2 {  font-size: clamp(34px,10vw,48px) !important; }  .section {  padding: 56px 0 !important; }  .section--feature {  padding: 64px 0 !important; }  .section--hero-follow {  padding: 0 0 56px !important; }  .section-head {  margin-bottom: 36px !important; }  .hero {  min-height: 78vh !important; }  .hero-inner {  padding-top: 112px;  padding-bottom: 96px; }  .hero-cta {  width: 100%; }  .hero-cta .ks-btn {  width: 100%; }  /* (Booking mobile rules removed — consolidated into BOOKING — PHASE 3 LOCK at end of CSS.) */ /* (Gallery mobile rules removed — consolidated into ACCOMMODATION OVERVIEW — PHASE 4 LOCK at end of CSS.) */ .photo-copy {  left: 24px;  right: 24px;  bottom: 24px; }  .photo-copy h3 {  font-size: clamp(32px,10vw,48px) !important; }  .photo-copy p {  font-size: 14px; }  .xp-board {  gap: 16px; }  .xp-board__hero {  min-height: 460px;  border-radius: 26px; }  .xp-board__tile {  aspect-ratio: 4/3;  border-radius: 22px; }  .ks-tabs__nav {  margin-bottom: 28px; }  .ks-tabs__tab {  font-size: 14px;  margin-right: 24px;  padding: 14px 0; }  .ks-overlay-card__img {  min-height: 360px !important;  border-radius: 24px !important; }  .ks-overlay-card__content {  padding: 24px !important;  border-radius: 24px !important; }  .price-blocks {  gap: 16px; }  .price-block, .price-block--primary {  padding: 24px !important; }  .steps {  grid-template-columns: 1fr !important;  gap: 24px; }  .restaurant-atmos {  padding: 72px 0 !important; }  .restaurant-atmos__image {  min-height: 360px !important;  border-radius: 26px !important; }  .restaurant-atmos__card {  width: 94%;  padding: 24px !important;  border-radius: 24px !important; }  #recenze .tst-grid {  grid-template-columns: 1fr !important;  gap: 28px !important; }  #recenze .tst--primary blockquote::before {  left: 0 !important;  top: -42px !important;  font-size: 92px !important; }  #recenze .tst--primary blockquote {  font-size: clamp(24px,8vw,36px) !important;  padding-top: 28px; }  .crosssell-section {  padding: 56px 0 !important; }  .crosssell, .crosssell--right {  grid-template-columns: 1fr !important;  gap: 28px !important; }  .crosssell__img {  max-width: none !important;  width: 100%;  aspect-ratio: 4/5 !important; }  .faq-waveyu {  padding: 64px 0 !important; }  .faq-waveyu .faq-item {  padding: 22px 0 22px 42px !important; }  .faq-waveyu .faq-q {  font-size: clamp(20px,6vw,27px) !important;  padding-right: 54px !important; }  .faq-waveyu .faq-q::after {  width: 42px;  height: 42px; }  .faq-waveyu .faq-a-inner {  padding-right: 0 !important; }  .contact {  grid-template-columns: 1fr !important;  gap: 32px; }  .ks-footer__cta {  padding: 72px 24px 44px !important;  min-height: 420px; }  .ks-footer__bar {  padding: 24px 24px 36px !important; } } /* ======================================================================
      §R7 · POINT FIXES · 2026-04-24 corrections
      ====================================================================== *//* 1) HERO buttons must not overlap booking form *//* (.hero-inner padding-bottom moved to HEADER + HERO FINAL LOCK at end of CSS.) *//* (.book-wrap margin-top moved to BOOKING — PHASE 3 LOCK at end of CSS.) *//* 2) Reviews quote mark must not overlap text */#recenze .tst--primary blockquote { padding-top: 0 !important; position: relative; } #recenze .tst--primary blockquote::before { position: static !important; display: block !important; left: auto !important; top: auto !important; font-size: 92px !important; line-height: .45 !important; height: 42px !important; margin: 0 0 34px 0 !important; z-index: auto !important; } /* 3) FAQ help card slightly smaller */.faq-help-card { width: min(285px,100%) !important; padding: 28px !important; border-radius: 26px !important; } .faq-help-icon { width: 48px !important; height: 48px !important; font-size: 19px !important; margin-bottom: 28px !important; } .faq-help-card h3 { font-size: 20px !important; margin-bottom: 12px !important; } .faq-help-card p { font-size: 14px !important; margin-bottom: 28px !important; } .faq-help-link { font-size: 15px !important; } .faq-help-link span { width: 44px !important; height: 44px !important; } /* ============================================================
      §FAQ-REFINE · final polish — single source of truth.
      Every property is keyed off #faq.faq-waveyu so it beats all
      layered .faq-grid / .faq-list / .faq-waveyu rules earlier in
      the cascade. The dead .faq-grid / .faq-list block at line 2355
      and the .faq-help-card rules are left in source but neutralized
      because the markup contains neither (#faq.faq-waveyu owns the
      whole section).
      ============================================================ *//* Row — tighter, premium, soft divider; subtle warm tint on open */#faq.faq-waveyu .faq-item { padding: 24px 0 24px 60px !important; border-bottom: 1px solid rgba(31,45,27,.10) !important; background: transparent !important; transition: background-color .25s ease, border-color .25s ease; } #faq.faq-waveyu .faq-item:hover { border-color: rgba(31,45,27,.18) !important; } #faq.faq-waveyu .faq-item.open { background: rgba(248,246,240,.42) !important; } /* Numbers — quiet, top-aligned with the question */#faq.faq-waveyu .faq-num { top: 30px !important; left: 0 !important; font-size: 12px !important; color: rgba(31,45,27,.48) !important; letter-spacing: .04em !important; } /* Question typography — display, calmer weight, premium scale */#faq.faq-waveyu .faq-q { font-family: var(--display) !important; font-size: clamp(19px, 1.75vw, 26px) !important; line-height: 1.18 !important; font-weight: 400 !important; letter-spacing: -.02em !important; color: var(--ink) !important; padding: 0 62px 0 0 !important; } /* Icon button — keep arrow/circle, but reduced dominance */#faq.faq-waveyu .faq-q::after { content: "⌄" !important; width: 46px !important; height: 46px !important; background: #EFEDE8 !important; border-radius: 999px !important; font-size: 18px !important; font-weight: 400 !important; color: var(--ink) !important; opacity: 1 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; right: 0 !important; transition: transform .25s ease, background-color .25s ease; } #faq.faq-waveyu .faq-item.open .faq-q::after { content: "⌄" !important; transform: translateY(-50%) rotate(180deg) !important; } /* Answer — clearer breathing, aligned with question text */#faq.faq-waveyu .faq-a-inner { padding: 18px 62px 2px 0 !important; max-width: 620px !important; font-size: 15px !important; line-height: 1.7 !important; color: var(--muted) !important; border: 0 !important; margin: 0 !important; } /* Left column intro */#faq.faq-waveyu .faq-intro { max-width: 390px !important; font-size: 16px !important; line-height: 1.65 !important; color: var(--muted) !important; margin-top: 28px !important; } /* Secondary contact CTA — same pill system as primary buttons but
   visually quieter than the lime "Zobrazit ceny" primary CTA. */#faq.faq-waveyu .faq-contact-cta { margin-top: 28px; } .ks-btn.ks-btn--contact { background: rgba(248,246,240,.7) !important; color: var(--ks-dark) !important; border: 1px solid rgba(31,45,27,.14) !important; height: 52px; padding: 0 6px 0 22px; gap: 12px; font-size: 15px; letter-spacing: -.005em; transition: background-color .2s ease, border-color .2s ease; } .ks-btn.ks-btn--contact:hover { background: rgba(248,246,240,.9) !important; border-color: rgba(31,45,27,.22) !important; transform: none !important; box-shadow: none !important; } .ks-btn.ks-btn--contact .ks-btn__icon { width: 36px !important; height: 36px !important; background: #D7F24A !important; color: #082A17 !important; font-size: 16px; font-weight: 600; } .ks-btn.ks-btn--contact:hover .ks-btn__icon { transform: none !important; background: #CBE83E !important; } /* Mobile — single column, no sticky, tighter rhythm */@media (max-width:767px) { #faq.faq-waveyu .faq-left {  position: static !important;  top: auto !important; }  #faq.faq-waveyu .faq-item {  padding: 22px 0 22px 44px !important; }  #faq.faq-waveyu .faq-num {  top: 26px !important; }  #faq.faq-waveyu .faq-q {  font-size: 20px !important;  padding: 0 52px 0 0 !important; }  #faq.faq-waveyu .faq-q::after {  width: 40px !important;  height: 40px !important;  font-size: 18px !important; }  #faq.faq-waveyu .faq-a-inner {  padding-right: 0 !important; } } /* Mobile safety for the same exact fixes */@media (max-width:767px) { .hero-inner {  padding-bottom: 96px !important; }  /* (.book-wrap mobile margin-top moved to BOOKING — PHASE 3 LOCK at end of CSS.) */ #recenze .tst--primary blockquote {  padding-top: 44px !important; }  #recenze .tst--primary blockquote::before {  top: -12px !important;  font-size: 78px !important; }  .faq-help-card {  width: 100% !important; }  /* Reviews mobile stability: smaller notes grouped first, main quote wider below */ #recenze .tst-grid {  display: grid !important;  grid-template-columns: 1fr !important;  gap: 14px !important;  align-items: start !important; }  #recenze .tst--sm:nth-child(2) {  order: 1 !important;  margin-top: 0 !important; }  #recenze .tst--sm:nth-child(3) {  order: 2 !important;  margin-top: 0 !important; }  #recenze .tst--primary {  order: 3 !important;  grid-column: 1 !important;  grid-row: auto !important;  max-width: none !important;  margin-top: 6px !important; }  #recenze .tst--sm {  max-width: none !important;  padding-left: 18px !important; }  #recenze .tst--primary blockquote {  max-width: 14ch !important;  font-size: clamp(28px,8.4vw,36px) !important;  line-height: 1.1 !important;  padding-top: 0 !important;  margin-bottom: 18px !important; }  #recenze .tst--primary blockquote::before {  font-size: 72px !important;  height: 30px !important;  margin-bottom: 24px !important; }  #recenze .tst--sm blockquote {  font-size: 17px !important;  line-height: 1.5 !important;  margin-bottom: 10px !important; }  #recenze .sig {  font-size: 12px !important;  line-height: 1.45 !important; } } /* ======================================================================
      §M1 · RESPONSIVE · tablet — FAQ / header / centering
      ====================================================================== */@media (min-width:768px) and (max-width:1199px) { :root {  --gutter: 40px;  --container: 920px; }  body {  overflow-x: clip; }  /* Global tablet center rhythm: every main section uses the same side padding */ .container, .hero-inner, .faq-waveyu .faq-container, .ks-footer__bar {  width: 100% !important;  max-width: 920px !important;  margin-left: auto !important;  margin-right: auto !important;  padding-left: 40px !important;  padding-right: 40px !important; }  /* Header gets its own full-width padding so it never touches tablet edges */ header.nav .nav-inner, header.nav .container.nav-inner {  width: 100% !important;  max-width: none !important;  margin-left: 0 !important;  margin-right: 0 !important;  padding-left: 40px !important;  padding-right: 40px !important; }  .nav .ks-btn {  flex-shrink: 0 !important; }  .logo {  max-width: 240px !important;  white-space: nowrap !important; }  /* Same visual width for all large inner layouts */ .section-head, .booking-card, .gallery, .lake, .xp-board, .ks-tabs, .price-blocks, .steps, .crosssell, .restaurant-atmos__wrap, .tst-grid, .contact {  width: 100% !important;  max-width: 840px !important;  margin-left: auto !important;  margin-right: auto !important; }  /* Prevent individual sections from visually sticking left */ .section, .section--compact, .section--feature, .section--hero-follow, .restaurant-atmos, .faq-waveyu, .crosssell-section {  text-align: initial; }  /* Tablet-safe single column rhythm where desktop grids become too tight */ .gallery, .xp-board, .price-blocks, .restaurant-atmos__wrap, .contact, .crosssell, .crosssell--right, .ks-overlay-card {  grid-template-columns: 1fr !important; }  /* (Gallery tablet rules removed — consolidated into ACCOMMODATION OVERVIEW — PHASE 4 LOCK at end of CSS.) */ .xp-board {  grid-template-rows: auto !important;  gap: 20px !important; }  .xp-board__hero, .xp-board__tile, .xp-board__text {  grid-column: 1 !important;  grid-row: auto !important; }  .xp-board__hero {  min-height: 560px !important; }  .xp-board__tile {  min-height: 340px !important; }  .ks-overlay-card__content {  margin-left: 0 !important; }  .restaurant-atmos__card {  margin-left: 0 !important;  margin-top: 0 !important;  width: 100% !important;  justify-self: stretch !important; }  .restaurant-atmos__card h2 {  font-size: clamp(32px,3.8vw,56px) !important;  line-height: 1.04 !important; }  /* FAQ tablet: title left, help card right, accordion below full width */ .faq-waveyu .faq-container {  display: grid !important;  grid-template-columns: 1fr !important;  gap: 56px !important; }  .faq-waveyu .faq-left {  min-height: 0 !important;  display: grid !important;  grid-template-columns: minmax(0,1fr) minmax(260px,320px) !important;  grid-template-rows: auto auto !important;  column-gap: 36px !important;  row-gap: 16px !important;  align-items: start !important; }  .faq-waveyu .faq-eyebrow {  grid-column: 1 !important;  grid-row: 1 !important;  margin-bottom: 0 !important; }  .faq-waveyu h2 {  grid-column: 1 !important;  grid-row: 2 !important;  max-width: 420px !important;  font-size: clamp(56px,7vw,82px) !important;  margin: 0 !important; }  .faq-help-card {  grid-column: 2 !important;  grid-row: 1 / span 2 !important;  align-self: start !important;  justify-self: end !important;  margin-top: 0 !important;  width: 100% !important;  max-width: 300px !important; }  .faq-waveyu .faq-right {  width: 100% !important;  max-width: 840px !important;  margin-left: auto !important;  margin-right: auto !important; }  .faq-waveyu .faq-item {  padding-left: 62px !important; }  .faq-waveyu .faq-q {  font-size: clamp(24px,3.1vw,32px) !important; } } @media (min-width:768px) and (max-width:860px) { :root {  --gutter: 32px; }  .container, .hero-inner, .faq-waveyu .faq-container, .ks-footer__bar {  padding-left: 32px !important;  padding-right: 32px !important; }  header.nav .nav-inner, header.nav .container.nav-inner {  padding-left: 32px !important;  padding-right: 32px !important; }  .faq-waveyu .faq-left {  grid-template-columns: 1fr minmax(240px,280px) !important;  column-gap: 28px !important; }  .faq-waveyu h2 {  font-size: clamp(48px,7vw,68px) !important; } } /* ======================================================================
      §M2 · RESPONSIVE · tablet — contact + lake copy
      ====================================================================== */@media (min-width:768px) and (max-width:1199px) { /* 1) Contact intentionally narrower on tablet only */ #kontakt > .container {  max-width: 760px !important;  padding-left: 48px !important;  padding-right: 48px !important; }  #kontakt .section-head, #kontakt .contact {  max-width: 680px !important;  width: 100% !important;  margin-left: auto !important;  margin-right: auto !important; }  #kontakt .section-head h2 {  font-size: clamp(48px,6.2vw,70px) !important;  max-width: 11ch !important; }  #kontakt .contact-row .v, #kontakt .contact-row .v[style] {  font-size: clamp(17px,2.2vw,22px) !important;  line-height: 1.45 !important; }  #kontakt .contact-row {  padding: 22px 0 !important; }  #kontakt .ks-btn {  width: auto !important;  min-width: 300px !important; }  /* 2) Lake photo doctrine text above the overlapping card on tablet only — reduced 40% */ #jezero .lake-photo .photo-copy {  top: 96px !important;  bottom: auto !important;  left: 40px !important;  right: 40px !important;  max-width: 680px !important;  z-index: 4 !important; }  #jezero .lake-photo .photo-copy h3 {  font-size: clamp(26px,3.7vw,44px) !important;  line-height: 1 !important;  max-width: 12ch !important;  margin-bottom: 14px !important; }  #jezero .lake-photo .photo-copy p {  max-width: 42ch !important;  font-size: clamp(13px,1.1vw,15px) !important; }  #jezero .lake-photo .photo-copy__label {  margin-bottom: 14px !important;  font-size: 10px !important; }  /* Restaurant overlap stays intentional on tablet, but the copy needs a safer inset */ .restaurant-atmos__card {  padding-left: 56px !important; } } /* ======================================================================
      §M3 · RESPONSIVE · tablet — crosspromo card balance
      ====================================================================== */@media (min-width:768px) and (max-width:1199px) { /* Bigger crosspromo visual cards only. No mobile/desktop impact. */ .crosssell-section .crosssell__img {  width: min(560px, 78vw) !important;  max-width: 560px !important;  aspect-ratio: 4/5 !important;  min-height: 520px !important;  margin-left: auto !important;  margin-right: auto !important;  border-radius: 24px !important; }  .crosssell-section .crosssell {  max-width: 840px !important;  gap: 48px !important; }  .crosssell-section .photo-copy--small {  left: 36px !important;  right: 36px !important;  bottom: 36px !important;  max-width: 460px !important; }  .crosssell-section .photo-copy--small h3 {  font-size: clamp(40px,5.6vw,58px) !important;  line-height: .98 !important;  max-width: 9.5ch !important; }  .crosssell-section .photo-copy--small p {  font-size: clamp(15px,1.8vw,18px) !important;  line-height: 1.45 !important;  max-width: 34ch !important; }  .crosssell-section .photo-copy--small .photo-copy__label {  font-size: 11px !important;  margin-bottom: 16px !important; } } @media (min-width:768px) and (max-width:860px) { .crosssell-section .crosssell__img {  width: min(624px, 82vw) !important;  max-width: 624px !important;  min-height: 600px !important; } } /* ======================================================================
      §M4 · RESPONSIVE · tablet — crosspromo two-column
      ====================================================================== */@media (min-width:768px) and (max-width:1199px) { /* Two-column grid: text on one side, smaller photo card on the other.
          DOM order in .crosssell--right is body→img (Borný = text left, img right).
          DOM order in .crosssell--left is img→body (Srdíčko = img left, text right). */ .crosssell-section .crosssell, .crosssell-section .crosssell--right {  display: grid !important;  grid-template-columns: 1fr minmax(220px,320px) !important;  gap: 40px !important;  align-items: center !important;  max-width: 920px !important;  margin-left: auto !important;  margin-right: auto !important; }  .crosssell-section .crosssell--left {  grid-template-columns: minmax(220px,320px) 1fr !important; }  .crosssell-section .crosssell__img {  width: 100% !important;  max-width: 320px !important;  min-height: 0 !important;  height: auto !important;  aspect-ratio: 4/5 !important;  margin: 0 !important;  border-radius: 24px !important; }  .crosssell-section .crosssell--right .crosssell__img {  margin-left: auto !important; }  .crosssell-section .crosssell--left .crosssell__img {  margin-right: auto !important; }  .crosssell-section .crosssell__body {  max-width: 46ch !important; }  /* Smaller image → tighter overlay text */ .crosssell-section .photo-copy--small {  left: 22px !important;  right: 22px !important;  bottom: 22px !important;  max-width: none !important; }  .crosssell-section .photo-copy--small h3 {  font-size: clamp(24px,3vw,32px) !important;  line-height: 1.05 !important;  max-width: 11ch !important;  margin-bottom: 10px !important; }  .crosssell-section .photo-copy--small p {  font-size: 13px !important;  line-height: 1.45 !important;  max-width: none !important; }  .crosssell-section .photo-copy--small .photo-copy__label {  font-size: 10px !important;  margin-bottom: 12px !important; } } @media (min-width:768px) and (max-width:900px) { .crosssell-section .crosssell, .crosssell-section .crosssell--right {  grid-template-columns: 1fr minmax(200px,260px) !important;  gap: 28px !important;  max-width: 912px !important; }  .crosssell-section .crosssell--left {  grid-template-columns: minmax(200px,260px) 1fr !important; }  .crosssell-section .crosssell__img {  max-width: 312px !important; } } /* ======================================================================
      §M5 · RESPONSIVE · tablet — gallery strip height
      ====================================================================== */@media (min-width:768px) and (max-width:1199px) { .gallery .gallery__strip-img {  aspect-ratio: 8/3 !important; } } /* ======================================================================
      §M6 · RESPONSIVE · tablet — xp-board tile height
      ====================================================================== */@media (min-width:768px) and (max-width:1199px) { .xp-board__tile {  aspect-ratio: 16/7 !important;  min-height: 0 !important;  max-height: 380px !important; } } /* §M7 · Booking tablet — consolidated into BOOKING — PHASE 3 LOCK at end of CSS. *//* ======================================================================
      §M8 · RESPONSIVE · mobile — full correction pass
      ====================================================================== */@media (max-width:767px) { :root {  --gutter: 18px; }  html, body {  overflow-x: clip; }  body {  font-size: 15px;  line-height: 1.58; }  .container, .hero-inner, .faq-waveyu .faq-container, .ks-footer__bar {  padding-left: var(--gutter) !important;  padding-right: var(--gutter) !important; }  .section {  padding: 64px 0 !important; }  .section--feature {  padding: 72px 0 !important; }  .section--compact {  padding: 56px 0 !important; }  .section--hero-follow {  padding: 0 0 64px !important; }  .section-head {  margin-bottom: 32px !important; }  .section-head h2, #kontakt .section-head h2, .faq-waveyu h2 {  font-size: clamp(34px,9.8vw,42px) !important;  line-height: 1.08 !important;  letter-spacing: -.035em !important;  max-width: 11ch !important; }  .section-head .lede, .lede, .hero-sub, .gallery__hero p, .gallery__tile p, .gallery__strip-body p, .lake-content .lede, .xp-board__hero-content p, .xp-board__tile-content p, .restaurant-atmos__lead, .restaurant-atmos__card p:not(.restaurant-atmos__lead), .crosssell__body p, .faq-waveyu .faq-a-inner, .contact-row .v[style] {  font-size: 15px !important;  line-height: 1.6 !important; }  .nav-inner {  padding: 8px 0 !important;  gap: 12px !important;  min-height: 64px !important; }  header.nav .nav-inner, header.nav .container.nav-inner {  padding-left: max(16px,env(safe-area-inset-left)) !important;  padding-right: max(16px,env(safe-area-inset-right)) !important; }  .logo {  font-size: 17px !important;  white-space: nowrap !important;  overflow: hidden;  text-overflow: ellipsis;  max-width: 44vw; }  .nav .ks-btn {  width: auto !important;  min-width: 0 !important;  flex-shrink: 0;  height: 48px !important;  min-height: 48px !important;  padding: 0 16px !important;  gap: 10px !important;  font-size: 15px !important; }  .nav .ks-btn__icon {  width: 30px !important;  height: 30px !important;  font-size: 14px !important; }  .hero-bg {  background-position: center 36% !important; }  /* (.hero-veil mobile gradient removed — FINAL LOCK at end of CSS provides the warm dusk overlay.) */ .hero-inner {  grid-template-columns: 1fr !important;  gap: 26px !important;  padding-top: 108px !important;  padding-bottom: 96px !important;  align-items: end !important; }  .hero-block {  max-width: none !important; }  .hero-label {  margin-bottom: 18px !important; }  .hero h1 {  max-width: 13ch !important;  font-size: clamp(40px,11.5vw,58px) !important;  line-height: .98 !important;  margin-bottom: 18px !important; }  .hero-sub {  max-width: 34ch !important;  margin-bottom: 24px !important; }  .hero-cta {  display: grid !important;  grid-template-columns: 1fr !important;  gap: 12px !important;  align-items: stretch !important; }  .hero-cta .ks-btn {  height: 54px !important; }  .hero-cta .ks-btn--primary {  width: 100% !important; }  .hero-cta .ks-btn--outline-light {  width: min(100%,260px) !important;  height: 48px !important;  margin-inline: auto !important;  font-size: 14px !important; }  .hero-meta-col {  display: grid !important;  grid-template-columns: 1fr 1fr;  gap: 12px 20px !important;  margin-top: 28px !important;  max-width: 520px !important;  padding-bottom: 0 !important;  align-items: end !important; }  .hero-meta-col span {  padding-top: 0 !important;  color: rgba(255,255,255,.62) !important;  font-size: 11px !important;  letter-spacing: .14em !important;  line-height: 1.15 !important; }  .hero-meta-col strong {  padding-bottom: 14px !important;  font-size: 15px !important;  line-height: 1.3 !important;  border-bottom: 1px solid rgba(255,255,255,.14) !important; }  /* (Booking mobile rules removed — consolidated into BOOKING — PHASE 3 LOCK at end of CSS.) */ .booking-caption {  margin-top: 18px !important;  font-size: 13px !important;  line-height: 1.65 !important;  max-width: 32ch !important; }  /* (Gallery mobile (§M8) rules removed — consolidated into ACCOMMODATION OVERVIEW — PHASE 4 LOCK at end of CSS.) */ .gallery__strip-body h3 {  font-size: 28px !important;  line-height: 1.1 !important; }  .photo-copy {  left: 20px !important;  right: 20px !important;  bottom: 20px !important;  max-width: 300px !important; }  .photo-copy__label {  margin-bottom: 12px !important;  padding-bottom: 6px !important; }  .photo-copy h3 {  font-size: clamp(22px,5.5vw,28px) !important;  line-height: 1.05 !important;  margin-bottom: 10px !important;  max-width: 12ch !important; }  .photo-copy p {  font-size: 14px !important;  line-height: 1.5 !important; }  /* Lake-only: photo-copy sits between pill (top) and overlapping card (bottom) */ #jezero .lake-callout {  z-index: 5 !important; }  #jezero .photo-copy {  bottom: 64px !important;  max-width: 90% !important;  z-index: 3 !important; }  #jezero .photo-copy h3 {  font-size: clamp(22px, 6.4vw, 28px) !important;  line-height: 1.05 !important;  letter-spacing: -0.02em !important;  margin-bottom: 8px !important;  max-width: none !important; }  #jezero .photo-copy p {  font-size: 12px !important;  line-height: 1.4 !important;  max-width: 26ch !important; }  .xp-board {  grid-template-columns: 1fr !important;  grid-template-rows: auto !important;  gap: 18px !important; }  .xp-board__hero, .xp-board__tile, .xp-board__text {  grid-column: 1 !important;  grid-row: auto !important; }  .xp-board__hero {  min-height: 468px !important;  border-radius: 24px !important; }  .xp-board__hero-content {  padding: 24px 22px 22px !important;  gap: 8px !important; }  .xp-board__hero-content h3 {  font-size: clamp(32px,9vw,40px) !important;  line-height: 1.02 !important; }  .xp-board__tile {  min-height: 280px !important;  aspect-ratio: auto !important;  border-radius: 24px !important; }  .xp-board__tile-content {  padding: 22px 20px !important; }  .xp-board__tile-content h3 {  font-size: 26px !important; }  .xp-board__text {  padding: 24px 20px !important;  border-radius: 24px !important;  gap: 12px !important; }  .xp-board__text blockquote {  font-size: 24px !important;  line-height: 1.24 !important; }  .xp-board__text small {  font-size: 14px !important;  line-height: 1.55 !important; }  .ks-tabs__nav {  margin: 0 calc(var(--gutter) * -1) 24px !important;  padding: 0 max(var(--gutter), env(safe-area-inset-left)) 4px max(calc(var(--gutter) + 28px), env(safe-area-inset-right)) !important;  gap: 10px !important;  display: flex !important;  justify-content: flex-start !important;  align-items: center !important;  flex-wrap: nowrap !important;  overflow-x: auto !important;  overflow-y: hidden !important;  border-bottom: none !important;  scrollbar-width: none;  -webkit-overflow-scrolling: touch;  touch-action: pan-x;  scroll-padding-inline: var(--gutter); }  .ks-tabs__nav::-webkit-scrollbar {  display: none; }  .ks-tabs__tab {  flex: 0 0 auto !important;  margin: 0 !important;  padding: 0 18px !important;  height: 44px !important;  white-space: nowrap !important;  border: 1px solid rgba(31,45,27,.16) !important;  border-radius: 999px !important;  background: rgba(250,248,242,.88) !important;  color: var(--muted) !important;  font-size: 14px !important;  line-height: 1 !important; }  .ks-tabs__tab.is-active {  background: var(--primary) !important;  border-color: var(--primary) !important;  color: #fff !important; }  .ks-tabs__tab:focus {  outline: none !important; }  .ks-tabs__tab:focus-visible {  outline: 2px solid rgba(42,74,36,.5) !important;  outline-offset: 2px !important; }  .ks-overlay-card {  grid-template-columns: 1fr !important;  gap: 18px !important;  min-height: 0 !important; }  .ks-overlay-card__img {  min-height: 340px !important;  aspect-ratio: auto !important;  border-radius: 24px !important;  background-position: center 45% !important; }  .ks-overlay-card__content {  margin-left: 0 !important;  padding: 24px 20px !important;  border-radius: 24px !important; }  .ks-overlay-card__content h3 {  font-size: 30px !important;  line-height: 1.08 !important;  margin-bottom: 14px !important; }  .ks-overlay-card__content > p {  font-size: 15px !important;  line-height: 1.62 !important; }  .ks-overlay-card__meta {  grid-template-columns: 1fr !important;  gap: 10px !important;  margin-bottom: 24px !important; }  .ks-overlay-card__meta span {  font-size: 14px !important;  line-height: 1.45 !important; }  .ks-overlay-card__actions {  margin-top: 0 !important; }  .ks-overlay-card__actions .ks-btn {  width: 100% !important; }  .price-note-top {  margin: -6px 0 26px !important;  font-size: 14px !important;  line-height: 1.55 !important; }  .price-blocks {  grid-template-columns: 1fr !important;  gap: 18px !important; }  .price-block, .price-block--primary {  padding: 24px 20px !important;  border-radius: 24px !important; }  .price-block h3, .price-block--primary h3 {  font-size: 28px !important;  line-height: 1.08 !important; }  .price-block > p, .price-block__tagline, .price-block__details li, .price-block__incl li {  font-size: 14px !important;  line-height: 1.58 !important; }  .price-block__incl, .price-block__details {  gap: 10px !important;  margin-bottom: 20px !important; }  .price-block .ks-btn {  width: 100% !important;  margin-top: 2px !important; }  .steps {  grid-template-columns: 1fr !important;  gap: 0 !important;  margin-top: 28px !important; }  .step {  display: grid !important;  grid-template-columns: 56px 1fr !important;  column-gap: 18px !important;  padding: 22px 0 !important;  border-top: 1px solid rgba(31,45,27,.12) !important;  border-bottom: none !important; }  .step:last-child {  border-bottom: 1px solid rgba(31,45,27,.12) !important;  padding-bottom: 22px !important; }  .step .n {  font-size: 34px !important;  line-height: .95 !important;  margin-bottom: 0 !important;  opacity: .22 !important;  align-self: start !important; }  .step h3 {  font-size: 18px !important;  line-height: 1.2 !important;  margin-bottom: 6px !important; }  .step p {  font-size: 14px !important;  line-height: 1.6 !important;  max-width: none !important; }  .step-note {  margin-top: 28px !important;  text-align: left !important;  max-width: none !important;  font-size: 13px !important; }  .pre-contact-cta {  padding: 56px 0 !important;  text-align: center !important; }  .pre-contact-cta .container {  max-width: 620px !important; }  .pre-contact-cta h2 {  font-size: clamp(34px,9vw,40px) !important;  line-height: 1.08 !important;  margin-bottom: 16px !important; }  .pre-contact-cta p {  font-size: 15px !important;  line-height: 1.6 !important;  margin-bottom: 24px !important; }  .pre-contact-cta .ks-btn {  width: 100% !important; }  .restaurant-atmos {  padding: 72px 0 !important; }  .restaurant-atmos__wrap {  grid-template-columns: 1fr !important;  gap: 56px !important; }  .restaurant-atmos__image {  min-height: 360px !important;  border-radius: 24px !important; }  .restaurant-atmos__card {  width: 100% !important;  margin: 0 !important;  padding: 24px 20px !important;  border-radius: 24px !important; }  .restaurant-atmos__card h2 {  font-size: 32px !important;  line-height: 1.08 !important;  margin-bottom: 16px !important; }  .restaurant-atmos__meta {  grid-template-columns: 1fr !important;  gap: 0 !important; }  .restaurant-atmos__meta-item {  flex-direction: row !important;  align-items: baseline !important;  justify-content: space-between !important;  gap: 16px !important;  padding: 14px 0 !important;  border-right: 0 !important;  border-bottom: 1px solid rgba(31,45,27,.08) !important; }  .restaurant-atmos__meta-item:first-child {  padding-top: 0 !important; }  .restaurant-atmos__meta-item:last-child {  padding-bottom: 0 !important;  border-bottom: 0 !important; }  .crosssell-section {  padding: 56px 0 !important; }  .crosssell, .crosssell--right {  grid-template-columns: 1fr !important;  gap: 22px !important;  max-width: none !important; }  .crosssell--right .crosssell__body {  order: 2 !important; }  .crosssell--right .crosssell__img {  order: 1 !important; }  .crosssell__img {  width: 100% !important;  max-width: none !important;  min-height: 320px !important;  aspect-ratio: 4/5 !important;  border-radius: 24px !important;  transform: none !important;  margin: 0 !important; }  .photo-copy--small {  left: 20px !important;  right: 20px !important;  bottom: 20px !important;  max-width: 280px !important; }  .photo-copy--small h3 {  font-size: clamp(26px,8vw,34px) !important;  max-width: 9ch !important; }  .photo-copy--small p {  font-size: 14px !important; }  .crosssell__body {  max-width: none !important; }  .crosssell__body h3 {  font-size: 30px !important;  line-height: 1.1 !important;  margin-bottom: 14px !important; }  .crosssell__details {  padding-top: 16px !important;  margin-bottom: 22px !important; }  .crosssell__body .ks-btn {  width: 100% !important; }  .faq-waveyu {  padding: 64px 0 !important; }  .faq-waveyu .faq-container {  display: flex !important;  flex-direction: column !important;  gap: 28px !important; }  .faq-waveyu .faq-left {  min-height: 0 !important;  display: contents !important; }  .faq-waveyu .faq-eyebrow {  order: 1 !important; }  .faq-waveyu h2 {  order: 2 !important; }  .faq-waveyu .faq-right {  order: 3 !important; }  .faq-waveyu .faq-eyebrow {  margin-bottom: 0 !important; }  .faq-help-card {  order: 4 !important;  width: 100% !important;  max-width: none !important;  margin-top: 0 !important;  padding: 24px 20px !important;  border-radius: 24px !important; }  .faq-help-icon {  margin-bottom: 18px !important; }  .faq-help-card h3 {  margin-bottom: 10px !important; }  .faq-help-card p {  margin-bottom: 18px !important; }  .faq-help-link {  font-size: 15px !important; }  .faq-waveyu .faq-item {  padding: 18px 0 18px 34px !important; }  .faq-waveyu .faq-num {  top: 22px !important;  font-size: 11px !important; }  .faq-waveyu .faq-q {  font-size: 22px !important;  line-height: 1.18 !important;  padding-right: 48px !important; }  .faq-waveyu .faq-q::after {  width: 38px !important;  height: 38px !important;  font-size: 18px !important; }  .faq-waveyu .faq-a-inner {  padding: 14px 0 0 0 !important;  font-size: 14px !important; }  #kontakt {  padding: 64px 0 !important; }  #kontakt .container {  max-width: 680px !important; }  .contact {  grid-template-columns: 1fr !important;  gap: 24px !important; }  .contact-list {  gap: 0 !important; }  .contact-row {  padding: 16px 0 !important; }  .contact-row .v {  font-size: 16px !important;  line-height: 1.48 !important; }  #kontakt .ks-btn {  width: 100% !important;  margin-top: 10px !important; }  .contact-map .ph {  min-height: 280px !important;  border-radius: 24px !important;  font-size: 11px !important; }  .ks-footer__cta {  min-height: 420px !important;  padding: 72px 24px 36px !important;  gap: 18px !important; }  .ks-footer__cta h2 {  font-size: clamp(34px,9vw,42px) !important;  line-height: 1.08 !important;  max-width: 9ch !important; }  .ks-footer__cta p {  font-size: 15px !important;  line-height: 1.58 !important;  max-width: 30ch !important; }  .ks-footer__cta .ks-btn {  width: min(100%,320px) !important; }  .ks-footer__bar {  padding: 22px var(--gutter) 32px !important;  gap: 14px !important; }  .ks-footer__nav {  width: 100% !important;  gap: 14px !important;  align-items: center !important; }  .ks-footer__nav a {  font-size: 13px !important;  line-height: 1.5 !important;  text-align: center !important; }  .ks-footer__brand {  font-size: 22px !important; }  .ks-footer__copy {  font-size: 13px !important;  line-height: 1.5 !important; } } @media (max-width:767px) { #recenze .tst-grid {  display: grid !important;  grid-template-columns: 1fr !important;  gap: 16px !important;  align-items: start !important; }  #recenze .tst--sm {  grid-column: 1 !important;  max-width: none !important;  margin-top: 0 !important;  padding-left: 18px !important; }  #recenze .tst--sm:nth-child(2) {  grid-row: 1 !important; }  #recenze .tst--sm:nth-child(3) {  grid-row: 2 !important; }  #recenze .tst--primary {  grid-column: 1 !important;  grid-row: 3 !important;  max-width: none !important;  width: 100% !important;  margin-top: 8px !important; }  #recenze .tst--primary blockquote {  max-width: none !important;  font-size: clamp(28px,8.5vw,36px) !important;  line-height: 1.08 !important; } } /* ======================================================================
      §X1 · MOTION · header + footer + edge-glass
      ====================================================================== */header.nav { z-index: 60; } #ubytovani, #jezero, .section.section--soft, #ubytovani-detail, #cenik, .section.section--deep, .pre-contact-cta, .restaurant-atmos, #recenze, .crosssell-section, .faq-waveyu, #kontakt { position: relative; z-index: 3; } .ks-footer { position: relative; z-index: 1; isolation: isolate; overflow: clip; margin-top: 0 !important; inset: auto !important; left: auto !important; right: auto !important; bottom: auto !important; } .contact-map .ph, .ks-footer__bg, .ks-footer__shade, .ks-footer__cta, .ks-footer__bar { will-change: transform,opacity,filter; } #kontakt .section-head, #kontakt .contact-list, #kontakt .contact-map { opacity: 0; transform: translate3d(0,34px,0); transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .7s ease, filter .8s ease; } #kontakt.motion-visible .section-head, #kontakt.motion-visible .contact-list, #kontakt.motion-visible .contact-map { opacity: 1; transform: translate3d(0,0,0); } .contact-row { opacity: 0; transform: translate3d(0,18px,0); transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .6s ease; } #kontakt.motion-visible .contact-row { opacity: 1; transform: translate3d(0,0,0); } #kontakt.motion-visible .contact-row:nth-child(1) { transition-delay: .04s; } #kontakt.motion-visible .contact-row:nth-child(2) { transition-delay: .08s; } #kontakt.motion-visible .contact-row:nth-child(3) { transition-delay: .12s; } #kontakt.motion-visible .contact-row:nth-child(4) { transition-delay: .16s; } .contact-map .ph { --contact-media-shift: 0px; --contact-media-blur: 0px; transform: translate3d(0,var(--contact-media-shift),0); filter: blur(var(--contact-media-blur)); transition: transform .22s linear,filter .28s ease; } .ks-footer__bg { --footer-shift: 0px; --footer-scale: 1; top: -18%; right: -4%; bottom: -18%; left: -4%; transform: translate3d(0,var(--footer-shift),0) scale(var(--footer-scale)); transition: none !important; } .ks-footer__shade { top: -18%; right: -4%; bottom: -18%; left: -4%; transition: none !important; } .ks-footer__cta, .ks-footer__bar { opacity: 0; transform: translate3d(0,42px,0); transition: transform .9s cubic-bezier(.22,1,.36,1), opacity .75s ease; } .ks-footer__cta.is-visible, .ks-footer__bar.is-visible { opacity: 1; transform: translate3d(0,0,0); } .ks-footer__bar { transition-delay: .1s; } @media (max-width:1199px) { .ks-footer {  margin-top: 0 !important; } } @media (max-width:767px) { .ks-footer {  margin-top: 0 !important; }  .ks-footer__cta, .ks-footer__bar, #kontakt .section-head, #kontakt .contact-list, #kontakt .contact-map {  transform: translate3d(0,24px,0); } } @media (prefers-reduced-motion:reduce) { header.nav, #kontakt .section-head, #kontakt .contact-list, #kontakt .contact-map, .contact-row, .contact-map .ph, .ks-footer__bg, .ks-footer__shade, .ks-footer__cta, .ks-footer__bar {  transition: none !important;  transform: none !important;  filter: none !important;  opacity: 1 !important; } } /* ======================================================================
      §X2 · MOTION · header glass / edge glass underlay
      ====================================================================== */html, body { background: var(--bg) !important; } body::before, body::after { content: ""; position: fixed; left: 0; right: 0; height: 96px; pointer-events: none; opacity: 0; z-index: 95; backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px); transition: opacity .24s ease; will-change: opacity; background: linear-gradient(180deg,rgba(248,246,240,.22) 0%,rgba(248,246,240,.12) 30%,rgba(248,246,240,.04) 58%,rgba(248,246,240,0) 100%); } body::before { top: 0; mask-image: linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.48) 68%,transparent 100%); -webkit-mask-image: linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.48) 68%,transparent 100%); } body::after { display: none !important; } body.tropica-edge-top::before { opacity: 1; } header.nav { --tropica-nav-alpha: 0; --tropica-nav-blur: 0px; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 100 !important; background: transparent !important; border-bottom: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; transition: none !important; overflow: visible !important; } header.nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: rgba(243,241,235,var(--tropica-nav-alpha)); backdrop-filter: saturate(160%) blur(var(--tropica-nav-blur)); -webkit-backdrop-filter: saturate(160%) blur(var(--tropica-nav-blur)); transition: background-color .28s linear,backdrop-filter .28s linear,-webkit-backdrop-filter .28s linear,opacity .28s linear; opacity: 1; } header.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.3); pointer-events: none; z-index: 2; transition: background-color .28s linear,opacity .28s linear; opacity: 1; } header.nav > * { position: relative; z-index: 1; } header.nav.tropica-over-hero::before { background: rgba(243,241,235,0); backdrop-filter: saturate(160%) blur(0px); -webkit-backdrop-filter: saturate(160%) blur(0px); } header.nav.tropica-over-hero::after { background: rgba(255,255,255,.28); opacity: 1; } header.nav.tropica-over-hero .logo, header.nav.tropica-over-hero .nav-links a { color: #fff !important; } header.nav:not(.tropica-over-hero) .logo, header.nav:not(.tropica-over-hero) .nav-links a { color: var(--dark) !important; } header.nav:not(.tropica-over-hero)::after { background: rgba(31,45,27,.18); opacity: 1; } /* ======================================================================
      §X3 · MOTION · footer dark stage
      ====================================================================== */html, body { overflow-x: clip !important; } .ks-footer { position: relative !important; z-index: 3 !important; } .ks-footer { position: relative !important; z-index: 1 !important; min-height: 100svh !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; overflow: hidden !important; isolation: isolate !important; margin: 0 !important; padding: 0 !important; background: #0b120d !important; color: #fff !important; } .ks-footer__bg { --tropica-footer-y: 0px; position: absolute !important; top: -40% !important; right: -2% !important; bottom: -30% !important; left: -2% !important; width: auto !important; height: auto !important; min-height: 0 !important; background-size: cover !important; background-position: center bottom !important; transform: translate3d(0,var(--tropica-footer-y),0) !important; filter: none !important; will-change: transform !important; z-index: 0 !important; transition: none !important; } .ks-footer__shade { position: absolute !important; inset: 0 !important; z-index: 1 !important; opacity: 1 !important; background: linear-gradient(180deg,rgba(4,10,6,.22) 0%,rgba(4,10,6,.34) 38%,rgba(4,10,6,.78) 100%) !important; } .ks-footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 1; pointer-events: none; background: linear-gradient(180deg,rgba(4,10,6,0) 0%,rgba(4,10,6,.78) 100%); } .ks-footer__cta { position: relative !important; z-index: 2 !important; flex: 1 0 auto !important; min-height: calc(100svh - 154px) !important; padding: clamp(96px,13vh,160px) 50px clamp(48px,7vh,84px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; opacity: 0 !important; transform: translate3d(0,44px,0) !important; transition: opacity .85s ease,transform .95s cubic-bezier(.22,1,.36,1) !important; } .ks-footer__cta.is-visible { opacity: 1 !important; transform: translate3d(0,0,0) !important; } .ks-footer__bar { position: relative !important; z-index: 2 !important; flex: 0 0 auto !important; width: 100% !important; max-width: var(--container) !important; margin: 0 auto !important; background: transparent !important; opacity: 0 !important; transform: translate3d(0,30px,0) !important; transition: opacity .85s ease .12s,transform .95s cubic-bezier(.22,1,.36,1) .12s !important; } .ks-footer__cta { width: 100% !important; max-width: var(--container) !important; margin-left: auto !important; margin-right: auto !important; } .ks-footer__bar.is-visible { opacity: 1 !important; transform: translate3d(0,0,0) !important; } .ks-footer__brand, .ks-footer__nav a, .ks-footer__copy { color: #fff !important; } @media (max-width:900px) { .ks-footer {  min-height: 100svh !important; }  .ks-footer__cta {  min-height: calc(100svh - 188px) !important;  padding: 88px 28px 44px !important; } } @media (max-width:900px) { .ks-footer__bg {  top: -30% !important;  right: 0 !important;  bottom: -24% !important;  left: 0 !important; } } @media (max-width:600px) { .ks-footer__bg {  top: -24% !important;  right: 0 !important;  bottom: -22% !important;  left: 0 !important; }  .ks-footer__cta {  min-height: calc(100svh - 210px) !important;  padding: 76px 20px 34px !important; } } @media (prefers-reduced-motion:reduce) { .ks-footer__bg {  transform: none !important; }  .ks-footer__cta, .ks-footer__bar {  opacity: 1 !important;  transform: none !important; } } /* ======================================================================
      §X4 · MOTION · tropica edge glass v3
      ====================================================================== */.tropica-edge-glass { --edge-opacity: 0; --edge-fade: 1; position: fixed; left: 0; right: 0; height: clamp(92px,10vh,152px); z-index: 96; pointer-events: none; opacity: var(--edge-opacity); backdrop-filter: blur(22px) saturate(148%) contrast(114%) brightness(104%); -webkit-backdrop-filter: blur(22px) saturate(148%) contrast(114%) brightness(104%); transform: translateZ(0); will-change: opacity,backdrop-filter; contain: paint; } .tropica-edge-glass::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: calc(.48 * var(--edge-fade, 1)); } .tropica-edge-glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0 !important; display: none !important; } .tropica-edge-glass--top { top: 0; mask-image: linear-gradient(to bottom,#000 0%,rgba(0,0,0,.88) 34%,rgba(0,0,0,.34) 74%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.68) 22%,#000 38%,#000 62%,rgba(0,0,0,.68) 78%,rgba(0,0,0,.50) 100%); -webkit-mask-image: linear-gradient(to bottom,#000 0%,rgba(0,0,0,.88) 34%,rgba(0,0,0,.34) 74%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.68) 22%,#000 38%,#000 62%,rgba(0,0,0,.68) 78%,rgba(0,0,0,.50) 100%); mask-composite: intersect; -webkit-mask-composite: source-in; } .tropica-edge-glass--top::before { background: linear-gradient(to bottom,rgba(248,246,240,.24),rgba(248,246,240,.10),rgba(248,246,240,0)); } .tropica-edge-glass--bottom { bottom: 0; mask-image: linear-gradient(to top,#000 0%,rgba(0,0,0,.90) 36%,rgba(0,0,0,.38) 74%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.68) 22%,#000 38%,#000 62%,rgba(0,0,0,.68) 78%,rgba(0,0,0,.50) 100%); -webkit-mask-image: linear-gradient(to top,#000 0%,rgba(0,0,0,.90) 36%,rgba(0,0,0,.38) 74%,transparent 100%),linear-gradient(90deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.68) 22%,#000 38%,#000 62%,rgba(0,0,0,.68) 78%,rgba(0,0,0,.50) 100%); mask-composite: intersect; -webkit-mask-composite: source-in; } .tropica-edge-glass--bottom::before { background: linear-gradient(to top,rgba(248,246,240,.22),rgba(248,246,240,.09),rgba(248,246,240,0)); } body::before, body::after { display: none !important; opacity: 0 !important; } header.nav::before { will-change: background,backdrop-filter; } @media (max-width:767px) { .tropica-edge-glass {  height: clamp(76px,9vh,118px);  backdrop-filter: blur(17px) saturate(144%) contrast(110%) brightness(103%);  -webkit-backdrop-filter: blur(17px) saturate(144%) contrast(110%) brightness(103%); } } @media (prefers-reduced-motion:reduce) { .tropica-edge-glass {  display: none !important; } } /* ======================================================================
      §X5 · MOTION · tropica header over footer
      ====================================================================== */header.nav { --tropica-nav-text: rgb(31,45,27); --tropica-nav-line: rgba(31,45,27,.18); } header.nav .logo, header.nav .nav-links a { color: var(--tropica-nav-text) !important; transition: color .18s linear !important; } header.nav::after { background: var(--tropica-nav-line) !important; transition: background-color .18s linear,opacity .18s linear !important; } /* === FIX: Tablet card height reduction === */@media (min-width: 768px) and (max-width: 1024px) { .accom-card, .accom-image, .accom-card img, .section img {  max-height: 320px !important;  height: auto !important;  object-fit: cover !important; } } /* (KEA-style pill tabs deleted — restored to underline system in foundation §6.) *//* ======================================================================
      §E1 · EXTRACT · contact section (ks-contact-close)
      ====================================================================== *//* ======================================================================
      §E2 · EXTRACT · FAQ accordion
      ====================================================================== *//* ===== REVIEWS EXTRACT — hoste recenze normalized to FINAL system ===== */#recenze { overflow: hidden !important; } #recenze .container { display: block !important; } #recenze .section-head { margin-bottom: 36px; } #recenze .section-head .lede { max-width: 520px; } #recenze .reviews-wrap { position: relative; margin: 0 calc(50% - 50vw); padding: 8px 0 0; } #recenze .reviews-marquee { position: relative; width: 100%; overflow: hidden; padding: 8px 0 16px; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); } #recenze .reviews-marquee.is-dragging { cursor: grabbing; } #recenze .reviews-marquee__track { display: flex; gap: 24px; width: max-content; padding: 8px 0; animation: reviewsScroll 72s linear infinite; will-change: transform; } #recenze .reviews-marquee:hover .reviews-marquee__track, #recenze .reviews-marquee.is-paused .reviews-marquee__track, #recenze .reviews-marquee.is-dragging .reviews-marquee__track { animation-play-state: paused; } @keyframes reviewsScroll { from {  transform: translate3d(0, 0, 0); }  to {  transform: translate3d(-50%, 0, 0); } } #recenze .review-card { flex: 0 0 clamp(320px, 34vw, 440px); min-height: 236px; background: #F8F6F0; border: 1px solid rgba(31,45,27,.06); border-radius: 24px; padding: 30px; box-shadow: 0 8px 24px -18px rgba(8,42,23,0.18); display: flex; flex-direction: column; gap: 0; user-select: none; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; } #recenze .review-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -18px rgba(8,42,23,0.22); } /* Stars — quieter, no bright color */#recenze .review-card__stars { display: inline-flex; align-items: center; gap: 3px; color: var(--ks-dark); line-height: 1; font-size: 11px; letter-spacing: .08em; opacity: .45; margin-bottom: 18px; } #recenze .review-card__stars svg { width: 11px; height: 11px; display: block; } /* Quote — premium serif/display, calm rhythm */#recenze .review-card__text { font-family: var(--display); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.48; color: var(--ks-dark); font-weight: 500; letter-spacing: -.015em; margin: 0; max-width: 34ch; flex: 1; } /* Author — single muted line. No avatar, no profile UI. */#recenze .review-card__meta { display: block; margin-top: 20px; padding: 0; border: 0; } #recenze .review-card__avatar { display: none !important; } #recenze .review-card__person { display: inline; } #recenze .review-card__name, #recenze .review-card__detail { display: inline; font-family: var(--sans); font-size: 13px; color: var(--muted); opacity: .82; letter-spacing: 0; font-weight: 500; line-height: 1.4; } #recenze .review-card__name { font-weight: 500; } #recenze .review-card__name + .review-card__detail::before { content: " — "; margin: 0 4px; opacity: .8; } /* Aggregated trust strip above the carousel (Booking + Google) */#recenze .reviews-trust { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 56px); margin: 0 auto 36px; padding: 18px 24px; background: #F8F6F0; border: 1px solid rgba(31,45,27,.08); border-radius: 999px; width: fit-content; max-width: 100%; flex-wrap: wrap; } #recenze .reviews-trust__item { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; } #recenze .reviews-trust__sep { width: 1px; height: 22px; background: rgba(31,45,27,.18); } #recenze .reviews-note a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(31,45,27,.35); transition: opacity .2s ease; } #recenze .reviews-note a:hover { opacity: .7; } @media (max-width: 480px) { #recenze .reviews-trust {  gap: 14px;  padding: 14px 18px; }  #recenze .reviews-trust__sep {  display: none; } } /* CTA below the carousel — lime primary button, centered conversion close. */#recenze .reviews-cta { margin: 52px 0 0; display: flex; justify-content: center; align-items: center; } #recenze .reviews-cta__btn { /* Inherits the global .ks-btn--primary lime styling — no override needed. */ } #recenze .reviews-note { margin: 22px 0 0; font-size: 13px; color: var(--muted); font-style: italic; opacity: .78; letter-spacing: .005em; text-align: center; } #recenze .reviews-marquee__track a, #recenze .reviews-marquee__track button { pointer-events: none; } @media (max-width:1100px) { #recenze .review-card {  flex: 0 0 clamp(300px, 38vw, 380px);  padding: 28px;  min-height: 228px; }  #recenze .reviews-marquee__track {  animation-duration: 64s; } } @media (min-width:768px) and (max-width:1199px) { #recenze .reviews-wrap {  margin: 0 calc(50% - 50vw); }  #recenze .reviews-marquee {  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);  mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%); } } @media (max-width:767px) { #recenze {  padding: 64px 0 !important; }  #recenze .section-head {  margin-bottom: 28px; }  #recenze .reviews-marquee {  padding: 6px 0 12px;  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);  mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); }  #recenze .reviews-marquee__track {  gap: 16px;  padding: 6px 0;  animation-duration: 56s; }  #recenze .review-card {  flex: 0 0 84vw;  max-width: 360px;  min-height: 220px;  padding: 24px;  border-radius: 22px; }  #recenze .review-card__text {  font-size: 17px;  line-height: 1.5; }  #recenze .review-card__meta {  margin-top: 18px; }  #recenze .reviews-cta {  margin-top: 36px;  padding: 0 var(--gutter);  justify-content: stretch; }  #recenze .reviews-cta__btn {  width: 100%;  justify-content: center; }  #recenze .reviews-note {  margin-top: 18px;  padding: 0 var(--gutter);  text-align: center; } } @media (prefers-reduced-motion:reduce) { #recenze .reviews-marquee {  overflow-x: auto;  -webkit-overflow-scrolling: touch;  mask-image: none;  -webkit-mask-image: none; }  #recenze .reviews-marquee__track {  animation: none !important;  transform: none !important; } } .faq-waveyu .faq-left { min-height: 0 !important; position: sticky; top: 126px; align-self: start; } .faq-waveyu .faq-intro { max-width: 390px; margin: 28px 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); } .faq-waveyu .faq-help-card, .faq-waveyu .faq-help-icon, .faq-waveyu .faq-help-link { display: none !important; } .faq-waveyu .faq-item { transition: background-color .28s ease,border-color .28s ease,box-shadow .28s ease; } .faq-waveyu .faq-item:hover { border-color: rgba(8,42,23,.22); } .faq-waveyu .faq-a { display: grid; grid-template-rows: 0fr; max-height: none !important; transition: grid-template-rows .34s cubic-bezier(.22,.61,.36,1),opacity .28s ease; opacity: 0; } .faq-waveyu .faq-a-inner { overflow: hidden; } .faq-waveyu .faq-item.open .faq-a { grid-template-rows: 1fr; opacity: 1; } .faq-waveyu .faq-q { transition: color .22s ease; } .faq-waveyu .faq-q:hover { color: var(--ks-dark); } @media (max-width:1100px) { .faq-waveyu .faq-left {  position: relative;  top: auto; } } @media (max-width:700px) { .faq-waveyu .faq-intro {  margin-top: 18px;  font-size: 15px; } } @media (prefers-reduced-motion:reduce) { .faq-waveyu .faq-a {  transition: none; } } #kontakt.ks-contact-close { padding: clamp(96px,10vw,150px) 0 !important; background: radial-gradient(circle at 50% 0%,rgba(42,74,36,.08),transparent 34%),var(--bg-alt) !important; overflow: hidden; } .ks-contact-close__shell { max-width: 1040px; margin: 0 auto; text-align: center; } .ks-contact-close__shell.ks-motion-block { opacity: 0; transform: translate3d(0,28px,0); transition: opacity .72s ease,transform .88s cubic-bezier(.22,1,.36,1); will-change: opacity,transform; } #kontakt.motion-visible .ks-contact-close__shell.ks-motion-block { opacity: 1; transform: translate3d(0,0,0); } .ks-contact-close__label { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; background: rgba(250,248,242,.72); color: var(--ks-dark); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 28px; } .ks-contact-close h2 { font-size: clamp(48px,6.2vw,96px) !important; line-height: .99 !important; letter-spacing: -.055em !important; margin: 0 auto 22px !important; max-width: 780px; color: var(--ks-dark) !important; } .ks-contact-close__lede { color: var(--muted); font-size: clamp(17px,1.35vw,21px); line-height: 1.55; max-width: 560px; margin: 0 auto 36px; } .ks-contact-close__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 54px; } .ks-contact-close__actions .ks-btn { min-width: 190px; } .ks-contact-close__actions .ks-btn--ghost { background: rgba(250,248,242,.54) !important; } .ks-contact-close__meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid rgba(31,45,27,.13); border-bottom: 1px solid rgba(31,45,27,.13); text-align: left; } .ks-contact-close__item { padding: 26px 28px; border-right: 1px solid rgba(31,45,27,.13); } .ks-contact-close__item:last-child { border-right: 0; } .ks-contact-close__item span { display: block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; font-weight: 500; } .ks-contact-close__item strong, .ks-contact-close__item a { display: block; color: var(--ks-dark); font-size: clamp(16px,1.25vw,19px); line-height: 1.35; font-weight: 500; } .ks-contact-close__social { display: flex; flex-wrap: wrap; gap: 6px 18px; } .ks-contact-close__social a { display: inline-block; color: var(--ks-dark); font-size: clamp(16px,1.25vw,19px); line-height: 1.35; font-weight: 500; text-decoration: none; transition: opacity .2s ease; } .ks-contact-close__social a:hover { opacity: .7; } .ks-contact-close__map-note { margin: 28px auto 0; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 56ch; } @media (max-width:1000px) { .ks-contact-close__meta {  grid-template-columns: 1fr; }  .ks-contact-close__item {  border-right: 0;  border-bottom: 1px solid rgba(31,45,27,.13);  padding: 22px 0; }  .ks-contact-close__item:last-child {  border-bottom: 0; } } @media (max-width:767px) { #kontakt.ks-contact-close {  padding: 64px 0 !important; }  .ks-contact-close h2 {  font-size: clamp(36px,10.5vw,48px) !important;  line-height: 1.05 !important;  max-width: 10.5ch; }  .ks-contact-close__actions {  display: grid;  grid-template-columns: 1fr;  margin-bottom: 36px; }  .ks-contact-close__actions .ks-btn {  width: 100% !important; }  .ks-contact-close__shell {  text-align: left; }  .ks-contact-close__lede {  margin-left: 0;  margin-right: 0; } } /* ============================================================
      KEA-PRECISION BUTTON CORRECTION
      Tightens proportions, fixes the arrow, switches the primary
      button to a richer green, and replaces the bouncy hover with
      a calm, layered Kea-style microinteraction.
      ============================================================ *//* Pill body — tighter padding, gap, calmer transition. */.ks-btn { display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; height: 54px !important; min-height: 54px !important; padding: 0 22px !important; font-size: 16px !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background-color .55s cubic-bezier(.22,1,.36,1), border-color .55s cubic-bezier(.22,1,.36,1), color .55s cubic-bezier(.22,1,.36,1) !important; } /* Icon circle — 36px, calmly transitioning. */.ks-btn__icon { width: 36px !important; height: 36px !important; font-size: 16px !important; border-radius: 999px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: transform .55s cubic-bezier(.22,1,.36,1), background-color .55s cubic-bezier(.22,1,.36,1) !important; } /* Arrow icon — 16px, currentColor, clean geometric SVG, centered. */.ks-btn__icon svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .55s cubic-bezier(.22,1,.36,1); } /* PRIMARY — lime (brand primary). */.ks-btn--primary, .ks-btn--light { background: #D7F24A !important; color: #082A17 !important; border: 1px solid #D7F24A !important; } .ks-btn--primary .ks-btn__icon, .ks-btn--light .ks-btn__icon { background: rgba(8,42,23,.12) !important; color: #082A17 !important; } .ks-btn--primary:hover, .ks-btn--light:hover { background: #CBE83E !important; border-color: #CBE83E !important; box-shadow: none !important; } .ks-btn--primary:hover .ks-btn__icon, .ks-btn--light:hover .ks-btn__icon { background: rgba(8,42,23,.18) !important; } /* OUTLINE LIGHT — for dark/photo backgrounds. */.ks-btn--outline-light { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.85) !important; color: #fff !important; } .ks-btn--outline-light .ks-btn__icon { background: rgba(255,255,255,.9) !important; color: #234A28 !important; } .ks-btn--outline-light:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,1) !important; box-shadow: none !important; } .ks-btn--outline-light:hover .ks-btn__icon { background: #fff !important; } /* GHOST — visible secondary, white surface, dark green text. */.ks-btn--ghost { background: rgba(255,255,255,.9) !important; color: var(--ks-dark) !important; border: 1px solid rgba(31,45,27,.18) !important; } .ks-btn--ghost .ks-btn__icon { background: rgba(31,45,27,.08) !important; color: var(--ks-dark) !important; } .ks-btn--ghost:hover { background: #fff !important; border-color: rgba(31,45,27,.32) !important; box-shadow: none !important; } .ks-btn--ghost:hover .ks-btn__icon { background: rgba(31,45,27,.14) !important; } /* HOVER motion — calm body lift, soft icon bloom, arrow glide. */.ks-btn:hover { transform: translateY(-1px) !important;  /* Override original .ks-btn--primary:hover box-shadow rule. */ box-shadow: none !important; } .ks-btn:hover .ks-btn__icon { transform: scale(1.08); } .ks-btn:hover .ks-btn__icon svg { /* Combine optical centering offset with hover drift. */ transform: translate(2px,-2px); } @media (prefers-reduced-motion:reduce) { .ks-btn, .ks-btn__icon, .ks-btn__icon svg {  transition: none !important; }  .ks-btn:hover, .ks-btn:hover .ks-btn__icon, .ks-btn:hover .ks-btn__icon svg {  transform: none !important; } } /* ============================================================
      BYDLETE TAB PILLS — match the new green button system.
      Same Kea-style icon circle, same arrow SVG, same hover motion.
      ============================================================ *//* Hide the per-tab icon glyph — underline system has no inline icon. */#ubytovani-detail .ks-tabs__tab .ks-tabs__tab-icon { display: none !important; } /* Accommodation tab pills — softer active outline, dark readable text. */#ubytovani-detail .ks-tabs__tab { color: var(--ks-dark) !important; border-color: rgba(31,45,27,.11) !important; background: rgba(250,248,242,.72) !important; box-shadow: none !important; font-weight: 500 !important; min-height: 48px !important; padding: 0 24px !important; } #ubytovani-detail .ks-tabs__tab:hover { color: var(--ks-dark) !important; border-color: rgba(31,45,27,.18) !important; background: rgba(250,248,242,.86) !important; } #ubytovani-detail .ks-tabs__tab.is-active { color: var(--ks-dark) !important; border-color: rgba(31,45,27,.28) !important; background: rgba(255,254,250,.92) !important; box-shadow: none !important; } #ubytovani-detail .ks-tabs__tab.is-active:hover { border-color: rgba(31,45,27,.32) !important; background: rgba(255,254,250,.94) !important; } /* (Dark-green CTA override removed — Accommodation CTAs use global lime primary.) *//* ============================================================
      NEJČASTĚJŠÍ VOLBA BADGE — match the new green system.
      ============================================================ */.price-block--primary::before { background: #234A28 !important; color: #F8FAF4 !important; border-radius: 999px !important; letter-spacing: .11em !important; font-size: 10px !important; font-weight: 600 !important; padding: 6px 13px !important; } /* ============================================================
      FOOTER SAFAR-STYLE CTA — slide hover button.
      Lives in .ks-footer__cta. Icon starts on the LEFT and slides
      to the right of the pill on hover; label nudges left.
      (Class name kept as .hero-safar-btn for stability — it's
      purely a label.)
      ============================================================ */.hero-safar-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 18px; height: 56px; padding: 6px 24px 6px 7px; border-radius: 999px; overflow: hidden; isolation: isolate; background: #234A28; color: #fff; border: 1px solid rgba(255,255,255,.16); font-family: var(--sans); font-size: clamp(15px,1.05vw,17px); font-weight: 500; line-height: 1; letter-spacing: -0.025em; white-space: nowrap; text-decoration: none; transition: background-color .65s cubic-bezier(.22,1,.36,1), border-color .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); } .hero-safar-btn__icon { width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,.18); color: #fff; transition: transform .75s cubic-bezier(.22,1,.36,1), background-color .65s cubic-bezier(.22,1,.36,1); } .hero-safar-btn__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: translate(-1px,1px); transition: transform .75s cubic-bezier(.22,1,.36,1); } .hero-safar-btn__label { position: relative; z-index: 2; transition: transform .75s cubic-bezier(.22,1,.36,1); } /* Hover — icon slides FULLY past the text, label shifts left,
      arrow drifts. The slide distance is large enough that the
      icon clears the entire "Zkontrolovat dostupnost" label. */.hero-safar-btn:hover { background: #2D5A33; border-color: rgba(255,255,255,.24); transform: translateY(-1px); } .hero-safar-btn:hover .hero-safar-btn__icon { /* Slide ends exactly at the right padding edge — icon's right
          edge meets button's right inner edge. */ transform: translateX(calc(100% + 190px)) scale(1.02); background: rgba(255,255,255,.24); } .hero-safar-btn:hover .hero-safar-btn__icon svg { transform: translate(2px,-2px); } .hero-safar-btn:hover .hero-safar-btn__label { transform: translateX(-30px); } @media (max-width:767px) { .hero-safar-btn {  width: 100%;  max-width: 340px;  height: 52px;  padding: 5px 20px 5px 6px;  font-size: 15px;  gap: 14px; }  .hero-safar-btn__icon {  width: 40px;  height: 40px; }  .hero-safar-btn:hover .hero-safar-btn__icon {  transform: translateX(calc(100% + 155px)) scale(1.02); }  .hero-safar-btn:hover .hero-safar-btn__label {  transform: translateX(-24px); } } @media (prefers-reduced-motion:reduce) { .hero-safar-btn, .hero-safar-btn__icon, .hero-safar-btn__icon svg, .hero-safar-btn__label {  transition: none !important; }  .hero-safar-btn:hover, .hero-safar-btn:hover .hero-safar-btn__icon, .hero-safar-btn:hover .hero-safar-btn__icon svg, .hero-safar-btn:hover .hero-safar-btn__label {  transform: none !important; } } /* ============================================================
   FOOTER CTA — lime primary with contained left→right shine.
   Shine sweeps inside the button only; nothing moves out of place.
   ============================================================ */.footer-cta__btn { position: relative; overflow: hidden; isolation: isolate; } .footer-cta__btn > span { position: relative; z-index: 2; } .footer-cta__btn .ks-btn__icon { position: relative; z-index: 2; } .footer-cta__btn::before { content: ""; position: absolute; inset: 0; transform: translateX(-105%); background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.32) 48%,
    transparent 100%
  ); transition: transform .55s ease; pointer-events: none; z-index: 1; } .footer-cta__btn:hover::before { transform: translateX(105%); } @media (prefers-reduced-motion:reduce) { .footer-cta__btn::before {  transition: none !important;  transform: translateX(-105%) !important; } } /* PROFIT-STYLE DIRECTIONAL REVEAL — driven entirely by inline
      styles set in JS so we use the highest possible CSS priority
      (inline !important beats every author rule). This is the
      minimum CSS — only reduced-motion fallback. */@media (prefers-reduced-motion:reduce) { [data-profit-reveal], [data-profit-stagger] > * {  opacity: 1 !important;  transform: none !important;  filter: none !important;  transition: none !important; } } /* ============================================================
      PHOTO HOVER ZOOM — IMAGE-ONLY
      Gentle 1.03 scale over 1.5s on the photo only; container
      stays still. Applied to gallery, Bydlete, crosssell photos.
      ============================================================ */.gallery__hero, .gallery__tile, .gallery__strip-img, .ks-overlay-card__img, .crosssell__img { position: relative; overflow: hidden; } .gallery__hero::before, .gallery__tile::before, .gallery__strip-img::before, .ks-overlay-card__img::before, .crosssell__img::before { content: ""; display: block; position: absolute; inset: 0; background-image: inherit; background-size: cover; background-position: center center; background-repeat: no-repeat; transform: scale(1); transform-origin: center center; transition: transform 1.5s cubic-bezier(.22,1,.36,1); will-change: transform; z-index: 0; pointer-events: none; } /* Override upstream rule that force-hides ::before on the
      Bydlete cards when they have an inline background-image. */.ks-overlay-card__img[style*="background-image"]::before { display: block !important; } /* Existing gradient ::after sits above the zooming image layer;
      text overlays inside .gallery__body sit above the gradient. */.gallery__hero::after, .gallery__tile::after, .ks-overlay-card__img::after, .crosssell__img::after { z-index: 1 !important; } .gallery__body { position: relative; z-index: 2; } .gallery__hero:hover::before, .gallery__tile:hover::before, .gallery__strip-img:hover::before, .ks-overlay-card__img:hover::before, .crosssell__img:hover::before { transform: scale(1.03); } @media (prefers-reduced-motion:reduce) { .gallery__hero::before, .gallery__tile::before, .gallery__strip-img::before, .ks-overlay-card__img::before, .crosssell__img::before {  transition: none !important; }  .gallery__hero:hover::before, .gallery__tile:hover::before, .gallery__strip-img:hover::before, .ks-overlay-card__img:hover::before, .crosssell__img:hover::before {  transform: none !important; } } /* ============================================================
      PRODUCTION SCROLL FEEL
      - Lenis controls smooth scroll inertia (in <script>)
      - .reveal-item: one-time soft fade-up on viewport entry
      - .reveal-stagger: optional child stagger for card groups
      No photo parallax. No continuous scroll-linked motion
      (header/footer keep their own).
      ============================================================ */.reveal-item { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); will-change: opacity,transform; } .reveal-item.is-visible { opacity: 1; transform: translateY(0); } .reveal-stagger > * { transition-delay: calc(var(--i, 0) * 70ms); } /* Lenis hooks. */html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ============================================================
      TROPICA-STYLE PAGE LOAD TRANSITION — SEQUENCED CINEMATIC
      Strict hierarchy with 3D rotation on title and subtitle.
      Timeline (locked):
        0ms   → hero-bg starts
        120ms → MAIN TITLE
        420ms → HEADER
        800ms → SUBTITLE
        1100ms → meta column
        1500ms → CTA buttons
      ============================================================ */body.is-loading { overflow-x: clip; } /* Perspective context for the 3D rotations on title + subtitle.
      Set on the immediate parent of those elements so the rotateX
      actually has depth (no preserve-3d juggling needed). */.hero { position: relative; } .hero-block { perspective: 1200px; } /* HERO + FOOTER IMAGE OPACITY + FROSTY BACKDROP
      Hero photo renders at .68 opacity over a warm dusk backdrop.
      Final overlay tone is set in HEADER + HERO FINAL LOCK at end
      of CSS. */.hero { background-color: #28241C; } .ks-footer__bg { opacity: .3; } /* (.hero-veil moved to HEADER + HERO FINAL LOCK at end of CSS.) *//* Frosty glass strip behind the navbar — matches the footer's
      .tropica-edge-glass--bottom recipe (same blur, same cream
      tint, same fade-out mask). Position is fixed so the strip
      stays at the top of the viewport behind the nav, and the
      nav reads on a clearly frosty surface. */.hero-frost { position: fixed; top: 0; left: 0; right: 0; height: clamp(96px,11vh,152px); z-index: 48; pointer-events: none;  /* Strength dialed to 60% — softer than the footer frost. */ backdrop-filter: blur(13px) saturate(129%) contrast(108%) brightness(102%); -webkit-backdrop-filter: blur(13px) saturate(129%) contrast(108%) brightness(102%); transform: translateZ(0); will-change: opacity; contain: paint; mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.34) 74%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.34) 74%, transparent 100%); transition: opacity .35s cubic-bezier(.22,1,.36,1); } .hero-frost::before { content: ""; position: absolute; inset: 0; pointer-events: none;  /* Cream tint at 60% of the footer frost's intensity. */ background: linear-gradient(to bottom, rgba(248,246,240,.144), rgba(248,246,240,.06), rgba(248,246,240,0)); } /* Hide the frost once the user has scrolled past the hero, so it
      doesn't sit on light sections below where it isn't needed. */.hero-frost.is-hidden { opacity: 0; } @media (prefers-reduced-motion:reduce) { .hero-frost {  backdrop-filter: none;  -webkit-backdrop-filter: none; } } /* HERO BACKGROUND — slow deblur across the entire timeline.
      Final opacity caps at 0.3 (the new image opacity). */.hero-bg { filter: blur(0); transform: scale(1); opacity: .65; transition: filter 2.2s cubic-bezier(.22,1,.36,1), transform 2.4s cubic-bezier(.22,1,.36,1), opacity 1.6s cubic-bezier(.22,1,.36,1); will-change: filter,transform,opacity; } body.is-loading .hero-bg { filter: blur(26px); transform: scale(1.065); opacity: 0; } /* HERO EYEBROW — leads with the title, gentler transforms. */.hero-label { opacity: 1; transform: translateY(0); filter: blur(0); transition: transform 1.6s cubic-bezier(.22,1,.36,1) .12s, opacity 1.3s cubic-bezier(.22,1,.36,1) .12s, filter 1.5s cubic-bezier(.22,1,.36,1) .12s; will-change: opacity,filter,transform; } body.is-loading .hero-label { opacity: 0; transform: translateY(20px); filter: blur(10px); } /* MAIN TITLE — primary driver. 3D rotateX/rotateZ for depth. */.hero h1 { opacity: 1; transform: translateY(0) rotateX(0deg) rotateZ(0deg); filter: blur(0); transition: transform 1.8s cubic-bezier(.22,1,.36,1) .12s, opacity 1.4s cubic-bezier(.22,1,.36,1) .12s, filter 1.6s cubic-bezier(.22,1,.36,1) .12s; will-change: opacity,filter,transform; transform-origin: center bottom; } body.is-loading .hero h1 { opacity: 0; transform: translateY(60px) rotateX(14deg) rotateZ(-2deg); filter: blur(16px); } /* HEADER — second layer, independent. Existing scroll-state
      background/border-color transitions preserved. */header.nav { transition: opacity 1s cubic-bezier(.22,1,.36,1) .42s, transform 1.1s cubic-bezier(.22,1,.36,1) .42s, background .3s ease, border-color .3s ease; } body.is-loading header.nav { opacity: 0; transform: translateY(-24px); } /* SUBTITLE — third layer, under title with 3D tilt. */.hero-sub { opacity: 1; transform: translateY(0) rotateX(0deg); filter: blur(0); transition: transform 1.5s cubic-bezier(.22,1,.36,1) .8s, opacity 1.3s cubic-bezier(.22,1,.36,1) .8s, filter 1.4s cubic-bezier(.22,1,.36,1) .8s; will-change: opacity,filter,transform; transform-origin: center bottom; } body.is-loading .hero-sub { opacity: 0; transform: translateY(40px) rotateX(8deg); filter: blur(10px); } /* META COLUMN (Sezóna / Příjezd / …) — fourth layer. */.hero-meta-col { opacity: 1; transform: translateY(0); transition: transform 1.2s cubic-bezier(.22,1,.36,1) 1.1s, opacity 1.1s cubic-bezier(.22,1,.36,1) 1.1s; will-change: opacity,transform; } body.is-loading .hero-meta-col { opacity: 0; transform: translateY(30px); } /* CTA — last, very intentional, clearly delayed. */.hero-cta { opacity: 1; transform: translateY(0); transition: transform 1.1s cubic-bezier(.22,1,.36,1) 1.5s, opacity 1s cubic-bezier(.22,1,.36,1) 1.5s; will-change: opacity,transform; } body.is-loading .hero-cta { opacity: 0; transform: translateY(24px); } /* Reduced motion — skip entirely. */@media (prefers-reduced-motion:reduce) { body.is-loading .hero-bg, body.is-loading .hero-label, body.is-loading .hero h1, body.is-loading .hero-sub, body.is-loading .hero-meta-col, body.is-loading .hero-cta, body.is-loading header.nav {  opacity: 1 !important;  filter: none !important;  transform: none !important;  transition: none !important; } } @media (prefers-reduced-motion:reduce) { .reveal-item {  transition: none !important;  transform: none !important;  opacity: 1 !important; } } /* ====================================================================
   HEADER + HERO — FINAL LOCK
   Single source of truth for header/nav and hero overrides.
   Supersedes any earlier audit-pass / point-fix layers above.
   Strictly scoped to header + hero — no other section is touched here.
   ==================================================================== *//* ----- HEADER ----- */header.nav.scrolled { background: rgba(243,241,235,.90) !important; border-bottom: 1px solid rgba(31,45,27,.10) !important; box-shadow: none !important; } .nav-inner { padding: 12px 0 !important; min-height: 72px !important; } .logo { font-size: 19px; } .nav-links { gap: 28px; } .nav-links a { opacity: .85; } .nav-links a:hover { opacity: 1; } /* Header CTA: ghost (transparent + 1px border).
   Only one dominant filled button on the page (lime in hero + booking).
   The actual class JS toggles is .tropica-over-hero (when over hero),
   so the spec's "scrolled" state maps to :not(.tropica-over-hero). */.nav-cta { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 999px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } header.nav:not(.tropica-over-hero) .nav-cta { border-color: rgba(8,42,23,.15); color: #1F2D1B; background: transparent; } .nav-cta:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); } header.nav:not(.tropica-over-hero) .nav-cta:hover { background: rgba(8,42,23,.04); } /* ----- HERO (sticky / pinned to viewport) ----- */.hero { position: sticky !important; top: 0 !important; height: 100vh !important; min-height: 100svh !important; z-index: 0 !important; background-color: #28241C; } .hero-bg { background-position: center 42%; } .hero-veil { background: linear-gradient(180deg, rgba(8,42,23,.38) 0%, rgba(8,42,23,.18) 42%, rgba(8,42,23,.62) 100%) !important; } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 65%, rgba(0,0,0,.22) 100%); pointer-events: none; } .hero-inner { padding-top: 150px !important; padding-bottom: 160px !important; } /* Hero label readability: an audit-pass rule sets color to var(--ks-dark)
   (dark green) and letter-spacing to .16em, which becomes invisible on
   the green-tinted hero. This restores the white tone with intentional
   tracking and a subtle text-shadow for varied photo brightness. */.hero-label { color: rgba(255,255,255,.85) !important; font-weight: 500 !important; letter-spacing: .18em !important; text-shadow: 0 1px 6px rgba(0,0,0,.35); } .hero-block { max-width: 680px; } .hero h1 { font-size: clamp(48px, 8.2vw, 110px) !important; line-height: 1.04 !important; letter-spacing: -.035em !important; max-width: 860px !important; color: rgba(255,255,255,.95) !important; margin-bottom: 32px !important; } .hero-sub { max-width: 42ch !important; font-size: clamp(16px, 1.15vw, 18px) !important; line-height: 1.62 !important; color: rgba(255,255,255,.95) !important; opacity: 1 !important; } .hero-meta-col { max-width: 240px; } .hero-cta .ks-btn--primary { background: #D7F24A !important; color: #082A17 !important; border: 1px solid #D7F24A !important; border-radius: 999px !important; } .hero-cta .ks-btn--primary:hover { background: #CBE83E !important; border-color: #CBE83E !important; transform: translateY(-2px) !important; box-shadow: 0 10px 24px -10px rgba(8,42,23,.35) !important; } .hero-cta .ks-btn--primary .ks-btn__icon { background: rgba(8,42,23,.12) !important; color: #082A17 !important; } .hero-cta .ks-btn--primary:hover .ks-btn__icon { background: rgba(8,42,23,.18) !important; } .hero-cta .ks-btn__icon { width: 38px !important; height: 38px !important; } /* ----- HERO TABLET (≤1199) ----- */@media (max-width: 1199px) { .hero {  min-height: 82vh !important; }  .hero-inner {  padding-top: 120px !important;  padding-bottom: 120px !important; } } /* ----- META COLUMN HIDE (≤1099 — keeps it on large laptops) ----- */@media (max-width: 1099px) { .hero-meta-col {  display: none !important; } } /* ----- HERO MOBILE (≤767) ----- */@media (max-width: 767px) { .hero {  min-height: 78vh !important; }  .hero-inner {  padding-top: 96px !important;  padding-bottom: 96px !important; }  .hero h1 {  font-size: clamp(44px, 13vw, 64px) !important;  line-height: .98 !important;  max-width: 10ch !important; }  .hero-cta {  gap: 12px !important; }  .hero-cta .ks-btn {  width: 100% !important;  height: 56px !important;  min-height: 56px !important; }  .hero-cta .ks-btn__icon {  width: 36px !important;  height: 36px !important; } } /* ----- SHORT-HEIGHT PROTECTION (laptops ≤760px tall) ----- */@media (max-height: 760px) and (min-width: 900px) { .hero-inner {  padding-top: 120px !important;  padding-bottom: 120px !important; } } /* ====================================================================
   BOOKING — PHASE 3 LOCK (premium horizontal booking module)
   Single source of truth. Strictly scoped to booking section.
   Each .booking-field is a real <button> awaiting HBook wiring (TODO).
   ==================================================================== */.book-wrap { margin-top: 0 !important; } /* ----- Card shell ----- */.booking-card { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; grid-template-columns: none !important; max-width: 1180px !important; margin: -50px auto 0 !important; padding: 10px !important; background: #FAF8F2 !important; border: 1px solid rgba(8,42,23,.05) !important; border-radius: 32px !important; box-shadow: 0 12px 34px -24px rgba(8,42,23,.19) !important; } /* ----- Field button (clickable, awaiting HBook controls) ----- */.booking-field { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; flex: 1 1 0; min-width: 0; padding: 18px 24px; background: transparent; border: none; border-radius: 24px; font-family: inherit; color: inherit; cursor: pointer; transition: background-color .2s ease; } /* Field hover removed for calmer feel. Keyboard focus indicator preserved. */.booking-field:focus-visible { background: rgba(8,42,23,.035); outline: none; } .booking-field + .booking-field { border-left: 1px solid rgba(8,42,23,.08); } /* ----- Field width hierarchy (desktop) ----- */.booking-field:nth-child(1) { flex: 1.05 1 0; } .booking-field:nth-child(2) { flex: 1 1 0; } .booking-field:nth-child(3) { flex: 1 1 0; } .booking-field:nth-child(4) { flex: .85 1 0; } .booking-field__label { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(35,35,31,.50); line-height: 1; } .booking-field__value { margin-top: 8px; font-size: 17px; font-weight: 500; line-height: 1.2; color: #1F2D1B; } /* ----- CTA (dominant but not oversized; scoped, does not touch global .ks-btn) ----- */.booking-card__cta { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; height: 56px; min-width: 220px; padding: 0 36px; margin-left: 10px; background: #D7F24A; color: #082A17; border: none; border-radius: 999px; font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .booking-card__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(8,42,23,.35); background: #CBE83E; } .booking-caption { margin-top: 22px !important; } /* ----- Tablet (≤1199): 2x2 CSS grid + full-width CTA ----- */@media (max-width: 1199px) { .booking-card {  display: grid !important;  grid-template-columns: 1fr 1fr !important;  gap: 8px !important;  border-radius: 32px !important;  padding: 14px !important;  align-items: stretch !important; }  .booking-field {  flex: none;  padding: 16px 20px; }  .booking-field + .booking-field {  border-left: none; }  .booking-card__cta {  grid-column: 1 / -1;  width: 100%;  min-width: 0 !important;  margin: 4px 0 0 !important;  height: 54px; } } /* ----- Mobile (≤767): vertical stack ----- */@media (max-width: 767px) { .booking-card {  display: flex !important;  flex-direction: column !important;  grid-template-columns: none !important;  align-items: stretch !important;  margin: -48px auto 0 !important;  padding: 12px !important;  border-radius: 28px !important;  gap: 0 !important; }  .booking-field {  flex: 0 0 auto !important;  width: 100% !important;  padding: 16px !important;  border-left: none !important;  border-top: 1px solid rgba(8,42,23,.08) !important; }  .booking-field:first-child {  border-top: none !important; }  .booking-card__cta {  width: 100% !important;  height: 54px !important;  min-width: 0 !important;  margin: 4px 0 0 !important; } } /* ====================================================================
   STICKY HERO SCROLL — supporting rules
   The hero is pinned (position: sticky in HEADER + HERO FINAL LOCK).
   Sections after the hero roll over it via z-index + opaque background.
   For sticky to function, no ancestor of .hero may have overflow: hidden
   (clip is fine). overflow-x is forced to clip globally below.
   ==================================================================== */html, body, body.is-loading { overflow-x: clip !important; } /* Booking section is the first to roll over the pinned hero.
   Other sections already have z-index:3 (line 5469 list) and footer
   already has z-index:1 (line 5725) — both > 0, both opaque.

   display: flow-root creates a Block Formatting Context so the
   booking-card's margin-top: -72 does NOT collapse into the section's
   box. The section bg stays at its natural top (100vh in document),
   while the card visually peeks 72px above the section into the
   sticky hero zone — preserving the "card overlapping the hero"
   look from before sticky was added. */.section--hero-follow { position: relative !important; z-index: 2 !important; background: var(--bg) !important; display: flow-root !important; } /* (FINAL GRID SYSTEM moved to a separate <style> block after the
   external Tailwind <link> tag below — guarantees it's last in
   document order regardless of whether the external CSS loads.) *//* ============================================================
      §7 PRICING — EDITORIAL REBUILD WITH MOCK DATA
      Summary rows + 3 detail tables. No cards, no SaaS pricing.
      Tables wrapped in soft white-tinted surface with subtle border.
      ============================================================ */#cenik { background: transparent; } /* ============================================================
      §7 PRICING — DECISION INTERFACE
      ============================================================ */#cenik.section { padding-top: 72px; padding-bottom: 80px; } #cenik .section-head { margin-bottom: 18px; } #cenik .section-head h2 { margin-bottom: 12px; } #cenik .section-head .lede { margin-bottom: 0; line-height: 1.5; } #cenik .ks-price-widget { margin-top: 36px; display: flex; flex-direction: column; } /* Selector — premium horizontal pricing index */#cenik .ks-price-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; margin: 18px 0 22px; padding: 0; background: transparent; border-top: 1px solid rgba(31,45,27,.10); border-bottom: 1px solid rgba(31,45,27,.10); border-radius: 0; } #cenik .ks-price-option { flex: initial; width: auto; min-height: 82px; padding: 18px 24px; border: none; border-right: 1px solid rgba(31,45,27,.08); border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; text-align: left; font-family: var(--sans); color: var(--ks-dark); outline: none; position: relative; transition: background .2s ease, color .2s ease, border-color .2s ease; } #cenik .ks-price-option:last-child { border-right: none; } #cenik .ks-price-option:hover { background: rgba(255,255,255,.28); color: var(--ks-dark); transform: none; border-color: rgba(31,45,27,.08); } #cenik .ks-price-option.is-active { background: rgba(255,255,255,.40); border-color: rgba(31,45,27,.08); } #cenik .ks-price-option.is-active::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 3px; background: var(--ks-dark); } #cenik .ks-price-option__icon, #cenik .ks-price-option > span:first-child { display: none !important; } #cenik .ks-price-option strong { font-family: var(--sans); font-size: 16px; line-height: 1.2; font-weight: 500; color: var(--ks-dark); letter-spacing: -.01em; } #cenik .ks-price-option:not(.is-active) strong { color: rgba(31,45,27,.62); } #cenik .ks-price-option small { display: block; font-size: 13px; color: var(--muted); line-height: 1.2; } /* Stage — dominant decision anchor with category-aware tint */#cenik .ks-price-stage { margin-top: 20px; padding: clamp(42px, 4vw, 56px); border-radius: 32px; background: radial-gradient(circle at 82% 18%, rgba(215,242,74,.11), transparent 44%),
    linear-gradient(135deg, #FAF8F2 0%, #ECE4D2 100%); border: 1px solid rgba(31,45,27,.08); box-shadow: 0 28px 70px -36px rgba(8,42,23,.40); display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; position: relative; overflow: hidden; transition: background .35s ease, transform .35s ease, box-shadow .35s ease; } #cenik .ks-price-stage.is-chatky { background: radial-gradient(circle at 82% 18%, rgba(215,242,74,.14), transparent 44%),
    linear-gradient(135deg, #F6F3E8 0%, #EAE4D3 100%); } #cenik .ks-price-stage.is-stany { background: radial-gradient(circle at 82% 18%, rgba(215,242,74,.12), transparent 44%),
    linear-gradient(135deg, #F3F1EB 0%, #E5E0CF 100%); } #cenik .ks-price-stage.is-strava { background: radial-gradient(circle at 82% 18%, rgba(215,242,74,.12), transparent 44%),
    linear-gradient(135deg, #F5F2EA 0%, #E9E2D2 100%); } #cenik .ks-price-stage:hover { transform: translateY(-2px); box-shadow: 0 18px 46px -28px rgba(8,42,23,.28),
    inset 0 1px 0 rgba(255,255,255,.6); } #cenik .ks-price-main { position: relative; z-index: 1; min-width: 0; transition: opacity .25s ease, transform .25s ease; } #cenik .ks-price-widget.is-switching .ks-price-main { opacity: 0; transform: translateY(6px); } #cenik .ks-price-stage::before { content: none; } #cenik .ks-price-main .label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(31,45,27,.58); font-weight: 500; } #cenik .ks-price-main h3 { font-family: var(--display); font-size: clamp(28px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -.025em; font-weight: 500; color: var(--ks-dark); margin: 10px 0 14px; } #cenik .ks-price-main .price-row { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 12px; } #cenik .ks-price-main .price { font-family: var(--display); font-size: clamp(70px, 8.5vw, 110px); line-height: .9; letter-spacing: -.05em; color: var(--ks-dark); font-weight: 500; } #cenik .ks-price-main .unit { font-size: 15px; color: var(--muted); } #cenik .ks-price-main .note { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 32ch; } #cenik .ks-price-emotion { font-size: 14px; color: var(--muted); margin: 0 0 18px; max-width: 28ch; font-style: italic; line-height: 1.45; } #cenik .ks-price-main .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* Pricing ghost — slightly stronger, scoped to #cenik so other ghosts unchanged */#cenik .ks-btn--ghost { background: rgba(255,255,255,.7) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(31,45,27,.14) !important; } #cenik .ks-btn--ghost:hover { background: #fff !important; } #cenik .ks-price-facts-wrap { position: relative; z-index: 1; align-self: center; } #cenik .ks-price-hint { font-size: 13px; color: var(--muted); opacity: .7; margin: 12px 0 0; padding-left: 28px; letter-spacing: -.005em; } /* Facts — included naturally, no boxes */#cenik .ks-price-facts { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; align-self: center; border-left: 1px solid rgba(31,45,27,.10); padding-left: 28px; } #cenik .ks-price-fact { position: relative; background: transparent; border: none; padding: 0; font-size: 14px; color: var(--muted); line-height: 1.55; } #cenik .ks-price-fact::before { display: none; } /* Drawer — premium fade + lift */#cenik .ks-price-drawer { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transform: translateY(12px); transition: max-height .4s ease, opacity .3s ease, transform .3s ease, margin-top .3s ease; } #cenik .ks-price-widget.is-open .ks-price-drawer { max-height: 1800px; opacity: 1; transform: translateY(0); margin-top: 18px; } #cenik .ks-price-drawer-inner { background: rgba(255,255,255,.68); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(31,45,27,.06); border-radius: 24px; padding: 22px; } /* Detail-toggle ghost button — chevron rotates when open */#cenik [data-detail-toggle] .ks-btn__icon svg { transition: transform .25s ease; } #cenik .ks-price-widget.is-open [data-detail-toggle] .ks-btn__icon svg { transform: rotate(180deg) translate(1px, -1px); } /* Tiny note below widget */#cenik .ks-price-tiny-note { margin: 18px 0 0; max-width: 60ch; font-size: 13px; line-height: 1.55; color: var(--muted); } /* (Old shell/cards/preview/accordion CSS removed — replaced by .ks-price-widget calculator above.) *//* Scroll wrapper — preserves overflow on mobile without breaking the
   wrapped surface's rounded corners */.ks-pricing-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .ks-pricing-table-scroll::-webkit-scrollbar { height: 6px; } .ks-pricing-table-scroll::-webkit-scrollbar-thumb { background: rgba(31,45,27,.18); border-radius: 999px; } /* Table surface — compact, contained */#cenik .ks-pricing-table-wrap { background: rgba(255,255,255,.62); border: 1px solid rgba(31,45,27,.065); border-radius: 22px; overflow: hidden; } #cenik table, .ks-pricing-table { width: 100%; border-collapse: collapse; background: transparent; } .ks-pricing-table--chatky { min-width: 760px; } .ks-pricing-table--stany { min-width: 680px; } .ks-pricing-table--stravovani { min-width: 620px; } #cenik .ks-pricing-table th { padding: 14px 18px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: rgba(31,45,27,.55); font-weight: 500; border-bottom: 1px solid rgba(31,45,27,.10); background: transparent; text-align: left; } #cenik .ks-pricing-table th:nth-child(2), #cenik .ks-pricing-table th:nth-child(3) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Body cells */#cenik .ks-pricing-table td { padding: 13px 18px; font-size: 13px; line-height: 1.45; color: var(--ks-dark); vertical-align: top; text-align: left; } #cenik .ks-pricing-table td:nth-child(2), #cenik .ks-pricing-table td:nth-child(3) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; } /* Horizontal hierarchy — main label + indented sub-detail */#cenik .ks-pricing-table td .price-main { display: block; color: var(--ks-dark); } #cenik .ks-pricing-table td .price-sub { display: block; margin-left: 16px; margin-top: 2px; color: var(--muted); } /* Row dividers — clean hairlines */#cenik tr { border-bottom: 1px solid rgba(31,45,27,.05); } #cenik tr:last-child { border-bottom: none; } /* Group title rows — real section headers */#cenik .ks-pricing-group th { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(31,45,27,.55); font-weight: 500; padding: 18px 18px 8px; border-bottom: none; background: rgba(31,45,27,.025); text-align: left; } #cenik tbody tr.ks-pricing-group { border-bottom: none; } /* Scroll hint — mobile only (default hidden) */.ks-pricing-scroll-hint { display: none; } /* ============================================================
   §7b DETAILED PRICING — premium expandable price sheet
   Collapsible groups, controlled rhythm, no Excel feel.
   ============================================================ */#cenik .ks-pricing-table-wrap { padding: 6px 28px 16px; } #cenik .pricing-table-head { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px; gap: 32px; padding: 0 0 14px; border-bottom: 1px solid rgba(31,45,27,.10); font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(31,45,27,.55); font-weight: 500; } #cenik .pricing-table-head span:nth-child(2), #cenik .pricing-table-head span:nth-child(3) { text-align: right; } #cenik .pricing-group { border-top: 1px solid rgba(31,45,27,.12); } #cenik .pricing-group:first-child { border-top: none; } #cenik .pricing-group-header { width: 100%; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(31,45,27,.62); font-weight: 500; background: transparent; border: none; text-align: left; outline: none; transition: color .2s ease; } #cenik .pricing-group-header:hover { color: var(--ks-dark); } #cenik .pricing-group.is-open .pricing-group-header { color: var(--ks-dark); } #cenik .pricing-group-header::after { content: "⌄"; font-size: 16px; line-height: 1; transition: transform .25s ease; color: rgba(31,45,27,.45); } #cenik .pricing-group.is-open .pricing-group-header::after { transform: rotate(180deg); } #cenik .pricing-group-body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s ease, opacity .25s ease; } #cenik .pricing-group.is-open .pricing-group-body { max-height: 1000px; opacity: 1; padding-bottom: 8px; } #cenik .pricing-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px; gap: 32px; align-items: center; padding: 15px 0; border-top: 1px solid rgba(31,45,27,.055); transition: background .2s ease; } #cenik .pricing-group-body > .pricing-row:first-child { border-top: none; } #cenik .ks-pricing-table-wrap > .pricing-row:first-of-type { border-top: none; } #cenik .pricing-row:hover { background: rgba(31,45,27,.018); } #cenik .pricing-row__text { text-align: left; min-width: 0; } #cenik .pricing-row__main { display: block; font-size: 14px; color: var(--ks-dark); font-weight: 500; line-height: 1.35; } #cenik .pricing-row__sub { display: block; margin-top: 2px; margin-left: 16px; font-size: 13px; color: var(--muted); font-weight: 400; line-height: 1.4; } #cenik .pricing-row__price { text-align: right; font-size: 14px; font-weight: 500; color: var(--ks-dark); font-variant-numeric: tabular-nums; white-space: nowrap; } #cenik .pricing-note { padding: 14px 0; font-size: 13px; line-height: 1.55; color: var(--muted); } #cenik .pricing-note + .pricing-note { border-top: 1px solid rgba(31,45,27,.05); } /* (Old .ks-pricing-notes / .ks-pricing-cta CSS removed — widget owns actions; tiny note is .ks-price-tiny-note above.) */@media (max-width: 900px) { #cenik .ks-price-stage {  grid-template-columns: 1fr;  gap: 28px; }  #cenik .ks-price-facts {  border-left: none;  padding-left: 0;  border-top: 1px solid rgba(31,45,27,.08);  padding-top: 20px; } } @media (max-width: 700px) { #cenik .ks-pricing-scroll-hint {  display: block;  font-size: 12px;  color: var(--muted);  margin: 0 0 10px;  font-style: italic; }  #cenik .ks-price-widget {  margin-top: 36px; }  #cenik .ks-price-selector {  display: flex;  width: 100%;  overflow-x: auto;  padding: 0;  gap: 0;  border-top: 1px solid rgba(31,45,27,.10);  border-bottom: 1px solid rgba(31,45,27,.10);  margin: 36px 0 24px;  scrollbar-width: none; }  #cenik .ks-price-selector::-webkit-scrollbar {  display: none; }  #cenik .ks-price-option {  flex: 0 0 auto;  min-width: 190px;  min-height: 76px;  height: auto;  padding: 16px 20px;  border-radius: 0;  border-right: 1px solid rgba(31,45,27,.08); }  #cenik .ks-price-option:last-child {  border-right: none; }  #cenik .ks-price-option.is-active::after {  left: 20px;  right: 20px; }  #cenik .ks-price-stage {  margin-top: 28px;  padding: 26px;  border-radius: 26px; }  #cenik .ks-price-main h3 {  font-size: 26px; }  #cenik .ks-price-main .price {  font-size: 56px; }  #cenik .ks-price-main .actions {  width: 100%; }  #cenik .ks-price-main .actions .ks-btn {  width: 100%; }  #cenik .ks-price-drawer-inner {  padding: 16px; }  #cenik .ks-pricing-table-wrap {  border-radius: 18px;  padding: 4px 18px 12px; }  #cenik .ks-pricing-table th, #cenik .ks-pricing-table td {  padding: 12px 14px;  font-size: 12.5px; }  #cenik .pricing-table-head, #cenik .pricing-row {  grid-template-columns: minmax(0, 1fr) 92px 92px;  gap: 14px; }  #cenik .pricing-row {  padding: 14px 0; }  #cenik .pricing-row__main, #cenik .pricing-row__price {  font-size: 13px; }  #cenik .pricing-row__sub {  font-size: 12px;  margin-left: 10px; }  #cenik .pricing-group-header {  padding: 16px 0;  font-size: 12px; } } /* ============================================================
      §7c PRICING — premium accordion cards
      Scoped replacement for the Ceník section only.
      ============================================================ */#cenik.ks-premium-pricing-section { background: var(--bg); padding-top: 66px; padding-bottom: 76px; } #cenik .ks-premium-pricing { max-width: 1210px; margin: 0 auto; } #cenik .ks-premium-pricing__head { max-width: 760px; margin: 0 auto 32px; text-align: center; } #cenik .ks-premium-pricing__head .eyebrow { margin-bottom: 14px; letter-spacing: .18em; } #cenik .ks-premium-pricing__head h2 { font-size: clamp(38px, 4vw, 56px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 20px; } #cenik .ks-premium-pricing__intro { margin: 0 auto; max-width: 560px; color: var(--muted); font-size: 15px; line-height: 1.6; opacity: .84; } #cenik .ks-premium-tabs { width: min(620px, 100%); margin: 0 auto 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #cenik .ks-premium-tabs__button { min-height: 46px; border: 1px solid rgba(31,45,27,.12); border-radius: 999px; background: rgba(248,246,240,.72); color: var(--ks-dark); font: 500 14px/1.15 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 10px 18px; box-shadow: none; transition: border-color .18s ease, opacity .18s ease; } #cenik .ks-premium-tabs__button:hover { transform: none; border-color: rgba(31,45,27,.24); } #cenik .ks-premium-tabs__button.is-active { background: rgba(255,254,250,.92); border-color: rgba(31,45,27,.28); color: var(--ks-dark); } #cenik .ks-premium-tabs__button svg, #cenik .ks-price-card__icon svg, #cenik .ks-price-card__toggle svg, #cenik .ks-price-note svg, #cenik .ks-price-person svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #cenik .ks-premium-tabs__button svg { display: none; } #cenik .ks-price-card__icon svg { width: 18px; height: 18px; } #cenik .ks-premium-panel { display: none; } #cenik .ks-premium-panel.is-active { display: block; } #cenik .ks-price-card-list { display: grid; gap: 14px; } #cenik .ks-price-card { border: 1px solid rgba(31,45,27,.07); border-radius: 24px; background: rgba(255,254,250,.72); box-shadow: none; overflow: hidden; transition: border-color .18s ease; } #cenik .ks-price-card.is-open { box-shadow: none; border-color: rgba(31,45,27,.11); } #cenik .ks-price-card__summary { width: 100%; min-height: 156px; display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr) minmax(180px, auto) minmax(126px, auto); align-items: stretch; gap: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; } #cenik .ks-price-card__image { min-height: 156px; background-size: cover; background-position: center; border-radius: 23px 0 0 23px; } #cenik .ks-price-card__body { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; align-content: center; padding: 26px 28px; } #cenik .ks-price-card__icon { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: rgba(31,45,27,.55); box-shadow: none; margin-top: 1px; } #cenik .ks-price-card__category { display: block; margin: 0 0 7px; font-size: 11px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--ks-dark); font-weight: 600; } #cenik .ks-price-card__title { display: block; font-family: var(--display); font-size: clamp(25px, 2.25vw, 36px); line-height: 1.08; letter-spacing: -.03em; color: var(--ks-dark); font-weight: 500; margin: 0 0 10px; } #cenik .ks-price-card__desc { display: block; color: var(--ks-dark); opacity: .78; font-size: 14px; line-height: 1.48; max-width: 34ch; } #cenik .ks-price-card__price { align-self: center; justify-self: end; padding: 0 26px 0 12px; min-width: 190px; display: grid; grid-template-columns: auto auto; align-items: start; justify-content: end; gap: 10px; color: var(--ks-dark); } #cenik .ks-price-card__price-prefix { font-size: 14px; margin-top: 13px; color: rgba(31,45,27,.72); } #cenik .ks-price-card__price-main { font-family: var(--display); font-size: clamp(32px, 3vw, 42px); line-height: 1; letter-spacing: -.03em; font-weight: 500; white-space: nowrap; } #cenik .ks-price-card__price-unit { grid-column: 2; justify-self: end; font-size: 13px; color: rgba(31,45,27,.72); margin-top: 8px; } #cenik .ks-price-card__toggle { align-self: center; justify-self: end; width: auto; height: auto; margin-right: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 5px 5px 16px; background: #FAF8F2; color: var(--ks-dark); border: 1px solid rgba(31,45,27,.14); border-radius: 999px; font-family: var(--sans); font-size: 13px; line-height: 1; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; box-shadow: 0 6px 18px -10px rgba(8,42,23,.15); } #cenik .ks-price-card__toggle svg { display: none; } #cenik .ks-price-card__toggle::before { content: "Zobrazit ceny"; display: inline-block; } #cenik .ks-price-card.is-open .ks-price-card__toggle::before { content: "Skrýt ceny"; } #cenik .ks-price-card__toggle::after { content: ""; width: 24px; height: 24px; border-radius: 50%; background-color: #D7F24A; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082A17' stroke-width='2'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 12px; flex-shrink: 0; transform: rotate(135deg); } #cenik .ks-price-card.is-open .ks-price-card__toggle::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082A17' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E"); transform: none; } #cenik .ks-price-card__details { display: none; margin: 0 18px 18px; padding: 32px 36px; border: 1px solid rgba(31,45,27,.06); border-radius: 28px; background: #FAF8F2; box-shadow: 0 28px 70px -46px rgba(31,45,27,.32); } #cenik .ks-price-card.is-open .ks-price-card__details { display: block; } #cenik .ks-price-selectors { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; margin-bottom: 8px; } #cenik .ks-price-step__label, #cenik .ks-price-table-title { display: block; margin: 0 0 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(31,45,27,.66); font-weight: 600; } #cenik .ks-price-table-title { margin-top: 6px; } #cenik .ks-season-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #cenik .ks-season-card, #cenik .ks-stay-pill { border: 1px solid rgba(31,45,27,.10); border-radius: 16px; background: #F8F6F0; color: var(--ks-dark); min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.78); } #cenik button.ks-season-card, #cenik button.ks-stay-pill { font-family: var(--sans); cursor: pointer; } /* Active state — neutral cream with a stronger dark border. NO green fill,
   NO green border, NO green shadow. Reserved for the final booking CTA only. */#cenik .ks-season-card.is-selected, #cenik .ks-stay-pill.is-selected { background: rgba(255,254,250,.96); border-color: rgba(31,45,27,.42); border-width: 1.5px; color: var(--ks-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); } #cenik .ks-season-card.is-selected small { opacity: .82; } #cenik .ks-season-card svg { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #cenik .ks-season-card strong { display: block; font-size: 14px; line-height: 1.15; font-weight: 500; } #cenik .ks-season-card small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.2; opacity: .78; } #cenik .ks-stay-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } #cenik .ks-stay-pill { min-height: 64px; border-radius: 14px; font: 500 15px/1.2 var(--sans); } #cenik .ks-price-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(31,45,27,.06); border-radius: 20px; background: #FBF9F2; box-shadow: none; } #cenik .ks-price-table { width: 100%; min-width: 780px; table-layout: fixed; border-collapse: collapse; color: var(--ks-dark); } #cenik .ks-price-table th, #cenik .ks-price-table td { padding: 20px 28px; border-bottom: 1px solid rgba(31,45,27,.08); text-align: right; line-height: 1.3; font-variant-numeric: tabular-nums; } #cenik .ks-price-table th:first-child, #cenik .ks-price-table td:first-child { text-align: left; padding-left: 22px; } #cenik .ks-price-table th:last-child, #cenik .ks-price-table td:last-child { padding-right: 22px; } #cenik .ks-price-table th { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: rgba(31,45,27,.62); background: rgba(250,248,242,.6); border-bottom-color: rgba(31,45,27,.12); } #cenik .ks-price-table td { font-size: 20px; font-weight: 500; color: var(--ks-dark); } #cenik .ks-price-table tbody td:first-child { font-size: 15.5px; color: rgba(31,45,27,.74); font-weight: 500; opacity: 1; } #cenik .ks-price-table tr:last-child td { border-bottom: 0; } #cenik .ks-price-table td.is-best { color: var(--ks-dark); font-weight: 600; } /* Selection feedback — NEUTRAL dark tints. NO green. */#cenik .ks-price-table th.is-selected, #cenik .ks-price-table td.is-selected-col { background: rgba(31,45,27,.04); } #cenik .ks-price-table tr.is-selected td:first-child { font-weight: 600; color: var(--ks-dark); } #cenik .ks-price-table td.is-selected-cell { background: rgba(31,45,27,.08); color: var(--ks-dark); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(31,45,27,.18); } /* Value signal — warm beige tint on the 7+ row + small muted inline label.
   NO green. Label stays subtle. */#cenik .ks-price-table tbody tr[data-stay-row="7+"] td { background-image: linear-gradient(rgba(180,150,80,.07), rgba(180,150,80,.07)); } #cenik .ks-price-table tbody tr[data-stay-row="7+"] td:first-child { position: relative; padding-right: 28px; } #cenik .ks-price-table tbody tr[data-stay-row="7+"] td:first-child::after { content: "Nejvýhodnější"; display: inline-block; margin-left: 10px; font-size: 11px; font-weight: 500; letter-spacing: .02em; color: rgba(31,45,27,.55); vertical-align: middle; white-space: nowrap; } /* When the user selects 7+, the neutral selected-cell highlight wins on price cells.
   The inline label stays. */#cenik .ks-price-table tbody tr[data-stay-row="7+"].is-selected td { background-image: none; } #cenik .ks-price-person { display: inline-flex; align-items: center; gap: 11px; } #cenik .ks-price-package-note { margin: 0 0 22px; display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 15px; border: 1px solid rgba(31,45,27,.065); background: #F4F1E6; color: var(--ks-dark); font-size: 13.5px; line-height: 1.5; } #cenik .ks-price-package-note b { color: var(--ks-dark); font-weight: 600; } #cenik .ks-price-package-note__icon { width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(31,45,27,.20); color: rgba(31,45,27,.62); font-weight: 600; line-height: 1; background: #fff; } #cenik .ks-price-fees { margin-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 22px 24px; border: 1px solid rgba(31,45,27,.06); border-radius: 24px; background: #F1ECDF; } #cenik .ks-price-fees__icon { width: 26px; height: 26px; border: 1px solid rgba(31,45,27,.18); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: rgba(31,45,27,.6); font-weight: 600; } #cenik .ks-price-fees h3 { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; margin: 0 0 9px; } #cenik .ks-price-fees ul { margin: 0; padding-left: 18px; columns: 3; column-gap: 44px; color: var(--ks-dark); font-size: 14px; line-height: 1.55; } /* ----- conversion bridge at bottom of expanded pricing detail ----- */#cenik .ks-price-cta { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(31,45,27,.07); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } #cenik .ks-price-cta__note { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: rgba(31,45,27,.66); } #cenik .ks-price-cta .ks-btn { flex-shrink: 0; } /* Lime primary stays exactly as-is. No scoped override here on purpose —
   the global .ks-btn--primary lime style is the one source of truth. */#cenik .ks-price-note { margin-top: 34px; min-height: 78px; border-radius: 18px; border: 1px solid rgba(31,45,27,.08); background: rgba(236,232,222,.62); color: var(--ks-dark); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 20px 28px; } #cenik .ks-price-note__icon { width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(31,45,27,.26); display: inline-flex; align-items: center; justify-content: center; color: rgba(31,45,27,.58); } #cenik .ks-price-note p { margin: 0; font-size: 15px; line-height: 1.45; } #cenik .ks-price-note__cta { flex-shrink: 0; } #cenik .ks-price-storno { margin: 32px 0 0; padding: 32px 36px; background: #FAF8F2; border: 1px solid rgba(31,45,27,.08); border-radius: 24px; } #cenik .ks-price-storno__list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; } #cenik .ks-price-storno__list li { padding-left: 16px; position: relative; } #cenik .ks-price-storno__list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 999px; background: rgba(31,45,27,.45); } #cenik .ks-price-storno__note { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid rgba(31,45,27,.08); } @media (max-width: 600px) { #cenik .ks-price-storno {  padding: 24px 22px;  margin-top: 24px; } } #cenik .ks-price-note__link { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; white-space: nowrap; color: var(--ks-dark); } #cenik .ks-price-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #cenik .ks-price-service { border: 1px solid rgba(31,45,27,.09); border-radius: 22px; background: rgba(255,254,250,.82); padding: 26px; box-shadow: none; } #cenik .ks-price-service span { display: block; color: rgba(31,45,27,.62); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; } #cenik .ks-price-service strong { display: block; font-family: var(--display); color: var(--ks-dark); font-size: 28px; line-height: 1.1; font-weight: 500; margin-bottom: 10px; } #cenik .ks-price-service p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } @media (max-width: 1080px) { #cenik .ks-price-card__summary {  grid-template-columns: 320px minmax(0, 1fr) minmax(170px, auto) minmax(120px, auto); }  #cenik .ks-price-card__body {  padding: 24px;  grid-template-columns: 24px minmax(0, 1fr);  gap: 14px; }  #cenik .ks-price-card__icon {  width: 24px;  height: 24px; }  #cenik .ks-price-selectors {  grid-template-columns: 1fr;  gap: 20px; }  #cenik .ks-price-fees ul {  columns: 2; } } /* ============================================================
      §M-PRICE · RESPONSIVE · tablet — pricing row layout
      Stacks price + "Zobrazit ceny" toggle in a clean 170px right
      column so the price never overlaps the title or description.
      Image | content | price-action.
      ============================================================ */@media (min-width: 700px) and (max-width: 1100px) { #cenik .ks-price-card__summary {  grid-template-columns: minmax(220px, 34%) 1fr 170px !important;  grid-template-rows: auto auto !important;  column-gap: 24px !important;  row-gap: 8px !important;  align-items: center !important; }  #cenik .ks-price-card__image {  grid-column: 1 !important;  grid-row: 1 / span 2 !important; }  #cenik .ks-price-card__body {  grid-column: 2 !important;  grid-row: 1 / span 2 !important;  padding: 24px 0 !important;  align-content: center !important; }  /* price block — top of the right column, stacked, no overlap with title */ #cenik .ks-price-card__price {  grid-column: 3 !important;  grid-row: 1 !important;  align-self: end !important;  justify-self: end !important;  padding: 18px 24px 0 0 !important;  min-width: 0 !important;  margin: 0 !important;  transform: none !important; }  /* "Zobrazit ceny" toggle — directly below the price */ #cenik .ks-price-card__toggle {  grid-column: 3 !important;  grid-row: 2 !important;  align-self: start !important;  justify-self: end !important;  margin: 0 24px 18px 0 !important; } } @media (max-width: 820px) { #cenik.ks-premium-pricing-section {  padding-top: 58px;  padding-bottom: 72px; }  #cenik .ks-premium-tabs {  width: auto;  margin-left: calc(var(--gutter) * -1);  margin-right: calc(var(--gutter) * -1);  padding: 0 var(--gutter) 4px;  display: flex;  overflow-x: auto;  scrollbar-width: none; }  #cenik .ks-premium-tabs::-webkit-scrollbar {  display: none; }  #cenik .ks-premium-tabs__button {  flex: 0 0 auto;  min-width: max-content; }  #cenik .ks-price-card__summary {  grid-template-columns: minmax(0, 1fr); }  #cenik .ks-price-card__image {  grid-column: 1 / -1;  min-height: 235px;  border-radius: 21px 21px 0 0; }  #cenik .ks-price-card__body {  grid-column: 1 / 2;  padding: 24px; }  #cenik .ks-price-card__price {  grid-column: 1 / 2;  justify-self: start;  justify-content: start;  padding: 0 24px 24px;  min-width: 0; }  #cenik .ks-price-card__price-unit {  justify-self: start; }  #cenik .ks-price-card__toggle {  grid-column: 1 / 2;  grid-row: auto;  justify-self: start;  margin: -10px 24px 24px; }  #cenik .ks-price-card__details {  padding: 20px;  border-radius: 22px; }  #cenik .ks-price-cta {  flex-direction: column;  align-items: flex-start;  gap: 12px; }  #cenik .ks-price-cta .ks-btn {  width: 100%;  justify-content: center; }  /* soften the category tab pills + selector chips on tablet/mobile */ #cenik .ks-premium-tabs__button {  border-color: rgba(31,45,27,.08); }  #cenik .ks-premium-tabs__button.is-active {  border-color: rgba(31,45,27,.20); }  #cenik .ks-season-card, #cenik .ks-stay-pill {  border-color: rgba(31,45,27,.08); }  /* table edge fade — visual hint that the table is horizontally scrollable */ #cenik .ks-price-table-scroll {  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%); }  #cenik .ks-stay-grid {  grid-template-columns: repeat(2, minmax(0, 1fr)); }  #cenik .ks-price-note {  grid-template-columns: auto minmax(0, 1fr); }  #cenik .ks-price-note__link {  grid-column: 2;  justify-self: start; }  #cenik .ks-price-services {  grid-template-columns: 1fr; } } @media (max-width: 560px) { #cenik .container {  padding-left: 18px;  padding-right: 18px; }  #cenik .ks-premium-pricing__head {  margin-bottom: 28px; }  #cenik .ks-premium-pricing__head h2 {  font-size: 36px; }  #cenik .ks-premium-pricing__intro {  font-size: 15px; }  #cenik .ks-price-card {  border-radius: 22px; }  #cenik .ks-price-card__image {  min-height: 210px; }  #cenik .ks-price-card__body {  grid-template-columns: 42px minmax(0, 1fr);  padding: 20px 18px 14px; }  #cenik .ks-price-card__icon {  width: 24px;  height: 24px; }  #cenik .ks-price-card__title {  font-size: 28px; }  #cenik .ks-price-card__desc {  font-size: 13px; }  #cenik .ks-price-card__price {  padding: 0 18px 22px; }  #cenik .ks-price-card__toggle {  width: auto;  height: auto;  margin: -8px 18px 22px; }  #cenik .ks-season-grid, #cenik .ks-stay-grid {  grid-template-columns: 1fr; }  #cenik .ks-price-table th, #cenik .ks-price-table td {  padding: 14px 16px;  font-size: 14px; }  #cenik .ks-price-table th:first-child, #cenik .ks-price-table td:first-child {  padding-left: 16px;  font-size: 14px; }  #cenik .ks-price-table th:last-child, #cenik .ks-price-table td:last-child {  padding-right: 16px; }  #cenik .ks-price-table tbody tr[data-stay-row="7+"] td:first-child {  padding-right: 16px; }  #cenik .ks-price-table tbody tr[data-stay-row="7+"] td:first-child::after {  display: block;  margin: 6px 0 0; }  #cenik .ks-price-fees {  grid-template-columns: 1fr;  padding: 18px; }  #cenik .ks-price-fees ul {  columns: 1; }  #cenik .ks-price-note {  grid-template-columns: 1fr;  padding: 20px;  gap: 14px; }  #cenik .ks-price-note__link {  grid-column: auto; } } /* ============================================================
      BYDLETE V PŘÍRODĚ — FINAL BUTTON LOCK
      Two button types only: lime primary + ghost white.
      Scoped to #ubytovani-detail. Last in cascade.
      ============================================================ */#ubytovani-detail .ks-btn--primary { background: #D7F24A !important; color: #082A17 !important; border: none !important; } #ubytovani-detail .ks-btn--primary .ks-btn__icon { background: rgba(8,42,23,.10) !important; color: #082A17 !important; } #ubytovani-detail .ks-btn--ghost { background: rgba(255,255,255,.92) !important; color: var(--ks-dark) !important; border: 1px solid rgba(31,45,27,.22) !important; } #ubytovani-detail .ks-btn--ghost .ks-btn__icon { background: rgba(31,45,27,.08) !important; color: var(--ks-dark) !important; } /* ============================================================
   FINAL LOCK — RESERVATION CARD STACK
   Last in cascade. Hard-scoped to .res-steps so any earlier
   .res-card / typography / global h3 rules cannot win.
   ============================================================ */.res-steps .res-card { width: 170px; height: 260px; border-radius: 22px; padding: 20px 18px 22px; background: #FBFAF5; border: 1px solid rgba(31,45,27,.04); box-shadow: 0 20px 50px -40px rgba(31,45,27,.32); transition: transform 1s cubic-bezier(.16, 1, .3, 1),
    box-shadow 1s ease; } .res-steps .res-card[data-index="1"] { --x: 0px; --y: 50px; --r: -7deg; z-index: 1; } .res-steps .res-card[data-index="2"] { --x: 60px; --y: 35px; --r: -4deg; z-index: 2; } .res-steps .res-card[data-index="3"] { --x: 120px; --y: 20px; --r: -1deg; z-index: 3; } .res-steps .res-card[data-index="4"] { --x: 180px; --y: 25px; --r: 3deg; z-index: 4; } .res-steps .res-card[data-index="5"] { --x: 240px; --y: 30px; --r: 5deg; z-index: 5; } .res-steps .res-card-hit--1 { left: 0; width: 122px; } .res-steps .res-card-hit--2 { left: 122px; width: 122px; } .res-steps .res-card-hit--3 { left: 244px; width: 122px; } .res-steps .res-card-hit--4 { left: 366px; width: 122px; } .res-steps .res-card-hit--5 { left: 488px; width: 170px; } .res-steps .res-card__num { position: absolute; top: 18px; left: 18px; right: auto; font-family: var(--display); font-size: 30px; line-height: 1; font-weight: 400; letter-spacing: -.04em; color: rgba(31,45,27,.08); } .res-steps .res-card__icon { position: absolute; top: 80px; left: 18px; width: 28px; height: 28px; color: rgba(31,45,27,.6); opacity: 1; transform: none; } .res-steps .res-card__icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.2; fill: none; } .res-steps .res-card__copy { margin-top: auto; } .res-steps .res-card__title { font-family: var(--display); font-size: 14px; line-height: 1.2; letter-spacing: -.015em; font-weight: 300; color: rgba(31,45,27,.8); margin: 0 0 10px; max-width: 9ch; } .res-steps .res-card__text { font-size: 11px; line-height: 1.55; font-weight: 400; color: rgba(31,45,27,.5); margin: 0; max-width: 14ch; } .res-steps .res-card[data-index="5"] .res-card__title { max-width: 9ch; } .res-steps .res-card[data-index="5"] .res-card__text { max-width: 15ch; } .res-steps .res-card.is-active { --active-y: -4px; --scale: 1.004; z-index: 50; box-shadow: 0 24px 60px -40px rgba(31,45,27,.34); transition: transform 1s cubic-bezier(.16, 1, .3, 1),
    box-shadow 1s ease; } @media (max-width: 900px) { .res-steps .res-card {  width: 200px;  height: 280px; }  .res-steps .res-card__title {  font-size: 14px; } } /* ---- Section scaled down — supporting, not hero ---- */.res-steps .res-steps-left { max-width: 520px; } .res-steps .res-steps-title { font-family: var(--display); font-size: clamp(28px, 2.4vw, 38px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; color: var(--ks-dark); margin: 0; max-width: 16ch; } .res-steps .res-steps-lede { margin-top: 28px; font-size: 15px; line-height: 1.6; color: rgba(31,45,27,.58); max-width: 34ch; } .res-steps .res-steps-trust { margin-top: 26px; grid-template-columns: 48px 1fr; gap: 14px; font-size: 13px; } .res-steps .res-steps-trust__icon { width: 48px; height: 48px; } .res-steps .res-steps-right { height: 420px; min-width: 560px; } @media (max-width: 900px) { .res-steps .res-steps-title {  font-size: clamp(24px, 6vw, 32px);  line-height: 1.12;  max-width: 16ch; } } /* ---- Merge pricing → reservation as one continuous booking journey ---- */#cenik, #cenik.section, .section--pricing { padding-bottom: 40px !important; background: var(--bg); } .res-steps { position: relative; isolation: isolate; overflow: hidden; z-index: 1; background: var(--bg); padding: 56px 0 80px !important; margin-top: -32px !important; border-top: none; } #cenik + .res-steps { margin-top: -32px !important; } .res-steps::before { content: ""; position: absolute; top: -60px; left: 0; right: 0; height: 120px; background: linear-gradient(
    to bottom,
    rgba(243,241,235,1) 0%,
    rgba(243,241,235,0) 100%
  ); pointer-events: none; z-index: 1; } .res-steps-inner { position: relative; z-index: 2; gap: clamp(36px, 4vw, 60px); } /* ---- Soft leaf-shadow atmosphere, top-right, decorative only ---- */.res-steps::after { content: ""; position: absolute; top: 32px; right: -40px; width: 420px; height: 260px; background: radial-gradient(ellipse at center, rgba(31,45,27,.10), transparent 65%); opacity: .35; filter: blur(18px); transform: rotate(-18deg); pointer-events: none; z-index: 0; } /* ---- Handwritten cursor hint — arrow above text, no overlap ---- */.res-card-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%) rotate(-3deg); text-align: center; padding-top: 34px; line-height: 1.2; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 16px; font-weight: 400; letter-spacing: -.01em; color: rgba(31,45,27,.78); font-style: italic; pointer-events: none; z-index: 5; } .res-card-hint::before { content: "↗"; position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotate(-14deg); font-size: 28px; line-height: 1; font-style: normal; color: rgba(31,45,27,.72); } @media (max-width: 1100px) { .res-card-hint {  display: none; } } @media (max-width: 900px) { .res-steps::after {  display: none; } } /* ============================================================
   RESPONSIVE FINAL FIX PASS
   Wiring-only — all rules wrapped in media queries.
   Desktop is final; nothing here runs at desktop widths.
   ============================================================ *//* 1. HEADER / NAV — keep links visible on tablet, minimal on mobile */@media (min-width:768px) and (max-width:900px) { .nav-links {  display: flex !important;  gap: 16px !important;  font-size: 14px !important; }  .nav-inner {  gap: 16px !important; }  .nav .ks-btn, .nav-cta {  flex-shrink: 0 !important; } } @media (max-width:767px) { .nav-links {  display: none !important; }  .logo {  max-width: 46vw !important; }  .nav .ks-btn, .nav-cta {  height: 46px !important;  padding: 0 14px !important;  font-size: 14px !important; } } /* 2. HERO MOBILE — drop meta column, avoid clutter */@media (max-width:767px) { .hero-meta-col {  display: none !important; } } /* 3. BOOKING TABLET/MOBILE */@media (min-width:768px) and (max-width:900px) { .booking-card {  grid-template-columns: 1fr 1fr !important;  padding: 12px !important;  gap: 8px !important; }  .booking-field {  padding: 15px 16px !important; }  .booking-field__value {  font-size: 16px !important;  line-height: 1.2 !important; }  .booking-card__cta {  height: 54px !important; } } /* 4. PRICING TABLET — keep image | body | price/toggle from overlapping */@media (min-width:821px) and (max-width:1100px) { #cenik .ks-price-card__summary {  grid-template-columns: minmax(220px, 34%) minmax(0, 1fr) 170px !important;  grid-template-rows: auto auto !important;  column-gap: 24px !important;  row-gap: 8px !important;  align-items: center !important; }  #cenik .ks-price-card__image {  grid-column: 1 !important;  grid-row: 1 / span 2 !important; }  #cenik .ks-price-card__body {  grid-column: 2 !important;  grid-row: 1 / span 2 !important;  padding: 24px 0 !important; }  #cenik .ks-price-card__price {  grid-column: 3 !important;  grid-row: 1 !important;  justify-self: end !important;  align-self: end !important;  padding: 18px 24px 0 0 !important;  min-width: 0 !important;  margin: 0 !important;  transform: none !important; }  #cenik .ks-price-card__toggle {  grid-column: 3 !important;  grid-row: 2 !important;  justify-self: end !important;  align-self: start !important;  margin: 0 24px 18px 0 !important; } } @media (min-width:768px) and (max-width:820px) { #cenik .ks-price-card__summary {  grid-template-columns: minmax(0, 1fr) !important; } } /* 5. PRICING MOBILE */@media (max-width:560px) { #cenik .ks-price-card__summary {  grid-template-columns: 1fr !important; }  #cenik .ks-price-card__image {  min-height: 210px !important; }  #cenik .ks-price-card__body {  padding: 20px 18px 14px !important; }  #cenik .ks-price-card__price {  padding: 0 18px 18px !important;  justify-self: start !important; }  #cenik .ks-price-card__toggle {  margin: 0 18px 22px !important;  justify-self: start !important; }  #cenik .ks-price-table-scroll {  overflow-x: auto !important;  -webkit-overflow-scrolling: touch; } } /* 6. REVIEWS MOBILE — neutralize old static-grid overrides; keep carousel */@media (max-width:767px) { #recenze .tst-grid {  display: block !important;  grid-template-columns: none !important; } } /* 7. FAQ MOBILE — compact CTA, no help-card */@media (max-width:767px) { .faq-help-card {  display: none !important; }  #faq.faq-waveyu .faq-left {  display: block !important; }  #faq.faq-waveyu .faq-contact-cta {  width: 100% !important;  margin-top: 24px !important; }  #faq.faq-waveyu .faq-item {  padding: 18px 0 18px 34px !important; }  #faq.faq-waveyu .faq-q {  font-size: 21px !important;  line-height: 1.18 !important;  padding-right: 48px !important; }  #faq.faq-waveyu .faq-q::after {  width: 38px !important;  height: 38px !important; } } /* 8. CONTACT MOBILE */@media (max-width:767px) { .ks-contact-close__actions {  flex-direction: column !important;  align-items: stretch !important; }  .ks-contact-close__meta {  grid-template-columns: 1fr !important; }  .ks-contact-close__item {  padding: 18px 0 !important; } } /* Booking microcopy — supportive lede + collapsible T&C consent */.booking-microcopy { margin: 28px auto 0; max-width: 720px; text-align: center; } .booking-microcopy__lede { margin: 0 0 16px; } .booking-microcopy__details { margin: 0 auto; text-align: left; background: rgba(248,246,240,.6); border: 1px solid rgba(31,45,27,.08); border-radius: 14px; padding: 14px 18px; } .booking-microcopy__details summary { cursor: pointer; } .booking-microcopy__details[open] summary { margin-bottom: 12px; } .booking-microcopy__details p { margin: 0 0 10px; } .booking-microcopy__details p:last-child { margin-bottom: 0; } /* 9. FOOTER MOBILE — soften 100svh on small phones */@media (max-width:600px) { .ks-footer {  min-height: auto !important; }  .ks-footer__cta {  min-height: 520px !important;  padding: 76px 20px 40px !important; }  .ks-footer__cta h2 {  max-width: 10ch !important; }  .ks-footer__bar {  padding: 22px 18px 30px !important; } } /* ============================================================
   FINAL RESPONSIVE FIX PASS — STRICT
   Wiring-only refinements over the previous pass.
   Desktop is final; nothing here runs at desktop widths.
   ============================================================ *//* 1. TABLET NAV — keep compact links visible 768–900 */@media (min-width:768px) and (max-width:900px) { .nav-links {  display: flex !important;  gap: 16px !important;  font-size: 14px !important; }  .nav-inner {  gap: 16px !important; } } /* 2. RES-STEPS OVERFLOW — drop tablet min-width that forces overflow */@media (max-width:1180px) { .res-steps-right {  min-width: 0 !important;  width: 100% !important; } } /* 3. REAL OVERFLOW CLIPPING — replace body overflow-x:hidden coverage */@media (max-width:767px) { body {  overflow-x: clip !important; }  .container {  overflow-x: clip; } } /* 4. HERO MOBILE HEIGHT — release 92vh on small phones */@media (max-width:600px) { .hero {  min-height: auto !important;  padding-bottom: 40px; } } /* 5. ROOM GALLERY — add scroll-snap to the horizontal swipe */@media (max-width:600px) { #ubytovani-detail .ks-room-gallery {  scroll-snap-type: x mandatory; }  #ubytovani-detail .ks-room-gallery__item {  scroll-snap-align: start; } } /* 6. FOOTER HEIGHT BALANCE — tighter footer on small screens (overrides pass 1 footer values) */@media (max-width:600px) { .ks-footer__cta {  min-height: 480px !important;  padding: 60px 20px 32px !important; } } /* ============================================================
   FINAL POLISH PASS — NO DRIFT
   Tablet nav, hero, gallery scroll-snap already in earlier blocks.
   This adds: real overflow clipping (global) + res-steps edge fix.
   ============================================================ *//* 2. Real overflow clipping — replaces overflow-x:hidden bug-masking */body { overflow-x: clip; } .container { overflow-x: clip; } /* 5. RES-STEPS edge alignment — drop negative-margin hack at tablet */@media (max-width:900px) { .res-steps-right {  margin: 0;  padding-left: var(--gutter);  padding-right: var(--gutter); } } /* ============================================================
   FINAL POLISH — LAST IMPERFECTIONS
   Refinements over the prior responsive blocks.
   ============================================================ *//* 2. HERO height — release 92vh on small phones, slight bottom breathing */@media (max-width:600px) { .hero {  min-height: auto;  padding-bottom: 48px; } } /* 3. ROOM GALLERY — snap + leading gutter so first tile peeks correctly */@media (max-width:600px) { #ubytovani-detail .ks-room-gallery {  scroll-snap-type: x mandatory;  padding-left: 20px; }  #ubytovani-detail .ks-room-gallery__item {  scroll-snap-align: start; } } /* ============================================================
   FINAL MOBILE UI TWEAKS — phone-only refinements.
   Mobile only. Desktop and tablet untouched.
   ============================================================ *//* 1. PRICE ROW — keep "od 900 Kč / noc" on one line on phones */@media (max-width: 600px) { #cenik .ks-price-card__price {  display: flex !important;  align-items: baseline !important;  gap: 8px !important;  white-space: nowrap !important;  grid-template-columns: none !important; }  #cenik .ks-price-card__price-prefix, #cenik .ks-price-card__price-main, #cenik .ks-price-card__price-unit {  white-space: nowrap !important;  margin: 0 !important; }  #cenik .ks-price-card__price-unit {  display: inline !important;  margin-left: 2px !important;  grid-column: auto !important;  justify-self: auto !important; } } /* 2. FOOTER — full-screen final closing panel on phones (overrides earlier mobile footer height shrink) */@media (max-width: 600px) { .ks-footer {  min-height: 100svh !important; }  .ks-footer__cta {  min-height: 100svh !important;  display: flex !important;  flex-direction: column !important;  justify-content: center !important; } } /* ============================================================
   FINAL MOBILE FIXES — pricing table width + footer screen-fit.
   Mobile only. Desktop and tablet untouched.
   ============================================================ *//* 1. PRICING TABLE — narrower on phones so first price column is visible */@media (max-width: 600px) { #cenik .ks-price-table-scroll {  overflow-x: auto !important;  -webkit-overflow-scrolling: touch; }  #cenik .ks-price-table {  min-width: 520px !important;  width: 520px !important; }  #cenik .ks-price-table th, #cenik .ks-price-table td {  padding: 16px 14px !important;  font-size: 15px !important;  line-height: 1.25 !important;  white-space: normal !important; }  #cenik .ks-price-table th:first-child, #cenik .ks-price-table td:first-child {  width: 150px !important; }  #cenik .ks-price-table th:nth-child(2), #cenik .ks-price-table td:nth-child(2), #cenik .ks-price-table th:nth-child(3), #cenik .ks-price-table td:nth-child(3) {  width: 185px !important; } } /* 2. FOOTER — fit exactly one phone screen below the fixed header (overrides earlier 100svh) */@media (max-width: 600px) { .ks-footer {  min-height: calc(100svh - 72px) !important; }  .ks-footer__cta {  min-height: calc(100svh - 72px) !important;  padding: 56px 20px 32px !important;  display: flex !important;  flex-direction: column !important;  justify-content: center !important; }  .ks-footer__bar {  padding: 20px 18px 24px !important; } } /* ============================================================
   TABLET FIX PASS — 768–1100px scoped refinements.
   Desktop (>1100) and mobile (≤767) untouched.
   ============================================================ *//* 1. CONTACT META — center items at tablet width */@media (min-width:768px) and (max-width:1100px) { #kontakt .ks-contact-close__meta {  text-align: center; }  #kontakt .ks-contact-close__item {  align-items: center;  justify-content: center; } } /* 2. FAQ TABLET — stack title, intro, CTA over the question list */@media (min-width:768px) and (max-width:1100px) { #faq .faq-grid, #faq.faq-waveyu .faq-grid, #faq.faq-waveyu .faq-container {  grid-template-columns: 1fr !important; }  #faq .faq-left, #faq.faq-waveyu .faq-left {  text-align: center;  max-width: 720px;  margin: 0 auto 44px;  min-height: 0 !important;  align-items: center; }  #faq .faq-left .lede, #faq.faq-waveyu .faq-left .lede, #faq.faq-waveyu .faq-left .faq-intro {  margin: 18px auto 0;  max-width: 46ch; }  #faq .faq-contact-cta, #faq.faq-waveyu .faq-contact-cta {  margin: 28px auto 0 !important;  width: fit-content; } } /* 3. RESERVATION STEPS — cards beside text at 901–1100 only */@media (min-width:901px) and (max-width:1100px) { .res-steps-inner {  grid-template-columns: minmax(300px, .85fr) minmax(420px, 1fr);  align-items: center;  gap: 44px; }  .res-steps-left {  max-width: 420px; }  .res-steps-title {  font-size: clamp(38px, 5vw, 54px);  max-width: 10ch; }  .res-steps-lede {  margin-top: 28px;  font-size: 15px;  max-width: 34ch; }  .res-steps-trust {  margin-top: 28px;  max-width: 360px; }  .res-steps-right {  height: 460px;  max-width: 520px;  margin: 0; }  .res-card {  width: 220px;  height: 330px;  padding: 26px 24px 28px; }  .res-card[data-index="1"], .res-steps .res-card[data-index="1"] {  --x: 0px;  --y: 52px; }  .res-card[data-index="2"], .res-steps .res-card[data-index="2"] {  --x: 45px;  --y: 38px; }  .res-card[data-index="3"], .res-steps .res-card[data-index="3"] {  --x: 90px;  --y: 24px; }  .res-card[data-index="4"], .res-steps .res-card[data-index="4"] {  --x: 135px;  --y: 28px; }  .res-card[data-index="5"], .res-steps .res-card[data-index="5"] {  --x: 180px;  --y: 0px; } } /* 4. PRICING TABLET — narrower table, less dead space, less swipe */@media (min-width:768px) and (max-width:1100px) { #cenik .ks-price-table-scroll {  overflow-x: auto !important;  -webkit-overflow-scrolling: touch;  margin-left: 0 !important; }  #cenik .ks-price-table {  min-width: 720px !important;  width: 720px !important; }  #cenik .ks-price-table th, #cenik .ks-price-table td {  padding: 18px 18px !important; }  #cenik .ks-price-table th:first-child, #cenik .ks-price-table td:first-child {  width: 210px !important; }  #cenik .ks-price-table th:nth-child(2), #cenik .ks-price-table td:nth-child(2), #cenik .ks-price-table th:nth-child(3), #cenik .ks-price-table td:nth-child(3) {  width: 255px !important; } } /* 5. UBYTOVÁNÍ DETAIL — center the info card on tablet */@media (min-width:768px) and (max-width:1100px) { #ubytovani-detail .ks-overlay-card__content {  margin-left: auto !important;  margin-right: auto !important;  max-width: 640px !important;  text-align: left; }  #ubytovani-detail .ks-overlay-card__actions {  justify-content: flex-start; } } /* ============================================================
   TABLET FIX PASS 2 — refinements over the prior tablet pass.
   Scope: 768–1100px only. Desktop and mobile untouched.
   ============================================================ *//* 1. RESERVATION STEPS — keep desktop-style fan + hover at 901–1100 */@media (min-width:901px) and (max-width:1100px) { .res-steps-right {  position: relative;  display: block;  overflow: visible;  perspective: 1400px; }  .res-card {  position: absolute !important;  cursor: pointer;  pointer-events: auto; }  .res-card-hit {  display: block;  pointer-events: auto; }  .res-card.is-active {  --active-y: -6px;  --active-r: calc(var(--r) * -1);  --scale: 1.008;  z-index: 50; } } /* 2. UBYTOVÁNÍ DETAIL — info card wider, less tall, horizontal meta */@media (min-width:768px) and (max-width:1100px) { #ubytovani-detail .ks-overlay-card__content {  max-width: 92% !important;  width: 92% !important;  margin-left: auto !important;  margin-right: auto !important;  padding: 26px 34px !important;  border-radius: 28px !important; }  #ubytovani-detail .ks-overlay-card__content h3 {  font-size: clamp(28px, 4vw, 38px) !important;  margin-bottom: 12px !important; }  #ubytovani-detail .ks-overlay-card__content p {  max-width: 62ch !important;  margin-bottom: 18px !important;  line-height: 1.55 !important; }  #ubytovani-detail .ks-overlay-card__meta {  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;  gap: 10px 28px !important;  margin-bottom: 20px !important;  padding-top: 18px !important; }  #ubytovani-detail .ks-overlay-card__actions {  margin-top: 0 !important; } } /* 3. FAQ TABLET — title + intro left, CTA right (overrides earlier centered stack) */@media (min-width:768px) and (max-width:1100px) { #faq.faq-waveyu .faq-container {  grid-template-columns: 1fr !important; }  #faq.faq-waveyu .faq-left, #faq .faq-left {  display: grid !important;  grid-template-columns: 1fr auto !important;  align-items: start !important;  gap: 0 32px !important;  text-align: left !important;  max-width: none !important;  margin: 0 0 44px !important;  min-height: 0 !important; }  #faq.faq-waveyu .faq-left .faq-eyebrow, #faq.faq-waveyu .faq-left h2, #faq.faq-waveyu .faq-left .faq-intro, #faq .faq-left .faq-eyebrow, #faq .faq-left h2, #faq .faq-left .faq-intro, #faq.faq-waveyu .faq-left .lede, #faq .faq-left .lede {  grid-column: 1 !important;  margin-left: 0 !important;  margin-right: 0 !important;  text-align: left !important; }  #faq.faq-waveyu .faq-left .faq-intro, #faq .faq-left .faq-intro, #faq.faq-waveyu .faq-left .lede, #faq .faq-left .lede {  margin: 18px 0 0 !important;  max-width: 42ch !important; }  #faq.faq-waveyu .faq-contact-cta, #faq .faq-contact-cta {  grid-column: 2 !important;  grid-row: 1 / span 4 !important;  align-self: center !important;  justify-self: end !important;  margin: 0 !important;  width: auto !important; } } /* 4. CONTACT TABLET — center social links inside the meta cell */@media (min-width:768px) and (max-width:1100px) { #kontakt .ks-contact-close__item {  text-align: center !important;  align-items: center !important;  justify-content: center !important; }  #kontakt .ks-contact-close__social, #kontakt .contact-social, #kontakt .contact-social__links, #kontakt .ks-contact-close__item a {  text-align: center !important;  justify-content: center !important; }  #kontakt .ks-contact-close__social {  display: flex !important;  gap: 6px 18px !important;  flex-wrap: wrap !important;  justify-content: center !important; }  #kontakt .contact-social__links {  display: flex !important;  gap: 18px !important;  flex-wrap: wrap !important;  justify-content: center !important; } } /* ============================================================
   TABLET HIT ZONE REMAP — reservation step cards 901–1100.
   Aligns invisible .res-card-hit buttons to the tablet card x
   positions so hover/click lands on the visible card.
   ============================================================ */@media (min-width:901px) and (max-width:1100px) { .res-card-hit {  display: block !important;  top: 46px !important;  height: 330px !important;  z-index: 120 !important;  pointer-events: auto !important; }  .res-card-hit--1 {  left: 0px   !important;  width: 70px  !important; }  .res-card-hit--2 {  left: 45px  !important;  width: 70px  !important; }  .res-card-hit--3 {  left: 90px  !important;  width: 70px  !important; }  .res-card-hit--4 {  left: 135px !important;  width: 70px  !important; }  .res-card-hit--5 {  left: 180px !important;  width: 220px !important; } } /* FINAL PATCH — STORNO CLOSED CARD HEIGHT MATCH */.storno-toggle { min-height: 148px !important; display: flex !important; align-items: center !important; } .storno-toggle__head { min-height: 148px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; } .storno-toggle.active { min-height: unset !important; align-items: stretch !important; } .storno-toggle.active .storno-toggle__head { min-height: auto !important; padding-bottom: 24px !important; } @media (max-width: 700px) { .storno-toggle, .storno-toggle__head {  min-height: 124px !important; } } /* ============================================================
   RESERVATION RIGHT-SIDE CONDITIONS PANEL — replaces the old
   decorative card stack. Trust / payment / storno clarity.
   ============================================================ */.res-conditions { background: #F8F6F0; border: 1px solid rgba(31,45,27,.08); border-radius: 32px; padding: clamp(28px, 2.4vw, 38px) clamp(32px, 3vw, 48px); box-shadow: none; width: 100%; max-width: none; justify-self: stretch; } .res-conditions h3 { margin: 0 0 28px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -.03em; color: var(--ks-dark); } .res-conditions__list { display: grid; gap: 0; border-top: 1px solid var(--line); } .res-conditions__list div { padding: 18px 0; border-bottom: 1px solid var(--line); } .res-conditions__list div:last-child { border-bottom: none; padding-bottom: 0; } .res-conditions__list strong { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--ks-dark); } .res-conditions__list p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); } @media (max-width: 900px) { .res-steps-inner {  grid-template-columns: 1fr !important;  gap: 36px !important; }  .res-conditions {  padding: 28px;  border-radius: 24px;  max-width: none;  justify-self: stretch; } } /* Storno bullets inside the right-side .res-conditions panel */.res-conditions__bullets { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 10px; } .res-conditions__bullets li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--muted); font-weight: 400; } .res-conditions__bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 999px; background: rgba(31,45,27,.45); } .res-conditions__note { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* ---------- Block 2: storno-toggle (line 288 of source) ---------- */
.storno-toggle__content { display: none; } .storno-toggle.active .storno-toggle__content { display: block; } .storno-toggle__head { cursor: pointer; }

/* ---------- Block 3: ks-price-storno (line 289 of source) ---------- */
/* FINAL: price cancellation block is a closed toggle by default */.ks-price-storno { padding: 0; overflow: hidden; } .ks-price-storno__toggle { width: 100%; min-height: 86px; padding: 0 clamp(28px, 3vw, 40px); border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; font-family: var(--sans); font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ks-dark); text-align: left; } .ks-price-storno__toggle-icon { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: rgba(31,45,27,.07); color: var(--ks-dark); font-size: 20px; line-height: 1; transition: transform .22s ease, background-color .22s ease; } .ks-price-storno__content { display: none; padding: 0 clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px); } .ks-price-storno.is-open .ks-price-storno__content { display: block; } .ks-price-storno.is-open .ks-price-storno__toggle-icon { transform: rotate(45deg); background: rgba(31,45,27,.10); } @media (max-width: 700px) { .ks-price-storno__toggle {  min-height: 76px;  padding: 0 24px; }  .ks-price-storno__content {  padding: 0 24px 24px; } }


/* ============================================================
   §HBOOK — HBook plugin visual overrides
   Strictly scoped to .booking-hbook (the homepage form wrapper)
   and .hb-datepick-popup-wrapper (the calendar popup).
   No global selectors. Replaces the legacy inline CSS that lived
   in mu-plugins/matova-content.php (now removed).
   ============================================================ */

/* Hero overlap — only the card itself moves up; the section's bg stays put. */
.booking-hbook{
  margin:-50px auto 0 !important;position:relative !important;z-index:3 !important;
  background:#FAF8F2 !important;
  border-radius:var(--radius-lg,32px);
  box-shadow:var(--shadow-strong,0 28px 72px -42px rgba(31,45,27,.42));
  padding:clamp(18px,2vw,28px);
  width:100%;max-width:1180px;box-sizing:border-box;
}
@media (max-width:767px){.booking-hbook{margin:-48px auto 0 !important;}}
body .booking-hbook.booking-hbook{background-color:#FAF8F2 !important;}

/* Wrapper / form / fields-and-submit — transparent so cream surface is uniform */
.booking-hbook .hbook-wrapper,
.booking-hbook form,
.booking-hbook .hb-search-fields-and-submit{
  background:transparent !important;background-color:transparent !important;
}

/* Hide HBook chrome we don't want */
.booking-hbook .hb-title-search-form,
.booking-hbook .hb-searched-summary,
.booking-hbook .hb-search-error:empty,
.booking-hbook .hb-search-no-result:empty,
.booking-hbook .hb-booking-searching:empty{display:none !important;}
.booking-hbook .hb-search-fields-and-submit{display:block !important;}

/* Single-row grid */
.booking-hbook .hb-search-fields{
  display:grid !important;
  grid-template-columns:minmax(110px,1fr) minmax(110px,1fr) minmax(140px,1.2fr) minmax(80px,0.6fr) minmax(80px,0.6fr) minmax(240px,1.7fr) !important;
  gap:8px !important;align-items:stretch !important;margin:0 !important;float:none !important;
}
.booking-hbook .hb-search-fields:after{content:none !important;display:none !important;}
.booking-hbook .hb-search-fields > *{margin:0 !important;width:100% !important;box-sizing:border-box !important;float:none !important;min-width:0 !important;}

/* Field tile look */
.booking-hbook .hb-check-dates-wrapper,
.booking-hbook .hb-accom-number-wrapper,
.booking-hbook .hb-people-wrapper{
  background:#fff !important;border:1px solid var(--line,rgba(31,45,27,.12)) !important;
  border-radius:18px !important;padding:10px 14px 12px !important;min-height:64px !important;
  display:flex !important;flex-direction:column !important;justify-content:center !important;gap:4px !important;
  transition:border-color .18s ease;
}
.booking-hbook .hb-check-dates-wrapper:focus-within,
.booking-hbook .hb-accom-number-wrapper:focus-within,
.booking-hbook .hb-people-wrapper:focus-within{border-color:var(--ks-lime,#2A4A24) !important;}

/* Eyebrow labels via ::before */
.booking-hbook .hb-search-fields > *:nth-child(1)::before{content:'Příjezd';}
.booking-hbook .hb-search-fields > *:nth-child(2)::before{content:'Odjezd';}
.booking-hbook .hb-search-fields > *:nth-child(3)::before{content:'Ubytování';}
.booking-hbook .hb-search-fields > *:nth-child(4)::before{content:'Dospělí';}
.booking-hbook .hb-search-fields > *:nth-child(5)::before{content:'Děti';}
.booking-hbook .hb-check-dates-wrapper::before,
.booking-hbook .hb-accom-number-wrapper::before,
.booking-hbook .hb-people-wrapper::before{
  display:block !important;font-size:10px !important;line-height:1 !important;
  letter-spacing:.08em !important;text-transform:uppercase !important;
  color:var(--muted,#676158) !important;margin-bottom:3px !important;
}

/* Native inputs */
.booking-hbook input.hb-input-datepicker,
.booking-hbook input[type='text'],
.booking-hbook select{
  width:100% !important;border:0 !important;background:transparent !important;
  padding:0 !important;font-family:inherit !important;font-size:14px !important;
  color:var(--ink,#1D1B17) !important;
  appearance:none !important;-webkit-appearance:none !important;-moz-appearance:none !important;
  cursor:pointer !important;line-height:1.2 !important;
  text-overflow:ellipsis !important;overflow:hidden !important;
}
.booking-hbook input.hb-input-datepicker::placeholder,
.booking-hbook select option[value='']{color:var(--muted,#676158);}

/* Submit pill */
.booking-hbook .hb-search-submit-wrapper,
.booking-hbook .hb-search-button-wrapper{
  position:relative !important;margin:0 !important;padding:0 !important;
  width:100% !important;display:flex !important;align-items:stretch !important;
  background:transparent !important;border:0 !important;
}
.booking-hbook .hb-search-submit-wrapper input[type='submit'],
.booking-hbook .hb-search-button-wrapper input[type='submit']{
  width:100% !important;min-height:64px !important;
  background:#DFFF63 !important;color:transparent !important;border:0 !important;
  border-radius:999px !important;padding:0 60px 0 24px !important;
  font-family:inherit !important;font-size:0 !important;font-weight:500 !important;
  text-align:left !important;cursor:pointer !important;
  transition:background-color .2s ease,transform .2s ease;
  position:relative !important;z-index:1 !important;
}
.booking-hbook .hb-search-submit-wrapper input[type='submit']:hover,
.booking-hbook .hb-search-button-wrapper input[type='submit']:hover{background:#D2EE57 !important;}
.booking-hbook .hb-search-submit-wrapper::before,
.booking-hbook .hb-search-button-wrapper::before{
  content:'Zkontrolovat dostupnost' !important;
  position:absolute !important;left:24px !important;top:50% !important;transform:translateY(-50%) !important;
  color:var(--ink,#1D2D1B) !important;font-size:14px !important;font-weight:500 !important;
  font-family:inherit !important;z-index:2 !important;pointer-events:none !important;white-space:nowrap !important;
}
.booking-hbook .hb-search-submit-wrapper::after,
.booking-hbook .hb-search-button-wrapper::after{
  content:'\2197' !important;position:absolute !important;top:50% !important;right:8px !important;
  transform:translateY(-50%) !important;width:40px !important;height:40px !important;
  border-radius:50% !important;background-color:rgba(31,45,27,.12) !important;
  color:#1D2D1B !important;display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:20px !important;line-height:1 !important;font-weight:600 !important;
  pointer-events:none !important;z-index:2 !important;
}

/* Responsive */
@media (max-width:820px){
  .booking-hbook .hb-search-fields{grid-template-columns:1fr 1fr 1fr !important;}
  .booking-hbook .hb-search-fields > .hb-search-submit-wrapper,
  .booking-hbook .hb-search-fields > .hb-search-button-wrapper{grid-column:1 / -1 !important;}
}
@media (max-width:560px){.booking-hbook .hb-search-fields{grid-template-columns:1fr 1fr !important;}}
@media (max-width:380px){.booking-hbook .hb-search-fields{grid-template-columns:1fr !important;}}

/* ─────────────────────────────────────────────────────────────────
   HBook search RESULTS — accommodation cards
   ───────────────────────────────────────────────────────────────── */
.booking-hbook .hb-accom-list{
  background:transparent !important;margin:24px 0 0 !important;padding:0 !important;
  font-family:inherit !important;color:var(--ink,#1D1B17) !important;
  width:100% !important;max-width:none !important;
}
.booking-hbook .hb-search-result-title-section{margin:0 0 24px !important;padding:0 !important;background:transparent !important;border:0 !important;}
.booking-hbook .hb-search-result-title-section p{font-size:14px !important;line-height:1.5 !important;color:var(--muted,#676158) !important;margin:0 0 6px !important;background:transparent !important;}
.booking-hbook .hb-title.hb-title-select,
.booking-hbook h3.hb-title-select{
  font-family:var(--display,inherit) !important;font-size:clamp(22px,2vw,28px) !important;
  font-weight:500 !important;letter-spacing:-.01em !important;line-height:1.2 !important;
  color:var(--ink,#1D1B17) !important;margin:0 0 4px !important;padding:0 !important;border:0 !important;
  background:transparent !important;text-transform:none !important;
}
.booking-hbook .hb-accom{
  background:#fff !important;border:1px solid var(--line,rgba(31,45,27,.10)) !important;
  border-radius:var(--radius,24px) !important;padding:clamp(16px,1.6vw,22px) !important;
  margin:0 0 14px !important;box-shadow:0 8px 22px -16px rgba(31,45,27,.14) !important;
  display:grid !important;
  grid-template-columns:1fr 220px !important;
  grid-template-areas:'title img' 'desc img' 'price img' 'btn img' 'sel sel' 'left left' !important;
  column-gap:24px !important;row-gap:6px !important;align-items:start !important;
  width:100% !important;max-width:none !important;
}
.booking-hbook .hb-accom .hb-accom-img{grid-area:img !important;width:220px !important;height:100% !important;max-height:200px !important;min-height:140px !important;object-fit:cover !important;border-radius:16px !important;margin:0 !important;}
.booking-hbook .hb-accom .hb-accom-title{grid-area:title !important;font-family:var(--display,inherit) !important;font-size:19px !important;font-weight:500 !important;color:var(--ink,#1D1B17) !important;margin:0 !important;line-height:1.3 !important;background:transparent !important;}
.booking-hbook .hb-accom .hb-accom-desc{grid-area:desc !important;font-size:15px !important;line-height:1.55 !important;color:var(--ink,#1D1B17) !important;margin:0 !important;padding:0 !important;background:transparent !important;}
.booking-hbook .hb-accom .hb-accom-price-total{grid-area:price !important;display:flex !important;flex-wrap:wrap !important;align-items:baseline !important;gap:6px 8px !important;margin:6px 0 0 !important;padding:0 !important;background:transparent !important;}
.booking-hbook .hb-accom .hb-accom-price{font-family:var(--display,inherit) !important;font-size:26px !important;font-weight:600 !important;color:var(--ink,#1D1B17) !important;line-height:1 !important;margin:0 !important;background:transparent !important;}
.booking-hbook .hb-accom .hb-accom-price-caption{font-size:13px !important;color:var(--muted,#676158) !important;margin:0 !important;font-weight:400 !important;background:transparent !important;}
.booking-hbook .hb-accom .hb-accom-price-caption-dash{color:var(--muted,#676158) !important;margin:0 4px !important;background:transparent !important;}
.booking-hbook .hb-accom .hb-view-price-breakdown{font-size:13px !important;color:var(--ks-lime,#2A4A24) !important;text-decoration:underline !important;cursor:pointer !important;background:transparent !important;}
.booking-hbook .hb-accom .hb-view-price-breakdown:hover{color:var(--ink,#1D1B17) !important;}
.booking-hbook .hb-accom .hb-price-breakdown{grid-column:1 / -1 !important;margin:8px 0 0 !important;padding:14px 16px !important;background:var(--bg,#F3F1EB) !important;border-radius:14px !important;font-size:13px !important;color:var(--ink,#1D1B17) !important;}
.booking-hbook .hb-accom .hb-select-accom-wrapper{grid-area:btn !important;margin:10px 0 0 !important;padding:0 !important;background:transparent !important;border:0 !important;}
.booking-hbook .hb-accom .hb-select-accom{margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;}
.booking-hbook .hb-accom .hb-select-accom input[type='submit'],
.booking-hbook .hb-accom .hb-select-accom input[type='button'],
.booking-hbook .hb-accom .hb-select-accom-wrapper input{
  background:#DFFF63 !important;color:#1D2D1B !important;border:0 !important;
  border-radius:999px !important;padding:13px 28px !important;
  font-family:inherit !important;font-size:14px !important;font-weight:500 !important;
  cursor:pointer !important;-webkit-appearance:none !important;appearance:none !important;
  transition:background-color .2s ease,transform .2s ease !important;
}
.booking-hbook .hb-accom .hb-select-accom input[type='submit']:hover,
.booking-hbook .hb-accom .hb-select-accom-wrapper input:hover{background:#D2EE57 !important;transform:translateY(-1px) !important;}
.booking-hbook .hb-accom .hb-accom-selected-left-wrapper{grid-area:sel !important;background:#fff !important;border:1px solid rgba(184,90,31,.20) !important;border-radius:14px !important;padding:10px 14px !important;margin:10px 0 0 !important;font-size:14px !important;color:#B85A1F !important;font-weight:500 !important;}
.booking-hbook .hb-accom .hb-accom-selected-name,
.booking-hbook .hb-accom .hb-accom-left{color:#B85A1F !important;background:transparent !important;}

/* Image-error <p> fallback (HBook prints a path string when img missing) */
.booking-hbook .hb-accom > p:not([class]){display:none !important;}
.booking-hbook .hb-accom:not(:has(.hb-accom-img)){grid-template-columns:1fr !important;grid-template-areas:'title' 'desc' 'price' 'btn' 'sel' 'left' !important;}

/* Bottom area (booking-details / extras / coupon / terms / payment) */
.booking-hbook .hb-bottom-area,
.booking-hbook .hb-bottom-area-content{
  background:#fff !important;border:1px solid var(--line,rgba(31,45,27,.10)) !important;
  border-radius:var(--radius,24px) !important;padding:clamp(20px,2vw,28px) !important;
  margin:16px 0 0 !important;color:var(--ink,#1D1B17) !important;
  box-shadow:0 8px 22px -16px rgba(31,45,27,.14) !important;
}
.booking-hbook .hb-bottom-area input[type='submit'],
.booking-hbook .hb-bottom-area input[type='button'],
.booking-hbook .hb-bottom-area button{
  background:#fff !important;color:var(--ink,#1D1B17) !important;
  border:1px solid var(--line,rgba(31,45,27,.18)) !important;
  border-radius:999px !important;padding:11px 24px !important;
  font-family:inherit !important;font-size:14px !important;font-weight:500 !important;
  cursor:pointer !important;-webkit-appearance:none !important;appearance:none !important;
}
.booking-hbook .hb-bottom-area input[type='submit']:hover,
.booking-hbook .hb-bottom-area input[type='button']:hover,
.booking-hbook .hb-bottom-area button:hover{background:rgba(31,45,27,.04) !important;border-color:rgba(31,45,27,.30) !important;}

/* Section headings inside bottom-area + summary card */
.booking-hbook .hb-title-extra,
.booking-hbook .hb-title-coupons,
.booking-hbook .hb-title-terms,
.booking-hbook .hb-title-payment,
.booking-hbook .hb-bottom-area h3,
.booking-hbook .hb-bottom-area h4{
  font-family:var(--display,inherit) !important;font-size:clamp(20px,1.8vw,24px) !important;
  font-weight:500 !important;color:var(--ink,#1D1B17) !important;
  letter-spacing:-.01em !important;line-height:1.25 !important;
  margin:24px 0 12px !important;padding:0 !important;border:0 !important;
  background:transparent !important;text-transform:none !important;
}
.booking-hbook .hb-summary-wrapper{
  background:var(--bg,#F3F1EB) !important;border:1px solid var(--line,rgba(31,45,27,.08)) !important;
  border-radius:18px !important;padding:18px 20px !important;margin:12px 0 !important;
  font-size:14px !important;color:var(--ink,#1D1B17) !important;line-height:1.6 !important;
}

/* Bottom-area inputs */
.booking-hbook .hb-detail-field,
.booking-hbook input.hb-coupon-code,
.booking-hbook input[type='number']:not(.hb-input-datepicker){
  width:100% !important;background:#fff !important;
  border:1px solid var(--line,rgba(31,45,27,.12)) !important;border-radius:14px !important;
  padding:11px 14px !important;font-family:inherit !important;font-size:14px !important;
  color:var(--ink,#1D1B17) !important;line-height:1.4 !important;box-sizing:border-box !important;
  -webkit-appearance:none !important;appearance:none !important;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.booking-hbook textarea.hb-detail-field,
.booking-hbook textarea{
  width:100% !important;background:#fff !important;
  border:1px solid var(--line,rgba(31,45,27,.12)) !important;border-radius:14px !important;
  padding:12px 14px !important;font-family:inherit !important;font-size:14px !important;
  color:var(--ink,#1D1B17) !important;line-height:1.5 !important;
  min-height:120px !important;resize:vertical !important;box-sizing:border-box !important;
}
.booking-hbook .hb-detail-field:focus,
.booking-hbook input.hb-coupon-code:focus,
.booking-hbook textarea:focus{
  border-color:var(--ks-lime,#2A4A24) !important;
  box-shadow:0 0 0 3px rgba(42,74,36,.10) !important;outline:none !important;
}

/* Custom checkbox + radio */
.booking-hbook input[type='checkbox']{
  -webkit-appearance:none !important;appearance:none !important;
  width:18px !important;height:18px !important;background:#fff !important;
  border:1.5px solid var(--line,rgba(31,45,27,.30)) !important;border-radius:5px !important;
  cursor:pointer !important;vertical-align:middle !important;margin:0 8px 0 0 !important;
  position:relative !important;flex-shrink:0 !important;
  transition:border-color .15s ease,background-color .15s ease;
}
.booking-hbook input[type='checkbox']:checked{background:var(--ks-lime,#2A4A24) !important;border-color:var(--ks-lime,#2A4A24) !important;}
.booking-hbook input[type='checkbox']:checked::after{content:'' !important;position:absolute !important;left:5px !important;top:1px !important;width:5px !important;height:10px !important;border:solid #fff !important;border-width:0 2px 2px 0 !important;transform:rotate(45deg) !important;}
.booking-hbook input[type='radio']{
  -webkit-appearance:none !important;appearance:none !important;
  width:18px !important;height:18px !important;background:#fff !important;
  border:1.5px solid var(--line,rgba(31,45,27,.30)) !important;border-radius:50% !important;
  cursor:pointer !important;vertical-align:middle !important;margin:0 8px 0 0 !important;
  position:relative !important;flex-shrink:0 !important;
}
.booking-hbook input[type='radio']:checked{border-color:var(--ks-lime,#2A4A24) !important;}
.booking-hbook input[type='radio']:checked::after{content:'' !important;position:absolute !important;left:3px !important;top:3px !important;width:9px !important;height:9px !important;border-radius:50% !important;background:var(--ks-lime,#2A4A24) !important;}

/* ─────────────────────────────────────────────────────────────────
   Calendar (hb-datepick)
   ───────────────────────────────────────────────────────────────── */
.booking-hbook,
.booking-hbook *,
.booking-hbook input,
.booking-hbook select,
.booking-hbook textarea,
.booking-hbook button,
.hb-datepick-popup-wrapper,
.hb-datepick-wrapper{
  font-family:var(--display,"Freigeist",Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif) !important;
}
body .hb-datepick-popup-wrapper.hb-datepick-popup-wrapper{
  width:680px !important;max-width:calc(100vw - 32px) !important;
  background:#fff !important;
  border:1px solid var(--line,rgba(31,45,27,.10)) !important;
  border-radius:var(--radius,24px) !important;
  box-shadow:var(--shadow-strong,0 28px 72px -42px rgba(31,45,27,.42)) !important;
  padding:14px !important;color:var(--ink,#1D1B17) !important;z-index:9999 !important;
  box-sizing:border-box !important;
}
.hb-datepick-popup{background:transparent !important;border:0 !important;padding:0 !important;width:100% !important;}
body .hb-dp-cmd-wrapper.hb-dp-cmd-wrapper{position:relative !important;display:block !important;height:32px !important;width:100% !important;max-width:100% !important;min-width:0 !important;margin:0 0 8px !important;box-sizing:border-box !important;}
.hb-dp-cmd-wrapper a{background:transparent !important;border:0 !important;color:var(--ink,#1D1B17) !important;width:32px !important;height:32px !important;border-radius:50% !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;text-decoration:none !important;cursor:pointer !important;font-size:18px !important;transition:background-color .2s ease;}
.hb-dp-cmd-wrapper a:hover{background:rgba(31,45,27,.05) !important;}
.hb-dp-cmd-wrapper a.hb-dp-disabled{opacity:.25 !important;cursor:not-allowed !important;}
body .hb-dp-cmd-prev.hb-dp-cmd-prev{position:absolute !important;left:0 !important;top:0 !important;}
body .hb-dp-cmd-next.hb-dp-cmd-next{position:absolute !important;right:0 !important;top:0 !important;}
body .hb-dp-month-row.hb-dp-month-row{display:grid !important;grid-template-columns:1fr 1fr !important;gap:18px !important;width:100% !important;max-width:100% !important;}
body .hb-dp-month.hb-dp-month{flex:0 0 auto !important;width:auto !important;max-width:100% !important;min-width:0 !important;float:none !important;display:block !important;padding:0 !important;box-sizing:border-box !important;}
.hb-dp-month-header{font-weight:500 !important;font-size:14px !important;text-align:center !important;text-transform:lowercase !important;color:var(--ink,#1D1B17) !important;margin:0 0 8px !important;letter-spacing:0 !important;}
.hb-dp-week-header{width:100% !important;display:grid !important;grid-template-columns:repeat(7,1fr) !important;gap:0 !important;margin:0 0 4px !important;}
.hb-dp-week-header div{width:auto !important;min-width:0 !important;float:none !important;font-size:9px !important;font-weight:500 !important;text-transform:uppercase !important;letter-spacing:.10em !important;color:var(--muted,#676158) !important;text-align:center !important;padding:3px 0 !important;background:transparent !important;border:0 !important;}
.hb-dp-week{width:100% !important;display:grid !important;grid-template-columns:repeat(7,1fr) !important;gap:0 !important;float:none !important;}
.hb-dp-day{width:auto !important;min-width:0 !important;height:28px !important;padding:0 !important;float:none !important;display:flex !important;align-items:center !important;justify-content:center !important;}
.hb-dp-day > a, .hb-dp-day > span{display:flex !important;align-items:center !important;justify-content:center !important;width:26px !important;height:26px !important;border-radius:7px !important;font-size:12px !important;font-weight:400 !important;color:var(--ink,#1D1B17) !important;background:transparent !important;border:0 !important;text-decoration:none !important;cursor:pointer !important;transition:background-color .15s ease,color .15s ease;}
.hb-dp-day > a:hover{background:rgba(223,255,99,.45) !important;color:var(--ink,#1D2D1B) !important;}
.hb-dp-day > span{cursor:not-allowed !important;color:rgba(31,45,27,.30) !important;}
.hb-dp-day-check-in > a, .hb-dp-day-check-in > span,
.hb-dp-day-check-out > a, .hb-dp-day-check-out > span{background:#DFFF63 !important;color:var(--ink,#1D2D1B) !important;font-weight:500 !important;}
.hb-day-taken-start, .hb-day-taken-end{background:rgba(252,165,165,.30) !important;color:rgba(31,45,27,.45) !important;}
.hb-day-taken-start::before, .hb-day-taken-end::before, .hb-day-taken-content{background:rgba(252,165,165,.30) !important;}
.hb-datepick-legend{font-size:10px !important;padding:8px 0 !important;margin:8px 0 0 !important;}
.hb-datepick-selecting-legend{font-size:13px !important;}
@media (max-width:560px){body .hb-datepick-popup-wrapper.hb-datepick-popup-wrapper{width:340px !important;}body .hb-dp-month-row.hb-dp-month-row{grid-template-columns:1fr !important;}}

/* End of §HBOOK */

/* ============================================================
   §PRICING-STRIP — HBook lowest-price strip (under pricing heading)
   ============================================================ */
.ks-pricing-strip{
  display:flex;flex-direction:column;gap:14px;
  margin:18px 0 28px;
  padding:18px 22px;
  background:rgba(31,45,27,.04);
  border-radius:18px;
  border:1px solid var(--line);
}
.ks-pricing-strip__label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.ks-pricing-strip__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px 18px;
}
.ks-pricing-strip__item{
  display:flex;flex-direction:column;gap:4px;
  padding:8px 0;
  border-top:1px solid var(--line);
}
.ks-pricing-strip__name{
  font-size:13px;color:var(--muted);
}
.ks-pricing-strip__price{
  font-family:var(--display);font-size:18px;font-weight:500;color:var(--ks-dark);
}
@media (max-width:600px){
  .ks-pricing-strip__list{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   §REVIEWS-POLISH — testimonial cards (Phase 4)
   ============================================================ */
.reviews-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;margin-top:32px;
}
.tst{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 26px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 8px 22px -16px rgba(31,45,27,.14);
}
.tst__rating{display:flex;gap:2px;font-size:14px;color:#D4A41A;letter-spacing:1px;}
.tst__star{color:rgba(31,45,27,.18);}
.tst__star.is-filled{color:#D4A41A;}
.tst__text{
  margin:0;padding:0;border:0;
  font-family:var(--display);font-size:16px;line-height:1.55;
  color:var(--ks-dark);font-style:normal;
}
.tst__meta{
  display:flex;flex-direction:column;gap:2px;
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line);
}
.tst__author{font-size:14px;font-weight:500;color:var(--ks-dark);}
.tst__source{font-size:12px;color:var(--muted);letter-spacing:.04em;}
.tst__date{font-size:11px;color:var(--muted);}
.reviews-cta{margin-top:36px;display:flex;justify-content:center;}

/* Empty state when no reviews exist yet */
.reviews-section .reviews-grid:empty{display:none;}
@media (max-width:600px){
  .reviews-grid{grid-template-columns:1fr;gap:18px;}
  .tst{padding:24px 22px;}
}

/* ============================================================
   §PERF — Phase 5 performance hints
   ============================================================ */
/* Above-the-fold hero image is preloaded; below-the-fold gets lazy. */
.section--feature img,
.lake-photo,
.over-card__media,
.crosssell__img,
.xp-tile__img,
.ks-overlay-card__img{
  background-color:var(--bg-alt);
}
/* Hint browsers to precompute layout for big images so layout shift doesn't bounce text. */
img[loading="lazy"]{content-visibility:auto;contain-intrinsic-size:1px 600px;}

/* Reduce paint on huge background gradients when off-screen */
.section--atmosphere,
#kontakt{contain:paint;}