/* CSS_EDYTOR.css — SCAFFOLD (maksymalna baza) dla Five Stars Apartments
   Wygenerowany: node scripts/jarvis.js scaffold five-stars
   Prefix: --fs-  ·  Vibe: luxury-heritage  ·  Theme: default13
   WORKFLOW SUBTRAKTYWNY: usuwaj nieuzywane warianty/regiony, NIE dopisuj od zera. */


/* ============================================================
   §ROOT — brand tokens
   ============================================================ */
/* ============================================================
   §ROOT — brand tokens (alias-at-root). Prefix: --fs-*
   Kolory z brief.kolory (override) lub palety vibe "luxury-heritage".
   --xx-* aliasy → warstwy uzywajace --xx-* dziedzicza marke bez renamingu.
   ============================================================ */
:root {
  --fs-primary:   #CAB48D;
  --fs-secondary: #B0914F;
  --fs-primary-light: #DEC9A0;   /* light champagne gold (bylo #CAB48D burgund — bug scaffold, przeliczone pod zloto) */
  --fs-primary-dark: #8A6D3B;    /* bronze (bylo #8A6D3B maroon — bug scaffold) */
  --fs-secondary-light: #D4BC9A;
  --fs-cream: #F2EDE4;
  --fs-bg: #FAFAF5;
  --fs-charcoal: #1A1917;        /* rich dark — dark-rich footer / CTA / ciemne sekcje */
  --fs-text: #1A1A1A;
  --fs-text-soft: #3A3A3A;
  --fs-text-muted: #6B6B6B;
  --fs-font-heading: "Playfair Display", Georgia, serif;
  --fs-font-body: "Source Sans 3", system-ui, sans-serif;

  /* --xx-* alias → brand (legalny wzorzec; linter B3 to dopuszcza) */
  --xx-primary:   var(--fs-primary);
  --xx-secondary: var(--fs-secondary);
  --xx-primary-light: var(--fs-primary-light);
  --xx-primary-dark: var(--fs-primary-dark);
  --xx-secondary-light: var(--fs-secondary-light);
  --xx-cream: var(--fs-cream);
  --xx-bg: var(--fs-bg);
  --xx-text: var(--fs-text);
  --xx-text-soft: var(--fs-text-soft);
  --xx-text-muted: var(--fs-text-muted);
  --xx-font-heading: var(--fs-font-heading);
  --xx-font-body: var(--fs-font-body);

  /* safety-net: tokeny --xx-* których używają warstwy L2/L4/L7/L8,
     a których paleta vibe nie definiuje. Zapobiega "sypaniu się" kolorów
     (linter B3: var(--xx-…) bez definicji = bloker). Popraw wg marki. */
  --xx-white: #FFFFFF;
  --xx-dark: var(--fs-charcoal);
  --xx-accent: var(--fs-secondary);
  --xx-border: rgba(0, 0, 0, 0.10);
  --xx-shadow: var(--xx-shadow-md);
  --xx-hero-bg: var(--xx-cream);
  --xx-footer-bg: var(--fs-charcoal);

  /* --ido-* alias (uzywane przez L1 §A typografia + komponenty L2/L3) */
  --ido-primary:      var(--xx-primary);
  --ido-secondary:    var(--xx-secondary);
  --ido-accent:       var(--xx-accent);
  --ido-dark:         var(--xx-dark);
  --ido-bg:           var(--xx-bg, #FFFFFF);
  --ido-light:        var(--xx-white, #FFFFFF);
  --ido-font-heading: "Playfair Display", system-ui, sans-serif;
  --ido-font-body:    "Source Sans 3", system-ui, sans-serif;
  --ido-radius:       var(--xx-radius, 8px);
  --ido-header-h:     72px;
}


/* ============================================================
   LAYER 1 — TRAPS (system bug-fixes)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   ido-system-traps.css
   Layer 1 of 3 — IdoBooking System Bug Fixes (Traps)
   ═══════════════════════════════════════════════════════════════

   PURPOSE:
   All known IdoBooking / IdoSell system bugs that affect EVERY
   client identically. This file is shared — never client-specific.
   Client theme variables (colors, fonts, sizes) are defined in
   Layer 3 (client-theme.css) as --ido-* custom properties.

   LAYER ARCHITECTURE:
     Layer 1 → ido-system-traps.css   (this file — universal fixes)
     Layer 2 → ido-layout.css         (structural, client-customized)
     Layer 3 → client-theme.css       (CSS vars + brand overrides)

   VARIABLE CONTRACT (must be defined in Layer 3 :root):
     --ido-primary      Primary brand color
     --ido-secondary    Secondary / lighter brand color
     --ido-accent       Accent / highlight color
     --ido-bg           Page background color
     --ido-dark         Dark text / dark surfaces color
     --ido-light        Light surface color (near-white)
     --ido-font-heading Heading font stack
     --ido-font-body    Body font stack
     --ido-radius       Base border-radius
     --ido-header-h     Fixed header height (e.g. 80px)

   HARDCODED ELEMENTS NOTE:
   The following selectors are rendered inside sandboxed iframes
   or injected shadow-like contexts where CSS custom properties
   do NOT inherit. Use literal hex values only:
     #bounce, #backTop, .ck_dsclr__btn_v2,
     .ck_dsclr__btn_v2:hover, .skip_link, .formbutton
   The generator replaces var(--fs-primary) and
   var(--fs-secondary) tokens before deployment.

   TRAP COUNT: 18 root traps + page-specific universal fixes
   SOURCE: TEMPLATE_ARKUSZ_STYLOW.css + trap_tracker.json
   Updated: 2026-04-11
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   TRAP #1 — Body font-size reset
   ROOT CAUSE: IdoSell sets html { font-size: 140% } on the
   default13 template, which makes 1rem = 22.4px. Every unit
   derived from rem is 40% too large. Reset to 16px.
   CLIENTS: all (7/7 surveyed)
   ═══════════════════════════════════════════════════════════════ */
body,
body.default13 {
  font-size: 16px !important;
  font-family: var(--ido-font-body) !important;
  background: var(--ido-bg) !important;
  color: var(--ido-dark) !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #2 — System orange #AD5009 → brand color
   ROOT CAUSE: default13.css hardcodes #AD5009 on .btn,
   .btn-primary, .btn-success, filter headers, links. Override
   with brand primary. Exclude .slick-arrow (navigation arrows).
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.btn:not(.slick-arrow),
.btn-primary:not(.slick-arrow),
.btn-success:not(.slick-arrow),
a.btn:not(.slick-arrow),
button.btn:not(.slick-arrow) {
  background-color: var(--ido-primary) !important;
  border-color: var(--ido-primary) !important;
  color: #fff !important;
}
.btn:not(.slick-arrow):hover,
.btn-primary:not(.slick-arrow):hover,
.btn-success:not(.slick-arrow):hover,
a.btn:not(.slick-arrow):hover,
button.btn:not(.slick-arrow):hover {
  background-color: var(--ido-secondary) !important;
  border-color: var(--ido-secondary) !important;
  color: #fff !important;
}

/* System scheme CSS vars — override green/orange defaults
   (333333.css.gz defines --maincolor1 as green #4ADE80) */
html:root {
  --maincolor1: var(--ido-primary) !important;
  --supportcolor1: var(--ido-secondary) !important;
  --maincolor2: var(--ido-dark) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #3 — H1 "big-label" hidden by system on /offer pages
   ROOT CAUSE: System applies display:none via JS on .big-label
   on accommodation detail pages. Force visible.
   CLIENTS: mazurski, mountainprestige (and others via JS)
   ═══════════════════════════════════════════════════════════════ */
h1.big-label {
  display: block !important;
  visibility: visible !important;
  font-family: var(--ido-font-heading) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #4 — H2 "IdoBooking" injected inside .index-info
   ROOT CAUSE: System renders the literal text "IdoBooking" as
   an H2 inside .index-info and inside .section.parallax.
   Must be hidden — it overlaps hero content.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.index-info h2,
.index-info h1,
.section.parallax > h2 {
  display: none !important;
  visibility: hidden !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #5 — Dark overlay on slider via pseudo-elements
   ROOT CAUSE: .parallax-slider::before gets a semi-opaque
   black background from system CSS, darkening the hero image.
   .parallax-image::after does the same on image-only heroes.
   Both must be suppressed so custom overlays render cleanly.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.parallax-slider::before,
.parallax-slider::after,
.parallax-image::before,
.parallax-image::after {
  background: transparent !important;
  display: none !important;
  opacity: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #6 — Header must be position:fixed, NOT sticky
   ROOT CAUSE: position:sticky on .defaultsb / header.default13
   creates a layout gap between header and hero on iOS Safari
   and when sticky triggers at wrong scroll offset. Fixed + explicit
   top:0 is the only reliable cross-browser approach.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.defaultsb,
#defaultsb,
.default13,
.navbar-wrapper,
header.header,
header.default13 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1100 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #7 — Subpage padding-top compensates fixed header
   ROOT CAUSE: Fixed header overlaps page content on subpages.
   Homepage is excluded — fullscreen hero handles offset itself.
   Value comes from --ido-header-h measured on live site.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
body.page-offers,
body.page-offer,
body.page-contact,
body.page-txt,
body:not(.page-index) .content-wrapper,
body:not(.page-index) main {
  padding-top: var(--ido-header-h) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #8 — Stacking context: .index-info z-index too high
   ROOT CAUSE: .index-info receives position:absolute and
   z-index:1000 from system, which traps it above the slider
   and blocks pointer events on hero CTAs. Reset position to
   allow hero overlay to sit above it.
   NOTE: pointer-events:none prevents invisible area blocking clicks.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.index-info {
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
}
.index-info * {
  pointer-events: none !important;
}
.index-info button,
.index-info .navbar-reservation {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #9 — System z-index: -1 on form inputs
   ROOT CAUSE: System stylesheet sets z-index:-1 on inputs and
   selects inside the booking widget, making them unclickable
   when the widget sits inside a positioned container.
   CLIENTS: najmar, ecocamping, madera, golden, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
#iai_book_form input,
#iai_book_form select,
#iai_book_form textarea,
#iai_book_form .widget__option,
input,
select,
textarea {
  z-index: 2 !important;
  position: relative;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #10 — System inline positioning on .index-info
   ROOT CAUSE: System JS injects inline style="top:Xpx; left:Xpx"
   on .index-info, misaligning it relative to the hero. These
   overrides must use !important to beat inline styles.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.index-info {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #11 — Litepicker calendar rendered at 944px width
   ROOT CAUSE: Litepicker date range picker gets a hardcoded
   width from the system JS config, causing horizontal scroll
   on mobile and overflow on desktop sidebars. fit-content
   corrects to actual rendered width.
   CLIENTS: najmar, ecocamping, madera, golden, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
.litepicker {
  width: fit-content !important;
  max-width: 100vw !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #12 — Ghost booking form on /offer pages
   ROOT CAUSE: System renders a duplicate #iai_book_form with
   class d-none on offer detail pages. Without explicit height:0
   it still occupies vertical space even when display:none,
   pushing content down.
   CLIENTS: all /offer pages
   ═══════════════════════════════════════════════════════════════ */
body.page-offer #iai_book_form.d-none,
body.page-offer .iai-search.d-none {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #13 — .iai-search shown on /offers page (has its own)
   ROOT CAUSE: The /offers page has a built-in filter sidebar.
   The global .iai-search bar also renders, duplicating search UI.
   Also hide on /txt subpages where a search widget makes no sense.
   CLIENTS: najmar, ecocamping, madera, mazurski, golden, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
body.page-offers .iai-search,
body.page-offers #iai_book_se,
body.page-txt .iai-search,
body.page-txt #iai_book_se {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #14 — FontAwesome NOT loaded — hide broken FA icons
   ROOT CAUSE: IdoSell does not load FontAwesome by default in
   template 11 / default13. FA icon elements render as invisible
   0x0 boxes OR as raw unicode squares. Hide them system-wide;
   replace with CSS-only chevrons where needed (see §7 /offers).
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
body.page-offers .filter_header .fa,
body.page-offers .filter_header .fa-angle-down,
body.page-offers .filter_header [class^="fa-"],
body.page-offers .filter_header [class*=" fa-"] {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #15 — Gradient overlay on .section.parallax
   ROOT CAUSE: The system ::after pseudo-element on .section.parallax
   renders a dark solid overlay that obscures hero images.
   IMPORTANT: append custom overlays to .section.parallax itself,
   NOT to .parallax-slider — the slider has z-index:-2 which traps
   any positioned child below it (cannot be fixed without JS).
   .index-info::after must also be suppressed.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.section.parallax::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.4)  12%,
    rgba(255, 255, 255, 0)    22%,
    rgba(0, 0, 0, 0)          60%,
    rgba(0, 0, 0, 0.35)      100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.index-info::after,
.index-info::before {
  display: none !important;
  content: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #16 — span.btn on /offers gets line-height: 49px
   ROOT CAUSE: System stylesheet targets span.btn and forces
   line-height:49px + height:49px, which makes the "SZCZEGOLY"
   button on offer listing cards enormously tall. Normalize to
   auto height with flex centering.
   CLIENTS: najmar, ecocamping, madera, mazurski, golden, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
body.page-offers span.btn,
.page-offers .accommodation-buttons span.btn,
.offer span.btn {
  line-height: 1.4 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 24px !important;
  font-family: var(--ido-font-body) !important;
  font-size: 13px !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #17 — Tabs sticky: system JS adds --fixed class, not .sticky
   ROOT CAUSE: The offer detail tabs bar gets a class of "--fixed"
   (double-dash prefix, Bootstrap modifier style) added by system JS
   when it sticks. This is NOT the standard .sticky class. Without
   an explicit rule targeting .tabs.--fixed the tab bar jumps out
   of layout — full-width fix and z-index are required.
   CLIENTS: mazurski, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
.tabs.--fixed {
  position: fixed !important;
  top: var(--ido-header-h) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  margin: 0 !important;
  z-index: 1000 !important;
  background: var(--ido-light) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Tabs span child font size — system forces 1.3rem */
.tabs__item > span {
  font-size: 13px !important;
  font-family: var(--ido-font-body) !important;
  font-weight: 500 !important;
}


/* ═══════════════════════════════════════════════════════════════
   TRAP #18 — Footer VISA/MC strip dark default background
   ROOT CAUSE: .footer-contact-baner has a hardcoded dark navy
   background (#3E475E) from system CSS. Logos and icons inside
   render with wrong contrast against custom dark footers.
   Override background to match client dark color and invert logos.
   CLIENTS: all (7/7)
   ═══════════════════════════════════════════════════════════════ */
.footer-contact-baner,
.footer__strip,
footer .footer__strip,
.footer-bottom,
.payment-methods {
  background: var(--ido-dark) !important;
  background-color: var(--ido-dark) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.footer-contact-baner svg,
.footer-contact-baner img,
.footer__strip img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.4 !important;
}
.footer-contact-baner span,
.footer-contact-baner a,
.footer__strip a {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 12px !important;
}
.powered_by_logo img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.3 !important;
}


/* ═══════════════════════════════════════════════════════════════
   ADDITIONAL UNIVERSAL FIX — Leaflet map overflow
   ROOT CAUSE: A wildcard selector [class*="map"] from system CSS
   clips map tile images. Protect Leaflet containers explicitly.
   CLIENTS: najmar, madera, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
.leaflet-container {
  overflow: hidden !important;
}
.leaflet-container * {
  box-sizing: content-box;
}


/* ═══════════════════════════════════════════════════════════════
   ADDITIONAL UNIVERSAL FIX — container-hotspot (JS rebuilds cards)
   ROOT CAUSE: System renders a .container-hotspot with system-styled
   offer cards that JS replaces. Hide the system version to prevent
   flash of unstyled content.
   CLIENTS: madera, mountainprestige
   ═══════════════════════════════════════════════════════════════ */
.container-hotspot {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   §A — TYPOGRAPHY BASE (universal, uses CSS vars)
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ido-font-heading) !important;
  color: var(--ido-dark) !important;
  line-height: 1.2 !important;
}

a {
  color: var(--ido-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--ido-secondary);
}


/* ═══════════════════════════════════════════════════════════════
   §B — SEARCH WIDGET (universal fixes)
   Font and persons-dropdown chevron are broken on all clients.
   ═══════════════════════════════════════════════════════════════ */
.iai-search,
#iai_book_form {
  font-family: var(--ido-font-body) !important;
}

/* Search / booking submit button
   NOTE: .formbutton does NOT inherit CSS vars in all contexts.
   Generator must replace var(--fs-primary) and var(--fs-secondary). */
.formbutton,
#iai_book_form .formbutton {
  background: var(--fs-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ido-radius) !important;
  font-family: var(--ido-font-body) !important;
  cursor: pointer !important;
}
.formbutton:hover,
#iai_book_form .formbutton:hover {
  background: var(--fs-secondary) !important;
}

/* Persons dropdown chevron — system button is 8x8 and invisible */
#iai_book_form .widget__option.iai_input-small .iai_widget_btn {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  opacity: 1 !important;
  font-size: 0 !important;
  background: transparent !important;
  border: none !important;
}
#iai_book_form .widget__option.iai_input-small .iai_widget_btn::after {
  content: '' !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid var(--ido-dark) !important;
  border-bottom: 2px solid var(--ido-dark) !important;
  transform: rotate(45deg) !important;
  margin: 2px auto 0 !important;
}
#iai_book_form .widget__option.iai_input-small {
  padding-right: 44px !important;
}

/* Persons dropdown list overflow */
.persons_list {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   §C — /offers PAGE (universal styling for all clients)
   ═══════════════════════════════════════════════════════════════ */

/* Offers container background — system default is #292929 dark */
body.page-offers,
body.page-offers main,
.offers-container {
  background: var(--ido-bg) !important;
  color: var(--ido-dark) !important;
}

/* Filter section headers — brand color, heading font */
body.page-offers h4,
body.page-offers .sidebar h4,
body.page-offers .filter_header {
  color: var(--ido-primary) !important;
  font-family: var(--ido-font-heading) !important;
}

/* Filter header layout with CSS chevron (FontAwesome not loaded) */
body.page-offers .filter_header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  padding: 10px 16px !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  transition: background 0.2s ease !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
body.page-offers .filter_header:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* CSS-only chevron replaces missing FontAwesome icon */
body.page-offers .filter_header::after {
  content: "" !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2px solid var(--ido-primary) !important;
  border-bottom: 2px solid var(--ido-primary) !important;
  transform: rotate(45deg) !important;
  transition: transform 0.3s ease !important;
  margin-left: 12px !important;
  margin-top: -3px !important;
}
body.page-offers .filter_header[aria-expanded="true"]::after {
  transform: rotate(-135deg) !important;
  margin-top: 3px !important;
}

/* Filter collapse — Bootstrap collapse guard */
body.page-offers .filter_content.collapse:not(.show) {
  display: none !important;
}
body.page-offers .filter_content.collapse.show {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

/* /offers buttons */
body.page-offers .btn,
body.page-offers button.btn,
body.page-offers a.btn {
  background: var(--ido-primary) !important;
  color: #fff !important;
  border: none !important;
}
body.page-offers .btn:hover {
  background: var(--ido-secondary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   §D — /offer DETAIL PAGE (universal fixes)
   ═══════════════════════════════════════════════════════════════ */

/* Price chip — KANON: prostokat h64 r12 (NIE kolo). Charcoal-on-gold ~8.7:1 AAA */
.offer-price,
.object-price {
  width: auto !important;
  min-height: 64px !important;
  height: auto !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--fs-primary, #CAB48D) !important;
  color: var(--fs-charcoal, #1A1917) !important;
  padding: 12px 22px !important;
  text-align: center !important;
  font-family: var(--fs-font-heading) !important;
}
.offer-price small {
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: var(--fs-charcoal, #1A1917) !important;
}
.offer-price span {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ZAREZERWUJ / Reserve button */
.accommodation-leftbutton,
.page-offer .btn-success,
.page-offer a.btn-success,
.page-offer .period-price .btn {
  background: var(--ido-primary) !important;
  border-color: var(--ido-primary) !important;
  color: var(--fs-charcoal, #1A1917) !important;
  font-family: var(--ido-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: var(--ido-radius) !important;
  border: none !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
.accommodation-leftbutton:hover,
.page-offer .btn-success:hover,
.page-offer a.btn-success:hover {
  background: var(--ido-secondary) !important;
  border-color: var(--ido-secondary) !important;
}

/* contact__btn centering — system default justify-content:normal */
.contact__btn {
  justify-content: center !important;
  font-family: var(--ido-font-body) !important;
}

/* System price h2/p too large on detail page */
.price,
.offer .price,
.page-offer .price {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--fs-primary-dark, #8A6D3B) !important;   /* gold-dark 4.6:1 (bylo --ido-primary gold 1.8:1 fail) */
}


/* ═══════════════════════════════════════════════════════════════
   §FS-OFFER — reskin ciemnego slaba systemowego (schemat panelu 2a2829)
   na jasny premium. Systemowe wrappery .offer-* renderuja sie grafitowo
   (rgb 41,41,41 / 18,18,18) i NIE byly nigdy przeskorowane. page-offer only.
   ═══════════════════════════════════════════════════════════════ */
html body.page-offer .offer-parallax,
html body.page-offer .offer-wrapper,
html body.page-offer .offer-left-wrapper,
html body.page-offer .offer-right-wrapper,
html body.page-offer .offer-desc-wrapper {
  background: var(--fs-bg, #FAFAF5) !important;
  color: var(--fs-text, #1A1A1A) !important;
  box-shadow: none !important;
}
/* prawy rail rezerwacji = kremowa karta ze zlota nitka (nie czarny box) */
html body.page-offer .offer-right-wrapper {
  background: #FFFFFF !important;
  border: 1px solid rgba(202, 180, 141, 0.45) !important;
  border-radius: 6px !important;
}
/* naglowki -> charcoal + Playfair */
html body.page-offer .offer-wrapper h1,
html body.page-offer .offer-wrapper h2,
html body.page-offer .offer-wrapper h3,
html body.page-offer .offer-desc-wrapper h2,
html body.page-offer .offer-desc-wrapper h3 {
  color: var(--fs-charcoal, #1A1917) !important;
  font-family: var(--fs-font-heading) !important;
}
/* opisy/listy -> miekki charcoal */
html body.page-offer .offer-desc-wrapper,
html body.page-offer .offer-desc-wrapper p,
html body.page-offer .offer-desc-wrapper li,
html body.page-offer .offer-wrapper p,
html body.page-offer .offer-wrapper li {
  color: var(--fs-text-soft, #3A3A3A) !important;
}
/* tabele (udogodnienia/ceny) dziedzicza grafit -> jasne */
html body.page-offer .offer-wrapper table,
html body.page-offer .offer-wrapper td,
html body.page-offer .offer-wrapper th {
  background: transparent !important;
  color: var(--fs-text, #1A1A1A) !important;
  border-color: rgba(26, 25, 23, 0.10) !important;
}
/* akcent JAKO TEKST (taby/ceny/ikony) -> gold-dark, nie jasne zloto */
html body.page-offer .offer-tab.active,
html body.page-offer .amenities i,
html body.page-offer .offer-desc-wrapper a {
  color: var(--fs-primary-dark, #8A6D3B) !important;
}

/* ═══════════════════════════════════════════════════════════════
   §FS-OFFER v2 — PELNY AUDYT KONTRASTU (2026-07-23, feedback „nic nie widac").
   ROOT: systemowy schemat panelu 2a2829 (grafit) + bialy tekst + zolte ceny #FACC15.
   Rekomendacja: przelacz schemat panelu na jasny; ponizej i tak wymuszamy brand.
   ═══════════════════════════════════════════════════════════════ */
/* (1) col-e i wewn. wrappery -> przezroczyste => tresc siada na jasnym .offer-wrapper */
html body.page-offer .offer-wrapper [class*="col-"],
html body.page-offer .offer-top,
html body.page-offer .offer-left-wrapper,
html body.page-offer .roomspace,
html body.page-offer .accomodation-info,
html body.page-offer .offer-info {
  background-color: transparent !important;
}
/* (2) WSZYSTKIE zlote przyciski -> charcoal (bialy na zlocie = 2:1 FAIL) */
html body.page-offer .btn, html body.page-offer .btn span,
html body.page-offer .button, html body.page-offer .button span,
html body.page-offer .btn-reverse, html body.page-offer .btn-reverse span,
html body.page-offer .accommodation-leftbutton, html body.page-offer .accommodation-leftbutton span,
html body.page-offer .navbar-reservation, html body.page-offer .navbar-reservation span,
html body .ck_dsclr__btn_v2 {
  color: var(--fs-charcoal, #1A1917) !important;
}
/* (3) zloto JAKO TEKST (linki/ceny) na jasnym -> gold-dark 4.6:1 */
html body.page-offer .offerCalendar,
html body.page-offer .to-offer-prices,
html body.page-offer strong.price,
html body.page-offer .price,
html body.page-offer .offer-desc-wrapper a,
html body.page-offer .amenities i { color: var(--fs-primary-dark, #8A6D3B) !important; }
/* (4) systemowe karty ofert (.offer/.offer__info) -> biala karta + charcoal tytul
      (/offers tytul byl bialy na jasnym = niewidoczny; related-offers grafit) */
html body.page-offer .offer, html body.page-offer .offer__info,
html body.page-offers .offer, html body.page-offers .offer__info {
  background-color: #FFFFFF !important;
}
html body.page-offer .offer__title, html body.page-offer .offer__title *,
html body.page-offers .offer__title, html body.page-offers .offer__title * {
  color: var(--fs-charcoal, #1A1917) !important;
}
/* (5) "Opcje dodatkowe" (#additional/.additional) — bialy tekst + zolte ceny na jasnym */
html body.page-offer #additional, html body.page-offer #additional *,
html body.page-offer .additional, html body.page-offer .additional * {
  color: var(--fs-text, #1A1A1A) !important;
}
html body.page-offer #additional strong, html body.page-offer .additional strong,
html body.page-offer #additional .price, html body.page-offer .additional .price {
  color: var(--fs-primary-dark, #8A6D3B) !important;
}
/* (6) CENNIK / season table — ciemny box 41,41,41 + zolty/faint tekst -> jasny + charcoal */
html body.page-offer table, html body.page-offer table td, html body.page-offer table th,
html body.page-offer .season-cell_date,
html body.page-offer .period-price {
  background-color: transparent !important;
  color: var(--fs-text, #1A1A1A) !important;
}
html body.page-offer .season-cell { background: var(--fs-cream, #F2EDE4) !important; }
/* (7) globalny zolty #FACC15 gdziekolwiek na ofercie -> gold-dark (na jasnym po reskinie) */
html body.page-offer strong { color: var(--fs-primary-dark, #8A6D3B) !important; }


/* ═══════════════════════════════════════════════════════════════
   §E — /contact PAGE (universal)
   ═══════════════════════════════════════════════════════════════ */
body.page-contact a {
  color: var(--ido-primary) !important;
}
body.page-contact a:hover {
  color: var(--ido-secondary) !important;
}
body.page-contact .btn,
body.page-contact form button,
body.page-contact form input[type="submit"] {
  background: var(--ido-primary) !important;
  border-color: var(--ido-primary) !important;
  color: #fff !important;
}
body.page-contact .btn:hover {
  background: var(--ido-secondary) !important;
}
body.page-contact .leaflet-container {
  border-radius: var(--ido-radius) !important;
  overflow: hidden !important;
}


/* ═══════════════════════════════════════════════════════════════
   §F — /txt SUBPAGES (universal)
   ═══════════════════════════════════════════════════════════════ */
.txt-text {
  font-family: var(--ido-font-body) !important;
  line-height: 1.7 !important;
  color: var(--ido-dark) !important;
}
.txt-text h2,
.txt-text h3 {
  font-family: var(--ido-font-heading) !important;
  color: var(--ido-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   §G — FOOTER (universal dark override)
   ═══════════════════════════════════════════════════════════════ */
footer,
.footer,
.footer-wrapper,
.page-footer {
  background: var(--ido-dark) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: var(--ido-font-body) !important;
}
footer h3,
footer h4,
.footer h3,
.footer h4 {
  color: #fff !important;
  font-family: var(--ido-font-heading) !important;
  font-size: 16px !important;
}
footer a,
.footer a {
  color: var(--ido-accent) !important;
}
footer a:hover,
.footer a:hover {
  color: var(--ido-secondary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   §H — SYSTEM ELEMENTS WITH HARDCODED HEX (no CSS var inheritance)
   WARNING: Do NOT replace these tokens manually.
   The pipeline generator substitutes them at build time:
     var(--fs-primary)   → client primary color hex (e.g. #4A6741)
     var(--fs-secondary) → client secondary color hex (e.g. #6B8F5E)
   Affected elements: #bounce, #backTop, .ck_dsclr__btn_v2, .skip_link
   These live in system-injected shadow contexts or iframes where
   CSS custom properties from :root do NOT cascade.
   ═══════════════════════════════════════════════════════════════ */

/* Scroll-down arrow (system positions it centered; move to right edge) */
#bounce {
  background-color: var(--fs-primary) !important;
  background: var(--fs-primary) !important;
  left: auto !important;
  right: 32px !important;
  transform: none !important;
  margin-left: 0 !important;
}

/* Back-to-top button */
#backTop {
  background: var(--fs-primary) !important;
}
#backTop:hover {
  background: var(--fs-secondary) !important;
}

/* Cookie consent banner */
.ck_dsclr__btn_v2 {
  background: var(--fs-primary) !important;
}
.ck_dsclr__btn_v2:hover {
  background: var(--fs-secondary) !important;
}
.ck_dsclr_v2 a {
  color: var(--fs-primary) !important;
}
.ck_dsclr_x_v2 {
  color: var(--fs-primary) !important;
}

/* Skip-to-content accessibility link */
.skip_link {
  background: var(--fs-primary) !important;
  color: #fff !important;
}

/* ==========================================================================
   §I — HOME-GATE (uniwersalny; kazdy klient default13)
   --------------------------------------------------------------------------
   Pole /panel/frontpage `fg_body_top_code` (wypelniane przez panel-fill.mjs) jest
   GLOBALNE — renderuje sie na KAZDEJ podstronie (jak HEAD/body_bottom), nie tylko
   na home. Bez bramki tresc strony glownej wycieka na /txt/*, /offer/N itd.
   (feedback_idobooking_frontpage_body_top_global — PW 2026-07-10).

   Kontrakt: CALA tresc home w body_top owinieta w <div class="fs-home">
   (scaffold bodyTopFor robi to automatycznie). Tu ukrywamy ja wszedzie POZA
   strona glowna; na body.page-index .fs-home pozostaje widoczne.

   fullpage-home wymaga DODATKOWO ukrycia systemowego <main> + samodzielnego hero
   → layer-home-selfcontained.css (emitowana gdy fullpage:true).
   Regula lint: N-home-selfcontained (pilnuje gate + hide-main przy fullpage).
   ========================================================================== */
html body:not(.page-index) .fs-home {
  display: none !important;
}



/* ============================================================
   LAYER 2 — COMPONENTS (nav/footer/btn/form/stopka)
   ============================================================ */

/*
 * ido-components.css
 * IdoBooking Universal Component Library — Layer 2
 * Shared by all clients. Parameterized via CSS custom properties.
 * Layer 1 (ido-base.css) sets the variables. Layer 3 (client.css) overrides.
 *
 * Prefix: ido-
 * Variables consumed: --ido-primary, --ido-secondary, --ido-accent,
 *   --ido-bg, --ido-dark, --ido-light, --ido-font-heading, --ido-font-body,
 *   --ido-radius
 *
 * Table of contents:
 *  1. Layout System
 *  2. Hero Section
 *  3. Split Layout
 *  4. Feature Grid
 *  5. Offer Cards
 *  6. CTA Section
 *  7. Stats Bar
 *  8. FAQ Accordion
 *  9. Gallery Grid
 * 10. Buttons
 * 11. Typography Helpers
 * 12. Animations
 * 13. Accessibility
 * 14. Responsive
 */

/* =========================================================
   1. LAYOUT SYSTEM
   ========================================================= */

.ido-section {
  padding: 80px 24px;
  box-sizing: border-box;
  width: 100%;
}

.ido-section--white {
  background-color: #ffffff;
}

.ido-section--cream {
  background-color: var(--ido-bg, #f8f5f0);
}

.ido-section--dark {
  background-color: var(--ido-dark, #1a1a1a);
  color: #ffffff;
}

.ido-section--accent {
  background-color: var(--ido-accent, #e8d5b0);
}

.ido-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
  width: 100%;
}

.ido-container--narrow {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
  width: 100%;
}

/* =========================================================
   2. HERO SECTION
   ========================================================= */

.ido-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Overlay on top of system slider (.section.parallax) */
.ido-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 5;
  pointer-events: none;
}

.ido-hero__content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 20px;
}

.ido-hero__title {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
  max-width: 900px;
}

.ido-hero__subtitle {
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.375rem);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.ido-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--ido-primary, #8b6f47);
  color: #ffffff;
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding: 16px 40px;
  border-radius: var(--ido-radius, 4px);
  border: 2px solid transparent;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  margin-top: 8px;
}

.ido-hero__cta:hover {
  background-color: var(--ido-secondary, #6b5035);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.ido-hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  font-family: var(--ido-font-body, system-ui, sans-serif);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  animation: ido-bounce 2s ease-in-out infinite;
  text-decoration: none;
}

.ido-hero__scroll::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(255, 255, 255, 0.75);
  transform: rotate(45deg);
  margin-top: -6px;
}

@keyframes ido-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* =========================================================
   3. SPLIT LAYOUT
   ========================================================= */

.ido-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.ido-split--reverse .ido-split__text {
  order: 2;
}

.ido-split--reverse .ido-split__img {
  order: 1;
}

.ido-split__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ido-split__img {
  overflow: hidden;
  border-radius: var(--ido-radius, 4px);
  line-height: 0;
}

.ido-split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.ido-split__img:hover img {
  transform: scale(1.03);
}

/* =========================================================
   4. FEATURE GRID
   ========================================================= */

.ido-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
}

.ido-feature {
  text-align: center;
  padding: 36px 24px;
  border-radius: var(--ido-radius, 4px);
  background-color: var(--ido-light, #ffffff);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ido-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.ido-feature__icon {
  font-size: 48px;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}

.ido-feature__title {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ido-dark, #1a1a1a);
  margin: 0;
  line-height: 1.3;
}

.ido-feature__desc {
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 0.9rem;
  color: var(--ido-dark, #1a1a1a);
  opacity: 0.7;
  line-height: 1.65;
  margin: 0;
}

/* =========================================================
   5. OFFER CARDS
   ========================================================= */

.ido-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

.ido-card {
  background-color: #ffffff;
  border-radius: var(--ido-radius, 4px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.ido-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15);
}

.ido-card:hover .ido-card__img img {
  transform: scale(1.05);
}

.ido-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  line-height: 0;
  flex-shrink: 0;
}

.ido-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.ido-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ido-card__title {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ido-dark, #1a1a1a);
  margin: 0;
  line-height: 1.3;
}

.ido-card__price {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ido-primary, #8b6f47);
  margin: 0;
}

/* Stretched link — makes entire card clickable */
.ido-card__link {
  position: static;
  text-decoration: none;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ido-primary, #8b6f47);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ido-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* =========================================================
   6. CTA SECTION
   ========================================================= */

.ido-cta {
  text-align: center;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.ido-cta--dark {
  background-color: var(--ido-dark, #1a1a1a);
  color: #ffffff;
}

.ido-cta--dark .ido-cta__heading {
  color: #ffffff;
}

.ido-cta__heading {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: clamp(1.6rem, 2.5vw + 0.75rem, 2.5rem);
  font-weight: 700;
  color: var(--ido-dark, #1a1a1a);
  line-height: 1.2;
  margin: 0;
  max-width: 700px;
}

.ido-cta__contacts {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
}

.ido-cta__contacts a {
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ido-primary, #8b6f47);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s ease;
}

.ido-cta--dark .ido-cta__contacts a {
  color: var(--ido-accent, #e8d5b0);
}

.ido-cta__contacts a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

.ido-cta__btn {
  font-size: 1.1rem;
  padding: 18px 48px;
}

/* =========================================================
   7. STATS BAR
   ========================================================= */

.ido-stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 60px 24px;
}

.ido-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ido-stat__number {
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--ido-primary, #8b6f47);
  line-height: 1;
  margin: 0;
}

.ido-stat__label {
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 0.875rem;
  color: var(--ido-dark, #1a1a1a);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* =========================================================
   8. FAQ ACCORDION
   ========================================================= */

.ido-faq {
  display: flex;
  flex-direction: column;
}

.ido-faq__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ido-faq__item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ido-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ido-font-heading, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ido-dark, #1a1a1a);
  text-align: left;
  gap: 16px;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.ido-faq__question:hover {
  color: var(--ido-primary, #8b6f47);
}

/* CSS chevron icon */
.ido-faq__question::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin-top: -4px;
}

.ido-faq__question[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.ido-faq__answer {
  display: none;
  padding: 0 4px 20px;
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ido-dark, #1a1a1a);
  opacity: 0.8;
}

.ido-faq__question[aria-expanded="true"] + .ido-faq__answer {
  display: block;
}

/* =========================================================
   9. GALLERY GRID
   ========================================================= */

.ido-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.ido-gallery__item {
  overflow: hidden;
  border-radius: calc(var(--ido-radius, 4px) / 2);
  line-height: 0;
  cursor: pointer;
  position: relative;
}

.ido-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1 / 1;
  transition: transform 0.35s ease;
}

.ido-gallery__item:hover img {
  transform: scale(1.08);
}

/* =========================================================
   10. BUTTONS
   ========================================================= */

.ido-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--ido-primary, #8b6f47);
  color: #ffffff;
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 2px solid var(--ido-primary, #8b6f47);
  border-radius: var(--ido-radius, 4px);
  padding: 14px 32px;
  cursor: pointer;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease,
              transform 0.18s ease, box-shadow 0.22s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  -webkit-appearance: none;
  appearance: none;
}

.ido-btn:hover {
  background-color: var(--ido-secondary, #6b5035);
  border-color: var(--ido-secondary, #6b5035);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.ido-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ido-btn--outline {
  background-color: transparent;
  color: var(--ido-primary, #8b6f47);
  border-color: var(--ido-primary, #8b6f47);
  box-shadow: none;
}

.ido-btn--outline:hover {
  background-color: var(--ido-primary, #8b6f47);
  color: #ffffff;
}

.ido-btn--white {
  background-color: #ffffff;
  color: var(--ido-dark, #1a1a1a);
  border-color: #ffffff;
}

.ido-btn--white:hover {
  background-color: var(--ido-bg, #f8f5f0);
  border-color: var(--ido-bg, #f8f5f0);
  color: var(--ido-dark, #1a1a1a);
}

.ido-btn--lg {
  font-size: 1.0625rem;
  padding: 18px 48px;
}

.ido-btn:focus-visible {
  outline: 3px solid var(--ido-primary, #8b6f47);
  outline-offset: 3px;
}

/* =========================================================
   11. TYPOGRAPHY HELPERS
   ========================================================= */

.ido-heading {
  font-family: var(--ido-font-heading, Georgia, serif);
  color: var(--ido-dark, #1a1a1a);
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}

.ido-kicker {
  display: block;
  font-family: var(--ido-font-body, system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ido-primary, #8b6f47);
  margin: 0;
}

.ido-text {
  font-family: var(--ido-font-body, system-ui, sans-serif);
  line-height: 1.7;
  margin: 0;
}

/* =========================================================
   12. ANIMATIONS
   ========================================================= */

.ido-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ido-reveal--left {
  transform: translateX(-30px);
}

.ido-reveal--right {
  transform: translateX(30px);
}

.ido-revealed {
  opacity: 1;
  transform: translate(0, 0);
}

.ido-stagger-1 { transition-delay: 0.1s; }
.ido-stagger-2 { transition-delay: 0.2s; }
.ido-stagger-3 { transition-delay: 0.3s; }
.ido-stagger-4 { transition-delay: 0.4s; }

/* noscript fallback — when JS is not available, show all revealed elements */
html:not(.ido-js) .ido-reveal {
  opacity: 1;
  transform: none;
}

/* =========================================================
   13. ACCESSIBILITY
   ========================================================= */

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

/* Focus visible states for interactive elements */
.ido-feature:focus-visible,
.ido-card:focus-visible,
.ido-gallery__item:focus-visible,
.ido-faq__question:focus-visible,
.ido-cta__contacts a:focus-visible,
.ido-hero__cta:focus-visible,
.ido-hero__scroll:focus-visible {
  outline: 3px solid var(--ido-primary, #8b6f47);
  outline-offset: 2px;
}

/* Disable ALL animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ido-reveal,
  .ido-reveal--left,
  .ido-reveal--right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ido-stagger-1,
  .ido-stagger-2,
  .ido-stagger-3,
  .ido-stagger-4 {
    transition-delay: 0s;
  }

  .ido-hero__scroll {
    animation: none;
  }

  .ido-btn,
  .ido-card,
  .ido-feature,
  .ido-split__img img,
  .ido-card__img img,
  .ido-gallery__item img,
  .ido-faq__question::after,
  .ido-faq__question,
  .ido-hero__cta,
  .ido-cta__contacts a {
    transition: none;
  }
}

/* =========================================================
   14. RESPONSIVE
   ========================================================= */

/* --- Tablet landscape (max 991px) --- */
@media (max-width: 991px) {
  .ido-section {
    padding: 60px 20px;
  }

  .ido-hero {
    min-height: 60vh;
  }

  .ido-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ido-split--reverse .ido-split__text,
  .ido-split--reverse .ido-split__img {
    order: unset;
  }

  .ido-stats {
    gap: 32px;
    padding: 48px 20px;
  }

  .ido-cta {
    padding: 60px 20px;
  }

  .ido-cards {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }

  .ido-features {
    gap: 24px;
  }
}

/* --- Tablet portrait (max 768px) --- */
@media (max-width: 768px) {
  .ido-section {
    padding: 48px 16px;
  }

  .ido-container,
  .ido-container--narrow {
    padding-inline: 16px;
  }

  .ido-hero {
    min-height: 60vh;
  }

  .ido-hero__content {
    padding: 32px 16px;
    gap: 16px;
  }

  .ido-hero__cta {
    padding: 14px 28px;
    font-size: 0.9375rem;
  }

  .ido-features {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }

  .ido-feature {
    padding: 28px 16px;
  }

  .ido-cards {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .ido-stats {
    gap: 24px;
    padding: 40px 16px;
  }

  .ido-stat__number {
    font-size: 2.25rem;
  }

  .ido-gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .ido-cta {
    padding: 48px 16px;
    gap: 20px;
  }

  .ido-cta__contacts {
    flex-direction: column;
    gap: 16px;
  }

  .ido-faq__question {
    font-size: 0.975rem;
    padding: 16px 4px;
  }
}

/* --- Mobile (max 480px) --- */
@media (max-width: 480px) {
  .ido-section {
    padding: 40px 16px;
  }

  .ido-hero {
    min-height: 50vh;
  }

  .ido-hero__scroll {
    display: none;
  }

  .ido-cards {
    grid-template-columns: 1fr;
  }

  .ido-features {
    grid-template-columns: 1fr;
  }

  .ido-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .ido-stat__number {
    font-size: 2rem;
  }

  .ido-stats {
    gap: 20px;
    padding: 32px 16px;
  }

  .ido-btn--lg {
    font-size: 1rem;
    padding: 16px 32px;
  }

  .ido-split {
    gap: 24px;
  }

  .ido-cta__heading {
    font-size: 1.5rem;
  }

  .ido-faq__question {
    font-size: 0.9375rem;
  }
}


/* ==========================================================================
   §FOOTER (JARVIS canonical) — stopka od zera .fs-footer
   --------------------------------------------------------------------------
   Struktura budowana przez library/js/ido-footer-rebuild.js:
     footer.fs-footer
       > .fs-footer__top       (grid kolumn)
           > .fs-footer__col
               .fs-footer__logo   (svg + brand)
               .fs-footer__tag    (tagline / note)
               h4                      (nagłówek kolumny)
               a                       (link nawigacji)
               + RELOKOWANE żywe węzły panelu:
                 .footer__contact          (Kontakt — dane z panelu)
                 ul.footer__social_media   (social)
                 .powered_by               (Powered by IdoBooking — LICENCJA)
       > .fs-footer__bottom
           > .fs-footer__bottom-in  (© + .footer-contact-baner = płatności)

   Dane (kontakt/social/powered/płatności) są panel-driven → auto-update.
   My stylujemy tylko wygląd. Źródło kanoniczne: cityofthekings SR2 (F18).

   Trapy pokryte:
     TRAP-11  relokacja żywych węzłów (JS) — tu tylko style.
     TRAP-12  navy pseudo-pas .footer-contact-baner::before → kill.
     TRAP-13  Powered-by widoczne + płatności bez ciemnego boxa.

   Domyślnie JASNA stopka (bg z tokenu). Dla ciemnej stopki: nadpisz
   `footer.fs-footer { background: <dark> }` + kolory tekstu w §CLIENT.
   ========================================================================== */

/* pełna szerokość — full-bleed obsługuje layer-fullbleed.css (.fs-footer
   jest na jego liście (b)); tu tylko wizualia stopki */
footer.fs-footer {
  background: var(--fs-footer-bg, var(--fs-bg, #FAF6EE)) !important;
  border-top: 1px solid var(--fs-border, #E6DECE);
  color: var(--fs-text-soft, #4A4A4A) !important;
}

/* tekst relokowanych węzłów przejmuje kolor stopki (dane z panelu bywają ciemne) */
.fs-footer .footer__contact,
.fs-footer .footer__contact *,
.fs-footer .fs-footer__col,
.fs-footer .fs-footer__col * {
  color: var(--fs-text-soft, #4A4A4A) !important;
}
.fs-footer .footer__contact a:hover,
.fs-footer .fs-footer__col > a:hover {
  color: var(--fs-primary, #B8892B) !important;
}
.fs-footer .fs-footer__logo,
.fs-footer .fs-footer__col h4 {
  color: var(--fs-text, #1F1B16) !important;
}

/* ── GRID KOLUMN: 4 desktop → 1 mobile ── */
.fs-footer__top {
  max-width: var(--fs-maxw, 1240px);
  margin: 0 auto;
  padding: 58px 24px 38px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 40px;
}
.fs-footer__col {
  text-align: left;
}
.fs-footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fs-font-heading, serif);
  font-size: 22px;
  color: var(--fs-text, #1F1B16);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.fs-footer__logo svg {
  width: 28px;
  height: 28px;
  color: var(--fs-primary, #B8892B);
  flex-shrink: 0;
}
.fs-footer__tag {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fs-text-muted, #8A8378);
  max-width: 34ch;
  margin: 0;
}
.fs-footer__col h4 {
  font-family: var(--fs-font-heading, serif);
  font-size: 15px;
  color: var(--fs-text, #1F1B16);
  margin: 0 0 14px;
  font-weight: 500;
}
.fs-footer__col > a {
  font-size: 14px;
  color: var(--fs-text-soft, #4A4A4A);
  text-decoration: none;
  display: block;
  padding: 5px 0;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.fs-footer__col > a:hover {
  color: var(--fs-primary, #B8892B);
  padding-left: 4px;
}

/* ── PASEK DOLNY: © + płatności, lewo-wyrównany ── */
.fs-footer__bottom {
  border-top: 1px solid var(--fs-border, #E6DECE);
}
/* prawy padding 90px = miejsce na #backTop (fixed, right ~26px) */
.fs-footer__bottom-in {
  max-width: var(--fs-maxw, 1240px);
  margin: 0 auto;
  padding: 18px 90px 18px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--fs-text-muted, #8A8378);
}
.fs-footer__bottom-in a {
  color: var(--fs-text-muted, #8A8378);
  text-decoration: none;
}
.fs-footer__bottom-in a:hover {
  color: var(--fs-primary, #B8892B);
}

/* ── RELOKOWANE WĘZŁY SYSTEMOWE (przejmują nasz styl, dane z panelu) ── */
.fs-footer .footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  justify-items: start;
}
.fs-footer .footer__contact li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  justify-content: flex-start;
}
.fs-footer .footer__contact a {
  text-decoration: none;
}
/* link do regulaminu bywa w osobnym li — do lewej, nie wyśrodkowany */
.fs-footer .footer__contact li.footer-contact-terms {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 4px;
}
.fs-footer .footer__contact li.footer-contact-terms a {
  align-self: flex-start !important;
  text-align: left !important;
}
/* adres ma 2 spany (ulica / kod+miasto) — block, żeby flex+gap ich nie rozjechał */
.fs-footer .footer-contact-adress {
  display: block !important;
}
.fs-footer ul.footer__social_media {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 16px 0 0;
}
.fs-footer ul.footer__social_media a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--fs-border, #E6DECE);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fs-text-soft, #4A4A4A);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fs-footer ul.footer__social_media a:hover {
  background: var(--fs-primary, #B8892B);
  color: #FFF;
  border-color: var(--fs-primary, #B8892B);
}

/* ── POWERED-BY (TRAP-13, wymóg licencyjny — ZAWSZE widoczne) ──
   on_white.svg ma root fill="none" + ciemny wordmark → na jasnym tle OK jako
   <img>, ale NIGDY nie zerujemy widoczności. filter:none + opacity:1. */
.fs-footer .powered_by,
.powered_by {
  margin-top: 6px;
  display: inline-block;
}
.fs-footer .powered_by_logo,
.powered_by a.powered_by_logo {
  display: inline-block;
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.powered_by a,
.powered_by img,
.fs-footer .powered_by_logo img {
  filter: none !important;
  opacity: 1 !important;
  display: block;
  width: 150px !important;
  height: auto !important;
}

/* ── PŁATNOŚCI (TRAP-13) — własne czyste loga na jasnym tle, BEZ ciemnego boxa ──
   Systemowe loga MC mają biały wordmark (pod ciemne tło) → na jasnym niewidoczne.
   JS fixPaymentLogos() ukrywa systemowe i wstawia .fs-pay (VISA + MC).
   TRAP-12: kill navy pseudo-pas .footer-contact-baner::before/::after. */
.fs-footer .footer-contact-baner {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.fs-footer .footer-contact-baner::before,
.fs-footer .footer-contact-baner::after,
.footer-contact-baner::before,
.footer-contact-baner::after {
  display: none !important;
  content: none !important;
}
/* własne loga wstrzyknięte przez JS — czyste kolory na jasnym tle */
.fs-pay {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.fs-pay svg {
  height: 28px;
  width: auto;
  display: block;
}
/* relokowane systemowe loga (jeśli JS ich nie podmienił) — pokaż w realnych
   kolorach zamiast systemowego filter:invert(1) który je wybielał */
.fs-footer .footer-contact-baner svg,
.fs-footer .footer-contact-baner img {
  filter: none !important;
  height: 22px;
  width: auto;
  opacity: 1 !important;
}

/* ── UKRYJ oryginalną systemową stopkę gdy zbudowano naszą ── */
body.fs-footer-built footer > .footer.container {
  display: none !important;
}
body.fs-footer-built footer:not(.fs-footer) {
  display: none !important;
}

/* ── RESPONSYWNOŚĆ: 4 kol → 2 → 1 ── */
@media (max-width: 860px) {
  .fs-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media (max-width: 560px) {
  .fs-footer__top {
    grid-template-columns: 1fr;
  }
  .fs-footer__bottom-in {
    flex-direction: column;
    text-align: center;
    padding-right: 24px;
  }
}


/* ==========================================================================
   §NAV-DRAWER (mobile fallback) — dla initNavFallback() z ido-mobile-nav.js
   --------------------------------------------------------------------------
   Na HOME systemowy hamburger bywa martwy (bxSlider psuje systemowy JS menu).
   initNavFallback() przełącza `body.fs-nav-open`; ten harness pokazuje
   #navbar jako slide-drawer ≤991px.

   Trapy pokryte:
     - hamburger .navbar-toggler MUSI być fixed, POZA off-screen drawerem,
       widoczny nad wszystkim (inaczej znika razem z ukrytym #navbar).
     - backdrop z-index MUSI być MNIEJSZY niż header/toggler (inaczej backdrop
       nad drawerem = klik nie działa; feedback_..._backdrop_zindex_above_header).

   Ref: feedback_idobooking_home_bxslider_breaks_mobile_menu,
        feedback_idobooking_mobile_nav_toggler_inside_offscreen_drawer,
        feedback_idobooking_mobile_drawer_backdrop_zindex_above_header.
   ========================================================================== */
@media (max-width: 991.98px) {
  /* hamburger — fixed POZA drawerem, zawsze widoczny (z-index > drawer > backdrop) */
  .navbar-toggler,
  .menu-toggle {
    position: fixed !important;
    top: 12px;
    right: 14px;
    z-index: 1200 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* CLOSED (baza) — #navbar UKRYTY na mobile HOME, gdy drawer zamknięty. Bez tej reguły
     natywny hamburger default13 (podpięty do tego samego .navbar-toggler) przecieka #navbar
     jako display:block; position:static = WYŚRODKOWANY blok podczas swojego OPÓŹNIONEGO
     (~350ms) chowania po zamknięciu drawera („flash"). Czyni fs-nav-open JEDYNYM
     źródłem widoczności #navbar na mobile. SCOPE `page-index` KRYTYCZNY: podstrony używają
     natywnego #navbar — globalne #navbar{display:none} ubiłoby ich menu. Open rule niżej
     (równa specyficzność 0,1,1 + !important) wygrywa dzięki KOLEJNOŚCI ŹRÓDŁA. Ref: lessons/029. */
  body.page-index #navbar {
    display: none !important;
  }

  /* #navbar jako slide-drawer — wjeżdża po dodaniu klasy (nadpisuje CLOSED powyżej) */
  body.fs-nav-open #navbar {
    display: block !important;
    position: fixed !important;
    top: 0;
    right: 0;
    left: auto;
    width: min(82vw, 340px) !important;
    max-width: 340px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    background: var(--fs-bg, #FFF) !important;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.22) !important;
    z-index: 1100 !important;
    padding: 72px 24px 28px !important;
    box-sizing: border-box !important;
    transform: translateX(0) !important;
  }

  /* backdrop — półprzezroczysta zasłona POD drawerem (z-index < drawer i < toggler) */
  body.fs-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1050;
    pointer-events: none;   /* klik-poza-drawerem obsługuje JS na document */
  }

  /* linki w drawerze — czytelny stack */
  body.fs-nav-open #navbar ul,
  body.fs-nav-open #navbar .menu {
    display: block !important;
    flex-direction: column !important;
  }
  body.fs-nav-open #navbar a {
    display: block !important;
    padding: 12px 0 !important;
  }
}


/* =========================================================
   §CONTACT — /contact (AUTOMATYCZNA strona, body.page-contact)
   ---------------------------------------------------------
   Deliverable (KAŻDY default13, lessons/034): mapa NAD listą kontaktów
   + STYLOWANE pola formularza (border marki + focus-ring) + brand button
   + typografia. NIE zostawiaj stuba (sam link + goły leaflet). /contact jest
   renderowana przez SYSTEM (NIE body_top) → stylujemy CSS-only, scope body.page-contact.
   Kanon: osada §E (mapa/leaflet) + cityofthekings M5 (pola).
   Ref: feedback_idobooking_contact_page_auto · deliverable N-contact-canonical.
   Tokeny: tylko --ido-* zdefiniowane w :root (scaffold) + literały (brak undefined-var). */
/* mapa NAD listą (system renderuje mapę pod listą → flex + order:-1) */
body.page-contact .contact,
body.page-contact .contact-wrapper {
  display: flex !important;
  flex-direction: column !important;
}
body.page-contact #map_container,
body.page-contact .leaflet-container {
  order: -1 !important;
  border-radius: var(--ido-radius, 8px) !important;
  overflow: hidden !important;
  min-height: 320px !important;
}
/* linki + brand button */
body.page-contact a { color: var(--ido-primary, #CAB48D) !important; }
body.page-contact a:hover { color: var(--ido-secondary, #A6894F) !important; }
body.page-contact .btn,
body.page-contact form button,
body.page-contact form input[type="submit"] {
  background: var(--ido-primary, #CAB48D) !important;
  border-color: var(--ido-primary, #CAB48D) !important;
  color: #FFFFFF !important;
  border-radius: var(--ido-radius, 8px) !important;
  font-family: var(--ido-font-heading, system-ui) !important;
  font-weight: 700 !important;
}
body.page-contact .btn:hover,
body.page-contact form button:hover { background: var(--ido-secondary, #A6894F) !important; }
/* STYLOWANE POLA formularza — border marki + focus-ring (nie systemowa siwizna) */
body.page-contact input[type="text"],
body.page-contact input[type="email"],
body.page-contact input[type="tel"],
body.page-contact textarea,
body.page-contact select {
  width: 100% !important;
  font-family: var(--ido-font-body, system-ui) !important;
  font-size: 15px !important;
  color: var(--ido-dark, #1A1A1A) !important;
  background: var(--ido-light, #FFFFFF) !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  border-radius: var(--ido-radius, 8px) !important;
  padding: 12px 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
body.page-contact input:focus,
body.page-contact textarea:focus,
body.page-contact select:focus {
  outline: 0 !important;
  border-color: var(--ido-primary, #CAB48D) !important;
  box-shadow: 0 0 0 3px rgba(202, 180, 141, 0.18) !important;
}
body.page-contact textarea { min-height: 140px !important; resize: vertical !important; }



/* ============================================================
   LAYER 3 — OFFER PAGE (has_offer:true)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   LAYER 3 — /OFFER/N/ PAGE BASE
   Reusable starter dla każdego nowego projektu IdoBooking.
   Adaptuj kolory przez podmianę CSS variables — zmienne `--xx-*`
   to placeholdery do podmienienia (np. --pk-, --fr-, --mc-).

   Pochodzenie: extracted z fairrentals (FR_ARKUSZ_STYLOW.css sekcje 28+49)
   + Piekary 1-3 (sekcja 50). Tested live (chrome-devtools MCP):
   - Sophie Apartment, /offer/13/ — tabs styled, prices centered,
     hotspot duplicates removed, page height -30%.

   Krytyczne klasy systemowe IdoBooking pokrywane:
   - .big-label, .offer-title (H1 — nazwa apartamentu)
   - .tabs / .object-menu (drugie menu obiektu — kalendarz/właściwości/...)
   - .object-price, .offer-price, .price-from, .price-block (ceny)
   - .price-list, .season-row, .season-cell_* (cennik sezonowy)
   - .offer-gallery, .gallery, .offer-photo (galeria)
   - .offer-features, .amenities, .features-list (udogodnienia)
   - .booking-form, .reservation-form (sidebar rezerwacji)
   - .container-hotspot (system "Proponowane oferty" — UKRYTE bo duplikat)
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   1. Page wrapper — padding sensowne, brak ucinania pod headerem
   ────────────────────────────────────────────────────────── */
html body.page-offer main,
html body.page-offer #pageContent {
  background: var(--xx-bg, #FAFAF5) !important;
  padding: clamp(80px, 10vw, 120px) clamp(20px, 4vw, 40px) clamp(40px, 6vw, 64px) !important;
}

/* Footer gap fix — eliminuj puste miejsce po cenniku */
html body.page-offer main,
html body.page-offer #pageContent {
  padding-bottom: 32px !important;
  margin-bottom: 0 !important;
}
html body.page-offer ~ footer,
html body.page-offer footer {
  margin-top: 0 !important;
}


/* ──────────────────────────────────────────────────────────
   2. Headings — nazwa apartamentu (H1) + sekcje (H2/H3)
   ────────────────────────────────────────────────────────── */
html body.page-offer h1,
html body.page-offer .big-label,
html body.page-offer .offer-title {
  font-family: var(--xx-font-heading, 'Playfair Display', serif) !important;
  font-size: clamp(32px, 4.4vw, 46px) !important;
  font-weight: 400 !important;
  color: var(--xx-text, #1A1A1A) !important;
  margin: 0 0 16px !important;
  line-height: 1.15 !important;
}

html body.page-offer h2,
html body.page-offer h3,
html body.page-offer .label,
html body.page-offer .offer-label {
  font-family: var(--xx-font-heading, 'Playfair Display', serif) !important;
  color: var(--xx-text, #1A1A1A) !important;
  margin-top: 32px !important;
  margin-bottom: 16px !important;
}


/* ──────────────────────────────────────────────────────────
   3. Object tabs (KALENDARZ DOSTĘPNOŚCI / WŁAŚCIWOŚCI / ZASADY...)
   System renderuje ul.tabs z linkami. Bez stylowania = brzydkie
   default <li> bullets + brak hierarchii. Tu: flex + underline.
   ────────────────────────────────────────────────────────── */
html body.page-offer .tabs,
html body.page-offer .object-menu,
html body.page-offer ul.tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--xx-border, #E5DDD0) !important;
  background: transparent !important;
}
html body.page-offer .tabs > li,
html body.page-offer .tabs > a,
html body.page-offer .object-menu > li,
html body.page-offer .object-menu > a {
  flex: 0 0 auto !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body.page-offer .tabs a,
html body.page-offer .object-menu a {
  display: inline-block !important;
  padding: 14px 18px !important;
  font-family: var(--xx-font-body, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--xx-text-muted, #6B6B6B) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.3s ease, border-color 0.3s ease !important;
}
html body.page-offer .tabs a:hover,
html body.page-offer .object-menu a:hover,
html body.page-offer .tabs li.active a,
html body.page-offer .tabs a.active,
html body.page-offer .object-menu a.active {
  color: var(--xx-primary, #CAB48D) !important;
  border-bottom-color: var(--xx-primary, #CAB48D) !important;
}


/* ──────────────────────────────────────────────────────────
   4. Price block — wycentrowany, cream tło, primary akcent
   Default systemowy: text-align right, flex — wygląda krzywo.
   ────────────────────────────────────────────────────────── */
html body.page-offer .object-price,
html body.page-offer .offer-price,
html body.page-offer .price-block,
html body.page-offer .price-from {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto 16px !important;
  width: 100% !important;
}
html body.page-offer .object-price {
  background: var(--xx-cream, #F2EDE4) !important;
  border: 1px solid var(--xx-border, #E5DDD0) !important;
  border-radius: var(--xx-radius-lg, 16px) !important;
  padding: 24px 32px !important;
  max-width: 280px !important;
  font-family: var(--xx-font-heading, 'Playfair Display', serif) !important;
  font-size: 18px !important;
  color: var(--xx-text, #1A1A1A) !important;
  box-shadow: var(--xx-shadow, 0 4px 30px rgba(26,26,26,0.08)) !important;
}
html body.page-offer .object-price .price {
  font-size: 28px !important;
  font-weight: 500 !important;
  color: var(--xx-primary, #CAB48D) !important;
  letter-spacing: 0.5px !important;
}


/* ──────────────────────────────────────────────────────────
   5. Price list / cennik sezonowy
   System renderuje .price-list.row z .season-cell_* — bez stylów
   = ściany tekstu. Tu: cream container, czytelne rzędy.
   ────────────────────────────────────────────────────────── */
html body.page-offer .price-list,
html body.page-offer .price-list.row {
  background: var(--xx-cream, #F2EDE4) !important;
  border-radius: var(--xx-radius-lg, 16px) !important;
  padding: 20px !important;
  margin: 24px 0 !important;
}
html body.page-offer .season-row,
html body.page-offer [class*="season-row"] {
  border-bottom: 1px solid var(--xx-border, #E5DDD0) !important;
  padding: 12px 0 !important;
}
html body.page-offer .season-row:last-child {
  border-bottom: none !important;
}
html body.page-offer .season-cell_heading,
html body.page-offer .season-cell_dates {
  font-family: var(--xx-font-body, 'DM Sans', sans-serif) !important;
  color: var(--xx-text-soft, #3A3A3A) !important;
  font-size: 14px !important;
}
html body.page-offer .season-cell_year,
html body.page-offer .season-cell_main .price {
  color: var(--xx-primary, #CAB48D) !important;
  font-family: var(--xx-font-heading, 'Playfair Display', serif) !important;
}


/* ──────────────────────────────────────────────────────────
   6. Gallery + features + booking-form — białe karty z border
   ────────────────────────────────────────────────────────── */
html body.page-offer .offer-gallery img,
html body.page-offer .gallery img,
html body.page-offer .offer-photo img,
html body.page-offer .object-gallery img {
  border-radius: var(--xx-radius, 8px) !important;
}

html body.page-offer .offer-features,
html body.page-offer .amenities,
html body.page-offer .features-list,
html body.page-offer .object-amenities {
  background: var(--xx-white, #FFFFFF) !important;
  border-radius: var(--xx-radius-lg, 16px) !important;
  border: 1px solid var(--xx-border, #E5DDD0) !important;
  padding: 24px !important;
  margin: 16px 0 !important;
}

html body.page-offer .booking-form,
html body.page-offer .reservation-form,
html body.page-offer aside.booking,
html body.page-offer .object-booking {
  background: var(--xx-white, #FFFFFF) !important;
  border-radius: var(--xx-radius-lg, 16px) !important;
  border: 1px solid var(--xx-border, #E5DDD0) !important;
  padding: 24px !important;
  box-shadow: var(--xx-shadow, 0 4px 30px rgba(26,26,26,0.08)) !important;
}


/* ──────────────────────────────────────────────────────────
   7. Form inputs — brand focus state
   ────────────────────────────────────────────────────────── */
html body.page-offer input:not([type="radio"]):not([type="checkbox"]),
html body.page-offer select,
html body.page-offer textarea {
  font-family: var(--xx-font-body, 'DM Sans', sans-serif) !important;
  font-size: 15px !important;
  border: 1px solid var(--xx-border, #E5DDD0) !important;
  border-radius: var(--xx-radius, 8px) !important;
  padding: 12px 16px !important;
  min-height: 46px !important;
  background: var(--xx-white, #FFFFFF) !important;
}
html body.page-offer input:focus,
html body.page-offer select:focus,
html body.page-offer textarea:focus {
  border-color: var(--xx-primary, #CAB48D) !important;
  box-shadow: 0 0 0 3px var(--xx-primary-soft, rgba(202, 180, 141, 0.15)) !important;
  outline: none !important;
}


/* ──────────────────────────────────────────────────────────
   8. .container-hotspot — UKRYJ na /offer/N/
   System na /offer/N/ pokazuje "Proponowane oferty" w hotspocie
   z CAŁYM katalogiem (np. 122 obiekty u brokera Mentalis).
   To 99% duplikat z featured offers + przepełnienie strony.
   Jeśli masz własną sekcję wyróżnionych na home, na /offer/N/
   też ukryj nasze pk-offers-section (JS w initOfferPageBranding).
   ────────────────────────────────────────────────────────── */
body.page-offer .container-hotspot {
  display: none !important;
}


/* ──────────────────────────────────────────────────────────
   10. STICKY TABS — BEM modifier --fixed (KRYTYCZNE!)
   System IdoBooking dodaje JS-em modifier --fixed do .tabs gdy
   gość scrolluje past natural tab position. Bez tego stylowania
   sticky pasek jest WĄSKI (system max-width:1140px) + items
   pionowo (gdy .tabs__item bez width:auto).
   Historia: fairrentals v1.6 + v1.40, piekary 2026-05-25.
   Pełna analiza: lessons/024-tabs-fixed-bem-modifier-sticky-scroll.md
   ────────────────────────────────────────────────────────── */
html body .tabs.--fixed,
html body.page-offer .tabs.--fixed,
html body .tabs.tabs--fixed,
html body .tabs.sticky {
  position: fixed !important;
  top: 64px !important;              /* MUSI być zsynchronizowane z header scrolled height (verify live!) */
  left: 0 !important;
  right: 0 !important;
  inset-inline: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;       /* DEFEAT system .tabs{max-width:1140px} */
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 24px !important;
  z-index: 999 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--xx-shadow, 0 4px 30px rgba(26,26,26,0.08)) !important;
  border-bottom: 1px solid var(--xx-border, #E5DDD0) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-sizing: border-box !important;
}

/* Mobile — header scrolled na mobile ~56px */
@media (max-width: 991.98px) {
  html body .tabs.--fixed,
  html body.page-offer .tabs.--fixed,
  html body .tabs.tabs--fixed {
    top: 56px !important;
    padding: 0 16px !important;
  }
}

/* KLUCZOWE: .tabs__item to KLIKALNY div z <span> w środku (tabindex+JS).
   IdoBooking NIE używa <a> w sticky tabs — wszystkie style padding/font
   muszą iść BEZPOŚREDNIO na .tabs__item, nie na descendant <a>.
   Active state: .tabs__item.active (zwykła klasa, bez BEM --).
   Live evidence (piekary 2026-05-25): DOM = <div class="tabs__item">
                                          <span>Tekst</span>
                                        </div> */
html body .tabs > .tabs__item,
html body .tabs .tabs__item,
html body .tabs.--fixed > .tabs__item,
html body .tabs.--fixed .tabs__item {
  flex: 0 0 auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 12px 14px !important;
  font-family: var(--xx-font-body, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--xx-text-muted, #6B6B6B) !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  white-space: nowrap !important;
  background: transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
html body .tabs > .tabs__item:hover,
html body .tabs > .tabs__item.active,
html body .tabs.--fixed > .tabs__item:hover,
html body .tabs.--fixed > .tabs__item.active,
html body .tabs__item:hover,
html body .tabs__item.active {
  color: var(--xx-primary, #CAB48D) !important;
  border-bottom-color: var(--xx-primary, #CAB48D) !important;
}
/* Span wewnątrz dziedziczy styl z parent */
html body .tabs__item span,
html body .tabs.--fixed .tabs__item span {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* Fallback dla <a>/<li><a>/<button> — gdyby system zmienił DOM w przyszłości */
html body .tabs.--fixed a,
html body .tabs.--fixed li a,
html body .tabs.--fixed button {
  font-family: var(--xx-font-body, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--xx-text-muted, #6B6B6B) !important;
  padding: 12px 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-bottom: 2px solid transparent !important;
}
html body .tabs.--fixed a:hover,
html body .tabs.--fixed a.active,
html body .tabs.--fixed li.active a {
  color: var(--xx-primary, #CAB48D) !important;
  border-bottom-color: var(--xx-primary, #CAB48D) !important;
}


/* ──────────────────────────────────────────────────────────
   9. Bootstrap row gutter fix — czasem ucina padding na .col-*
   ────────────────────────────────────────────────────────── */
html body.page-offer .row {
  margin-left: -12px !important;
  margin-right: -12px !important;
}
html body.page-offer .row > [class^="col"],
html body.page-offer .row > [class*=" col"] {
  padding-left: 12px !important;
  padding-right: 12px !important;
}


/* ══════════════════════════════════════════════════════════════
   §OFFER-CANONICAL — kanoniczny detal /offer/N (JARVIS)
   --------------------------------------------------------------------------
   Źródła live-verified: cityofthekings SR4 (F18), easyrent §ER-OFFERDETAIL.
   Trapy: price chip = PROSTOKĄT (NIE pill), #additional absolute overflow,
   dublowane udogodnienia systemowe na /offer/N.
   ══════════════════════════════════════════════════════════════ */

/* ── PRICE CHIP = PROSTOKĄT h64 r12 (NIE pill h56) ──
   Systemowy .offer-price ma border-radius:50% (elipsa ~253x150). Nasza klasa
   .fs-price-chip + defeat systemowego kształtu na .offer-price/.object-price. */
.fs-price-chip,
body.page-offer .offer-price,
body.page-offer .object-price {
  border-radius: var(--xx-radius-lg, 12px) !important;
  width: auto !important;
  height: auto !important;
  min-height: 64px !important;
  aspect-ratio: auto !important;
  padding: 12px 26px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── #additional — absolute → static (TRAP: overflow / page-pan) ── */
body.page-offer #additional {
  position: static !important;
}

/* ── AMENITIES-HIDE na /offer/N gdy dublują nasz layout ──
   Gdy budujemy własną siatkę .fs-offer-amenities (JS/body_top), systemowe
   listy udogodnień są duplikatem. Ukryj systemowe TYLKO gdy body ma znacznik
   `.fs-has-amenities` (dodaje go nasz JS po zbudowaniu własnej siatki) —
   inaczej zostają systemowe (bez naszej siatki lepsze niż nic).
   Scope wyłącznie body.page-offer (NIE /offers listing). */
body.page-offer.fs-has-amenities .offer-features,
body.page-offer.fs-has-amenities .amenities,
body.page-offer.fs-has-amenities .features-list,
body.page-offer.fs-has-amenities .object-amenities,
body.page-offer.fs-has-amenities .object-facilities {
  display: none !important;
}

/* nasza siatka udogodnień (gdy budujemy własną) — ikona + etykieta */
.fs-offer-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 24px 0;
  list-style: none;
  padding: 0;
}
.fs-offer-amenities li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--xx-text-soft, #3A3A3A);
}
.fs-offer-amenities svg {
  width: 18px;
  height: 18px;
  color: var(--xx-primary, #CAB48D);
  flex-shrink: 0;
}


/* ── ZAREZERWUJ CTA = WYŚRODKOWANY + BRAND (deliverable, KAŻDY /offer/N) ──
   Struktura systemu: <a.accommodation-reservation> (wrapper, transparent,
   text-align:left) > <span.accommodation-leftbutton> (właściwy przycisk).
   Wrapper tylko CENTRUJE (flex); właściwy przycisk = wypełnienie marką + biała
   czcionka = hierarchia CTA + „kolorystyka gra". MIERZ SPAN (a.accommodation-
   reservation jest transparentny → pomiar po anchorze = fałszywy alarm).
   text-indent kompensuje letter-spacing (tekst optycznie wyśrodkowany).
   Kanon: prosty-wynajem §PW-OFFER (819-858) live-verified deltaX≈0.
   Ref: feedback_idobooking_offer_reservation_cta_center_brand · deliverable N-offer-cta-center. */
html body.page-offer .accommodation-reservation,
html body.page-offer a.accommodation-reservation {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}
html body.page-offer a.accommodation-reservation .accommodation-leftbutton,
html body.page-offer .accommodation-reservation .accommodation-leftbutton,
html body.page-offer .accommodation-leftbutton {
  background: var(--xx-primary, #CAB48D) !important;
  color: var(--fs-charcoal, #1A1917) !important;   /* bylo #FFFFFF (bialy na zlocie 2:1 FAIL) — charcoal 8.7:1 */
  border: none !important;
  border-radius: var(--xx-radius-lg, 12px) !important;
  min-height: 52px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-indent: 0.6px !important;          /* kompensacja letter-spacing */
  font-family: var(--xx-font-heading, 'Playfair Display', serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  box-shadow: none !important;
}
html body.page-offer a.accommodation-reservation:hover .accommodation-leftbutton,
html body.page-offer .accommodation-reservation:hover .accommodation-leftbutton,
html body.page-offer .accommodation-leftbutton:hover {
  background: var(--xx-secondary, #A6894F) !important;
  color: var(--fs-charcoal, #1A1917) !important;
}
/* pozostałe CTA offer („Zobacz na mapie" / „Sprawdź dostępność" / „Zobacz cennik")
   — spójne wyśrodkowanie (system domyślnie justify-content:normal / text-align:left) */
html body.page-offer #generateDirections,
html body.page-offer a.offerCalendar,
html body.page-offer a.to-offer-prices {
  text-align: center !important;
  justify-content: center !important;
}


/* ──────────────────────────────────────────────────────────
   PRZY KOPIOWANIU DO NOWEGO PROJEKTU:
   1. Replace WSZYSTKIE --xx-* na własny prefix klienta (--pk-, --mc-, etc.)
      LUB alias-at-root (scaffold): zostaw --xx-* i zmapuj w :root na paletę.
   2. Upewnij się że masz w :root design tokens:
      --xx-primary (akcent), --xx-text, --xx-text-soft, --xx-text-muted,
      --xx-cream, --xx-white, --xx-bg, --xx-border,
      --xx-font-heading, --xx-font-body,
      --xx-radius, --xx-radius-lg, --xx-shadow,
      --xx-primary-soft (rgba primary 0.15 — dla focus glow)
   3. Po wklejeniu — chrome-devtools MCP verify:
      - body.page-offer h1 visible
      - .tabs display: flex + border-bottom
      - .object-price = PROSTOKĄT (border-radius 12px, NIE 50%)
      - #additional position: static
      - .container-hotspot display: none
   ────────────────────────────────────────────────────────── */



/* ============================================================
   LAYER CMS-SECTIONS (strefy edytowalne klienta — has_cms)
   ============================================================ */

/* ============================================================
   LAYER: CMS-SECTIONS — styl natywnych sekcji CMS IdoBooking
   (lesson 028: text / photo / photo_and_text / text_and_photo /
   double_photo budowane przez panel-fill `sections_pl`).
   ------------------------------------------------------------
   PO CO: sekcje natywne renderuja sie jako czysty Bootstrap
   (`.txt-text > .row > .col-12.col-md-6` z img[data-src] + h2/p/ul
   z WYSIWYG) BEZ zadnej unikalnej klasy. Ta warstwa nadaje im
   brandowy wyglad, zeby tresc edytowana przez KLIENTA w panelu
   wygladala jak sekcje projektowane przez JARVIS.
   ------------------------------------------------------------
   TOKENY: --xx-* (alias-at-root, wzorzec cityofthekings) +
   wlasne --xx-cms-* zdefiniowane nizej (nadpisz w bloku klienta).
   SCOPE: body.page-txt (podstrony /txt) + home „O nas"
   (main .section_sub.container). Sekcje „Kod HTML" (nasz design
   z klasami prefiksowymi) NIE sa dotykane — selektory celuja
   wylacznie w gole rzedy col-12/col-md-6 i WYSIWYG output.
   ============================================================ */

:root {
  --xx-cms-radius: 12px;
  --xx-cms-gap: 56px;                 /* rytm miedzy sekcjami CMS */
  --xx-cms-img-ratio: 4 / 3;          /* stabilny layout przed lazy-load (img bez width/height) */
  --xx-cms-heading-font: inherit;     /* klient: podmien na --<prefix>-font-heading */
}

/* --- rytm sekcji (natywne rzedy w tresci /txt i home O-nas) --- */
body.page-txt .txt-text > .row,
main .section_sub.container .cms .row {
  margin-bottom: var(--xx-cms-gap);
  align-items: center;
  row-gap: 24px;
}
body.page-txt .txt-text > .row:last-child { margin-bottom: 0; }

/* --- zdjecia sekcji: pelna szerokosc kolumny, staly ratio, brand radius ---
   img[data-src] = systemowy lazy-load; aspect-ratio rezerwuje miejsce,
   wiec strona nie skacze przy podmianie data-src -> src. */
body.page-txt .txt-text > .row > [class*="col-"] > img,
main .section_sub.container .cms .row > [class*="col-"] > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--xx-cms-img-ratio);
  object-fit: cover;
  border-radius: var(--xx-cms-radius);
  box-shadow: var(--xx-shadow);
  background: var(--xx-cream);        /* placeholder zanim lazy zaladuje */
}

/* pusty slot (klient jeszcze nie wybral zdjecia — ikona defaulticon):
   pokaz elegancki kremowy placeholder zamiast rozciagnietej ikonki. */
body.page-txt .txt-text > .row > [class*="col-"] > img[src*="defaulticon"],
body.page-txt .txt-text > .row > [class*="col-"] > img[data-src*="defaulticon"] {
  object-fit: none;                   /* ikonka w naturalnym rozmiarze na srodku */
  opacity: 0.35;
}

/* --- typografia WYSIWYG: gole h2/h3/p/ul maja wygladac jak sekcje JARVIS --- */
body.page-txt .txt-text > .row h2,
main .section_sub.container .cms .row h2 {
  font-family: var(--xx-cms-heading-font);
  color: var(--xx-text);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  margin: 0 0 16px;
}
body.page-txt .txt-text > .row h3,
main .section_sub.container .cms .row h3 {
  font-family: var(--xx-cms-heading-font);
  color: var(--xx-text);
  font-size: clamp(20px, 2.2vw, 26px);
  margin: 0 0 10px;
}
body.page-txt .txt-text > .row p,
main .section_sub.container .cms .row p {
  color: var(--xx-text-soft);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 14px;
}
body.page-txt .txt-text > .row ul,
main .section_sub.container .cms .row ul {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
}
body.page-txt .txt-text > .row ul li,
main .section_sub.container .cms .row ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  color: var(--xx-text-soft);
  font-size: 16.5px;
  line-height: 1.6;
}
body.page-txt .txt-text > .row ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 2px;
  background: var(--xx-secondary);
}
body.page-txt .txt-text > .row a,
main .section_sub.container .cms .row a {
  color: var(--xx-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- defensywa WYSIWYG: klient moze wkleic tekst z Worda z inline font-family;
   fonty przywracamy do brandu (kolorow celowo NIE nadpisujemy — swiadoma swoboda). --- */
body.page-txt .txt-text > .row [style*="font-family"],
main .section_sub.container .cms .row [style*="font-family"] {
  font-family: inherit !important;
}

/* --- skalowanie uniwersalne: zaden obraz sekcji (takze wklejony recznie w WYSIWYG)
   nie rozpycha kolumny — klient moze wrzucic dowolnie szeroki/wysoki plik. --- */
body.page-txt .txt-text > .row img,
main .section_sub.container .cms .row img {
  max-width: 100%;
  height: auto;
}

/* --- mobile: kolumny stackuja (Bootstrap), foto nad tekstem dostaje oddech --- */
@media (max-width: 767px) {
  body.page-txt .txt-text > .row { margin-bottom: 40px; }
  body.page-txt .txt-text > .row h2 { font-size: 26px; }
}



/* ============================================================
   LAYER FULL-BLEED §19 (100vw sekcje)
   ============================================================ */

/* ==========================================================================
   LAYER — FULL-BLEED (§19 / TRAP-14) — JEDEN utrzymywany blok
   --------------------------------------------------------------------------
   PROBLEM (TRAP-14): default13 wstrzykuje body_top w
     <div class="section_sub container">  (max-width ~1170px, margines po bokach).
   Bez wyrwania na 100vw pasy sekcji (hero / band / cta / stats) siedzą w
   ~1140px kolumnie zamiast pełnej szerokości → body-bg prześwituje po bokach.

   ROZWIĄZANIE — dwuwarstwowe:
     (a) KLASA UNIWERSALNA `.fs-fullbleed` — nosi ją KAŻDY wrapper sekcji
         w body_top (scaffold dodaje ją do szkieletów). Nowa sekcja =
         dopisz klasę w HTML, ZERO zmian tutaj. To jest domyślna droga.
     (b) JAWNA LISTA selektorów systemowych/nazwanych sekcji — safety-net dla
         markupu bez klasy uniwersalnej. Skonsolidowana z L1/L3/L4 + klientów
         live-verified (cityofthekings F18, easyrent). DOPISZ TU nową sekcję,
         jeśli z jakiegoś powodu nie może nosić `.fs-fullbleed`.

   Źródła kanoniczne: easyrent §ER-FULLBLEED (10404+), cityofthekings .ck-section.

   Krytyczne detale:
     - `overflow-x: clip` (NIE hidden) na body per-page — clip NIE psuje
       position:sticky (np. sticky bookbox na /offer/N). hidden by je złamał.
     - full-bleed NIGDY na `.container` systemowym — złamałby layout treści
       (formularze, listy, siatki systemowe liczą na 1170px kontener).
     - wewnętrzne wrappery (`__inner`) trzymają treść na czytelnej szerokości.

   PARAMETRYZACJA: `fs` → prefiks klienta (scaffold). Tokeny opcjonalne.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Guard poziomego scrolla — clip zamiast hidden (sticky-safe).
      Per-page scope: nie ruszamy overflow globalnie na html/body poza
      znanymi page-* (bezpieczniejsze niż `html,body{overflow-x:clip}`
      które bije systemowe layouty spoza tych podstron).
   -------------------------------------------------------------------------- */
body.page-index,
body.page-offers,
body.page-offer,
body.page-txt,
body.page-contact,
body.page-news {
  overflow-x: clip !important;
}

/* --------------------------------------------------------------------------
   (a) KLASA UNIWERSALNA — domyślny mechanizm full-bleed dla wrapperów body_top.
      Wyrywa element z kontenera 1170px na pełną szerokość viewportu.
      `calc(50% - 50vw)` = połowa różnicy między 100% rodzica a 100vw (ujemny
      margines) → element rozlewa się symetrycznie do krawędzi ekranu.
   -------------------------------------------------------------------------- */
.fs-fullbleed {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* Wewnętrzny wrapper treści — trzyma tekst/siatkę na czytelnej szerokości
   wewnątrz pełnoszerokiego pasa. Padding boczny „przykleja" treść do kolumny
   1240px, ale tło (na rodzicu .fs-fullbleed) sięga krawędzi ekranu. */
.fs-fullbleed > .fs-inner,
.fs-inner {
  max-width: var(--fs-maxw, 1240px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   (b) JAWNA LISTA SEKCJI PEŁNEJ SZEROKOŚCI (safety-net)
      Skonsolidowana z klientów live-verified. Selektory z `.fs-` mają
      prefiks podmieniany przez scaffold. Reguła TYLKO ujemny margines +
      100vw — bez tła/paddingu (te definiuje sekcja per vibe).

      ┌────────────────────────────────────────────────────────────────┐
      │ DOPISZ TU nową sekcję pełnej szerokości, jeśli jej wrapper NIE   │
      │ może nosić klasy `.fs-fullbleed`. Preferuj jednak klasę (a).│
      └────────────────────────────────────────────────────────────────┘
   -------------------------------------------------------------------------- */
.fs-section,
.fs-hero,
.fs-hero-lite,
.fs-pagehead,
.fs-pagehero,
.fs-band,
.fs-statsband,
.fs-trust,
.fs-cta,
.fs-darkhero,
.fs-storyhero,
.fs-splithero,
.fs-keyrow,
.fs-contact,
.fs-filterbar,
.fs-results-head,
.fs-breadcrumb,
.fs-pagination,
.fs-footer {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* Sekcje z listy (b) które renderują treść bez własnego `__inner`
   (np. siatki key-row / hero split) — wyrównaj padding do kolumny 1240px,
   żeby treść nie kleiła się do krawędzi ekranu. `max()` gwarantuje min.
   oddech 20-48px nawet na wąskich ekranach. */
.fs-storyhero,
.fs-splithero,
.fs-keyrow,
.fs-contact,
.fs-filterbar,
.fs-results-head,
.fs-breadcrumb {
  padding-left: max(clamp(20px, 4vw, 48px), calc((100vw - var(--fs-maxw, 1240px)) / 2)) !important;
  padding-right: max(clamp(20px, 4vw, 48px), calc((100vw - var(--fs-maxw, 1240px)) / 2)) !important;
}

/* --------------------------------------------------------------------------
   Mobile — full-bleed liczy też szerokość paska przewijania (100vw > widoczna
   szerokość gdy scrollbar zajmuje miejsce), co dawało 1-2px poziomego rozjazdu.
   overflow-x:clip (sekcja 0) go tnie, ale twardo kapujemy szerokość na
   dokumencie, żeby nie było nawet subpikselowego dryfu.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }
}



/* ============================================================
   LAYER 4 — VARIETY (warianty sekcji)
   ============================================================ */

/* === §VIBE-VARIETY (L4): usuń nieużywane warianty === */
/* ═══════════════════════════════════════════════════════════════
   LAYER 4 — VARIETY PATTERNS (70 wariantów sekcji)
   Modular section styles. Aktywacja: <section class="xx-hero xx-hero--asymmetric-grid">.
   JARVIS pickuje 1 wariant per sekcja per klient (z vibe-presets.json).

   Sections x variants:
   - Hero (10): asymmetric-grid, full-bleed-image, split-half, centered-typography,
     overlap-image, video-bg, parallax-scroll, slider-multi, mosaic-collage, minimal-text
   - About (8): asym-text-img, split-half, full-width-quote, timeline-vertical,
     stat-row-cards, image-mosaic-text, story-narrative, founder-portrait-quote
   - Gallery (8): asym-mosaic, masonry, slider-fullscreen, grid-equal,
     polaroid-stack, isotope-filter, lightbox-thumbs, carousel-3-cards
   - CTA (8): dark-bold, gradient, full-bleed-image-overlay, minimal-text,
     side-image, sticky-bottom-bar, countdown-timer, multi-button-row
   - Features (6): icon-grid-4col, text-list-numbered, alternating-rows,
     comparison-table, cards-pop-hover, accordion-vertical
   - Testimonials (6): slider-fullwidth, grid-3col, single-quote-big,
     video-grid, masonry-mixed, carousel-photos
   - Location/Map (5): full-bleed-map, split-text-map, info-cards-map,
     dual-location-tabs, interactive-points
   - FAQ (4): accordion-classic, two-column-grid, sidebar-search, tabs-categorized
   - Navigation (8): transparent-overlay, solid, megamenu, side-drawer,
     scroll-spy, hamburger-only, sticky-compact, pill-tabs
   - Footer (7): minimal, compact, dark-rich, image-bg, multi-column, centered, social-focus

   Total: 70 variants
   ═══════════════════════════════════════════════════════════════ */

/* ╔════════════════════════════════════════════════════════════╗
   ║  HERO SECTIONS (10 variants)                                ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────
   HERO 1/10 — asymmetric-grid
   Use: luxury-heritage, industrial-loft
   Layout: 3:2 grid, big image left, text right
   ────────────────────────────────────────────────────────── */
.fs-hero.fs-hero--asymmetric-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(24px, 4vw, 64px);
  min-height: 80vh;
  align-items: center;
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  background: var(--xx-cream);
}
.fs-hero--asymmetric-grid .fs-hero__media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
  box-shadow: var(--xx-shadow-lg);
}
.fs-hero--asymmetric-grid .fs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-hero--asymmetric-grid .fs-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fs-hero--asymmetric-grid .fs-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--xx-primary);
  margin-bottom: 16px;
}
.fs-hero--asymmetric-grid .fs-hero__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(36px, 5vw, 64px);
  margin: 0 0 24px;
  line-height: 1.1;
  color: var(--xx-text);
}
.fs-hero--asymmetric-grid .fs-hero__lead {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--xx-text-soft);
  margin: 0 0 32px;
  line-height: 1.6;
}
.fs-hero--asymmetric-grid .fs-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  transition: background 0.3s var(--xx-ease);
  width: fit-content;
}
.fs-hero--asymmetric-grid .fs-hero__cta:hover {
  background: var(--xx-secondary);
}
@media (max-width: 991px) {
  .fs-hero.fs-hero--asymmetric-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .fs-hero--asymmetric-grid .fs-hero__media {
    aspect-ratio: 4/3;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO 2/10 — full-bleed-image
   Use: cinematic, dramatic, resort
   Layout: full viewport image, centered overlay text
   ────────────────────────────────────────────────────────── */
.fs-hero.fs-hero--full-bleed-image {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
.fs-hero--full-bleed-image .fs-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fs-hero--full-bleed-image .fs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-hero--full-bleed-image .fs-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 100%);
}
.fs-hero--full-bleed-image .fs-hero__text {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: 0 clamp(20px, 4vw, 48px);
}
.fs-hero--full-bleed-image .fs-hero__eyebrow {
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 20px;
}
.fs-hero--full-bleed-image .fs-hero__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(42px, 7vw, 88px);
  line-height: 1.05;
  margin: 0 0 24px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.fs-hero--full-bleed-image .fs-hero__lead {
  font-size: clamp(17px, 1.5vw, 22px);
  opacity: 0.95;
  margin: 0 0 40px;
  line-height: 1.55;
}
.fs-hero--full-bleed-image .fs-hero__cta {
  display: inline-block;
  padding: 18px 42px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  letter-spacing: 1px;
  transition: transform 0.3s var(--xx-ease), background 0.3s var(--xx-ease);
}
.fs-hero--full-bleed-image .fs-hero__cta:hover {
  background: var(--xx-secondary);
  transform: translateY(-2px);
}
@media (max-width: 991px) {
  .fs-hero.fs-hero--full-bleed-image {
    min-height: 85vh;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO 3/10 — split-half
   Use: editorial, boutique, balanced
   Layout: 50/50 split, image one side, text other
   ────────────────────────────────────────────────────────── */
.fs-hero.fs-hero--split-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh;
  background: var(--xx-bg);
}
.fs-hero--split-half .fs-hero__media {
  position: relative;
  overflow: hidden;
}
.fs-hero--split-half .fs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-hero--split-half .fs-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 96px);
}
.fs-hero--split-half .fs-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--xx-primary);
  margin-bottom: 20px;
}
.fs-hero--split-half .fs-hero__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.1;
  margin: 0 0 24px;
  color: var(--xx-text);
}
.fs-hero--split-half .fs-hero__lead {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--xx-text-soft);
  margin: 0 0 36px;
  line-height: 1.7;
}
.fs-hero--split-half .fs-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  width: fit-content;
  transition: background 0.3s var(--xx-ease);
}
.fs-hero--split-half .fs-hero__cta:hover {
  background: var(--xx-secondary);
}
@media (max-width: 991px) {
  .fs-hero.fs-hero--split-half {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .fs-hero--split-half .fs-hero__media {
    aspect-ratio: 16/10;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO 4/10 — centered-typography
   Use: minimal, typographic, editorial
   Layout: pure text, no image, centered
   ────────────────────────────────────────────────────────── */
.fs-hero.fs-hero--centered-typography {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 48px);
  background: var(--xx-cream);
}
.fs-hero--centered-typography .fs-hero__text {
  max-width: 880px;
}
.fs-hero--centered-typography .fs-hero__eyebrow {
  font-size: 13px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--xx-primary);
  margin-bottom: 32px;
}
.fs-hero--centered-typography .fs-hero__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  color: var(--xx-text);
}
.fs-hero--centered-typography .fs-hero__lead {
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--xx-text-soft);
  margin: 0 auto 44px;
  line-height: 1.65;
  max-width: 640px;
}
.fs-hero--centered-typography .fs-hero__cta {
  display: inline-block;
  padding: 16px 36px;
  background: transparent;
  color: var(--xx-primary);
  text-decoration: none;
  border: 2px solid var(--xx-primary);
  border-radius: var(--xx-radius);
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s var(--xx-ease);
}
.fs-hero--centered-typography .fs-hero__cta:hover {
  background: var(--xx-primary);
  color: #fff;
}
@media (max-width: 991px) {
  .fs-hero.fs-hero--centered-typography {
    min-height: 60vh;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO 5/10 — overlap-image
   Use: modern, layered, magazine
   Layout: image overlaps text box (negative margin)
   ────────────────────────────────────────────────────────── */
.fs-hero.fs-hero--overlap-image {
  position: relative;
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 48px);
  background: var(--xx-cream);
}
.fs-hero--overlap-image .fs-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}
.fs-hero--overlap-image .fs-hero__media {
  position: relative;
  z-index: 1;
  aspect-ratio: 4/5;
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
  box-shadow: var(--xx-shadow-lg);
}
.fs-hero--overlap-image .fs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-hero--overlap-image .fs-hero__text {
  position: relative;
  z-index: 2;
  background: var(--xx-bg);
  padding: clamp(32px, 4vw, 56px);
  margin-left: -8%;
  border-radius: var(--xx-radius-lg);
  box-shadow: var(--xx-shadow-md);
}
.fs-hero--overlap-image .fs-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--xx-primary);
  margin-bottom: 16px;
}
.fs-hero--overlap-image .fs-hero__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  margin: 0 0 20px;
  color: var(--xx-text);
}
.fs-hero--overlap-image .fs-hero__lead {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--xx-text-soft);
  margin: 0 0 28px;
  line-height: 1.65;
}
.fs-hero--overlap-image .fs-hero__cta {
  display: inline-block;
  padding: 14px 30px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  transition: background 0.3s var(--xx-ease);
}
.fs-hero--overlap-image .fs-hero__cta:hover {
  background: var(--xx-secondary);
}
@media (max-width: 991px) {
  .fs-hero--overlap-image .fs-hero__inner {
    grid-template-columns: 1fr;
  }
  .fs-hero--overlap-image .fs-hero__text {
    margin-left: 0;
    margin-top: -40px;
    width: 92%;
    margin-right: auto;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO 6/10 — video-bg
   Use: cinematic, dynamic, premium
   Layout: video background + centered overlay text
   ────────────────────────────────────────────────────────── */
.fs-hero.fs-hero--video-bg {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.fs-hero--video-bg .fs-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fs-hero--video-bg .fs-hero__media video,
.fs-hero--video-bg .fs-hero__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.fs-hero--video-bg .fs-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
}
.fs-hero--video-bg .fs-hero__text {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 clamp(20px, 4vw, 48px);
}
.fs-hero--video-bg .fs-hero__eyebrow {
  font-size: 13px;
  letter-spacing: 5px;
  text-transform: uppercase;
  opacity: 0.95;
  margin-bottom: 24px;
}
.fs-hero--video-bg .fs-hero__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1.05;
  margin: 0 0 28px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.fs-hero--video-bg .fs-hero__lead {
  font-size: clamp(17px, 1.5vw, 22px);
  margin: 0 0 40px;
  line-height: 1.6;
  opacity: 0.95;
}
.fs-hero--video-bg .fs-hero__cta {
  display: inline-block;
  padding: 18px 44px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  border-radius: var(--xx-radius);
  font-weight: 600;
  letter-spacing: 1px;
  backdrop-filter: blur(8px);
  transition: all 0.3s var(--xx-ease);
}
.fs-hero--video-bg .fs-hero__cta:hover {
  background: #fff;
  color: var(--xx-text);
}
@media (max-width: 991px) {
  .fs-hero.fs-hero--video-bg {
    min-height: 80vh;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO 7/10 — parallax-scroll
   Use: scenic, immersive, storytelling
   Layout: parallax background (background-attachment: fixed)
   ────────────────────────────────────────────────────────── */
.fs-hero.fs-hero--parallax-scroll {
  position: relative;
  min-height: 95vh;
  display: flex;
  align-items: center;
  background-image: var(--xx-hero-bg, linear-gradient(135deg, #333, #111));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #fff;
  overflow: hidden;
}
.fs-hero--parallax-scroll::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 0;
}
.fs-hero--parallax-scroll .fs-hero__text {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 0 clamp(20px, 6vw, 80px);
}
.fs-hero--parallax-scroll .fs-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 20px;
}
.fs-hero--parallax-scroll .fs-hero__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(40px, 6vw, 78px);
  line-height: 1.08;
  margin: 0 0 24px;
}
.fs-hero--parallax-scroll .fs-hero__lead {
  font-size: clamp(16px, 1.3vw, 20px);
  opacity: 0.95;
  margin: 0 0 36px;
  line-height: 1.65;
}
.fs-hero--parallax-scroll .fs-hero__cta {
  display: inline-block;
  padding: 16px 36px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  transition: transform 0.3s var(--xx-ease), background 0.3s var(--xx-ease);
}
.fs-hero--parallax-scroll .fs-hero__cta:hover {
  background: var(--xx-secondary);
  transform: translateY(-2px);
}
@media (max-width: 991px) {
  .fs-hero.fs-hero--parallax-scroll {
    background-attachment: scroll;
    min-height: 75vh;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO 8/10 — slider-multi
   Use: resort, gallery-first, multi-property
   Layout: slick/swiper carousel with multiple full slides
   ────────────────────────────────────────────────────────── */
.fs-hero.fs-hero--slider-multi {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
  background: var(--xx-text);
}
.fs-hero--slider-multi .fs-hero__slider {
  position: relative;
  height: 90vh;
}
.fs-hero--slider-multi .fs-hero__slide {
  position: relative;
  height: 90vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.fs-hero--slider-multi .fs-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fs-hero--slider-multi .fs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-hero--slider-multi .fs-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 60%);
}
.fs-hero--slider-multi .fs-hero__text {
  position: relative;
  z-index: 1;
  padding: 0 clamp(20px, 6vw, 80px) clamp(60px, 10vw, 120px);
  max-width: 800px;
}
.fs-hero--slider-multi .fs-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 16px;
}
.fs-hero--slider-multi .fs-hero__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.1;
  margin: 0 0 20px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.fs-hero--slider-multi .fs-hero__lead {
  font-size: clamp(15px, 1.3vw, 19px);
  opacity: 0.95;
  margin: 0 0 28px;
  line-height: 1.6;
}
.fs-hero--slider-multi .fs-hero__cta {
  display: inline-block;
  padding: 14px 32px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  transition: background 0.3s var(--xx-ease);
}
.fs-hero--slider-multi .fs-hero__cta:hover {
  background: var(--xx-secondary);
}
.fs-hero--slider-multi .slick-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.fs-hero--slider-multi .slick-dots li button {
  width: 32px;
  height: 3px;
  background: rgba(255,255,255,0.4);
  border: none;
  font-size: 0;
  cursor: pointer;
  transition: background 0.3s var(--xx-ease);
}
.fs-hero--slider-multi .slick-dots li.slick-active button {
  background: #fff;
}
@media (max-width: 991px) {
  .fs-hero.fs-hero--slider-multi,
  .fs-hero--slider-multi .fs-hero__slider,
  .fs-hero--slider-multi .fs-hero__slide {
    min-height: 75vh;
    height: 75vh;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO 9/10 — mosaic-collage
   Use: gallery-rich, multi-shot, artistic
   Layout: 4-image collage grid with text overlay
   ────────────────────────────────────────────────────────── */
.fs-hero.fs-hero--mosaic-collage {
  position: relative;
  min-height: 100vh;
  padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
  background: var(--xx-cream);
  overflow: hidden;
}
.fs-hero--mosaic-collage .fs-hero__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.fs-hero--mosaic-collage .fs-hero__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  aspect-ratio: 1;
}
.fs-hero--mosaic-collage .fs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--xx-radius);
}
.fs-hero--mosaic-collage .fs-hero__media img:nth-child(1) {
  grid-row: 1 / 3;
  border-radius: var(--xx-radius-lg);
}
.fs-hero--mosaic-collage .fs-hero__text {
  padding: clamp(20px, 4vw, 40px);
}
.fs-hero--mosaic-collage .fs-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--xx-primary);
  margin-bottom: 16px;
}
.fs-hero--mosaic-collage .fs-hero__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.1;
  margin: 0 0 24px;
  color: var(--xx-text);
}
.fs-hero--mosaic-collage .fs-hero__lead {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--xx-text-soft);
  margin: 0 0 32px;
  line-height: 1.65;
}
.fs-hero--mosaic-collage .fs-hero__cta {
  display: inline-block;
  padding: 14px 30px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  transition: background 0.3s var(--xx-ease);
}
.fs-hero--mosaic-collage .fs-hero__cta:hover {
  background: var(--xx-secondary);
}
@media (max-width: 991px) {
  .fs-hero--mosaic-collage .fs-hero__inner {
    grid-template-columns: 1fr;
  }
  .fs-hero--mosaic-collage .fs-hero__media {
    aspect-ratio: 4/3;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO 10/10 — minimal-text
   Use: editorial, austere, brutalist
   Layout: very minimal — small headline, large body type
   ────────────────────────────────────────────────────────── */
.fs-hero.fs-hero--minimal-text {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: clamp(80px, 12vw, 160px) clamp(20px, 6vw, 80px);
  background: var(--xx-bg);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.fs-hero--minimal-text .fs-hero__text {
  max-width: 900px;
}
.fs-hero--minimal-text .fs-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--xx-text-muted);
  margin-bottom: 32px;
}
.fs-hero--minimal-text .fs-hero__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.3;
  margin: 0 0 24px;
  color: var(--xx-text);
  font-weight: 500;
}
.fs-hero--minimal-text .fs-hero__lead {
  font-size: clamp(20px, 2vw, 28px);
  color: var(--xx-text);
  margin: 0 0 40px;
  line-height: 1.45;
  font-weight: 300;
}
.fs-hero--minimal-text .fs-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--xx-primary);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--xx-primary);
  padding-bottom: 4px;
  transition: gap 0.3s var(--xx-ease);
}
.fs-hero--minimal-text .fs-hero__cta:hover {
  gap: 16px;
}
@media (max-width: 991px) {
  .fs-hero.fs-hero--minimal-text {
    min-height: 50vh;
  }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  ABOUT SECTIONS (8 variants)                                ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────
   ABOUT 1/8 — asym-text-img
   Use: editorial, magazine, story-led
   Layout: asymmetric 2:3 grid, text on left smaller
   ────────────────────────────────────────────────────────── */
.fs-about.fs-about--asym-text-img {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
}
.fs-about--asym-text-img .fs-about__content {
  display: flex;
  flex-direction: column;
}
.fs-about--asym-text-img .fs-about__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  margin: 0 0 24px;
  color: var(--xx-text);
}
.fs-about--asym-text-img .fs-about__body {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--xx-text-soft);
  line-height: 1.75;
  margin: 0;
}
.fs-about--asym-text-img .fs-about__body p {
  margin: 0 0 18px;
}
.fs-about--asym-text-img .fs-about__media {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
  box-shadow: var(--xx-shadow-md);
}
.fs-about--asym-text-img .fs-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991px) {
  .fs-about.fs-about--asym-text-img {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   ABOUT 2/8 — split-half
   Use: balanced, classical
   Layout: 50/50 image + text
   ────────────────────────────────────────────────────────── */
.fs-about.fs-about--split-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
}
.fs-about--split-half .fs-about__media {
  aspect-ratio: 1;
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
  box-shadow: var(--xx-shadow-md);
}
.fs-about--split-half .fs-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-about--split-half .fs-about__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(32px, 4vw, 50px);
  margin: 0 0 24px;
  line-height: 1.15;
  color: var(--xx-text);
}
.fs-about--split-half .fs-about__body {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--xx-text-soft);
  line-height: 1.75;
}
.fs-about--split-half .fs-about__body p {
  margin: 0 0 16px;
}
@media (max-width: 991px) {
  .fs-about.fs-about--split-half {
    grid-template-columns: 1fr;
  }
  .fs-about--split-half .fs-about__media {
    aspect-ratio: 4/3;
  }
}

/* ──────────────────────────────────────────────────────────
   ABOUT 3/8 — full-width-quote
   Use: brand voice, manifesto, hero-quote
   Layout: huge centered quote, no image
   ────────────────────────────────────────────────────────── */
.fs-about.fs-about--full-width-quote {
  padding: clamp(80px, 12vw, 160px) clamp(20px, 6vw, 80px);
  background: var(--xx-cream);
  text-align: center;
}
.fs-about--full-width-quote .fs-about__content {
  max-width: 1000px;
  margin: 0 auto;
}
.fs-about--full-width-quote .fs-about__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.3;
  margin: 0 0 32px;
  color: var(--xx-text);
  font-style: italic;
  font-weight: 400;
  position: relative;
}
.fs-about--full-width-quote .fs-about__title::before {
  content: '\201C';
  display: block;
  font-size: clamp(80px, 12vw, 160px);
  line-height: 0.5;
  color: var(--xx-primary);
  margin-bottom: 24px;
  font-family: Georgia, serif;
}
.fs-about--full-width-quote .fs-about__body {
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--xx-text-muted);
}
@media (max-width: 991px) {
  .fs-about.fs-about--full-width-quote {
    padding: clamp(60px, 10vw, 100px) clamp(20px, 4vw, 32px);
  }
}

/* ──────────────────────────────────────────────────────────
   ABOUT 4/8 — timeline-vertical
   Use: heritage, story, history
   Layout: vertical timeline with milestones
   ────────────────────────────────────────────────────────── */
.fs-about.fs-about--timeline-vertical {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 900px;
  margin: 0 auto;
}
.fs-about--timeline-vertical .fs-about__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(32px, 4vw, 48px);
  text-align: center;
  margin: 0 0 60px;
  color: var(--xx-text);
}
.fs-about--timeline-vertical .fs-about__content {
  position: relative;
  padding-left: 40px;
}
.fs-about--timeline-vertical .fs-about__content::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--xx-primary);
  opacity: 0.3;
}
.fs-about--timeline-vertical .fs-about__item {
  position: relative;
  padding: 0 0 40px;
}
.fs-about--timeline-vertical .fs-about__item::before {
  content: '';
  position: absolute;
  left: -36px;
  top: 8px;
  width: 14px;
  height: 14px;
  background: var(--xx-primary);
  border: 3px solid var(--xx-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--xx-primary);
}
.fs-about--timeline-vertical .fs-about__year {
  font-family: var(--xx-font-heading);
  font-size: 22px;
  color: var(--xx-primary);
  margin: 0 0 8px;
  font-weight: 700;
}
.fs-about--timeline-vertical .fs-about__body {
  font-size: 16px;
  color: var(--xx-text-soft);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 991px) {
  .fs-about--timeline-vertical .fs-about__content {
    padding-left: 32px;
  }
}

/* ──────────────────────────────────────────────────────────
   ABOUT 5/8 — stat-row-cards
   Use: data-driven, established, credibility
   Layout: 4-column stat cards beneath intro
   ────────────────────────────────────────────────────────── */
.fs-about.fs-about--stat-row-cards {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
}
.fs-about--stat-row-cards .fs-about__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(32px, 4vw, 50px);
  margin: 0 0 24px;
  color: var(--xx-text);
}
.fs-about--stat-row-cards .fs-about__body {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--xx-text-soft);
  max-width: 740px;
  margin: 0 auto 64px;
  line-height: 1.7;
}
.fs-about--stat-row-cards .fs-about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.fs-about--stat-row-cards .fs-about__stat {
  padding: clamp(24px, 3vw, 40px) 20px;
  background: var(--xx-cream);
  border-radius: var(--xx-radius-lg);
  transition: transform 0.3s var(--xx-ease);
}
.fs-about--stat-row-cards .fs-about__stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--xx-shadow-md);
}
.fs-about--stat-row-cards .fs-about__stat-number {
  font-family: var(--xx-font-heading);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  color: var(--xx-primary);
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}
.fs-about--stat-row-cards .fs-about__stat-label {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--xx-text-soft);
}
@media (max-width: 991px) {
  .fs-about--stat-row-cards .fs-about__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ──────────────────────────────────────────────────────────
   ABOUT 6/8 — image-mosaic-text
   Use: gallery-led, visual brand
   Layout: 3-image mosaic + text below
   ────────────────────────────────────────────────────────── */
.fs-about.fs-about--image-mosaic-text {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
}
.fs-about--image-mosaic-text .fs-about__media {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: clamp(360px, 50vw, 560px);
  margin-bottom: 60px;
}
.fs-about--image-mosaic-text .fs-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--xx-radius);
}
.fs-about--image-mosaic-text .fs-about__media img:nth-child(1) {
  grid-row: 1 / 3;
  border-radius: var(--xx-radius-lg);
}
.fs-about--image-mosaic-text .fs-about__content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.fs-about--image-mosaic-text .fs-about__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(32px, 4vw, 52px);
  margin: 0 0 24px;
  color: var(--xx-text);
}
.fs-about--image-mosaic-text .fs-about__body {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--xx-text-soft);
  line-height: 1.75;
}
.fs-about--image-mosaic-text .fs-about__body p {
  margin: 0 0 18px;
}
@media (max-width: 991px) {
  .fs-about--image-mosaic-text .fs-about__media {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
  }
  .fs-about--image-mosaic-text .fs-about__media img:nth-child(1) {
    grid-row: 1;
    grid-column: 1 / 3;
    aspect-ratio: 16/9;
  }
}

/* ──────────────────────────────────────────────────────────
   ABOUT 7/8 — story-narrative
   Use: long-form, storytelling, heritage
   Layout: drop-cap intro + flowing paragraphs
   ────────────────────────────────────────────────────────── */
.fs-about.fs-about--story-narrative {
  padding: clamp(80px, 12vw, 140px) clamp(20px, 6vw, 80px);
  max-width: 760px;
  margin: 0 auto;
}
.fs-about--story-narrative .fs-about__eyebrow {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--xx-primary);
  margin-bottom: 16px;
  text-align: center;
}
.fs-about--story-narrative .fs-about__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.1;
  margin: 0 0 48px;
  color: var(--xx-text);
  text-align: center;
}
.fs-about--story-narrative .fs-about__divider {
  width: 60px;
  height: 2px;
  background: var(--xx-primary);
  margin: 0 auto 48px;
}
.fs-about--story-narrative .fs-about__body {
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--xx-text);
  line-height: 1.85;
  font-family: var(--xx-font-body);
}
.fs-about--story-narrative .fs-about__body p {
  margin: 0 0 24px;
}
.fs-about--story-narrative .fs-about__body p:first-of-type::first-letter {
  font-family: var(--xx-font-heading);
  font-size: 76px;
  float: left;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--xx-primary);
  font-weight: 700;
}
@media (max-width: 991px) {
  .fs-about.fs-about--story-narrative {
    padding: clamp(60px, 10vw, 100px) clamp(20px, 4vw, 32px);
  }
}

/* ──────────────────────────────────────────────────────────
   ABOUT 8/8 — founder-portrait-quote
   Use: personal brand, owner-led, boutique
   Layout: square portrait + quote + name
   ────────────────────────────────────────────────────────── */
.fs-about.fs-about--founder-portrait-quote {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1200px;
  margin: 0 auto;
  background: var(--xx-cream);
  border-radius: var(--xx-radius-lg);
}
.fs-about--founder-portrait-quote .fs-about__media {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--xx-shadow-md);
}
.fs-about--founder-portrait-quote .fs-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-about--founder-portrait-quote .fs-about__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(22px, 2.4vw, 32px);
  font-style: italic;
  line-height: 1.4;
  margin: 0 0 28px;
  color: var(--xx-text);
  font-weight: 400;
}
.fs-about--founder-portrait-quote .fs-about__title::before {
  content: '\201C';
  color: var(--xx-primary);
  margin-right: 4px;
}
.fs-about--founder-portrait-quote .fs-about__title::after {
  content: '\201D';
  color: var(--xx-primary);
  margin-left: 4px;
}
.fs-about--founder-portrait-quote .fs-about__author {
  font-family: var(--xx-font-heading);
  font-size: 20px;
  color: var(--xx-text);
  margin: 0 0 4px;
}
.fs-about--founder-portrait-quote .fs-about__role {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--xx-primary);
}
@media (max-width: 991px) {
  .fs-about.fs-about--founder-portrait-quote {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .fs-about--founder-portrait-quote .fs-about__media {
    max-width: 260px;
    margin: 0 auto;
  }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  GALLERY SECTIONS (8 variants)                              ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────
   GALLERY 1/8 — asym-mosaic
   Use: editorial, magazine, varied
   Layout: asymmetric grid with mixed sizes
   ────────────────────────────────────────────────────────── */
.fs-gallery.fs-gallery--asym-mosaic {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
}
.fs-gallery--asym-mosaic .fs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.fs-gallery--asym-mosaic .fs-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--xx-radius);
  cursor: pointer;
}
.fs-gallery--asym-mosaic .fs-gallery__item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.fs-gallery--asym-mosaic .fs-gallery__item:nth-child(4) {
  grid-column: 3 / 5;
  grid-row: 2 / 4;
}
.fs-gallery--asym-mosaic .fs-gallery__item:nth-child(6) {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}
.fs-gallery--asym-mosaic .fs-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--xx-ease);
}
.fs-gallery--asym-mosaic .fs-gallery__item:hover img {
  transform: scale(1.05);
}
.fs-gallery--asym-mosaic .fs-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s var(--xx-ease);
}
.fs-gallery--asym-mosaic .fs-gallery__item:hover .fs-gallery__caption {
  opacity: 1;
}
@media (max-width: 991px) {
  .fs-gallery--asym-mosaic .fs-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .fs-gallery--asym-mosaic .fs-gallery__item:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ──────────────────────────────────────────────────────────
   GALLERY 2/8 — masonry
   Use: Pinterest-style, varied heights
   Layout: CSS columns masonry
   ────────────────────────────────────────────────────────── */
.fs-gallery.fs-gallery--masonry {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
}
.fs-gallery--masonry .fs-gallery__grid {
  column-count: 4;
  column-gap: 16px;
}
.fs-gallery--masonry .fs-gallery__item {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: var(--xx-radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.fs-gallery--masonry .fs-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s var(--xx-ease);
}
.fs-gallery--masonry .fs-gallery__item:hover img {
  transform: scale(1.04);
}
.fs-gallery--masonry .fs-gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.3s var(--xx-ease);
}
.fs-gallery--masonry .fs-gallery__item:hover .fs-gallery__caption {
  opacity: 1;
}
@media (max-width: 1200px) {
  .fs-gallery--masonry .fs-gallery__grid {
    column-count: 3;
  }
}
@media (max-width: 768px) {
  .fs-gallery--masonry .fs-gallery__grid {
    column-count: 2;
  }
}
@media (max-width: 480px) {
  .fs-gallery--masonry .fs-gallery__grid {
    column-count: 1;
  }
}

/* ──────────────────────────────────────────────────────────
   GALLERY 3/8 — slider-fullscreen
   Use: cinematic, immersive
   Layout: full-screen carousel with arrows
   ────────────────────────────────────────────────────────── */
.fs-gallery.fs-gallery--slider-fullscreen {
  position: relative;
  background: var(--xx-text);
  overflow: hidden;
}
.fs-gallery--slider-fullscreen .fs-gallery__grid {
  position: relative;
  height: 80vh;
}
.fs-gallery--slider-fullscreen .fs-gallery__item {
  position: relative;
  height: 80vh;
  width: 100%;
}
.fs-gallery--slider-fullscreen .fs-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-gallery--slider-fullscreen .fs-gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  text-align: center;
  color: #fff;
  font-family: var(--xx-font-heading);
  font-size: clamp(20px, 2vw, 28px);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  padding: 0 20px;
}
.fs-gallery--slider-fullscreen .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.3s var(--xx-ease);
}
.fs-gallery--slider-fullscreen .slick-arrow:hover {
  background: rgba(255,255,255,0.3);
}
.fs-gallery--slider-fullscreen .slick-prev {
  left: 32px;
}
.fs-gallery--slider-fullscreen .slick-next {
  right: 32px;
}
@media (max-width: 991px) {
  .fs-gallery--slider-fullscreen .fs-gallery__grid,
  .fs-gallery--slider-fullscreen .fs-gallery__item {
    height: 60vh;
  }
  .fs-gallery--slider-fullscreen .slick-prev {
    left: 12px;
  }
  .fs-gallery--slider-fullscreen .slick-next {
    right: 12px;
  }
}

/* ──────────────────────────────────────────────────────────
   GALLERY 4/8 — grid-equal
   Use: clean, organized, catalog
   Layout: equal 3-column grid
   ────────────────────────────────────────────────────────── */
.fs-gallery.fs-gallery--grid-equal {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
}
.fs-gallery--grid-equal .fs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.fs-gallery--grid-equal .fs-gallery__item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--xx-radius);
  overflow: hidden;
  cursor: pointer;
}
.fs-gallery--grid-equal .fs-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--xx-ease);
}
.fs-gallery--grid-equal .fs-gallery__item:hover img {
  transform: scale(1.05);
}
.fs-gallery--grid-equal .fs-gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 20px;
  color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
  font-size: 14px;
}
@media (max-width: 991px) {
  .fs-gallery--grid-equal .fs-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .fs-gallery--grid-equal .fs-gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   GALLERY 5/8 — polaroid-stack
   Use: nostalgic, scrapbook, playful
   Layout: rotated polaroid-style cards
   ────────────────────────────────────────────────────────── */
.fs-gallery.fs-gallery--polaroid-stack {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
  background: var(--xx-cream);
}
.fs-gallery--polaroid-stack .fs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  justify-items: center;
}
.fs-gallery--polaroid-stack .fs-gallery__item {
  background: #fff;
  padding: 14px 14px 48px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  max-width: 280px;
  transition: transform 0.35s var(--xx-ease);
  cursor: pointer;
}
.fs-gallery--polaroid-stack .fs-gallery__item:nth-child(odd) {
  transform: rotate(-2deg);
}
.fs-gallery--polaroid-stack .fs-gallery__item:nth-child(even) {
  transform: rotate(2deg);
}
.fs-gallery--polaroid-stack .fs-gallery__item:hover {
  transform: rotate(0) scale(1.05);
  z-index: 2;
}
.fs-gallery--polaroid-stack .fs-gallery__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.fs-gallery--polaroid-stack .fs-gallery__caption {
  padding-top: 14px;
  text-align: center;
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: 18px;
  color: var(--xx-text);
}
@media (max-width: 991px) {
  .fs-gallery--polaroid-stack .fs-gallery__grid {
    gap: 24px;
  }
}

/* ──────────────────────────────────────────────────────────
   GALLERY 6/8 — isotope-filter
   Use: categorized, portfolio, multi-category
   Layout: filter buttons + filtered grid
   ────────────────────────────────────────────────────────── */
.fs-gallery.fs-gallery--isotope-filter {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
}
.fs-gallery--isotope-filter .fs-gallery__filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}
.fs-gallery--isotope-filter .fs-gallery__filter-btn {
  padding: 10px 22px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  color: var(--xx-text-soft);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s var(--xx-ease);
}
.fs-gallery--isotope-filter .fs-gallery__filter-btn:hover {
  border-color: var(--xx-primary);
  color: var(--xx-primary);
}
.fs-gallery--isotope-filter .fs-gallery__filter-btn.is-active {
  background: var(--xx-primary);
  border-color: var(--xx-primary);
  color: #fff;
}
.fs-gallery--isotope-filter .fs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.fs-gallery--isotope-filter .fs-gallery__item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--xx-radius);
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s var(--xx-ease), transform 0.3s var(--xx-ease);
}
.fs-gallery--isotope-filter .fs-gallery__item.is-hidden {
  display: none;
}
.fs-gallery--isotope-filter .fs-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--xx-ease);
}
.fs-gallery--isotope-filter .fs-gallery__item:hover img {
  transform: scale(1.05);
}
.fs-gallery--isotope-filter .fs-gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 20px;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  color: #fff;
  font-size: 14px;
}
@media (max-width: 991px) {
  .fs-gallery--isotope-filter .fs-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .fs-gallery--isotope-filter .fs-gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   GALLERY 7/8 — lightbox-thumbs
   Use: big preview + thumbnails (product detail style)
   Layout: large image left, thumbs grid right
   ────────────────────────────────────────────────────────── */
.fs-gallery.fs-gallery--lightbox-thumbs {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
.fs-gallery--lightbox-thumbs .fs-gallery__main {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
  box-shadow: var(--xx-shadow-md);
}
.fs-gallery--lightbox-thumbs .fs-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-gallery--lightbox-thumbs .fs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-content: start;
}
.fs-gallery--lightbox-thumbs .fs-gallery__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--xx-radius);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.3s var(--xx-ease);
}
.fs-gallery--lightbox-thumbs .fs-gallery__item:hover,
.fs-gallery--lightbox-thumbs .fs-gallery__item.is-active {
  opacity: 1;
  outline: 2px solid var(--xx-primary);
  outline-offset: -2px;
}
.fs-gallery--lightbox-thumbs .fs-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 991px) {
  .fs-gallery.fs-gallery--lightbox-thumbs {
    grid-template-columns: 1fr;
  }
  .fs-gallery--lightbox-thumbs .fs-gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ──────────────────────────────────────────────────────────
   GALLERY 8/8 — carousel-3-cards
   Use: catalog, featured, slider preview
   Layout: 3-card slider with peek
   ────────────────────────────────────────────────────────── */
.fs-gallery.fs-gallery--carousel-3-cards {
  padding: clamp(60px, 8vw, 120px) 0;
  max-width: 100%;
  overflow: hidden;
}
.fs-gallery--carousel-3-cards .fs-gallery__grid {
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  gap: 20px;
}
.fs-gallery--carousel-3-cards .fs-gallery__item {
  flex: 0 0 calc((100% / 3) - 14px);
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s var(--xx-ease);
}
.fs-gallery--carousel-3-cards .fs-gallery__item:hover {
  transform: translateY(-6px);
}
.fs-gallery--carousel-3-cards .fs-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--xx-ease);
}
.fs-gallery--carousel-3-cards .fs-gallery__item:hover img {
  transform: scale(1.06);
}
.fs-gallery--carousel-3-cards .fs-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  background: linear-gradient(0deg, rgba(0,0,0,0.8), transparent);
  color: #fff;
  font-family: var(--xx-font-heading);
  font-size: 22px;
}
@media (max-width: 991px) {
  .fs-gallery--carousel-3-cards .fs-gallery__item {
    flex: 0 0 calc((100% / 2) - 10px);
  }
}
@media (max-width: 600px) {
  .fs-gallery--carousel-3-cards .fs-gallery__item {
    flex: 0 0 80%;
  }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  CTA SECTIONS (8 variants)                                  ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────
   CTA 1/8 — dark-bold
   Use: high-contrast, conversion-focused
   Layout: dark background, big white text, prominent CTA
   ────────────────────────────────────────────────────────── */
.fs-cta.fs-cta--dark-bold {
  background: var(--xx-text);
  color: #fff;
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 48px);
  text-align: center;
}
.fs-cta--dark-bold .fs-cta__inner {
  max-width: 800px;
  margin: 0 auto;
}
.fs-cta--dark-bold .fs-cta__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  margin: 0 0 24px;
}
.fs-cta--dark-bold .fs-cta__lead {
  font-size: clamp(16px, 1.4vw, 20px);
  opacity: 0.85;
  margin: 0 0 40px;
  line-height: 1.65;
}
.fs-cta--dark-bold .fs-cta__cta {
  display: inline-block;
  padding: 18px 44px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
  transition: transform 0.3s var(--xx-ease), background 0.3s var(--xx-ease);
}
.fs-cta--dark-bold .fs-cta__cta:hover {
  background: var(--xx-secondary);
  transform: translateY(-2px);
}
@media (max-width: 991px) {
  .fs-cta.fs-cta--dark-bold {
    padding: clamp(60px, 10vw, 100px) clamp(20px, 4vw, 32px);
  }
}

/* ──────────────────────────────────────────────────────────
   CTA 2/8 — gradient
   Use: vibrant, modern, energy
   Layout: gradient background, centered
   ────────────────────────────────────────────────────────── */
.fs-cta.fs-cta--gradient {
  background: var(--xx-gradient-primary, linear-gradient(135deg, var(--xx-primary), var(--xx-secondary)));
  color: #fff;
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 48px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fs-cta--gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.fs-cta--gradient .fs-cta__inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.fs-cta--gradient .fs-cta__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.1;
  margin: 0 0 24px;
}
.fs-cta--gradient .fs-cta__lead {
  font-size: clamp(16px, 1.3vw, 19px);
  opacity: 0.95;
  margin: 0 0 40px;
  line-height: 1.65;
}
.fs-cta--gradient .fs-cta__cta {
  display: inline-block;
  padding: 18px 44px;
  background: #fff;
  color: var(--xx-primary);
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 700;
  letter-spacing: 1px;
  transition: transform 0.3s var(--xx-ease);
}
.fs-cta--gradient .fs-cta__cta:hover {
  transform: translateY(-2px) scale(1.02);
}
@media (max-width: 991px) {
  .fs-cta.fs-cta--gradient {
    padding: clamp(60px, 10vw, 100px) clamp(20px, 4vw, 32px);
  }
}

/* ──────────────────────────────────────────────────────────
   CTA 3/8 — full-bleed-image-overlay
   Use: scenic, emotion, immersive
   Layout: hero-style banner CTA with image bg
   ────────────────────────────────────────────────────────── */
.fs-cta.fs-cta--full-bleed-image-overlay {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  padding: clamp(60px, 10vw, 120px) clamp(20px, 4vw, 48px);
}
.fs-cta--full-bleed-image-overlay .fs-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fs-cta--full-bleed-image-overlay .fs-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-cta--full-bleed-image-overlay .fs-cta__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%);
}
.fs-cta--full-bleed-image-overlay .fs-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
}
.fs-cta--full-bleed-image-overlay .fs-cta__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 1.1;
  margin: 0 0 24px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.fs-cta--full-bleed-image-overlay .fs-cta__lead {
  font-size: clamp(16px, 1.4vw, 20px);
  margin: 0 0 36px;
  line-height: 1.65;
  opacity: 0.95;
}
.fs-cta--full-bleed-image-overlay .fs-cta__cta {
  display: inline-block;
  padding: 18px 42px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 700;
  letter-spacing: 1px;
  transition: background 0.3s var(--xx-ease);
}
.fs-cta--full-bleed-image-overlay .fs-cta__cta:hover {
  background: var(--xx-secondary);
}
@media (max-width: 991px) {
  .fs-cta.fs-cta--full-bleed-image-overlay {
    min-height: 50vh;
  }
}

/* ──────────────────────────────────────────────────────────
   CTA 4/8 — minimal-text
   Use: editorial, subtle, brand-led
   Layout: small section, just text and link
   ────────────────────────────────────────────────────────── */
.fs-cta.fs-cta--minimal-text {
  padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
  text-align: center;
  background: var(--xx-bg);
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.fs-cta--minimal-text .fs-cta__inner {
  max-width: 700px;
  margin: 0 auto;
}
.fs-cta--minimal-text .fs-cta__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(24px, 2.6vw, 34px);
  margin: 0 0 16px;
  color: var(--xx-text);
  font-weight: 500;
}
.fs-cta--minimal-text .fs-cta__lead {
  font-size: 16px;
  color: var(--xx-text-soft);
  margin: 0 0 24px;
  line-height: 1.6;
}
.fs-cta--minimal-text .fs-cta__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--xx-primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--xx-primary);
  padding-bottom: 3px;
  transition: gap 0.3s var(--xx-ease);
}
.fs-cta--minimal-text .fs-cta__cta:hover {
  gap: 16px;
}
@media (max-width: 991px) {
  .fs-cta.fs-cta--minimal-text {
    padding: clamp(40px, 8vw, 80px) clamp(20px, 4vw, 32px);
  }
}

/* ──────────────────────────────────────────────────────────
   CTA 5/8 — side-image
   Use: balanced, visual + action
   Layout: image one side, big CTA other
   ────────────────────────────────────────────────────────── */
.fs-cta.fs-cta--side-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--xx-cream);
  overflow: hidden;
}
.fs-cta--side-image .fs-cta__media {
  position: relative;
  min-height: 360px;
}
.fs-cta--side-image .fs-cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-cta--side-image .fs-cta__inner {
  padding: clamp(40px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fs-cta--side-image .fs-cta__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  margin: 0 0 20px;
  color: var(--xx-text);
}
.fs-cta--side-image .fs-cta__lead {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--xx-text-soft);
  margin: 0 0 32px;
  line-height: 1.7;
}
.fs-cta--side-image .fs-cta__cta {
  display: inline-block;
  padding: 16px 36px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  width: fit-content;
  transition: background 0.3s var(--xx-ease);
}
.fs-cta--side-image .fs-cta__cta:hover {
  background: var(--xx-secondary);
}
@media (max-width: 991px) {
  .fs-cta.fs-cta--side-image {
    grid-template-columns: 1fr;
  }
  .fs-cta--side-image .fs-cta__media {
    min-height: 240px;
  }
}

/* ──────────────────────────────────────────────────────────
   CTA 6/8 — sticky-bottom-bar
   Use: persistent conversion, mobile-first
   Layout: sticky bar at bottom of viewport
   ────────────────────────────────────────────────────────── */
.fs-cta.fs-cta--sticky-bottom-bar {
  position: sticky;
  bottom: 0;
  z-index: 100;
  background: var(--xx-text);
  color: #fff;
  padding: 16px clamp(16px, 3vw, 32px);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
}
.fs-cta--sticky-bottom-bar .fs-cta__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fs-cta--sticky-bottom-bar .fs-cta__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(16px, 1.4vw, 20px);
  margin: 0;
  font-weight: 600;
}
.fs-cta--sticky-bottom-bar .fs-cta__lead {
  font-size: 13px;
  opacity: 0.8;
  margin: 0;
}
.fs-cta--sticky-bottom-bar .fs-cta__actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}
.fs-cta--sticky-bottom-bar .fs-cta__cta {
  display: inline-block;
  padding: 12px 28px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.3s var(--xx-ease);
}
.fs-cta--sticky-bottom-bar .fs-cta__cta:hover {
  background: var(--xx-secondary);
}
@media (max-width: 768px) {
  .fs-cta--sticky-bottom-bar .fs-cta__inner {
    justify-content: center;
  }
  .fs-cta--sticky-bottom-bar .fs-cta__actions {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ──────────────────────────────────────────────────────────
   CTA 7/8 — countdown-timer
   Use: urgency, limited offer, promo
   Layout: big timer + CTA
   ────────────────────────────────────────────────────────── */
.fs-cta.fs-cta--countdown-timer {
  background: var(--xx-gradient-accent, linear-gradient(135deg, var(--xx-secondary), var(--xx-primary)));
  color: #fff;
  padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
  text-align: center;
}
.fs-cta--countdown-timer .fs-cta__inner {
  max-width: 800px;
  margin: 0 auto;
}
.fs-cta--countdown-timer .fs-cta__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  margin: 0 0 32px;
  line-height: 1.15;
}
.fs-cta--countdown-timer .fs-cta__timer {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  margin-bottom: 36px;
}
.fs-cta--countdown-timer .fs-cta__timer-unit {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border-radius: var(--xx-radius);
  padding: 16px 12px;
  min-width: 84px;
}
.fs-cta--countdown-timer .fs-cta__timer-value {
  font-family: var(--xx-font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
  display: block;
}
.fs-cta--countdown-timer .fs-cta__timer-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 4px;
}
.fs-cta--countdown-timer .fs-cta__cta {
  display: inline-block;
  padding: 16px 40px;
  background: #fff;
  color: var(--xx-primary);
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 700;
  letter-spacing: 1px;
  transition: transform 0.3s var(--xx-ease);
}
.fs-cta--countdown-timer .fs-cta__cta:hover {
  transform: translateY(-2px);
}
@media (max-width: 991px) {
  .fs-cta--countdown-timer .fs-cta__timer-unit {
    min-width: 64px;
    padding: 12px 8px;
  }
}

/* ──────────────────────────────────────────────────────────
   CTA 8/8 — multi-button-row
   Use: multiple paths, choice, navigation
   Layout: text + row of multiple CTAs
   ────────────────────────────────────────────────────────── */
.fs-cta.fs-cta--multi-button-row {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  background: var(--xx-cream);
  text-align: center;
}
.fs-cta--multi-button-row .fs-cta__inner {
  max-width: 900px;
  margin: 0 auto;
}
.fs-cta--multi-button-row .fs-cta__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  margin: 0 0 16px;
  color: var(--xx-text);
  line-height: 1.15;
}
.fs-cta--multi-button-row .fs-cta__lead {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--xx-text-soft);
  margin: 0 0 36px;
  line-height: 1.65;
}
.fs-cta--multi-button-row .fs-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.fs-cta--multi-button-row .fs-cta__cta {
  display: inline-block;
  padding: 14px 30px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  transition: background 0.3s var(--xx-ease);
}
.fs-cta--multi-button-row .fs-cta__cta:hover {
  background: var(--xx-secondary);
}
.fs-cta--multi-button-row .fs-cta__cta-secondary {
  display: inline-block;
  padding: 14px 30px;
  background: transparent;
  color: var(--xx-primary);
  text-decoration: none;
  border: 2px solid var(--xx-primary);
  border-radius: var(--xx-radius);
  font-weight: 600;
  transition: all 0.3s var(--xx-ease);
}
.fs-cta--multi-button-row .fs-cta__cta-secondary:hover {
  background: var(--xx-primary);
  color: #fff;
}
@media (max-width: 991px) {
  .fs-cta--multi-button-row .fs-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  FEATURES SECTIONS (6 variants)                             ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────
   FEATURES 1/6 — icon-grid-4col
   Use: amenities, services overview
   Layout: 4-column icon grid
   ────────────────────────────────────────────────────────── */
.fs-features.fs-features--icon-grid-4col {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
}
.fs-features--icon-grid-4col .fs-features__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  text-align: center;
  margin: 0 0 60px;
  color: var(--xx-text);
}
.fs-features--icon-grid-4col .fs-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.fs-features--icon-grid-4col .fs-features__item {
  text-align: center;
  padding: 24px 16px;
}
.fs-features--icon-grid-4col .fs-features__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  color: var(--xx-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs-features--icon-grid-4col .fs-features__icon svg {
  width: 100%;
  height: 100%;
}
.fs-features--icon-grid-4col .fs-features__item .fs-features__title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--xx-text);
  text-align: center;
}
.fs-features--icon-grid-4col .fs-features__desc {
  font-size: 14px;
  color: var(--xx-text-soft);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 991px) {
  .fs-features--icon-grid-4col .fs-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .fs-features--icon-grid-4col .fs-features__grid {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   FEATURES 2/6 — text-list-numbered
   Use: process, methodology, steps
   Layout: large numbers + descriptions
   ────────────────────────────────────────────────────────── */
.fs-features.fs-features--text-list-numbered {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1000px;
  margin: 0 auto;
}
.fs-features--text-list-numbered .fs-features__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  margin: 0 0 60px;
  color: var(--xx-text);
}
.fs-features--text-list-numbered .fs-features__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.fs-features--text-list-numbered .fs-features__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: start;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.fs-features--text-list-numbered .fs-features__item:last-child {
  border-bottom: none;
}
.fs-features--text-list-numbered .fs-features__icon {
  font-family: var(--xx-font-heading);
  font-size: clamp(48px, 6vw, 72px);
  color: var(--xx-primary);
  font-weight: 700;
  line-height: 0.9;
  opacity: 0.85;
}
.fs-features--text-list-numbered .fs-features__item .fs-features__title {
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--xx-text);
  font-weight: 600;
}
.fs-features--text-list-numbered .fs-features__desc {
  font-size: 16px;
  color: var(--xx-text-soft);
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 768px) {
  .fs-features--text-list-numbered .fs-features__item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ──────────────────────────────────────────────────────────
   FEATURES 3/6 — alternating-rows
   Use: detailed features, image+text per item
   Layout: alternating left/right rows
   ────────────────────────────────────────────────────────── */
.fs-features.fs-features--alternating-rows {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
}
.fs-features--alternating-rows .fs-features__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 100px);
}
.fs-features--alternating-rows .fs-features__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.fs-features--alternating-rows .fs-features__item:nth-child(even) .fs-features__icon {
  order: 2;
}
.fs-features--alternating-rows .fs-features__icon {
  aspect-ratio: 4/3;
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
  box-shadow: var(--xx-shadow-md);
}
.fs-features--alternating-rows .fs-features__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-features--alternating-rows .fs-features__item .fs-features__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(26px, 3vw, 40px);
  margin: 0 0 20px;
  color: var(--xx-text);
  line-height: 1.15;
}
.fs-features--alternating-rows .fs-features__desc {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--xx-text-soft);
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 991px) {
  .fs-features--alternating-rows .fs-features__item,
  .fs-features--alternating-rows .fs-features__item:nth-child(even) .fs-features__icon {
    grid-template-columns: 1fr;
    order: unset;
  }
}

/* ──────────────────────────────────────────────────────────
   FEATURES 4/6 — comparison-table
   Use: tiers, packages, plans
   Layout: side-by-side comparison columns
   ────────────────────────────────────────────────────────── */
.fs-features.fs-features--comparison-table {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1200px;
  margin: 0 auto;
}
.fs-features--comparison-table .fs-features__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  text-align: center;
  margin: 0 0 60px;
  color: var(--xx-text);
}
.fs-features--comparison-table .fs-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.fs-features--comparison-table .fs-features__item {
  background: var(--xx-bg);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--xx-radius-lg);
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 36px);
  transition: transform 0.3s var(--xx-ease), box-shadow 0.3s var(--xx-ease);
}
.fs-features--comparison-table .fs-features__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--xx-shadow-md);
}
.fs-features--comparison-table .fs-features__item--featured {
  background: var(--xx-primary);
  color: #fff;
  border-color: var(--xx-primary);
  transform: scale(1.04);
}
.fs-features--comparison-table .fs-features__icon {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--xx-primary);
  margin-bottom: 12px;
}
.fs-features--comparison-table .fs-features__item--featured .fs-features__icon {
  color: #fff;
  opacity: 0.9;
}
.fs-features--comparison-table .fs-features__item .fs-features__title {
  font-family: var(--xx-font-heading);
  font-size: 32px;
  margin: 0 0 20px;
  text-align: left;
}
.fs-features--comparison-table .fs-features__desc {
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}
.fs-features--comparison-table .fs-features__desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fs-features--comparison-table .fs-features__desc li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.fs-features--comparison-table .fs-features__item--featured .fs-features__desc li {
  border-bottom-color: rgba(255,255,255,0.15);
}
@media (max-width: 991px) {
  .fs-features--comparison-table .fs-features__grid {
    grid-template-columns: 1fr;
  }
  .fs-features--comparison-table .fs-features__item--featured {
    transform: none;
  }
}

/* ──────────────────────────────────────────────────────────
   FEATURES 5/6 — cards-pop-hover
   Use: interactive, modern, services
   Layout: 3-col cards with strong hover effect
   ────────────────────────────────────────────────────────── */
.fs-features.fs-features--cards-pop-hover {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
  background: var(--xx-cream);
}
.fs-features--cards-pop-hover .fs-features__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  text-align: center;
  margin: 0 0 56px;
  color: var(--xx-text);
}
.fs-features--cards-pop-hover .fs-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.fs-features--cards-pop-hover .fs-features__item {
  background: var(--xx-bg);
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--xx-radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--xx-ease), box-shadow 0.35s var(--xx-ease);
  cursor: pointer;
}
.fs-features--cards-pop-hover .fs-features__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--xx-gradient-primary, linear-gradient(135deg, var(--xx-primary), var(--xx-secondary)));
  opacity: 0;
  transition: opacity 0.35s var(--xx-ease);
  z-index: 0;
}
.fs-features--cards-pop-hover .fs-features__item:hover {
  transform: translateY(-8px);
  box-shadow: var(--xx-shadow-lg);
}
.fs-features--cards-pop-hover .fs-features__item:hover::before {
  opacity: 1;
}
.fs-features--cards-pop-hover .fs-features__item > * {
  position: relative;
  z-index: 1;
  transition: color 0.35s var(--xx-ease);
}
.fs-features--cards-pop-hover .fs-features__item:hover * {
  color: #fff;
}
.fs-features--cards-pop-hover .fs-features__icon {
  width: 48px;
  height: 48px;
  color: var(--xx-primary);
  margin-bottom: 20px;
}
.fs-features--cards-pop-hover .fs-features__item .fs-features__title {
  font-size: 22px;
  margin: 0 0 12px;
  text-align: left;
}
.fs-features--cards-pop-hover .fs-features__desc {
  font-size: 15px;
  color: var(--xx-text-soft);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 991px) {
  .fs-features--cards-pop-hover .fs-features__grid {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   FEATURES 6/6 — accordion-vertical
   Use: compact, expandable, faq-style
   Layout: vertical accordion list
   ────────────────────────────────────────────────────────── */
.fs-features.fs-features--accordion-vertical {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 900px;
  margin: 0 auto;
}
.fs-features--accordion-vertical .fs-features__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  text-align: center;
  margin: 0 0 56px;
  color: var(--xx-text);
}
.fs-features--accordion-vertical .fs-features__grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fs-features--accordion-vertical .fs-features__item {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--xx-radius);
  overflow: hidden;
  transition: border-color 0.3s var(--xx-ease);
}
.fs-features--accordion-vertical .fs-features__item.is-open {
  border-color: var(--xx-primary);
}
.fs-features--accordion-vertical .fs-features__item .fs-features__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--xx-font-body);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  padding: 20px 24px;
  color: var(--xx-text);
  cursor: pointer;
  text-align: left;
}
.fs-features--accordion-vertical .fs-features__icon {
  width: 24px;
  height: 24px;
  color: var(--xx-primary);
  flex-shrink: 0;
  transition: transform 0.3s var(--xx-ease);
}
.fs-features--accordion-vertical .fs-features__item.is-open .fs-features__icon {
  transform: rotate(45deg);
}
.fs-features--accordion-vertical .fs-features__desc {
  font-size: 15px;
  color: var(--xx-text-soft);
  line-height: 1.75;
  padding: 0 24px 20px;
  margin: 0;
  display: none;
}
.fs-features--accordion-vertical .fs-features__item.is-open .fs-features__desc {
  display: block;
}
@media (max-width: 991px) {
  .fs-features--accordion-vertical .fs-features__item .fs-features__title {
    font-size: 16px;
    padding: 18px 20px;
  }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  TESTIMONIALS SECTIONS (6 variants)                         ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────
   TESTIMONIALS 1/6 — slider-fullwidth
   Use: cinematic, single-focus
   Layout: full-width slider, one quote at a time
   ────────────────────────────────────────────────────────── */
.fs-testimonials.fs-testimonials--slider-fullwidth {
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 48px);
  background: var(--xx-cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fs-testimonials--slider-fullwidth .fs-testimonials__slider {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.fs-testimonials--slider-fullwidth .fs-testimonials__item {
  padding: 32px 16px;
}
.fs-testimonials--slider-fullwidth .fs-testimonials__photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 24px;
  overflow: hidden;
  box-shadow: var(--xx-shadow-md);
}
.fs-testimonials--slider-fullwidth .fs-testimonials__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-testimonials--slider-fullwidth .fs-testimonials__quote {
  font-family: var(--xx-font-heading);
  font-size: clamp(20px, 2.4vw, 32px);
  font-style: italic;
  line-height: 1.45;
  margin: 0 0 32px;
  color: var(--xx-text);
  font-weight: 400;
}
.fs-testimonials--slider-fullwidth .fs-testimonials__quote::before {
  content: '\201C';
  color: var(--xx-primary);
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.2em;
  margin-right: 6px;
}
.fs-testimonials--slider-fullwidth .fs-testimonials__author {
  font-size: 17px;
  font-weight: 600;
  color: var(--xx-text);
  margin: 0 0 4px;
}
.fs-testimonials--slider-fullwidth .fs-testimonials__role {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--xx-primary);
}
.fs-testimonials--slider-fullwidth .slick-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  list-style: none;
  padding: 32px 0 0;
  margin: 0;
}
.fs-testimonials--slider-fullwidth .slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.2);
  font-size: 0;
  cursor: pointer;
  transition: background 0.3s var(--xx-ease);
}
.fs-testimonials--slider-fullwidth .slick-dots li.slick-active button {
  background: var(--xx-primary);
}
@media (max-width: 991px) {
  .fs-testimonials.fs-testimonials--slider-fullwidth {
    padding: clamp(60px, 10vw, 100px) clamp(20px, 4vw, 32px);
  }
}

/* ──────────────────────────────────────────────────────────
   TESTIMONIALS 2/6 — grid-3col
   Use: many reviews, social proof
   Layout: 3-column card grid
   ────────────────────────────────────────────────────────── */
.fs-testimonials.fs-testimonials--grid-3col {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
}
.fs-testimonials--grid-3col .fs-testimonials__slider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.fs-testimonials--grid-3col .fs-testimonials__item {
  background: var(--xx-bg);
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--xx-radius-lg);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.3s var(--xx-ease), box-shadow 0.3s var(--xx-ease);
}
.fs-testimonials--grid-3col .fs-testimonials__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--xx-shadow-md);
}
.fs-testimonials--grid-3col .fs-testimonials__quote {
  font-size: 15px;
  line-height: 1.7;
  color: var(--xx-text);
  margin: 0 0 24px;
  font-style: italic;
}
.fs-testimonials--grid-3col .fs-testimonials__quote::before {
  content: '\201C';
  font-family: var(--xx-font-heading);
  font-size: 40px;
  line-height: 0;
  color: var(--xx-primary);
  vertical-align: -0.3em;
  margin-right: 4px;
}
.fs-testimonials--grid-3col .fs-testimonials__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fs-testimonials--grid-3col .fs-testimonials__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.fs-testimonials--grid-3col .fs-testimonials__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-testimonials--grid-3col .fs-testimonials__role {
  font-size: 12px;
  color: var(--xx-text-muted);
  letter-spacing: 1px;
}
@media (max-width: 991px) {
  .fs-testimonials--grid-3col .fs-testimonials__slider {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   TESTIMONIALS 3/6 — single-quote-big
   Use: editorial, brand voice, one signature review
   Layout: single huge quote, no slider
   ────────────────────────────────────────────────────────── */
.fs-testimonials.fs-testimonials--single-quote-big {
  padding: clamp(80px, 12vw, 160px) clamp(20px, 6vw, 80px);
  background: var(--xx-text);
  color: #fff;
  text-align: center;
}
.fs-testimonials--single-quote-big .fs-testimonials__item {
  max-width: 1000px;
  margin: 0 auto;
}
.fs-testimonials--single-quote-big .fs-testimonials__quote {
  font-family: var(--xx-font-heading);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.3;
  margin: 0 0 40px;
  font-style: italic;
  font-weight: 300;
}
.fs-testimonials--single-quote-big .fs-testimonials__quote::before {
  content: '\201C';
  display: block;
  font-size: clamp(100px, 14vw, 180px);
  line-height: 0.5;
  color: var(--xx-primary);
  margin-bottom: 24px;
}
.fs-testimonials--single-quote-big .fs-testimonials__author {
  font-family: var(--xx-font-heading);
  font-size: 22px;
  margin: 0 0 6px;
}
.fs-testimonials--single-quote-big .fs-testimonials__role {
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.7;
}
@media (max-width: 991px) {
  .fs-testimonials.fs-testimonials--single-quote-big {
    padding: clamp(60px, 12vw, 100px) clamp(20px, 4vw, 32px);
  }
}

/* ──────────────────────────────────────────────────────────
   TESTIMONIALS 4/6 — video-grid
   Use: rich media, video reviews
   Layout: 3-column grid of video cards
   ────────────────────────────────────────────────────────── */
.fs-testimonials.fs-testimonials--video-grid {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
}
.fs-testimonials--video-grid .fs-testimonials__slider {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fs-testimonials--video-grid .fs-testimonials__item {
  position: relative;
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
  background: var(--xx-text);
  cursor: pointer;
  transition: transform 0.3s var(--xx-ease);
}
.fs-testimonials--video-grid .fs-testimonials__item:hover {
  transform: translateY(-4px);
}
.fs-testimonials--video-grid .fs-testimonials__photo {
  position: relative;
  aspect-ratio: 9/16;
  overflow: hidden;
}
.fs-testimonials--video-grid .fs-testimonials__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-testimonials--video-grid .fs-testimonials__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent 50%);
}
.fs-testimonials--video-grid .fs-testimonials__photo::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.fs-testimonials--video-grid .fs-testimonials__quote {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  z-index: 2;
}
.fs-testimonials--video-grid .fs-testimonials__author {
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 2px;
}
.fs-testimonials--video-grid .fs-testimonials__role {
  font-size: 11px;
  opacity: 0.85;
  letter-spacing: 1px;
}
@media (max-width: 991px) {
  .fs-testimonials--video-grid .fs-testimonials__slider {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   TESTIMONIALS 5/6 — masonry-mixed
   Use: varied quote lengths, organic
   Layout: masonry columns
   ────────────────────────────────────────────────────────── */
.fs-testimonials.fs-testimonials--masonry-mixed {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
  background: var(--xx-cream);
}
.fs-testimonials--masonry-mixed .fs-testimonials__slider {
  column-count: 3;
  column-gap: 20px;
}
.fs-testimonials--masonry-mixed .fs-testimonials__item {
  break-inside: avoid;
  margin-bottom: 20px;
  background: var(--xx-bg);
  border-radius: var(--xx-radius);
  padding: 24px;
  box-shadow: var(--xx-shadow-sm);
}
.fs-testimonials--masonry-mixed .fs-testimonials__quote {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 18px;
  color: var(--xx-text);
}
.fs-testimonials--masonry-mixed .fs-testimonials__author {
  font-weight: 600;
  font-size: 14px;
  color: var(--xx-text);
}
.fs-testimonials--masonry-mixed .fs-testimonials__role {
  font-size: 12px;
  color: var(--xx-text-muted);
}
@media (max-width: 991px) {
  .fs-testimonials--masonry-mixed .fs-testimonials__slider {
    column-count: 2;
  }
}
@media (max-width: 600px) {
  .fs-testimonials--masonry-mixed .fs-testimonials__slider {
    column-count: 1;
  }
}

/* ──────────────────────────────────────────────────────────
   TESTIMONIALS 6/6 — carousel-photos
   Use: photo-rich, lifestyle, real customers
   Layout: carousel with photo + short quote
   ────────────────────────────────────────────────────────── */
.fs-testimonials.fs-testimonials--carousel-photos {
  padding: clamp(60px, 8vw, 120px) 0;
  overflow: hidden;
}
.fs-testimonials--carousel-photos .fs-testimonials__slider {
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  gap: 24px;
}
.fs-testimonials--carousel-photos .fs-testimonials__item {
  flex: 0 0 calc((100% / 3) - 16px);
  background: var(--xx-bg);
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
  box-shadow: var(--xx-shadow-sm);
}
.fs-testimonials--carousel-photos .fs-testimonials__photo {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.fs-testimonials--carousel-photos .fs-testimonials__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-testimonials--carousel-photos .fs-testimonials__quote {
  padding: 20px 24px 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--xx-text);
  margin: 0;
}
.fs-testimonials--carousel-photos .fs-testimonials__author {
  padding: 0 24px 20px;
  font-weight: 600;
  font-size: 14px;
}
.fs-testimonials--carousel-photos .fs-testimonials__role {
  font-size: 12px;
  color: var(--xx-text-muted);
  letter-spacing: 1px;
  margin-left: 6px;
}
@media (max-width: 991px) {
  .fs-testimonials--carousel-photos .fs-testimonials__item {
    flex: 0 0 calc((100% / 2) - 12px);
  }
}
@media (max-width: 600px) {
  .fs-testimonials--carousel-photos .fs-testimonials__item {
    flex: 0 0 85%;
  }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  LOCATION / MAP SECTIONS (5 variants)                       ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────
   LOCATION 1/5 — full-bleed-map
   Use: dramatic, full focus on location
   Layout: full-width map with floating info card
   ────────────────────────────────────────────────────────── */
.fs-location.fs-location--full-bleed-map {
  position: relative;
  min-height: 600px;
  background: var(--xx-cream);
}
.fs-location--full-bleed-map .fs-location__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fs-location--full-bleed-map .fs-location__map iframe,
.fs-location--full-bleed-map .fs-location__map img,
.fs-location--full-bleed-map .fs-location__map > div {
  width: 100%;
  height: 100%;
  border: 0;
}
.fs-location--full-bleed-map .fs-location__info {
  position: absolute;
  top: 50%;
  left: clamp(20px, 5vw, 80px);
  transform: translateY(-50%);
  z-index: 2;
  max-width: 380px;
  background: var(--xx-bg);
  padding: clamp(28px, 3.5vw, 44px);
  border-radius: var(--xx-radius-lg);
  box-shadow: var(--xx-shadow-lg);
}
.fs-location--full-bleed-map .fs-location__info h3 {
  font-family: var(--xx-font-heading);
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 0 0 16px;
  color: var(--xx-text);
}
.fs-location--full-bleed-map .fs-location__address {
  font-size: 15px;
  line-height: 1.65;
  color: var(--xx-text-soft);
  margin: 0 0 20px;
  font-style: normal;
}
.fs-location--full-bleed-map .fs-location__directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s var(--xx-ease);
}
.fs-location--full-bleed-map .fs-location__directions:hover {
  background: var(--xx-secondary);
}
@media (max-width: 768px) {
  .fs-location.fs-location--full-bleed-map {
    min-height: 500px;
  }
  .fs-location--full-bleed-map .fs-location__info {
    top: auto;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: none;
    transform: none;
  }
}

/* ──────────────────────────────────────────────────────────
   LOCATION 2/5 — split-text-map
   Use: balanced, info-rich
   Layout: 50/50 text + map
   ────────────────────────────────────────────────────────── */
.fs-location.fs-location--split-text-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  background: var(--xx-bg);
}
.fs-location--split-text-map .fs-location__info {
  padding: clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fs-location--split-text-map .fs-location__info h3 {
  font-family: var(--xx-font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 0 0 24px;
  color: var(--xx-text);
  line-height: 1.15;
}
.fs-location--split-text-map .fs-location__address {
  font-size: 16px;
  line-height: 1.75;
  color: var(--xx-text-soft);
  margin: 0 0 28px;
  font-style: normal;
}
.fs-location--split-text-map .fs-location__directions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  width: fit-content;
  transition: background 0.3s var(--xx-ease);
}
.fs-location--split-text-map .fs-location__directions:hover {
  background: var(--xx-secondary);
}
.fs-location--split-text-map .fs-location__map {
  position: relative;
  min-height: 360px;
}
.fs-location--split-text-map .fs-location__map iframe,
.fs-location--split-text-map .fs-location__map > div {
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 991px) {
  .fs-location.fs-location--split-text-map {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   LOCATION 3/5 — info-cards-map
   Use: multi-property, hotel details
   Layout: map + row of info cards below
   ────────────────────────────────────────────────────────── */
.fs-location.fs-location--info-cards-map {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
}
.fs-location--info-cards-map .fs-location__map {
  height: 420px;
  margin-bottom: 40px;
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
  box-shadow: var(--xx-shadow-md);
}
.fs-location--info-cards-map .fs-location__map iframe,
.fs-location--info-cards-map .fs-location__map > div {
  width: 100%;
  height: 100%;
  border: 0;
}
.fs-location--info-cards-map .fs-location__info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.fs-location--info-cards-map .fs-location__card {
  background: var(--xx-cream);
  padding: 28px;
  border-radius: var(--xx-radius);
  transition: transform 0.3s var(--xx-ease);
}
.fs-location--info-cards-map .fs-location__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--xx-shadow-sm);
}
.fs-location--info-cards-map .fs-location__card h4 {
  font-family: var(--xx-font-heading);
  font-size: 19px;
  margin: 0 0 10px;
  color: var(--xx-text);
}
.fs-location--info-cards-map .fs-location__address {
  font-size: 14px;
  line-height: 1.65;
  color: var(--xx-text-soft);
  margin: 0;
  font-style: normal;
}
.fs-location--info-cards-map .fs-location__directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--xx-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.5px;
}
@media (max-width: 991px) {
  .fs-location--info-cards-map .fs-location__info {
    grid-template-columns: 1fr;
  }
  .fs-location--info-cards-map .fs-location__map {
    height: 320px;
  }
}

/* ──────────────────────────────────────────────────────────
   LOCATION 4/5 — dual-location-tabs
   Use: multi-site, switchable
   Layout: tab buttons + switchable map panel
   ────────────────────────────────────────────────────────── */
.fs-location.fs-location--dual-location-tabs {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
}
.fs-location--dual-location-tabs .fs-location__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  flex-wrap: wrap;
}
.fs-location--dual-location-tabs .fs-location__tab {
  padding: 14px 24px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--xx-text-soft);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--xx-ease);
  margin-bottom: -1px;
}
.fs-location--dual-location-tabs .fs-location__tab.is-active {
  color: var(--xx-primary);
  border-bottom-color: var(--xx-primary);
}
.fs-location--dual-location-tabs .fs-location__panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.fs-location--dual-location-tabs .fs-location__panel.is-active {
  display: grid;
}
.fs-location--dual-location-tabs .fs-location__map {
  height: 380px;
  border-radius: var(--xx-radius-lg);
  overflow: hidden;
}
.fs-location--dual-location-tabs .fs-location__map iframe,
.fs-location--dual-location-tabs .fs-location__map > div {
  width: 100%;
  height: 100%;
  border: 0;
}
.fs-location--dual-location-tabs .fs-location__info h3 {
  font-family: var(--xx-font-heading);
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 0 0 16px;
  color: var(--xx-text);
}
.fs-location--dual-location-tabs .fs-location__address {
  font-size: 15px;
  line-height: 1.7;
  color: var(--xx-text-soft);
  margin: 0 0 24px;
  font-style: normal;
}
.fs-location--dual-location-tabs .fs-location__directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--xx-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--xx-radius);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.3s var(--xx-ease);
}
.fs-location--dual-location-tabs .fs-location__directions:hover {
  background: var(--xx-secondary);
}
@media (max-width: 991px) {
  .fs-location--dual-location-tabs .fs-location__panel.is-active {
    grid-template-columns: 1fr;
  }
  .fs-location--dual-location-tabs .fs-location__map {
    height: 280px;
  }
}

/* ──────────────────────────────────────────────────────────
   LOCATION 5/5 — interactive-points
   Use: many points-of-interest, map with hotspots
   Layout: map + list of nearby attractions
   ────────────────────────────────────────────────────────── */
.fs-location.fs-location--interactive-points {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  min-height: 600px;
  background: var(--xx-bg);
}
.fs-location--interactive-points .fs-location__map {
  position: relative;
  min-height: 480px;
}
.fs-location--interactive-points .fs-location__map iframe,
.fs-location--interactive-points .fs-location__map > div {
  width: 100%;
  height: 100%;
  border: 0;
}
.fs-location--interactive-points .fs-location__info {
  padding: clamp(28px, 3vw, 40px);
  background: var(--xx-cream);
  overflow-y: auto;
  max-height: 600px;
}
.fs-location--interactive-points .fs-location__info h3 {
  font-family: var(--xx-font-heading);
  font-size: 24px;
  margin: 0 0 24px;
  color: var(--xx-text);
}
.fs-location--interactive-points .fs-location__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fs-location--interactive-points .fs-location__point {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: var(--xx-bg);
  border-radius: var(--xx-radius);
  cursor: pointer;
  transition: background 0.3s var(--xx-ease);
}
.fs-location--interactive-points .fs-location__point:hover {
  background: var(--xx-primary);
  color: #fff;
}
.fs-location--interactive-points .fs-location__point-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--xx-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.fs-location--interactive-points .fs-location__point:hover .fs-location__point-num {
  background: #fff;
  color: var(--xx-primary);
}
.fs-location--interactive-points .fs-location__point-name {
  font-size: 14px;
  font-weight: 500;
}
.fs-location--interactive-points .fs-location__point-dist {
  font-size: 12px;
  opacity: 0.7;
}
@media (max-width: 991px) {
  .fs-location.fs-location--interactive-points {
    grid-template-columns: 1fr;
  }
  .fs-location--interactive-points .fs-location__info {
    max-height: none;
  }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  FAQ SECTIONS (4 variants)                                  ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────
   FAQ 1/4 — accordion-classic
   Use: standard FAQ, common pattern
   Layout: vertical accordion
   ────────────────────────────────────────────────────────── */
.fs-faq.fs-faq--accordion-classic {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 900px;
  margin: 0 auto;
}
.fs-faq--accordion-classic .fs-faq__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  text-align: center;
  margin: 0 0 56px;
  color: var(--xx-text);
}
.fs-faq--accordion-classic .fs-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fs-faq--accordion-classic .fs-faq__item {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--xx-radius);
  overflow: hidden;
  transition: border-color 0.3s var(--xx-ease);
}
.fs-faq--accordion-classic .fs-faq__item.is-open {
  border-color: var(--xx-primary);
}
.fs-faq--accordion-classic .fs-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--xx-text);
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}
.fs-faq--accordion-classic .fs-faq__toggle {
  width: 24px;
  height: 24px;
  color: var(--xx-primary);
  flex-shrink: 0;
  transition: transform 0.3s var(--xx-ease);
}
.fs-faq--accordion-classic .fs-faq__item.is-open .fs-faq__toggle {
  transform: rotate(45deg);
}
.fs-faq--accordion-classic .fs-faq__answer {
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--xx-text-soft);
  display: none;
}
.fs-faq--accordion-classic .fs-faq__item.is-open .fs-faq__answer {
  display: block;
}

/* ──────────────────────────────────────────────────────────
   FAQ 2/4 — two-column-grid
   Use: many questions, scan-friendly
   Layout: 2-column static grid
   ────────────────────────────────────────────────────────── */
.fs-faq.fs-faq--two-column-grid {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
}
.fs-faq--two-column-grid .fs-faq__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  text-align: center;
  margin: 0 0 56px;
  color: var(--xx-text);
}
.fs-faq--two-column-grid .fs-faq__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3vw, 48px);
}
.fs-faq--two-column-grid .fs-faq__item {
  border-left: 3px solid var(--xx-primary);
  padding-left: 20px;
}
.fs-faq--two-column-grid .fs-faq__question {
  font-family: var(--xx-font-heading);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--xx-text);
}
.fs-faq--two-column-grid .fs-faq__answer {
  font-size: 15px;
  line-height: 1.75;
  color: var(--xx-text-soft);
  margin: 0;
}
@media (max-width: 768px) {
  .fs-faq--two-column-grid .fs-faq__list {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   FAQ 3/4 — sidebar-search
   Use: large FAQ, knowledge base
   Layout: sidebar with category + search + list
   ────────────────────────────────────────────────────────── */
.fs-faq.fs-faq--sidebar-search {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1300px;
  margin: 0 auto;
}
.fs-faq--sidebar-search aside {
  position: sticky;
  top: 100px;
  align-self: start;
}
.fs-faq--sidebar-search .fs-faq__search {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 24px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--xx-radius);
  font-size: 14px;
  background: var(--xx-bg);
}
.fs-faq--sidebar-search .fs-faq__categories {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fs-faq--sidebar-search .fs-faq__categories li {
  padding: 10px 14px;
  border-radius: var(--xx-radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--xx-text-soft);
  cursor: pointer;
  transition: background 0.3s var(--xx-ease), color 0.3s var(--xx-ease);
}
.fs-faq--sidebar-search .fs-faq__categories li:hover,
.fs-faq--sidebar-search .fs-faq__categories li.is-active {
  background: var(--xx-primary);
  color: #fff;
}
.fs-faq--sidebar-search .fs-faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fs-faq--sidebar-search .fs-faq__item {
  background: var(--xx-cream);
  border-radius: var(--xx-radius);
  padding: 20px 24px;
}
.fs-faq--sidebar-search .fs-faq__question {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--xx-text);
}
.fs-faq--sidebar-search .fs-faq__answer {
  font-size: 14px;
  line-height: 1.7;
  color: var(--xx-text-soft);
  margin: 0;
}
@media (max-width: 991px) {
  .fs-faq.fs-faq--sidebar-search {
    grid-template-columns: 1fr;
  }
  .fs-faq--sidebar-search aside {
    position: static;
  }
}

/* ──────────────────────────────────────────────────────────
   FAQ 4/4 — tabs-categorized
   Use: grouped by topic
   Layout: tab bar + filtered list
   ────────────────────────────────────────────────────────── */
.fs-faq.fs-faq--tabs-categorized {
  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 48px);
  max-width: 1000px;
  margin: 0 auto;
}
.fs-faq--tabs-categorized .fs-faq__title {
  font-family: var(--xx-font-heading);
  font-size: clamp(30px, 4vw, 48px);
  text-align: center;
  margin: 0 0 40px;
  color: var(--xx-text);
}
.fs-faq--tabs-categorized .fs-faq__tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.fs-faq--tabs-categorized .fs-faq__tab {
  padding: 10px 20px;
  border: 1px solid rgba(0,0,0,0.15);
  background: transparent;
  border-radius: 999px;
  color: var(--xx-text-soft);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s var(--xx-ease);
}
.fs-faq--tabs-categorized .fs-faq__tab.is-active {
  background: var(--xx-primary);
  border-color: var(--xx-primary);
  color: #fff;
}
.fs-faq--tabs-categorized .fs-faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fs-faq--tabs-categorized .fs-faq__item {
  background: var(--xx-cream);
  border-radius: var(--xx-radius);
  padding: 18px 22px;
}
.fs-faq--tabs-categorized .fs-faq__item.is-hidden {
  display: none;
}
.fs-faq--tabs-categorized .fs-faq__question {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--xx-text);
}
.fs-faq--tabs-categorized .fs-faq__answer {
  font-size: 14px;
  line-height: 1.7;
  color: var(--xx-text-soft);
  margin: 0;
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  NAVIGATION SECTIONS (8 variants)                           ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────
   NAVIGATION 1/8 — transparent-overlay
   Use: hero-overlap, immersive
   Layout: fixed transparent, becomes solid on scroll
   ────────────────────────────────────────────────────────── */
.fs-nav.fs-nav--transparent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px clamp(20px, 4vw, 48px);
  background: transparent;
  transition: background 0.3s var(--xx-ease), padding 0.3s var(--xx-ease);
}
.fs-nav--transparent-overlay.is-scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  padding: 14px clamp(20px, 4vw, 48px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.fs-nav--transparent-overlay .fs-nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.fs-nav--transparent-overlay .fs-nav__brand {
  font-family: var(--xx-font-heading);
  font-size: 22px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.3s var(--xx-ease);
}
.fs-nav--transparent-overlay.is-scrolled .fs-nav__brand {
  color: var(--xx-text);
}
.fs-nav--transparent-overlay .fs-nav__list {
  list-style: none;
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
}
.fs-nav--transparent-overlay .fs-nav__link {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: color 0.3s var(--xx-ease);
}
.fs-nav--transparent-overlay.is-scrolled .fs-nav__link {
  color: var(--xx-text);
}
.fs-nav--transparent-overlay .fs-nav__link:hover {
  color: var(--xx-primary);
}
.fs-nav--transparent-overlay .fs-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}
.fs-nav--transparent-overlay.is-scrolled .fs-nav__toggle {
  color: var(--xx-text);
}
@media (max-width: 991px) {
  .fs-nav--transparent-overlay .fs-nav__list {
    display: none;
  }
  .fs-nav--transparent-overlay .fs-nav__toggle {
    display: block;
  }
}

/* ──────────────────────────────────────────────────────────
   NAVIGATION 2/8 — solid
   Use: standard, always visible
   Layout: solid bg, full opaque
   ────────────────────────────────────────────────────────── */
.fs-nav.fs-nav--solid {
  background: var(--xx-bg);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 16px clamp(20px, 4vw, 48px);
}
.fs-nav--solid .fs-nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.fs-nav--solid .fs-nav__brand {
  font-family: var(--xx-font-heading);
  font-size: 22px;
  color: var(--xx-text);
  text-decoration: none;
  font-weight: 700;
}
.fs-nav--solid .fs-nav__list {
  list-style: none;
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
}
.fs-nav--solid .fs-nav__link {
  color: var(--xx-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s var(--xx-ease);
}
.fs-nav--solid .fs-nav__link:hover {
  color: var(--xx-primary);
}
.fs-nav--solid .fs-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
@media (max-width: 991px) {
  .fs-nav--solid .fs-nav__list {
    display: none;
  }
  .fs-nav--solid .fs-nav__toggle {
    display: block;
  }
}

/* ──────────────────────────────────────────────────────────
   NAVIGATION 3/8 — megamenu
   Use: large site, many sub-pages
   Layout: nav with expandable megamenu dropdown
   ────────────────────────────────────────────────────────── */
.fs-nav.fs-nav--megamenu {
  background: var(--xx-bg);
  position: relative;
  padding: 16px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.fs-nav--megamenu .fs-nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.fs-nav--megamenu .fs-nav__brand {
  font-family: var(--xx-font-heading);
  font-size: 22px;
  color: var(--xx-text);
  text-decoration: none;
  font-weight: 700;
}
.fs-nav--megamenu .fs-nav__list {
  list-style: none;
  display: flex;
  gap: clamp(20px, 3vw, 36px);
  margin: 0;
  padding: 0;
}
.fs-nav--megamenu .fs-nav__item {
  position: static;
}
.fs-nav--megamenu .fs-nav__link {
  color: var(--xx-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  transition: color 0.3s var(--xx-ease);
}
.fs-nav--megamenu .fs-nav__link:hover {
  color: var(--xx-primary);
}
.fs-nav--megamenu .fs-nav__drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--xx-bg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
  padding: 32px clamp(20px, 4vw, 48px);
  display: none;
  z-index: 1;
}
.fs-nav--megamenu .fs-nav__item:hover .fs-nav__drawer {
  display: block;
}
.fs-nav--megamenu .fs-nav__drawer-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.fs-nav--megamenu .fs-nav__drawer-col h4 {
  font-family: var(--xx-font-heading);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--xx-primary);
  margin: 0 0 14px;
}
.fs-nav--megamenu .fs-nav__drawer-col a {
  display: block;
  padding: 6px 0;
  color: var(--xx-text-soft);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s var(--xx-ease);
}
.fs-nav--megamenu .fs-nav__drawer-col a:hover {
  color: var(--xx-primary);
}
.fs-nav--megamenu .fs-nav__toggle {
  display: none;
}
@media (max-width: 991px) {
  .fs-nav--megamenu .fs-nav__list,
  .fs-nav--megamenu .fs-nav__drawer {
    display: none;
  }
  .fs-nav--megamenu .fs-nav__toggle {
    display: block;
    background: transparent;
    border: 0;
    cursor: pointer;
  }
}

/* ──────────────────────────────────────────────────────────
   NAVIGATION 4/8 — side-drawer
   Use: mobile-first, minimal nav, off-canvas
   Layout: hamburger triggers full-height side drawer
   ────────────────────────────────────────────────────────── */
.fs-nav.fs-nav--side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px clamp(20px, 4vw, 48px);
  background: var(--xx-bg);
}
.fs-nav--side-drawer .fs-nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fs-nav--side-drawer .fs-nav__brand {
  font-family: var(--xx-font-heading);
  font-size: 20px;
  color: var(--xx-text);
  text-decoration: none;
  font-weight: 700;
}
.fs-nav--side-drawer .fs-nav__toggle {
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--xx-text);
}
.fs-nav--side-drawer .fs-nav__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 90vw);
  background: var(--xx-text);
  color: #fff;
  padding: 100px 40px 40px;
  transform: translateX(100%);
  transition: transform 0.4s var(--xx-ease);
  z-index: 999;
  overflow-y: auto;
}
.fs-nav--side-drawer.is-open .fs-nav__drawer {
  transform: translateX(0);
}
.fs-nav--side-drawer .fs-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fs-nav--side-drawer .fs-nav__link {
  font-family: var(--xx-font-heading);
  color: #fff;
  font-size: 28px;
  text-decoration: none;
  font-weight: 500;
  display: block;
  transition: color 0.3s var(--xx-ease);
}
.fs-nav--side-drawer .fs-nav__link:hover {
  color: var(--xx-primary);
}

/* ──────────────────────────────────────────────────────────
   NAVIGATION 5/8 — scroll-spy
   Use: single-page, on-page anchors
   Layout: sticky nav with active link based on scroll
   ────────────────────────────────────────────────────────── */
.fs-nav.fs-nav--scroll-spy {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--xx-bg);
  padding: 14px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.fs-nav--scroll-spy .fs-nav__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.fs-nav--scroll-spy .fs-nav__brand {
  font-family: var(--xx-font-heading);
  font-size: 18px;
  color: var(--xx-text);
  text-decoration: none;
  font-weight: 700;
}
.fs-nav--scroll-spy .fs-nav__list {
  list-style: none;
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  margin: 0;
  padding: 0;
}
.fs-nav--scroll-spy .fs-nav__link {
  color: var(--xx-text-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 4px 0;
  position: relative;
  transition: color 0.3s var(--xx-ease);
}
.fs-nav--scroll-spy .fs-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--xx-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--xx-ease);
}
.fs-nav--scroll-spy .fs-nav__link.is-active,
.fs-nav--scroll-spy .fs-nav__link:hover {
  color: var(--xx-primary);
}
.fs-nav--scroll-spy .fs-nav__link.is-active::after {
  transform: scaleX(1);
}
@media (max-width: 768px) {
  .fs-nav--scroll-spy .fs-nav__list {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* ──────────────────────────────────────────────────────────
   NAVIGATION 6/8 — hamburger-only
   Use: minimal, fashion, gallery
   Layout: just brand + hamburger
   ────────────────────────────────────────────────────────── */
.fs-nav.fs-nav--hamburger-only {
  padding: 24px clamp(20px, 4vw, 48px);
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.fs-nav--hamburger-only .fs-nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fs-nav--hamburger-only .fs-nav__brand {
  font-family: var(--xx-font-heading);
  font-size: 24px;
  color: var(--xx-text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px;
}
.fs-nav--hamburger-only .fs-nav__toggle {
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--xx-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.fs-nav--hamburger-only .fs-nav__toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--xx-ease);
}
.fs-nav--hamburger-only .fs-nav__list {
  display: none;
}

/* ──────────────────────────────────────────────────────────
   NAVIGATION 7/8 — sticky-compact
   Use: shrinking on scroll
   Layout: sticky, compresses when scrolled
   ────────────────────────────────────────────────────────── */
.fs-nav.fs-nav--sticky-compact {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--xx-bg);
  padding: 20px clamp(20px, 4vw, 48px);
  transition: padding 0.3s var(--xx-ease), box-shadow 0.3s var(--xx-ease);
}
.fs-nav--sticky-compact.is-scrolled {
  padding: 10px clamp(20px, 4vw, 48px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.fs-nav--sticky-compact .fs-nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.fs-nav--sticky-compact .fs-nav__brand {
  font-family: var(--xx-font-heading);
  font-size: 24px;
  color: var(--xx-text);
  text-decoration: none;
  font-weight: 700;
  transition: font-size 0.3s var(--xx-ease);
}
.fs-nav--sticky-compact.is-scrolled .fs-nav__brand {
  font-size: 18px;
}
.fs-nav--sticky-compact .fs-nav__list {
  list-style: none;
  display: flex;
  gap: clamp(16px, 2.5vw, 32px);
  margin: 0;
  padding: 0;
}
.fs-nav--sticky-compact .fs-nav__link {
  color: var(--xx-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s var(--xx-ease);
}
.fs-nav--sticky-compact .fs-nav__link:hover {
  color: var(--xx-primary);
}
.fs-nav--sticky-compact .fs-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
@media (max-width: 991px) {
  .fs-nav--sticky-compact .fs-nav__list {
    display: none;
  }
  .fs-nav--sticky-compact .fs-nav__toggle {
    display: block;
  }
}

/* ──────────────────────────────────────────────────────────
   NAVIGATION 8/8 — pill-tabs
   Use: playful, modern, app-like
   Layout: rounded pill background under active link
   ────────────────────────────────────────────────────────── */
.fs-nav.fs-nav--pill-tabs {
  padding: 16px clamp(20px, 4vw, 48px);
  background: var(--xx-bg);
}
.fs-nav--pill-tabs .fs-nav__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.fs-nav--pill-tabs .fs-nav__brand {
  font-family: var(--xx-font-heading);
  font-size: 20px;
  color: var(--xx-text);
  text-decoration: none;
  font-weight: 700;
}
.fs-nav--pill-tabs .fs-nav__list {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 6px;
  background: var(--xx-cream);
  border-radius: 999px;
}
.fs-nav--pill-tabs .fs-nav__link {
  color: var(--xx-text-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  transition: all 0.3s var(--xx-ease);
}
.fs-nav--pill-tabs .fs-nav__link:hover {
  color: var(--xx-primary);
}
.fs-nav--pill-tabs .fs-nav__link.is-active {
  background: var(--xx-primary);
  color: #fff;
}
.fs-nav--pill-tabs .fs-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
@media (max-width: 991px) {
  .fs-nav--pill-tabs .fs-nav__list {
    display: none;
  }
  .fs-nav--pill-tabs .fs-nav__toggle {
    display: block;
  }
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  FOOTER SECTIONS (7 variants)                               ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ──────────────────────────────────────────────────────────
   FOOTER 1/7 — minimal
   Use: clean, restrained
   Layout: single row, just essentials
   ────────────────────────────────────────────────────────── */
.fs-footer.fs-footer--minimal {
  padding: 32px clamp(20px, 4vw, 48px);
  background: var(--xx-bg);
  border-top: 1px solid rgba(0,0,0,0.08);
}
.fs-footer--minimal .fs-footer__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fs-footer--minimal .fs-footer__copyright {
  font-size: 13px;
  color: var(--xx-text-muted);
}
.fs-footer--minimal .fs-footer__list {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.fs-footer--minimal .fs-footer__list a {
  font-size: 13px;
  color: var(--xx-text-soft);
  text-decoration: none;
  transition: color 0.3s var(--xx-ease);
}
.fs-footer--minimal .fs-footer__list a:hover {
  color: var(--xx-primary);
}

/* ──────────────────────────────────────────────────────────
   FOOTER 2/7 — compact
   Use: small footer, brand + links + social
   Layout: 3-column compact
   ────────────────────────────────────────────────────────── */
.fs-footer.fs-footer--compact {
  padding: 48px clamp(20px, 4vw, 48px) 24px;
  background: var(--xx-cream);
}
.fs-footer--compact .fs-footer__inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
}
.fs-footer--compact .fs-footer__heading {
  font-family: var(--xx-font-heading);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--xx-primary);
  margin: 0 0 16px;
}
.fs-footer--compact .fs-footer__col p,
.fs-footer--compact .fs-footer__col address {
  font-size: 14px;
  line-height: 1.7;
  color: var(--xx-text-soft);
  margin: 0;
  font-style: normal;
}
.fs-footer--compact .fs-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fs-footer--compact .fs-footer__list a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  color: var(--xx-text-soft);
  text-decoration: none;
  transition: color 0.3s var(--xx-ease);
}
.fs-footer--compact .fs-footer__list a:hover {
  color: var(--xx-primary);
}
.fs-footer--compact .fs-footer__bottom {
  max-width: 1300px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 12px;
  color: var(--xx-text-muted);
  text-align: center;
}
@media (max-width: 768px) {
  .fs-footer--compact .fs-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   FOOTER 3/7 — dark-rich
   Use: premium, sophisticated
   Layout: large dark footer with many sections
   ────────────────────────────────────────────────────────── */
.fs-footer.fs-footer--dark-rich {
  background: var(--xx-text);
  color: rgba(255,255,255,0.85);
  padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px) 24px;
}
.fs-footer--dark-rich .fs-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px);
}
.fs-footer--dark-rich .fs-footer__brand {
  font-family: var(--xx-font-heading);
  font-size: 28px;
  color: #fff;
  margin: 0 0 16px;
  font-weight: 700;
}
.fs-footer--dark-rich .fs-footer__col p {
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 20px;
  opacity: 0.8;
}
.fs-footer--dark-rich .fs-footer__heading {
  font-family: var(--xx-font-heading);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 20px;
}
.fs-footer--dark-rich .fs-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fs-footer--dark-rich .fs-footer__list a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.3s var(--xx-ease);
}
.fs-footer--dark-rich .fs-footer__list a:hover {
  color: var(--xx-primary);
}
.fs-footer--dark-rich .fs-footer__social {
  display: flex;
  gap: 12px;
}
.fs-footer--dark-rich .fs-footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.3s var(--xx-ease);
}
.fs-footer--dark-rich .fs-footer__social a:hover {
  background: var(--xx-primary);
}
.fs-footer--dark-rich .fs-footer__bottom {
  max-width: 1400px;
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.7;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 991px) {
  .fs-footer--dark-rich .fs-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .fs-footer--dark-rich .fs-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   FOOTER 4/7 — image-bg
   Use: scenic, atmospheric
   Layout: footer with background image + dark overlay
   ────────────────────────────────────────────────────────── */
.fs-footer.fs-footer--image-bg {
  position: relative;
  padding: clamp(80px, 10vw, 120px) clamp(20px, 4vw, 48px) 24px;
  background-image: var(--xx-footer-bg, linear-gradient(135deg, #333, #111));
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.fs-footer--image-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 0;
}
.fs-footer--image-bg .fs-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.fs-footer--image-bg .fs-footer__brand {
  font-family: var(--xx-font-heading);
  font-size: 32px;
  margin: 0 0 16px;
}
.fs-footer--image-bg .fs-footer__col p,
.fs-footer--image-bg .fs-footer__col address {
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.85;
  margin: 0;
  font-style: normal;
}
.fs-footer--image-bg .fs-footer__heading {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 16px;
  opacity: 0.85;
}
.fs-footer--image-bg .fs-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fs-footer--image-bg .fs-footer__list a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.3s var(--xx-ease);
}
.fs-footer--image-bg .fs-footer__list a:hover {
  color: var(--xx-primary);
}
.fs-footer--image-bg .fs-footer__bottom {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 56px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 12px;
  opacity: 0.7;
  text-align: center;
}
@media (max-width: 991px) {
  .fs-footer--image-bg .fs-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   FOOTER 5/7 — multi-column
   Use: large site map, many links
   Layout: 5-column grid
   ────────────────────────────────────────────────────────── */
.fs-footer.fs-footer--multi-column {
  background: var(--xx-cream);
  padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px) 24px;
}
.fs-footer--multi-column .fs-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.fs-footer--multi-column .fs-footer__brand {
  font-family: var(--xx-font-heading);
  font-size: 26px;
  margin: 0 0 16px;
  color: var(--xx-text);
}
.fs-footer--multi-column .fs-footer__col p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--xx-text-soft);
  margin: 0 0 20px;
}
.fs-footer--multi-column .fs-footer__heading {
  font-family: var(--xx-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--xx-text);
  margin: 0 0 16px;
}
.fs-footer--multi-column .fs-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fs-footer--multi-column .fs-footer__list a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: var(--xx-text-soft);
  text-decoration: none;
  transition: color 0.3s var(--xx-ease);
}
.fs-footer--multi-column .fs-footer__list a:hover {
  color: var(--xx-primary);
}
.fs-footer--multi-column .fs-footer__bottom {
  max-width: 1400px;
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 12px;
  color: var(--xx-text-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 991px) {
  .fs-footer--multi-column .fs-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .fs-footer--multi-column .fs-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────
   FOOTER 6/7 — centered
   Use: brand-centric, single column
   Layout: centered brand + nav + social
   ────────────────────────────────────────────────────────── */
.fs-footer.fs-footer--centered {
  padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px) 24px;
  background: var(--xx-bg);
  text-align: center;
}
.fs-footer--centered .fs-footer__inner {
  max-width: 800px;
  margin: 0 auto;
}
.fs-footer--centered .fs-footer__brand {
  font-family: var(--xx-font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  color: var(--xx-text);
  margin: 0 0 16px;
  font-weight: 700;
}
.fs-footer--centered .fs-footer__col p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--xx-text-soft);
  margin: 0 auto 32px;
  max-width: 540px;
}
.fs-footer--centered .fs-footer__list {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0;
  margin: 0 0 32px;
}
.fs-footer--centered .fs-footer__list a {
  font-size: 14px;
  color: var(--xx-text);
  text-decoration: none;
  transition: color 0.3s var(--xx-ease);
}
.fs-footer--centered .fs-footer__list a:hover {
  color: var(--xx-primary);
}
.fs-footer--centered .fs-footer__social {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 40px;
}
.fs-footer--centered .fs-footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--xx-text-soft);
  text-decoration: none;
  transition: all 0.3s var(--xx-ease);
}
.fs-footer--centered .fs-footer__social a:hover {
  background: var(--xx-primary);
  border-color: var(--xx-primary);
  color: #fff;
}
.fs-footer--centered .fs-footer__bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 12px;
  color: var(--xx-text-muted);
}

/* ──────────────────────────────────────────────────────────
   FOOTER 7/7 — social-focus
   Use: community, brand engagement
   Layout: big social CTAs + minimal links
   ────────────────────────────────────────────────────────── */
.fs-footer.fs-footer--social-focus {
  background: var(--xx-gradient-primary, linear-gradient(135deg, var(--xx-primary), var(--xx-secondary)));
  color: #fff;
  padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px) 24px;
  text-align: center;
}
.fs-footer--social-focus .fs-footer__inner {
  max-width: 900px;
  margin: 0 auto;
}
.fs-footer--social-focus .fs-footer__heading {
  font-family: var(--xx-font-heading);
  font-size: clamp(24px, 3vw, 36px);
  margin: 0 0 32px;
}
.fs-footer--social-focus .fs-footer__social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.fs-footer--social-focus .fs-footer__social a {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s var(--xx-ease), background 0.3s var(--xx-ease);
}
.fs-footer--social-focus .fs-footer__social a:hover {
  background: #fff;
  color: var(--xx-primary);
  transform: translateY(-4px);
}
.fs-footer--social-focus .fs-footer__list {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0;
  margin: 0 0 32px;
}
.fs-footer--social-focus .fs-footer__list a {
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: opacity 0.3s var(--xx-ease);
}
.fs-footer--social-focus .fs-footer__list a:hover {
  opacity: 0.7;
}
.fs-footer--social-focus .fs-footer__bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 12px;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   §SEARCH — hero booking search widget (JS: ido-search-delegate.js)
   Wariant aktywny przez rotacje anty-dup: klasa .fs-search--<wariant> na <form>
   (scaffold: variant_pools.search + data-search-variant na slocie hero__search).

   >>> PULA NIE JEST ZAMKNIETA — jak dodac KOLEJNY wariant: <<<
   1) dopisz blok `.fs-search--<nazwa> { ... }` ponizej (nadpisz dowolne z base
      .fs-search__group/__label/__input/__submit — reszte dziedziczy z base),
   2) dodaj "<nazwa>" do library/templates/vibe-presets.json → variant_pools.search,
   3) gotowe: rotacja (pickVariant) i lint (N-search-variant, regex /-search--/)
      podchwytuja nowy wariant automatycznie — zaden enum/switch do aktualizacji.
   Kazdy wariant deleguje do #iai_book_form / /book-now (from_own_button=1).
   ═══════════════════════════════════════════════════════════════ */
.fs-hero__search { margin-top: 8px; }
.fs-search { display: flex; text-align: left; }
.fs-search__group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fs-search__label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--xx-font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--xx-text-muted); }
.fs-search__label svg { width: 15px; height: 15px; color: var(--xx-secondary); flex: 0 0 auto; }
.fs-search__input, .fs-search select { border: none; background: transparent; font-family: var(--xx-font-body); font-size: 15.5px; font-weight: 600; color: var(--xx-text); padding: 2px 0; width: 100%; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.fs-search__input::placeholder { color: var(--xx-text-muted); font-weight: 500; }
.fs-search__submit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: none; cursor: pointer; background: var(--xx-secondary); color: #FFFFFF; font-family: var(--xx-font-body); font-weight: 700; font-size: 15.5px; letter-spacing: .02em; transition: background-color .22s var(--xx-ease), transform .18s var(--xx-ease); }
.fs-search__submit svg { width: 18px; height: 18px; }
.fs-search__submit:hover { background: var(--xx-secondary-dark); transform: translateY(-1px); }

/* -- WARIANT: bar (kanon osada) — poziomy przezroczysty pasek, dzielniki 1px -- */
.fs-search--bar { align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 8px; max-width: 920px; margin: 26px auto 0; background: rgba(255,255,255,.96); border-radius: var(--xx-radius-lg); box-shadow: 0 24px 60px rgba(20,16,10,.30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fs-search--bar .fs-search__group { flex: 1 1 0; padding: 12px 22px; position: relative; }
.fs-search--bar .fs-search__group + .fs-search__group::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: var(--xx-border); }
.fs-search--bar .fs-search__group--guests { flex: 0 0 128px; }
.fs-search--bar .fs-search__submit { padding: 0 30px; border-radius: calc(var(--xx-radius-lg) - 4px); }
@media (max-width: 820px) {
  .fs-search--bar { flex-direction: column; gap: 2px; max-width: 440px; padding: 10px; }
  .fs-search--bar .fs-search__group, .fs-search--bar .fs-search__group--guests { flex: 1 1 auto; padding: 12px 16px; }
  .fs-search--bar .fs-search__group + .fs-search__group::before { left: 16px; right: 16px; top: 0; height: 1px; width: auto; }
  .fs-search--bar .fs-search__submit { width: 100%; padding: 15px 24px; margin-top: 8px; }
}

/* -- WARIANT: card (kanon easyrent) — biala karta na siatce, etykieta nad polem -- */
.fs-search--card { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr auto; gap: 14px; align-items: end; max-width: 940px; margin: 26px auto 0; padding: 22px; background: var(--xx-white, #FFFFFF); border: 1px solid var(--xx-border); border-radius: var(--xx-radius-lg); box-shadow: var(--xx-shadow-md); }
.fs-search--card .fs-search__group { gap: 6px; }
.fs-search--card .fs-search__input, .fs-search--card select { border: 1px solid var(--xx-border); border-radius: var(--xx-radius); padding: 11px 14px; font-size: 15px; background: var(--xx-cream, #FFFFFF); }
.fs-search--card .fs-search__submit { height: 46px; padding: 0 26px; border-radius: var(--xx-radius); }
@media (max-width: 991px) { .fs-search--card { grid-template-columns: 1fr 1fr; } .fs-search--card .fs-search__submit { grid-column: 1 / -1; width: 100%; } }
@media (max-width: 560px) { .fs-search--card { grid-template-columns: 1fr; } }

/* -- WARIANT: pill — kompaktowy, mocno zaokraglony, lekki -- */
.fs-search--pill { align-items: center; flex-wrap: nowrap; gap: 0; padding: 6px 6px 6px 20px; max-width: 720px; margin: 24px auto 0; background: rgba(255,255,255,.94); border: 1px solid var(--xx-border); border-radius: 999px; box-shadow: 0 12px 34px rgba(20,16,10,.20); }
.fs-search--pill .fs-search__group { flex: 1 1 0; padding: 6px 18px; position: relative; }
.fs-search--pill .fs-search__group + .fs-search__group::before { content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: var(--xx-border); }
.fs-search--pill .fs-search__label { font-size: 9.5px; letter-spacing: 1.1px; }
.fs-search--pill .fs-search__input, .fs-search--pill select { font-size: 14px; }
.fs-search--pill .fs-search__group--guests { flex: 0 0 96px; }
.fs-search--pill .fs-search__submit { width: 52px; height: 52px; padding: 0; border-radius: 999px; }
@media (max-width: 820px) {
  .fs-search--pill { flex-direction: column; gap: 2px; max-width: 400px; padding: 12px; border-radius: var(--xx-radius-lg); }
  .fs-search--pill .fs-search__group { flex: 1 1 auto; padding: 10px 14px; }
  .fs-search--pill .fs-search__group + .fs-search__group::before { left: 14px; right: 14px; top: 0; height: 1px; width: auto; }
  .fs-search--pill .fs-search__submit { width: 100%; height: 48px; border-radius: var(--xx-radius); }
}

/* -- WARIANT: split — dwupoziomowy: lokalizacja u gory, daty+goscie+submit nizej -- */
.fs-search--split { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px 14px; align-items: end; max-width: 900px; margin: 26px auto 0; padding: 20px; background: rgba(255,255,255,.97); border-radius: var(--xx-radius-lg); box-shadow: 0 20px 50px rgba(20,16,10,.26); }
.fs-search--split .fs-search__group--loc { grid-column: 1 / -1; }
.fs-search--split .fs-search__group { gap: 6px; }
.fs-search--split .fs-search__input, .fs-search--split select { border-bottom: 2px solid var(--xx-border); padding: 8px 2px; font-size: 15px; }
.fs-search--split .fs-search__submit { height: 46px; padding: 0 26px; border-radius: var(--xx-radius); }
@media (max-width: 700px) { .fs-search--split { grid-template-columns: 1fr 1fr; } .fs-search--split .fs-search__submit { grid-column: 1 / -1; width: 100%; } }
@media (max-width: 460px) { .fs-search--split { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   END OF LAYER 4 — VARIETY PATTERNS
   74 variants across 10 section types (Search x4 added 2026-07-17).
   ═══════════════════════════════════════════════════════════════ */

/* === /§VIBE-VARIETY (L4) === */


/* ============================================================
   LAYER 5 — COLOR SYSTEM (vibe) — vibe "luxury-heritage" (wycięty blok)
   ============================================================ */

/* uwaga: selektory [data-vibe="luxury-heritage"] zachowane — ustaw <body data-vibe="luxury-heritage"> LUB usuń atrybut selektora recznie */
────────────────────────────────────────────────────────── */
:root[data-vibe="luxury-heritage"],
[data-vibe="luxury-heritage"] {
  /* BRAND override (bylo burgund #CAB48D z presetu vibe — Five Stars = zloto) */
  --xx-primary:         #CAB48D;
  --xx-primary-light:   #DEC9A0;
  --xx-primary-dark:    #8A6D3B;
  --xx-primary-soft:    rgba(202, 180, 141, 0.12);
  --xx-primary-ink:     #8A6D3B;   /* akcent JAKO TEKST na jasnym tle (>=4.6:1) — NIE #CAB48D (1.8:1 fail) */
  --xx-secondary:       #B0914F;
  --xx-secondary-light: #D4BC9A;
  --xx-secondary-dark:  #A89070;
  --xx-cream:           #F2EDE4;
  --xx-cream2:          #EDE6DA;
  --xx-cream3:          #E5DDD0;
  --xx-bg:              #FAFAF5;
  --xx-text:            #1A1A1A;
  --xx-text-soft:       #3A3A3A;
  --xx-text-muted:      #6B6B6B;
  --xx-shadow-sm:       0 2px 8px rgba(26, 26, 26, 0.06);
  --xx-shadow-md:       0 4px 30px rgba(26, 26, 26, 0.08);
  --xx-shadow-lg:       0 12px 40px rgba(26, 26, 26, 0.12);
  --xx-gradient-primary: linear-gradient(135deg, #CAB48D 0%, #8A6D3B 100%);
  --xx-gradient-accent:  linear-gradient(135deg, #B0914F 0%, #A89070 100%);
  --xx-radius:          8px;
  --xx-radius-lg:       16px;
  --xx-ease:            cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  [data-vibe="luxury-heritage"]:not([data-mode="light"]) {
    --xx-primary:         #CAB48D;
    --xx-primary-light:   #A04A55;
    --xx-primary-dark:    #8A6D3B;
    --xx-primary-soft:    rgba(202, 180, 141, 0.12);
    --xx-secondary:       #D4BC9A;
    --xx-secondary-light: #E2CCAE;
    --xx-secondary-dark:  #B89E7A;
    --xx-cream:           #2A2024;
    --xx-cream2:          #251D20;
    --xx-cream3:          #1F181C;
    --xx-bg:              #1A1418;
    --xx-text:            #F2EDE4;
    --xx-text-soft:       #D8D2C8;
    --xx-text-muted:      #9A9590;
    --xx-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.30);
    --xx-shadow-md:       0 4px 30px rgba(0, 0, 0, 0.40);
    --xx-shadow-lg:       0 12px 40px rgba(0, 0, 0, 0.55);
    --xx-gradient-primary: linear-gradient(135deg, #CAB48D 0%, #8A6D3B 100%);
    --xx-gradient-accent:  linear-gradient(135deg, #D4BC9A 0%, #B89E7A 100%);
  }
}

[data-vibe="luxury-heritage"][data-mode="dark"],
[data-vibe="luxury-heritage"].force-dark {
  --xx-primary:         #CAB48D;
  --xx-primary-light:   #A04A55;
  --xx-primary-dark:    #8A6D3B;
  --xx-primary-soft:    rgba(202, 180, 141, 0.12);
  --xx-secondary:       #D4BC9A;
  --xx-secondary-light: #E2CCAE;
  --xx-secondary-dark:  #B89E7A;
  --xx-cream:           #2A2024;
  --xx-cream2:          #251D20;
  --xx-cream3:          #1F181C;
  --xx-bg:              #1A1418;
  --xx-text:            #F2EDE4;
  --xx-text-soft:       #D8D2C8;
  --xx-text-muted:      #9A9590;
  --xx-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.30);
  --xx-shadow-md:       0 4px 30px rgba(0, 0, 0, 0.40);
  --xx-shadow-lg:       0 12px 40px rgba(0, 0, 0, 0.55);
  --xx-gradient-primary: linear-gradient(135deg, #CAB48D 0%, #8A6D3B 100%);
  --xx-gradient-accent:  linear-gradient(135deg, #D4BC9A 0%, #B89E7A 100%);
}


/* ──────────────────────────────────────────────────────────
   2. MODERN MINIMAL
   Nowoczesny apartament, design hotel


/* ============================================================
   LAYER 6 — TYPOGRAPHY (vibe) — vibe "luxury-heritage" (wycięty blok)
   ============================================================ */

/* uwaga: selektory [data-vibe="luxury-heritage"] zachowane — ustaw <body data-vibe="luxury-heritage"> LUB usuń atrybut selektora recznie */
────────────────────────────────────────────────────────── */
[data-vibe="luxury-heritage"] {
  --xx-font-heading: 'Playfair Display', Georgia, serif;
  --xx-font-body:    'Source Sans 3', system-ui, sans-serif;   /* bylo 'DM Sans' — nie ladowany; marka = Source Sans 3 */
  --xx-font-display: 'Playfair Display', Georgia, serif;
  --xx-letter-spacing-heading: -0.01em;
  --xx-letter-spacing-caption: 1.5px;
  --xx-line-height-tight: 1.1;
  --xx-line-height-base: 1.6;
  --xx-line-height-loose: 1.8;
}

[data-vibe="luxury-heritage"] body {
  font-family: var(--xx-font-body);
  line-height: var(--xx-line-height-base);
  color: var(--xx-text);
}

[data-vibe="luxury-heritage"] h1,
[data-vibe="luxury-heritage"] .fs-h1 {
  font-family: var(--xx-font-heading);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  line-height: var(--xx-line-height-tight);
  letter-spacing: var(--xx-letter-spacing-heading);
  margin: 0 0 0.5em;
}
[data-vibe="luxury-heritage"] h2,
[data-vibe="luxury-heritage"] .fs-h2 {
  font-family: var(--xx-font-heading);
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 500;
  line-height: var(--xx-line-height-tight);
  margin: 0 0 0.6em;
}
[data-vibe="luxury-heritage"] h3,
[data-vibe="luxury-heritage"] .fs-h3 {
  font-family: var(--xx-font-heading);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.6em;
}
[data-vibe="luxury-heritage"] h4,
[data-vibe="luxury-heritage"] .fs-h4 {
  font-family: var(--xx-font-heading);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 0.7em;
}
[data-vibe="luxury-heritage"] p,
[data-vibe="luxury-heritage"] .fs-p {
  font-family: var(--xx-font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: var(--xx-line-height-loose);
  margin: 0 0 1em;
}
[data-vibe="luxury-heritage"] .fs-caption {
  font-family: var(--xx-font-body);
  font-size: 12px;
  letter-spacing: var(--xx-letter-spacing-caption);
  text-transform: uppercase;
  font-weight: 500;
}
[data-vibe="luxury-heritage"] .fs-eyebrow {
  font-family: var(--xx-font-body);
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--xx-primary-ink, #8A6D3B);   /* gold-dark 4.6:1 na jasnym (bylo --xx-primary 1.8:1 fail) */
}
[data-vibe="luxury-heritage"] .fs-drop-cap::first-letter {
  font-family: var(--xx-font-heading);
  font-size: 4em;
  float: left;
  line-height: 0.9;
  margin: 6px 12px 0 0;
  color: var(--xx-primary-ink, #8A6D3B);
}
[data-vibe="luxury-heritage"] .fs-lead {
  font-family: var(--xx-font-body);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.6;
  color: var(--xx-text-soft);
}


/* ──────────────────────────────────────────────────────────
   2. MODERN MINIMAL — Manrope + Inter


/* ============================================================
   LAYER 7 — INTERACTIONS (hover/reveal/anim)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   LAYER 7 — INTERACTIONS
   Hover effects (8), scroll reveals (5), modal animations (4),
   loading states (3), form validation visuals (3).

   Wszystkie używają --xx-ease (defined w layer5).
   Respektują @media (prefers-reduced-motion: reduce).
   ═══════════════════════════════════════════════════════════════ */

/* ── §LIGHTBOX (ido-lb) — uniwersalny click-to-zoom (JS: ido-lightbox.js) ──
   Fixed namespace `ido-lb` (NIE prefiksowany) — JS tworzy identyczne klasy, wiec
   NIE podlega renameCssClasses. Triggery (.fs-gallery / .txt-text .row img /
   .cms .row img) sa prefiksowane/natywne → zdjecia z galerii I z sekcji CMS klienta. */
.ido-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center}
.ido-lb.ido-lb--active{display:flex}
.ido-lb__overlay{position:absolute;inset:0;background:rgba(15,15,15,.92);cursor:zoom-out}
.ido-lb__img{position:relative;max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);animation:ido-lb-in .25s ease}
@keyframes ido-lb-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.ido-lb__caption{position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center;color:#fff;font-size:14px;padding:0 16px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.ido-lb__close,.ido-lb__prev,.ido-lb__next{position:absolute;z-index:2;background:rgba(0,0,0,.4);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.ido-lb__close:hover,.ido-lb__prev:hover,.ido-lb__next:hover{background:rgba(0,0,0,.7)}
.ido-lb__close{top:16px;right:16px}
.ido-lb__prev{left:16px;top:50%;transform:translateY(-50%)}
.ido-lb__next{right:16px;top:50%;transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){.ido-lb__img{animation:none}}
/* obrazy klikalne do powiekszenia — galeria + sekcje CMS klienta (skalowanie hover) */
.fs-gallery img,.fs-gallery__item img,.txt-text .row img,.cms .row img{cursor:zoom-in;transition:transform .3s ease,box-shadow .3s ease}
.fs-gallery__item:hover img,.txt-text .row a:hover img{transform:scale(1.03)}

/* ── REDUCED MOTION GUARD (apply first) ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fs-hover--scale,
  .fs-hover--glow,
  .fs-hover--lift,
  .fs-hover--rotate-3d,
  .fs-hover--slide-underline,
  .fs-hover--color-shift,
  .fs-hover--brightness-pop,
  .fs-hover--border-grow,
  .fs-reveal,
  .fs-reveal--slide-left,
  .fs-reveal--zoom,
  .fs-reveal--stagger > *,
  .fs-reveal--parallax,
  .fs-skeleton,
  .fs-spinner,
  .fs-dot-loader > span,
  .fs-modal--fade-in,
  .fs-modal--slide-up,
  .fs-modal--slide-right,
  .fs-modal--scale-bounce {
    transition: none !important;
    animation: none !important;
  }
  .fs-reveal,
  .fs-reveal--slide-left,
  .fs-reveal--zoom,
  .fs-reveal--parallax {
    opacity: 1 !important;
    transform: none !important;
  }
  .fs-reveal--stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HOVER EFFECTS (8 variants)
   Wszystkie wykorzystują GPU-accelerated transforms i opacity.
   Dodawaj klasy do dowolnego elementu, np. .fs-card.fs-hover--lift.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. SCALE ───────────────────────────────────────────────── */
.fs-hover--scale {
  transition: transform 0.3s var(--xx-ease);
  will-change: transform;
  transform-origin: center center;
  cursor: pointer;
}
.fs-hover--scale:hover,
.fs-hover--scale:focus-visible {
  transform: scale(1.03);
}
.fs-hover--scale:active {
  transform: scale(0.98);
}

/* ── 2. GLOW ────────────────────────────────────────────────── */
.fs-hover--glow {
  transition: box-shadow 0.3s var(--xx-ease),
              transform 0.3s var(--xx-ease);
  will-change: box-shadow;
  cursor: pointer;
}
.fs-hover--glow:hover,
.fs-hover--glow:focus-visible {
  box-shadow: 0 12px 40px var(--xx-primary-soft),
              0 4px 12px rgba(0, 0, 0, 0.08);
}
.fs-hover--glow:active {
  box-shadow: 0 4px 16px var(--xx-primary-soft);
}

/* ── 3. SLIDE UNDERLINE ─────────────────────────────────────── */
.fs-hover--slide-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}
.fs-hover--slide-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--xx-primary);
  transition: width 0.3s var(--xx-ease);
  pointer-events: none;
}
.fs-hover--slide-underline:hover::after,
.fs-hover--slide-underline:focus-visible::after {
  width: 100%;
}

/* ── 4. LIFT ────────────────────────────────────────────────── */
.fs-hover--lift {
  transition: transform 0.3s var(--xx-ease),
              box-shadow 0.3s var(--xx-ease);
  will-change: transform, box-shadow;
  cursor: pointer;
}
.fs-hover--lift:hover,
.fs-hover--lift:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12),
              0 6px 16px rgba(0, 0, 0, 0.06);
}
.fs-hover--lift:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ── 5. COLOR SHIFT ─────────────────────────────────────────── */
.fs-hover--color-shift {
  transition: color 0.3s var(--xx-ease),
              background-color 0.3s var(--xx-ease),
              border-color 0.3s var(--xx-ease);
  cursor: pointer;
  background-color: var(--xx-cream);
  color: var(--xx-text);
}
.fs-hover--color-shift:hover,
.fs-hover--color-shift:focus-visible {
  background-color: var(--xx-primary);
  color: var(--xx-cream);
  border-color: var(--xx-primary);
}
.fs-hover--color-shift:active {
  background-color: var(--xx-primary-dark, var(--xx-primary));
}

/* ── 6. ROTATE 3D ───────────────────────────────────────────── */
.fs-hover--rotate-3d {
  transition: transform 0.5s var(--xx-ease),
              box-shadow 0.5s var(--xx-ease);
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}
.fs-hover--rotate-3d:hover,
.fs-hover--rotate-3d:focus-visible {
  transform: perspective(800px) rotateY(5deg) rotateX(2deg);
  box-shadow: -12px 16px 32px rgba(0, 0, 0, 0.12);
}
.fs-hover--rotate-3d:active {
  transform: perspective(800px) rotateY(2deg) rotateX(1deg);
}

/* ── 7. BRIGHTNESS POP ──────────────────────────────────────── */
.fs-hover--brightness-pop {
  transition: filter 0.3s var(--xx-ease),
              transform 0.3s var(--xx-ease);
  will-change: filter;
  cursor: pointer;
}
.fs-hover--brightness-pop:hover,
.fs-hover--brightness-pop:focus-visible {
  filter: brightness(1.1) saturate(1.2);
}
.fs-hover--brightness-pop:active {
  filter: brightness(0.98) saturate(1.1);
}

/* ── 8. BORDER GROW (center-out) ────────────────────────────── */
.fs-hover--border-grow {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-bottom: 4px;
}
.fs-hover--border-grow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--xx-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--xx-ease);
  pointer-events: none;
}
.fs-hover--border-grow:hover::after,
.fs-hover--border-grow:focus-visible::after {
  transform: scaleX(1);
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL (5 variants)
   Base state: hidden; add .fs-in via IntersectionObserver in JS.
   Wszystkie używają opacity + transform (GPU-friendly).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. BASE REVEAL (fade + slide up) ───────────────────────── */
.fs-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--xx-ease),
              transform 0.6s var(--xx-ease);
  will-change: opacity, transform;
}
.fs-reveal.fs-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── 2. SLIDE LEFT ──────────────────────────────────────────── */
.fs-reveal--slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s var(--xx-ease),
              transform 0.6s var(--xx-ease);
  will-change: opacity, transform;
}
.fs-reveal--slide-left.fs-in {
  opacity: 1;
  transform: translateX(0);
}

/* ── 3. ZOOM ────────────────────────────────────────────────── */
.fs-reveal--zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s var(--xx-ease),
              transform 0.6s var(--xx-ease);
  will-change: opacity, transform;
}
.fs-reveal--zoom.fs-in {
  opacity: 1;
  transform: scale(1);
}

/* ── 4. STAGGER (parent class — children animate one by one) ── */
.fs-reveal--stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--xx-ease),
              transform 0.5s var(--xx-ease);
  will-change: opacity, transform;
}
.fs-reveal--stagger.fs-in > * {
  opacity: 1;
  transform: translateY(0);
}
/* JS sets transition-delay per child (data-stagger-index attr) */
.fs-reveal--stagger.fs-in > *:nth-child(1) { transition-delay: 0s; }
.fs-reveal--stagger.fs-in > *:nth-child(2) { transition-delay: 0.08s; }
.fs-reveal--stagger.fs-in > *:nth-child(3) { transition-delay: 0.16s; }
.fs-reveal--stagger.fs-in > *:nth-child(4) { transition-delay: 0.24s; }
.fs-reveal--stagger.fs-in > *:nth-child(5) { transition-delay: 0.32s; }
.fs-reveal--stagger.fs-in > *:nth-child(6) { transition-delay: 0.40s; }
.fs-reveal--stagger.fs-in > *:nth-child(7) { transition-delay: 0.48s; }
.fs-reveal--stagger.fs-in > *:nth-child(8) { transition-delay: 0.56s; }

/* ── 5. PARALLAX (longer distance, slower) ──────────────────── */
.fs-reveal--parallax {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s var(--xx-ease),
              transform 0.9s var(--xx-ease);
  will-change: opacity, transform;
}
.fs-reveal--parallax.fs-in {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL ANIMATIONS (4 keyframes + 4 classes + overlay)
   Stosuj klasę .fs-active na modalu by uruchomić animację wejścia.
   Overlay (.fs-modal__overlay) zawsze fade-in.
   ═══════════════════════════════════════════════════════════════ */

/* ── OVERLAY (background dimmer) ────────────────────────────── */
.fs-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: xx-overlay-fade 0.3s var(--xx-ease) forwards;
  z-index: 1000;
}
.fs-modal__overlay.fs-closing {
  animation: xx-overlay-fade-out 0.25s var(--xx-ease) forwards;
}
@keyframes xx-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes xx-overlay-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── MODAL BASE (positioning) ───────────────────────────────── */
.fs-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--xx-cream);
  color: var(--xx-text);
  border-radius: 12px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.24);
  z-index: 1001;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  opacity: 0;
}

/* ── 1. FADE IN ─────────────────────────────────────────────── */
@keyframes xx-modal-fade-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.fs-modal--fade-in.fs-active {
  animation: xx-modal-fade-in 0.3s var(--xx-ease) forwards;
}

/* ── 2. SLIDE UP ────────────────────────────────────────────── */
@keyframes xx-modal-slide-up {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 40px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.fs-modal--slide-up.fs-active {
  animation: xx-modal-slide-up 0.35s var(--xx-ease) forwards;
}

/* ── 3. SLIDE RIGHT (drawer style) ──────────────────────────── */
@keyframes xx-modal-slide-right {
  from { opacity: 0; transform: translate(100%, -50%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.fs-modal--slide-right.fs-active {
  animation: xx-modal-slide-right 0.4s var(--xx-ease) forwards;
}
/* Drawer variant: anchored to right edge */
.fs-modal--drawer.fs-modal--slide-right {
  top: 0;
  left: auto;
  right: 0;
  transform: translateX(100%);
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  width: min(420px, 90vw);
}
.fs-modal--drawer.fs-modal--slide-right.fs-active {
  animation: xx-drawer-slide-right 0.4s var(--xx-ease) forwards;
}
@keyframes xx-drawer-slide-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ── 4. SCALE BOUNCE ────────────────────────────────────────── */
@keyframes xx-modal-scale-bounce {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.fs-modal--scale-bounce.fs-active {
  animation: xx-modal-scale-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── MODAL CLOSE (exit animation) ───────────────────────────── */
.fs-modal.fs-closing {
  animation: xx-modal-close 0.25s var(--xx-ease) forwards !important;
}
@keyframes xx-modal-close {
  from { opacity: 1; }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}

/* ═══════════════════════════════════════════════════════════════
   LOADING STATES (3 patterns)
   Skeleton (placeholder), Spinner (circular), Dot loader (bouncing).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. SKELETON ────────────────────────────────────────────── */
.fs-skeleton {
  display: block;
  background-color: var(--xx-cream);
  border-radius: 6px;
  animation: xx-skeleton-pulse 1.5s var(--xx-ease) infinite;
  pointer-events: none;
  user-select: none;
  color: transparent;
}
@keyframes xx-skeleton-pulse {
  0%, 100% { background-color: var(--xx-cream); }
  50%      { background-color: var(--xx-cream3, #e8e2d8); }
}
.fs-skeleton--text {
  height: 1em;
  width: 100%;
  margin-bottom: 0.5em;
  border-radius: 4px;
}
.fs-skeleton--text:last-child {
  width: 70%;
  margin-bottom: 0;
}
.fs-skeleton--title {
  height: 1.4em;
  width: 60%;
  margin-bottom: 0.75em;
  border-radius: 4px;
}
.fs-skeleton--circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.fs-skeleton--image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
.fs-skeleton--button {
  width: 120px;
  height: 44px;
  border-radius: 8px;
}

/* ── 2. SPINNER ─────────────────────────────────────────────── */
.fs-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--xx-cream3, #e8e2d8);
  border-top-color: var(--xx-primary);
  border-radius: 50%;
  animation: xx-spinner 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes xx-spinner {
  to { transform: rotate(360deg); }
}
.fs-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.fs-spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}
.fs-spinner--cream {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--xx-cream);
}

/* ── 3. DOT LOADER ──────────────────────────────────────────── */
.fs-dot-loader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.fs-dot-loader > span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--xx-primary);
  animation: xx-dot-bounce 1.4s var(--xx-ease) infinite both;
  opacity: 0.5;
}
.fs-dot-loader > span:nth-child(1) { animation-delay: 0s; }
.fs-dot-loader > span:nth-child(2) { animation-delay: 0.15s; }
.fs-dot-loader > span:nth-child(3) { animation-delay: 0.3s; }
@keyframes xx-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.fs-dot-loader--lg > span {
  width: 12px;
  height: 12px;
}
.fs-dot-loader--cream > span {
  background: var(--xx-cream);
}

/* ═══════════════════════════════════════════════════════════════
   FORM VALIDATION VISUALS (3)
   Klasy aplikowane przez JS na podstawie state walidacji.
   Zielone/czerwone explicit (nie zmieniają się per klient).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. INPUT VALID (green checkmark) ───────────────────────── */
.fs-input--valid {
  border-color: #2ECC71 !important;
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%232ECC71' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8 7 12 13 4'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  transition: border-color 0.2s var(--xx-ease);
}

/* ── 2. INPUT ERROR (red x mark) ────────────────────────────── */
.fs-input--error {
  border-color: #E74C3C !important;
  padding-right: 36px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23E74C3C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='4' x2='12' y2='12'/><line x1='12' y1='4' x2='4' y2='12'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  transition: border-color 0.2s var(--xx-ease);
}

/* ── 3. ERROR MESSAGE (below input) ─────────────────────────── */
.fs-input-error-msg {
  color: #E74C3C;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fs-input-error-msg::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23E74C3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='7' r='6'/><line x1='7' y1='4' x2='7' y2='8'/><line x1='7' y1='10' x2='7' y2='10'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── SHAKE ANIMATION (invalid submit) ───────────────────────── */
@keyframes xx-input-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
.fs-input--shake {
  animation: xx-input-shake 0.3s var(--xx-ease);
}

/* ── FOCUS RING (valid/error states) ────────────────────────── */
.fs-input--valid:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
}
.fs-input--error:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   COMBINATION UTILITIES
   Klasy łączące kilka efektów (np. card z lift + glow).
   Dodawaj do karty/buttonu by jednym slug-em włączyć kompozyt.
   ═══════════════════════════════════════════════════════════════ */

/* ── CARD INTERACTION (lift + glow) ─────────────────────────── */
.fs-hover--card {
  transition: transform 0.3s var(--xx-ease),
              box-shadow 0.3s var(--xx-ease);
  will-change: transform, box-shadow;
  cursor: pointer;
}
.fs-hover--card:hover,
.fs-hover--card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12),
              0 0 24px var(--xx-primary-soft);
}
.fs-hover--card:active {
  transform: translateY(-1px);
}

/* ── IMAGE ZOOM (within fixed-size container) ───────────────── */
.fs-hover--image-zoom {
  overflow: hidden;
  position: relative;
}
.fs-hover--image-zoom img,
.fs-hover--image-zoom > picture > img {
  transition: transform 0.5s var(--xx-ease);
  will-change: transform;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-hover--image-zoom:hover img,
.fs-hover--image-zoom:focus-visible img,
.fs-hover--image-zoom:hover > picture > img,
.fs-hover--image-zoom:focus-visible > picture > img {
  transform: scale(1.06);
}

/* ── OVERLAY REVEAL (caption on hover) ──────────────────────── */
.fs-hover--overlay {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.fs-hover--overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.6) 0%,
              rgba(0, 0, 0, 0) 60%);
  opacity: 0;
  transition: opacity 0.3s var(--xx-ease);
  pointer-events: none;
  z-index: 1;
}
.fs-hover--overlay:hover::before,
.fs-hover--overlay:focus-visible::before {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   DURATION + DELAY UTILITIES
   Dodaj klasę by precyzyjnie sterować czasem animacji/transition.
   Działa z .fs-reveal*, .fs-hover--*, .fs-modal--*.
   ═══════════════════════════════════════════════════════════════ */

.fs-dur-150 { transition-duration: 0.15s !important; animation-duration: 0.15s !important; }
.fs-dur-200 { transition-duration: 0.2s  !important; animation-duration: 0.2s  !important; }
.fs-dur-300 { transition-duration: 0.3s  !important; animation-duration: 0.3s  !important; }
.fs-dur-500 { transition-duration: 0.5s  !important; animation-duration: 0.5s  !important; }
.fs-dur-700 { transition-duration: 0.7s  !important; animation-duration: 0.7s  !important; }
.fs-dur-1000 { transition-duration: 1s   !important; animation-duration: 1s   !important; }

.fs-delay-0   { transition-delay: 0s     !important; animation-delay: 0s     !important; }
.fs-delay-100 { transition-delay: 0.1s   !important; animation-delay: 0.1s   !important; }
.fs-delay-200 { transition-delay: 0.2s   !important; animation-delay: 0.2s   !important; }
.fs-delay-300 { transition-delay: 0.3s   !important; animation-delay: 0.3s   !important; }
.fs-delay-500 { transition-delay: 0.5s   !important; animation-delay: 0.5s   !important; }
.fs-delay-700 { transition-delay: 0.7s   !important; animation-delay: 0.7s   !important; }

/* ═══════════════════════════════════════════════════════════════
   CURSOR + STATE HELPERS
   ═══════════════════════════════════════════════════════════════ */

.fs-cursor-pointer { cursor: pointer; }
.fs-cursor-help    { cursor: help; }
.fs-cursor-grab    { cursor: grab; }
.fs-cursor-grab:active { cursor: grabbing; }
.fs-cursor-not-allowed { cursor: not-allowed; }

.fs-state-loading {
  pointer-events: none;
  opacity: 0.6;
  position: relative;
}
.fs-state-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.fs-state-disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(0.4);
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT MEDIA — disable all interactions/animations
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .fs-skeleton,
  .fs-spinner,
  .fs-dot-loader,
  .fs-modal__overlay,
  .fs-modal {
    display: none !important;
  }
  .fs-reveal,
  .fs-reveal--slide-left,
  .fs-reveal--zoom,
  .fs-reveal--stagger > *,
  .fs-reveal--parallax {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END LAYER 7 — INTERACTIONS
   ═══════════════════════════════════════════════════════════════ */



/* ============================================================
   LAYER 8 — DIVIDERS / PATTERNS
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   LAYER 8 — DIVIDERS + PATTERNS + TEXTURES
   Visual accents do separowania sekcji i bogacenia teł.

   - Curved dividers (5): SVG shape masks między sekcjami
   - Wave dividers (5): soft/double/sharp/organic/thin
   - Geometric patterns (5): dots/lines/triangles/hexagon/diamond
   - Organic shapes (5): blob masks
   - Texture overlays (5): paper/fabric/grunge/noise/watercolor
   - Vibe-specific accents (8): luxury gold-leaf, art-deco sunburst, mountain topo, etc.

   Wszystkie SVG inline jako data: URI — bez assets zewnętrznych.
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   1) CURVED DIVIDERS
   Sekcyjne przejścia z miękkimi krzywymi Béziera.
   Wszystkie wymagają parenta z kolorem dolnej sekcji.
   Element sam ma kolor górnej sekcji, ::after rysuje wycinek dolnej.
   ─────────────────────────────────────────────────────────────── */

.fs-divider--curve-down {
  position: relative;
  height: 100px;
  width: 100%;
  background: var(--xx-bg, #FAFAF5);
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--xx-cream, #FAFAF5);
}
.fs-divider--curve-down::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23FAFAF5' d='M0,60 C480,0 960,120 1440,60 L1440,100 L0,100 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fs-divider--curve-up {
  position: relative;
  height: 100px;
  width: 100%;
  background: var(--xx-bg, #FAFAF5);
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.fs-divider--curve-up::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23FAFAF5' d='M0,40 C480,100 960,-20 1440,40 L1440,0 L0,0 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fs-divider--curve-asym {
  position: relative;
  height: 120px;
  width: 100%;
  background: var(--xx-bg, #FAFAF5);
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.fs-divider--curve-asym::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path fill='%23FAFAF5' d='M0,20 C300,100 800,40 1100,90 C1280,118 1380,110 1440,90 L1440,120 L0,120 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fs-divider--curve-tilt {
  position: relative;
  height: 110px;
  width: 100%;
  background: var(--xx-bg, #FAFAF5);
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.fs-divider--curve-tilt::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'><path fill='%23FAFAF5' d='M0,90 C400,70 800,40 1440,10 L1440,110 L0,110 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fs-divider--curve-double {
  position: relative;
  height: 130px;
  width: 100%;
  background: var(--xx-bg, #FAFAF5);
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.fs-divider--curve-double::before {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23EEEEE4' opacity='0.6' d='M0,50 C320,10 720,90 1440,50 L1440,100 L0,100 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.fs-divider--curve-double::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23FAFAF5' d='M0,70 C480,20 960,110 1440,60 L1440,100 L0,100 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}


/* ───────────────────────────────────────────────────────────────
   2) WAVE DIVIDERS
   Wave/zigzag variants — flowing transitions inspired by water/wind.
   ─────────────────────────────────────────────────────────────── */

.fs-divider--wave-soft {
  position: relative;
  height: 80px;
  width: 100%;
  background: var(--xx-bg, #FAFAF5);
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.fs-divider--wave-soft::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path fill='%23FAFAF5' d='M0,40 C180,10 360,70 540,40 C720,10 900,70 1080,40 C1260,10 1440,40 1440,40 L1440,80 L0,80 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fs-divider--wave-double {
  position: relative;
  height: 100px;
  width: 100%;
  background: var(--xx-bg, #FAFAF5);
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.fs-divider--wave-double::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23EEEEE4' opacity='0.55' d='M0,50 C200,20 400,80 600,50 C800,20 1000,80 1200,50 C1320,30 1440,50 1440,50 L1440,100 L0,100 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.fs-divider--wave-double::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23FAFAF5' d='M0,60 C200,30 400,90 600,60 C800,30 1000,90 1200,60 C1320,40 1440,60 1440,60 L1440,100 L0,100 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fs-divider--wave-sharp {
  position: relative;
  height: 70px;
  width: 100%;
  background: var(--xx-bg, #FAFAF5);
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.fs-divider--wave-sharp::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path fill='%23FAFAF5' d='M0,40 L120,10 L240,40 L360,10 L480,40 L600,10 L720,40 L840,10 L960,40 L1080,10 L1200,40 L1320,10 L1440,40 L1440,70 L0,70 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fs-divider--wave-organic {
  position: relative;
  height: 120px;
  width: 100%;
  background: var(--xx-bg, #FAFAF5);
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.fs-divider--wave-organic::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path fill='%23FAFAF5' d='M0,60 C120,30 240,100 380,70 C540,40 680,90 820,55 C980,25 1120,95 1260,65 C1340,50 1440,80 1440,80 L1440,120 L0,120 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fs-divider--wave-thin {
  position: relative;
  height: 40px;
  width: 100%;
  background: var(--xx-bg, #FAFAF5);
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.fs-divider--wave-thin::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'><path fill='%23FAFAF5' d='M0,20 C240,5 480,35 720,20 C960,5 1200,35 1440,20 L1440,40 L0,40 Z'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}


/* ───────────────────────────────────────────────────────────────
   3) GEOMETRIC PATTERNS
   Tileable backgrounds — dots, lines, polygons.
   Aplikuj na sekcje jako bg-image (na .section.fs-pattern--dots).
   ─────────────────────────────────────────────────────────────── */

.fs-pattern--dots {
  background-color: var(--xx-bg, #FAFAF5);
  background-image: radial-gradient(var(--xx-cream3, #DCDCD0) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
}
.fs-pattern--dots.fs-pattern--lg {
  background-size: 40px 40px;
}
.fs-pattern--dots.fs-pattern--subtle {
  background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px);
}

.fs-pattern--lines {
  background-color: var(--xx-bg, #FAFAF5);
  background-image: repeating-linear-gradient(
    45deg,
    var(--xx-cream3, #DCDCD0),
    var(--xx-cream3, #DCDCD0) 1px,
    transparent 1px,
    transparent 12px
  );
}
.fs-pattern--lines.fs-pattern--lg {
  background-image: repeating-linear-gradient(
    45deg,
    var(--xx-cream3, #DCDCD0),
    var(--xx-cream3, #DCDCD0) 2px,
    transparent 2px,
    transparent 24px
  );
}
.fs-pattern--lines.fs-pattern--subtle {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.04),
    rgba(0, 0, 0, 0.04) 1px,
    transparent 1px,
    transparent 12px
  );
}

.fs-pattern--triangles {
  background-color: var(--xx-bg, #FAFAF5);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path fill='none' stroke='%23DCDCD0' stroke-width='1' d='M20,5 L35,35 L5,35 Z'/></svg>");
  background-size: 40px 40px;
  background-repeat: repeat;
}
.fs-pattern--triangles.fs-pattern--lg {
  background-size: 80px 80px;
}
.fs-pattern--triangles.fs-pattern--subtle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='1' d='M20,5 L35,35 L5,35 Z'/></svg>");
}

.fs-pattern--hexagon {
  background-color: var(--xx-bg, #FAFAF5);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'><path fill='none' stroke='%23DCDCD0' stroke-width='1' d='M28,1 L55,17 L55,49 L28,65 L1,49 L1,17 Z M28,65 L55,81 L55,113 M28,65 L1,81 L1,113'/></svg>");
  background-size: 56px 100px;
  background-repeat: repeat;
}
.fs-pattern--hexagon.fs-pattern--lg {
  background-size: 112px 200px;
}
.fs-pattern--hexagon.fs-pattern--subtle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'><path fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='1' d='M28,1 L55,17 L55,49 L28,65 L1,49 L1,17 Z M28,65 L55,81 L55,113 M28,65 L1,81 L1,113'/></svg>");
}

.fs-pattern--diamond {
  background-color: var(--xx-bg, #FAFAF5);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path fill='none' stroke='%23DCDCD0' stroke-width='1' d='M20,2 L38,20 L20,38 L2,20 Z'/></svg>");
  background-size: 40px 40px;
  background-repeat: repeat;
}
.fs-pattern--diamond.fs-pattern--lg {
  background-size: 80px 80px;
}
.fs-pattern--diamond.fs-pattern--subtle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='1' d='M20,2 L38,20 L20,38 L2,20 Z'/></svg>");
}


/* ───────────────────────────────────────────────────────────────
   4) ORGANIC SHAPES — BLOBS
   Absolutely positioned, decorative.
   Parent musi mieć position: relative + overflow: hidden.
   Kolor wypełnienia via currentColor → ustaw color: var(--xx-primary).
   ─────────────────────────────────────────────────────────────── */

.fs-blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 400px;
  height: 400px;
  opacity: 0.15;
  background-repeat: no-repeat;
  background-size: contain;
  color: var(--xx-primary, #CAB48D);
}
.fs-blob--top-right { top: -100px; right: -100px; }
.fs-blob--top-left { top: -100px; left: -100px; }
.fs-blob--bottom-right { bottom: -100px; right: -100px; }
.fs-blob--bottom-left { bottom: -100px; left: -100px; }
.fs-blob--sm { width: 220px; height: 220px; }
.fs-blob--lg { width: 600px; height: 600px; }

.fs-blob--soft {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23722F37' d='M44.6,-67.5C57.8,-58.6,68.3,-44.6,73.6,-29.2C78.9,-13.8,79,3,73.4,17.6C67.8,32.1,56.5,44.4,43.4,54.6C30.3,64.8,15.1,73,-0.8,74.1C-16.7,75.2,-33.3,69.3,-46.7,59.2C-60.1,49.1,-70.2,34.8,-74.5,18.7C-78.7,2.6,-77,-15.3,-69.7,-30C-62.5,-44.7,-49.6,-56.1,-35.6,-65C-21.5,-73.8,-6.4,-80,8.7,-79.5C23.7,-79,31.5,-76.3,44.6,-67.5Z' transform='translate(100 100)'/></svg>");
}

.fs-blob--spike {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23722F37' d='M48.5,-58.2L62.7,-49.3L72.1,-32.9L74.8,-12.5L70.8,7.6L60.1,28.5L43.3,49.4L21.8,68.1L-3.6,73L-29.5,64.5L-50.4,46.6L-66.2,22.9L-72.8,-4.5L-68.3,-32.5L-53.1,-52.8L-31.8,-65.7L-7.9,-71.6L17.6,-69.5L34.3,-67.1Z' transform='translate(100 100)'/></svg>");
}

.fs-blob--circle-organic {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23722F37' d='M51,-67.5C66.1,-58.4,77.9,-43.1,82.5,-26.1C87.1,-9.1,84.5,9.6,77.2,25.5C69.9,41.4,57.9,54.6,43.2,63C28.5,71.4,11.1,75,-5.5,82.2C-22.1,89.4,-37.9,100.1,-50.3,95.2C-62.7,90.3,-71.8,69.7,-77.7,50.5C-83.6,31.3,-86.3,13.6,-83.9,-3.2C-81.5,-19.9,-74.1,-35.6,-63.1,-46.1C-52.1,-56.6,-37.5,-61.9,-23.4,-69.5C-9.3,-77.1,4.3,-87.1,18.7,-86C33.1,-84.9,48.3,-72.7,51,-67.5Z' transform='translate(100 100)'/></svg>");
}

.fs-blob--asym {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23722F37' d='M37.5,-55.8C47.4,-49.7,53.5,-37.4,61.6,-23.7C69.7,-10,79.7,5.1,79.1,19.6C78.4,34.1,67.1,48,53.2,57.3C39.4,66.7,23.1,71.5,7.1,68.7C-9,65.9,-24.6,55.5,-39.1,46.2C-53.5,36.9,-66.7,28.7,-72.8,16.2C-78.8,3.6,-77.7,-13.4,-70.4,-26.7C-63.1,-40,-49.7,-49.6,-36.1,-55.1C-22.4,-60.5,-8.5,-61.7,3.6,-66.8C15.7,-71.8,27.5,-61.9,37.5,-55.8Z' transform='translate(100 100)'/></svg>");
}

.fs-blob--small {
  width: 220px;
  height: 220px;
  opacity: 0.18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><path fill='%23722F37' d='M53.7,-65.5C66.4,-55.6,71.4,-35.9,73.3,-17.4C75.2,1.2,74,18.6,66.6,33.3C59.2,48,45.6,60,30,67.1C14.4,74.2,-3.2,76.4,-19.6,72.1C-36,67.7,-51.2,56.7,-61.8,42.4C-72.4,28.1,-78.3,10.6,-76.3,-5.7C-74.3,-22,-64.4,-37.1,-51.5,-46.8C-38.6,-56.5,-22.7,-60.8,-4.5,-55.7C13.7,-50.6,41,-75.4,53.7,-65.5Z' transform='translate(100 100)'/></svg>");
}


/* ───────────────────────────────────────────────────────────────
   5) TEXTURE OVERLAYS
   Subtelne nakładki na sekcje — paper, fabric, grain.
   Element musi mieć position: relative; texture-y nakładane via ::after.
   ─────────────────────────────────────────────────────────────── */

.fs-texture--paper {
  position: relative;
}
.fs-texture--paper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0.15 0'/></filter><rect width='200' height='200' filter='url(%23p)'/></svg>");
  background-size: 200px 200px;
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
}

.fs-texture--fabric {
  position: relative;
}
.fs-texture--fabric::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='none' stroke='%23000000' stroke-width='0.5' opacity='0.4' d='M0,0 L8,8 M0,8 L8,0'/></svg>");
  background-size: 8px 8px;
  background-repeat: repeat;
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
}

.fs-texture--grunge {
  position: relative;
}
.fs-texture--grunge::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='turbulence' baseFrequency='0.02 0.15' numOctaves='5' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 1 0'/></filter><rect width='300' height='300' filter='url(%23g)'/></svg>");
  background-size: 300px 300px;
  opacity: 0.08;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
}

.fs-texture--noise {
  position: relative;
}
.fs-texture--noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 100px 100px;
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
}

.fs-texture--watercolor {
  position: relative;
}
.fs-texture--watercolor::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(202, 180, 141, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 75% 60%, rgba(212, 165, 116, 0.07) 0%, transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(143, 175, 162, 0.06) 0%, transparent 60%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
}


/* ───────────────────────────────────────────────────────────────
   6) VIBE-SPECIFIC ACCENTS
   Selektory dziedziczone z parenta z [data-vibe="..."].
   Każdy accent to opcjonalny element dekoracyjny obok komponentu.
   ─────────────────────────────────────────────────────────────── */

/* 6.1) LUXURY HERITAGE — gold leaf w rogach */
[data-vibe="luxury-heritage"] .fs-accent--gold-leaf {
  position: relative;
}
[data-vibe="luxury-heritage"] .fs-accent--gold-leaf::before,
[data-vibe="luxury-heritage"] .fs-accent--gold-leaf::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path fill='%23C9A961' opacity='0.85' d='M10,10 Q40,5 70,10 Q65,40 70,70 Q40,65 10,70 Q15,40 10,10 Z M20,20 L60,20 M20,60 L60,60 M20,20 L20,60 M60,20 L60,60'/><path fill='none' stroke='%23C9A961' stroke-width='1.2' d='M15,15 L65,15 L65,65 L15,65 Z M25,25 L55,25 L55,55 L25,55 Z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
[data-vibe="luxury-heritage"] .fs-accent--gold-leaf::before {
  top: 10px;
  left: 10px;
}
[data-vibe="luxury-heritage"] .fs-accent--gold-leaf::after {
  bottom: 10px;
  right: 10px;
  transform: rotate(180deg);
}

/* 6.2) ART DECO VINTAGE — sunburst za nagłówkiem */
[data-vibe="art-deco-vintage"] .fs-accent--sunburst {
  position: relative;
}
[data-vibe="art-deco-vintage"] .fs-accent--sunburst::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23D4A574' stroke-width='1.2' opacity='0.4'><circle cx='100' cy='100' r='30'/><circle cx='100' cy='100' r='50'/><circle cx='100' cy='100' r='75'/><path d='M100,100 L100,10 M100,100 L100,190 M100,100 L10,100 M100,100 L190,100 M100,100 L36,36 M100,100 L164,36 M100,100 L36,164 M100,100 L164,164 M100,100 L65,15 M100,100 L135,15 M100,100 L185,65 M100,100 L185,135 M100,100 L135,185 M100,100 L65,185 M100,100 L15,135 M100,100 L15,65'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
[data-vibe="art-deco-vintage"] .fs-accent--sunburst > * {
  position: relative;
  z-index: 1;
}

/* 6.3) MOUNTAIN RUGGED — topografia */
[data-vibe="mountain-rugged"] .fs-accent--topo {
  background-color: var(--xx-bg, #FAFAF5);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='none' stroke='%23556B5D' stroke-width='0.7' opacity='0.35'><path d='M0,200 Q100,150 200,200 T400,200'/><path d='M0,180 Q100,130 200,180 T400,180'/><path d='M0,160 Q100,110 200,160 T400,160'/><path d='M0,220 Q100,170 200,220 T400,220'/><path d='M0,240 Q100,190 200,240 T400,240'/><path d='M0,260 Q100,210 200,260 T400,260'/><path d='M0,140 Q120,90 240,140 T400,140'/><path d='M0,120 Q140,70 280,120 T400,120'/><path d='M0,280 Q120,230 240,280 T400,280'/><path d='M0,300 Q140,250 280,300 T400,300'/></g></svg>");
  background-size: 400px 400px;
  background-repeat: repeat;
}

/* 6.4) MODERN COASTAL — shells scattered */
[data-vibe="modern-coastal"] .fs-accent--shells {
  position: relative;
}
[data-vibe="modern-coastal"] .fs-accent--shells::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><g fill='none' stroke='%237BA7BC' stroke-width='1' opacity='0.4'><path d='M30,30 Q40,20 50,30 Q45,40 30,30 M35,30 L35,42 M40,30 L40,42 M45,30 L45,42'/><path d='M170,60 Q185,50 200,60 Q195,75 170,60 M178,60 L178,77 M186,60 L186,77 M194,60 L194,77'/><path d='M80,140 Q95,130 110,140 Q105,155 80,140 M88,140 L88,157 M96,140 L96,157 M104,140 L104,157'/><path d='M190,180 Q200,170 210,180 Q205,190 190,180 M195,180 L195,192 M200,180 L200,192 M205,180 L205,192'/><path d='M40,200 Q55,190 70,200 Q65,215 40,200 M48,200 L48,217 M56,200 L56,217 M64,200 L64,217'/></g></svg>");
  background-size: 240px 240px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

/* 6.5) BOUTIQUE ROMANTIC — script flourish */
[data-vibe="boutique-romantic"] .fs-accent--script {
  position: relative;
  padding-bottom: 60px;
}
[data-vibe="boutique-romantic"] .fs-accent--script::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 40'><path fill='none' stroke='%23B47B84' stroke-width='1.3' stroke-linecap='round' d='M10,20 Q40,5 70,20 Q100,35 130,20 Q160,5 190,20 Q220,35 250,20 Q260,15 270,20 M140,28 L140,32 M135,30 L145,30'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* 6.6) ECO GLAMPING — leaves w rogach */
[data-vibe="eco-glamping"] .fs-accent--leaves {
  position: relative;
}
[data-vibe="eco-glamping"] .fs-accent--leaves::before,
[data-vibe="eco-glamping"] .fs-accent--leaves::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g fill='%236B8E5A' opacity='0.55'><path d='M60,15 Q35,40 35,75 Q35,95 60,105 Q60,80 60,15 Z'/><path d='M60,15 Q85,40 85,75 Q85,95 60,105 Q60,80 60,15 Z' opacity='0.7'/><path d='M60,30 L60,100' stroke='%23556B5D' stroke-width='0.8' fill='none'/></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
[data-vibe="eco-glamping"] .fs-accent--leaves::before {
  top: 0;
  left: 0;
  transform: rotate(-25deg);
}
[data-vibe="eco-glamping"] .fs-accent--leaves::after {
  bottom: 0;
  right: 0;
  transform: rotate(155deg);
}

/* 6.7) INDUSTRIAL LOFT — exposed brick wash */
[data-vibe="industrial-loft"] .fs-accent--brick {
  background-color: var(--xx-bg, #FAFAF5);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'><g fill='none' stroke='%238A5A40' stroke-width='0.8' opacity='0.25'><rect x='0' y='0' width='60' height='30'/><rect x='60' y='0' width='60' height='30'/><rect x='-30' y='30' width='60' height='30'/><rect x='30' y='30' width='60' height='30'/><rect x='90' y='30' width='60' height='30'/></g></svg>");
  background-size: 120px 60px;
  background-repeat: repeat;
}
[data-vibe="industrial-loft"] .fs-accent--brick::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='ib'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/></filter><rect width='300' height='300' filter='url(%23ib)'/></svg>");
  background-size: 300px 300px;
  opacity: 0.07;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* 6.8) ASIAN ZEN — ink brush stroke */
[data-vibe="asian-zen"] .fs-accent--ink-brush {
  position: relative;
  padding: 30px 0;
  text-align: center;
}
[data-vibe="asian-zen"] .fs-accent--ink-brush::before {
  content: '';
  display: block;
  width: 240px;
  height: 30px;
  margin: 0 auto 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 30'><path fill='%232C2C2C' opacity='0.78' d='M10,15 Q20,8 35,12 Q60,18 90,14 Q120,10 150,16 Q180,22 210,15 Q220,12 228,15 Q228,18 220,19 Q200,22 175,18 Q140,14 110,18 Q70,22 40,17 Q20,14 10,15 Z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}


/* ───────────────────────────────────────────────────────────────
   7) UTILITY MODIFIERS — height/size/inversion
   Dodatkowe klasy modyfikujące dividery i wzory.
   ─────────────────────────────────────────────────────────────── */

/* Height modifiers — dla wszystkich dividerów */
.fs-divider--h-sm { height: 50px; }
.fs-divider--h-md { height: 80px; }
.fs-divider--h-lg { height: 140px; }
.fs-divider--h-xl { height: 200px; }

/* Horizontal flip — odbij divider lewo-prawo */
.fs-divider--flip-x::after,
.fs-divider--flip-x::before {
  transform: scaleX(-1);
}

/* Vertical flip — odbij divider gora-dol */
.fs-divider--flip-y::after,
.fs-divider--flip-y::before {
  transform: scaleY(-1);
}

/* Inverted color variants — gdy gorna sekcja jest ciemna */
.fs-divider--inverted {
  background: var(--xx-dark, #1A1A1A);
}
.fs-divider--inverted::after {
  filter: invert(1) brightness(0.95);
}

/* Pattern positioning helpers */
.fs-pattern--center { background-position: center center; }
.fs-pattern--tl { background-position: top left; }
.fs-pattern--br { background-position: bottom right; }

/* Pattern opacity variants */
.fs-pattern--op-10 { opacity: 0.1; }
.fs-pattern--op-25 { opacity: 0.25; }
.fs-pattern--op-50 { opacity: 0.5; }
.fs-pattern--op-75 { opacity: 0.75; }


/* ───────────────────────────────────────────────────────────────
   8) BLOB COLOR VARIANTS
   Dodatkowe warianty kolorystyczne dla blob — primary/secondary/accent.
   ─────────────────────────────────────────────────────────────── */

.fs-blob--primary { color: var(--xx-primary, #CAB48D); }
.fs-blob--secondary { color: var(--xx-secondary, #1A2B4A); }
.fs-blob--accent { color: var(--xx-accent, #C9A961); }
.fs-blob--neutral { color: var(--xx-cream3, #DCDCD0); }

.fs-blob--op-05 { opacity: 0.05; }
.fs-blob--op-10 { opacity: 0.10; }
.fs-blob--op-20 { opacity: 0.20; }
.fs-blob--op-30 { opacity: 0.30; }


/* ───────────────────────────────────────────────────────────────
   9) DIVIDER COLOR THEME OVERRIDES
   Każdy divider rysuje wycinek o kolorze dolnej sekcji.
   Te klasy nadpisują fill SVG aby pasował do palety klienta.
   ─────────────────────────────────────────────────────────────── */

/* Cream — domyślne tło stron */
.fs-divider--fill-cream.fs-divider--curve-down::after,
.fs-divider--fill-cream.fs-divider--curve-up::after,
.fs-divider--fill-cream.fs-divider--curve-asym::after,
.fs-divider--fill-cream.fs-divider--curve-tilt::after,
.fs-divider--fill-cream.fs-divider--curve-double::after,
.fs-divider--fill-cream.fs-divider--wave-soft::after,
.fs-divider--fill-cream.fs-divider--wave-sharp::after,
.fs-divider--fill-cream.fs-divider--wave-organic::after,
.fs-divider--fill-cream.fs-divider--wave-thin::after {
  filter: none;
}

/* Dark — gdy dolna sekcja na dark mode */
.fs-divider--fill-dark.fs-divider--curve-down::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%231A1A1A' d='M0,60 C480,0 960,120 1440,60 L1440,100 L0,100 Z'/></svg>");
}
.fs-divider--fill-dark.fs-divider--curve-up::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%231A1A1A' d='M0,40 C480,100 960,-20 1440,40 L1440,0 L0,0 Z'/></svg>");
}
.fs-divider--fill-dark.fs-divider--wave-soft::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path fill='%231A1A1A' d='M0,40 C180,10 360,70 540,40 C720,10 900,70 1080,40 C1260,10 1440,40 1440,40 L1440,80 L0,80 Z'/></svg>");
}
.fs-divider--fill-dark.fs-divider--wave-sharp::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path fill='%231A1A1A' d='M0,40 L120,10 L240,40 L360,10 L480,40 L600,10 L720,40 L840,10 L960,40 L1080,10 L1200,40 L1320,10 L1440,40 L1440,70 L0,70 Z'/></svg>");
}

/* Primary — gdy dolna sekcja w kolorze marki */
.fs-divider--fill-primary.fs-divider--curve-down::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23722F37' d='M0,60 C480,0 960,120 1440,60 L1440,100 L0,100 Z'/></svg>");
}
.fs-divider--fill-primary.fs-divider--curve-up::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23722F37' d='M0,40 C480,100 960,-20 1440,40 L1440,0 L0,0 Z'/></svg>");
}
.fs-divider--fill-primary.fs-divider--wave-soft::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path fill='%23722F37' d='M0,40 C180,10 360,70 540,40 C720,10 900,70 1080,40 C1260,10 1440,40 1440,40 L1440,80 L0,80 Z'/></svg>");
}

/* Accent — gdy dolna sekcja zaznaczona kolorem akcentu */
.fs-divider--fill-accent.fs-divider--curve-down::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%23C9A961' d='M0,60 C480,0 960,120 1440,60 L1440,100 L0,100 Z'/></svg>");
}
.fs-divider--fill-accent.fs-divider--wave-soft::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path fill='%23C9A961' d='M0,40 C180,10 360,70 540,40 C720,10 900,70 1080,40 C1260,10 1440,40 1440,40 L1440,80 L0,80 Z'/></svg>");
}


/* ───────────────────────────────────────────────────────────────
   10) PATTERN COLOR THEME OVERRIDES
   Wzorce w kolorach palety klienta — nie tylko cream3.
   ─────────────────────────────────────────────────────────────── */

.fs-pattern--dots.fs-pattern--primary {
  background-image: radial-gradient(rgba(202, 180, 141, 0.18) 1px, transparent 1px);
}
.fs-pattern--dots.fs-pattern--accent {
  background-image: radial-gradient(rgba(201, 169, 97, 0.22) 1px, transparent 1px);
}
.fs-pattern--dots.fs-pattern--secondary {
  background-image: radial-gradient(rgba(26, 43, 74, 0.20) 1px, transparent 1px);
}

.fs-pattern--lines.fs-pattern--primary {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(202, 180, 141, 0.14),
    rgba(202, 180, 141, 0.14) 1px,
    transparent 1px,
    transparent 12px
  );
}
.fs-pattern--lines.fs-pattern--accent {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(201, 169, 97, 0.18),
    rgba(201, 169, 97, 0.18) 1px,
    transparent 1px,
    transparent 12px
  );
}
.fs-pattern--lines.fs-pattern--secondary {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(26, 43, 74, 0.16),
    rgba(26, 43, 74, 0.16) 1px,
    transparent 1px,
    transparent 12px
  );
}

/* Pattern angle modifiers — zmieniaj kierunek linii */
.fs-pattern--lines.fs-pattern--angle-0 {
  background-image: repeating-linear-gradient(
    0deg,
    var(--xx-cream3, #DCDCD0),
    var(--xx-cream3, #DCDCD0) 1px,
    transparent 1px,
    transparent 12px
  );
}
.fs-pattern--lines.fs-pattern--angle-90 {
  background-image: repeating-linear-gradient(
    90deg,
    var(--xx-cream3, #DCDCD0),
    var(--xx-cream3, #DCDCD0) 1px,
    transparent 1px,
    transparent 12px
  );
}
.fs-pattern--lines.fs-pattern--angle-135 {
  background-image: repeating-linear-gradient(
    135deg,
    var(--xx-cream3, #DCDCD0),
    var(--xx-cream3, #DCDCD0) 1px,
    transparent 1px,
    transparent 12px
  );
}


/* ───────────────────────────────────────────────────────────────
   11) RESPONSIVE ADJUSTMENTS
   Mobile-first — zmniejszamy wysokości i widoczność dekoracji.
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .fs-divider--curve-down,
  .fs-divider--curve-up,
  .fs-divider--curve-tilt {
    height: 60px;
  }
  .fs-divider--curve-asym,
  .fs-divider--curve-double {
    height: 70px;
  }
  .fs-divider--wave-soft,
  .fs-divider--wave-sharp {
    height: 50px;
  }
  .fs-divider--wave-double,
  .fs-divider--wave-organic {
    height: 60px;
  }
  .fs-divider--wave-thin {
    height: 30px;
  }

  .fs-blob {
    width: 250px;
    height: 250px;
    opacity: 0.10;
  }
  .fs-blob--sm {
    width: 150px;
    height: 150px;
  }
  .fs-blob--lg {
    width: 350px;
    height: 350px;
  }
  .fs-blob--top-right { top: -60px; right: -60px; }
  .fs-blob--top-left { top: -60px; left: -60px; }
  .fs-blob--bottom-right { bottom: -60px; right: -60px; }
  .fs-blob--bottom-left { bottom: -60px; left: -60px; }

  [data-vibe="luxury-heritage"] .fs-accent--gold-leaf::before,
  [data-vibe="luxury-heritage"] .fs-accent--gold-leaf::after {
    width: 50px;
    height: 50px;
  }
  [data-vibe="art-deco-vintage"] .fs-accent--sunburst::before {
    width: 240px;
    height: 240px;
  }
  [data-vibe="eco-glamping"] .fs-accent--leaves::before,
  [data-vibe="eco-glamping"] .fs-accent--leaves::after {
    width: 70px;
    height: 70px;
  }
  [data-vibe="boutique-romantic"] .fs-accent--script::after {
    width: 200px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .fs-divider--h-xl { height: 100px; }
  .fs-divider--h-lg { height: 80px; }

  .fs-pattern--dots { background-size: 16px 16px; }
  .fs-pattern--dots.fs-pattern--lg { background-size: 28px 28px; }
  .fs-pattern--triangles,
  .fs-pattern--diamond { background-size: 30px 30px; }
  .fs-pattern--hexagon { background-size: 44px 80px; }
}


/* ───────────────────────────────────────────────────────────────
   12) ACCESSIBILITY — REDUCED MOTION + HIGH CONTRAST
   Wyłącz subtelne tekstury gdy user ma reduce-motion albo high-contrast.
   ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fs-blob,
  .fs-texture--paper::after,
  .fs-texture--fabric::after,
  .fs-texture--grunge::after,
  .fs-texture--noise::after,
  .fs-texture--watercolor::after {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-contrast: more) {
  .fs-texture--paper::after,
  .fs-texture--fabric::after,
  .fs-texture--grunge::after,
  .fs-texture--noise::after,
  .fs-texture--watercolor::after {
    display: none;
  }
  .fs-blob {
    opacity: 0.08;
  }
  .fs-pattern--dots,
  .fs-pattern--lines,
  .fs-pattern--triangles,
  .fs-pattern--hexagon,
  .fs-pattern--diamond {
    background-image: none;
  }
}

@media print {
  .fs-divider--curve-down,
  .fs-divider--curve-up,
  .fs-divider--curve-asym,
  .fs-divider--curve-tilt,
  .fs-divider--curve-double,
  .fs-divider--wave-soft,
  .fs-divider--wave-double,
  .fs-divider--wave-sharp,
  .fs-divider--wave-organic,
  .fs-divider--wave-thin {
    display: none;
  }
  .fs-blob,
  .fs-texture--paper::after,
  .fs-texture--fabric::after,
  .fs-texture--grunge::after,
  .fs-texture--noise::after,
  .fs-texture--watercolor::after {
    display: none;
  }
}


/* ───────────────────────────────────────────────────────────────
   END LAYER 8
   Notes:
   - Wszystkie data:image/svg+xml URI używają URL-encoded hex (%23 = #)
   - SVG paths used preserveAspectRatio='none' tam gdzie potrzebne stretch
   - Blob shapes opacity 0.15-0.18 → nie kradną fokusa od treści
   - Vibe accents nakładają się tylko gdy parent ma odpowiedni data-vibe
   - Wszystkie elementy decoratywne pointer-events: none
   - Reduced motion + prefers-contrast respected
   - Print media: wszystkie dekoracje wyłączone
   ─────────────────────────────────────────────────────────────── */



/* ============================================================
   LAYER HOME-SELF-CONTAINED (fullpage: main hidden + hero standalone)
   ============================================================ */

/* ==========================================================================
   LAYER — HOME SELF-CONTAINED (fullpage-home)  [emitowana TYLKO gdy fullpage:true]
   --------------------------------------------------------------------------
   PROBLEM (feedback_idobooking_frontpage_body_top_global — „strona glowna
   rozjechana", Prosty Wynajem v3.10, 2026-07-10):
   Pole /panel/frontpage `fg_body_top_code` jest GLOBALNE (render na KAZDEJ
   podstronie, jak HEAD/body_bottom). Tresc home wklejona tam renderuje sie jako
   blok .fs-home PRZED systemowym <main.fullpage-wrapper>. Na fullpage-home:
     - systemowy <main> (slider + sekcje) laduje POD nasza trescia,
     - hero teleportowany do slidera spada na dol, fixed parallax-image przykrywa gore,
     - jesli home byl KIEDYS tez w polu CMS (main > .section_sub.container) → DUBEL.
   (bxSlider „is not a function" = slepy trop: problem STRUKTURALNY, nie timing HEAD.)

   FIX (kod, niezalezny od fullpage.js / bxSlider / timingu HEAD):
     (1) ukryj CALY systemowy <main> na home — kasuje orphan slider + parallax-image
         + stara kopie dubla (wszystko siedzi w main). Footer jest POZA main →
         nietkniety (zweryfikuj live: el.closest('main.fullpage-wrapper')===null;
         upewnij sie, ze nic potrzebnego nie zostaje w main — #iai_book_form OK,
         bo wyszukiwarke delegujemy do /book-now przez ido-search-delegate).
     (2) hero SAMODZIELNY — nie teleportuje do slidera; wlasne tlo ustawia
         ido-home-selfcontained.js do --fs-hero-bg (src z systemowego slidera
         = wybor klienta w panelu; brak → klasa --noimg = grafitowy gradient).

   GATE .fs-home poza page-index → layer1-traps.css §I (uniwersalny, kazdy klient).

   WERYFIKUJ LIVE (INSTINCT-07): getComputedStyle(main).display==='none',
   hero top≈0, .fs-home widoczny 1×, docHeight spada (dubel znika),
   horizOverflow 0, footer obecny, reveal sekcji na normalnym scrollu.
   PARAMETRYZACJA: `fs` → prefiks klienta (scaffold).
   ========================================================================== */

/* (1) systemowy main ukryty na stronie glownej (footer jest POZA main → bezpieczne) */
html body.page-index main.fullpage-wrapper,
html body.page-index main#pageContent {
  display: none !important;
}

/* (2) hero samodzielny: zdjecie + WOLNY ZOOM (Ken Burns) — DELIVERABLE „zoom na
   glowne zdjecie" (KAZDE wdrozenie, lessons/034). Warstwy:
     ::before — ZDJECIE (JS → --fs-hero-bg) + animacja scale 1→1.12.
                Pseudo BEZ potomkow → NIE tworzy containing-block, wiec wyszukiwarka
                / litepicker (dolaczany do <body>) NIE jest przycinany. overflow:hidden
                na .fs-hero przycina powiekszony obraz (zero poziomego scrolla).
     ::after  — scrim (gradient) dla czytelnosci napisow nad zdjeciem.
     __inner  — tresc, z-index nad obiema warstwami.
   Pelna szerokosc niesie juz .fs-fullbleed (layer-fullbleed). NIE dawaj transform
   na sam .fs-hero (to by ZLAMALO pozycje kalendarza wyszukiwarki) — zoom siedzi
   wylacznie na ::before. Kanon: osada-pogodno opKenBurns (2026-07-14).
   Ref: feedback_idobooking_default13_hero_ken_burns_zoom · deliverable N-hero-kenburns-feature. */
html body.page-index .fs-home .fs-hero {
  position: relative;
  overflow: hidden;
  background-color: #16181C;              /* fallback nim zaladuje sie zdjecie */
  background-image: none;
  min-height: clamp(560px, 84vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
}
html body.page-index .fs-home .fs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--fs-hero-bg, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  transform-origin: 50% 50%;
  animation: fs-kenburns 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fs-kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.6%, -1.1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html body.page-index .fs-home .fs-hero::before {
    animation: none;
    transform: none;
  }
}
/* scrim dla kontrastu napisow (pseudo bez potomkow → containing-block bez znaczenia) */
html body.page-index .fs-home .fs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 18, 22, 0.24) 0%, rgba(14, 16, 20, 0.30) 45%, rgba(12, 13, 17, 0.52) 100%);
  pointer-events: none;
}

/* brak zdjecia (pusty/opozniony slider) → sam grafitowy gradient na ::before; napisy czytelne */
html body.page-index .fs-home .fs-hero.fs-hero--noimg::before {
  background-image: radial-gradient(120% 120% at 50% 0%, #23262C 0%, #16181C 70%);
}

html body.page-index .fs-home .fs-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--fs-maxw, 1040px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  html body.page-index .fs-home .fs-hero {
    min-height: clamp(520px, 80vh, 700px);
  }
}


/* ==========================================================================
   (3) H1-DISCIPLINE — dokladnie 1 widoczny H1 / strona (lessons/033, generalizacja)
   --------------------------------------------------------------------------
   Testy 07-seo / 11-subpages / 02-traps licza getComputedStyle(h1).display, ktory
   IGNORUJE display:none PRZODKA. Dwa zrodla nadmiarowych H1 na fullpage-home:
     - hero-h1 (.fs-hero__title) wycieka do DOM /txt i /offer/N przez GLOBALNY
       fg_body_top_code (wizualnie ukryty gate .fs-home, ale liczony przez test);
     - systemowe home-h1 siedzi w ukrytym main.fullpage-wrapper (ten sam licznik).
   Wymuszamy WLASNY display:none (nie polegamy na display:none przodka).
   Poza home: ukryj hero-h1; na home: ukryj wszystkie H1 procz naszego hero__title.
   ========================================================================== */
html body:not(.page-index) .fs-home h1 {
  display: none !important;
}
body.page-index h1:not(.fs-hero__title) {
  display: none !important;
}
/* /txt: tresc nie chowa sie pod fixed header (h58, position:fixed) */
body.page-txt #pageContent {
  padding-top: 84px !important;
}


/* ==========================================================================
   (4) COOKIE TOAST — repozycja na home (deliverable N-cookie-hero-overlap)
   --------------------------------------------------------------------------
   Natywny toast zgody #ck_dsclr_v2 (--passive, fixed, lewy-dol ~420x168) nachodzi
   na pole wyszukiwarki hero i przechwytuje klik. Na home/desktop przypinamy go do
   gornego-lewego rogu (pod fixed header ~110px) — odporne na wysokosc viewportu,
   hero nietkniete, baner nadal w pelni widoczny i klikalny. Mobile bez zmian.
   Kanon: easyrent §ER-COOKIE (7141, MCP live 2026-06-19).
   Ref: feedback_idobooking_cookie_toast_overlaps_hero_widget. */
@media (min-width: 992px) {
  body.page-index #ck_dsclr_v2,
  body.page-index .ck_dsclr_v2 {
    top: 110px !important;
    bottom: auto !important;
  }
}


/* ============================================================
   §FS-CLIENT — Five Stars overrides (dopisuj TU; wygrywa kaskade)
   Poprawki jakosci 2026-07-22 (workflow zweryfikowany + completeness-critic).
   ============================================================ */

/* Hero scrim (fullpage) — TYLKO .fp-tableCell::before (spelnia N-scrim).
   Glowny scrim hero (.fs-hero::after) jest juz w LAYER HOME SELF-CONTAINED (~10040) —
   NIE dublujemy (gap 8, anti multi-def). */
body.page-index .fs-home .fp-tableCell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,25,23,0.34) 0%, rgba(26,25,23,0.12) 42%, rgba(26,25,23,0.66) 100%);
  z-index: 1;
  pointer-events: none;
}
body.page-index .fs-home .fs-hero__inner { position: relative; z-index: 2; }

/* FIX A — HERO TITLE bialy. ROOT: global h1..h6{color:var(--ido-dark)!important}
   (charcoal) bije odziedziczony #fff -> tytul niewidoczny na ciemnym zdjeciu.
   Bijemy wlasnym !important (spec 0,2,2). WCAG #fff na charcoal ~17:1 (AAA). */
html body.page-index .fs-hero__title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.42) !important;
}
/* Hero (ciemne zdjecie) — eyebrow jasny szampan (sekcyjny eyebrow jest gold-dark dla jasnego tla) */
html body.page-index .fs-hero .fs-eyebrow { color: #E7D5B0 !important; }
html body.page-index .fs-hero .fs-hero__sub { color: rgba(255,255,255,0.92) !important; }

/* HERO ENTRANCE — subtelny slide-up. TYLKO transform (opacity ZAWSZE 1) => tekst hero
   NIGDY niewidoczny: nawet gdy animacja spauzowana (karta w tle) lub nieodpalona zostaje
   w pelni nieprzezroczysty (najwyzej 22px nizej). LCP-safe (tytul = element LCP).
   search wykluczony (transform utworzylby containing-block litepickera). */
@keyframes fs-hero-rise { from { transform: translateY(22px); } to { transform: none; } }
html.ido-js body.page-index .fs-hero .fs-hero__inner > .fs-eyebrow,
html.ido-js body.page-index .fs-hero .fs-hero__inner > .fs-hero__title,
html.ido-js body.page-index .fs-hero .fs-hero__inner > .fs-hero__sub {
  animation: fs-hero-rise .7s cubic-bezier(.16,.68,.32,1) both;
}
html.ido-js body.page-index .fs-hero .fs-hero__inner > .fs-hero__title { animation-delay: .08s; }
html.ido-js body.page-index .fs-hero .fs-hero__inner > .fs-hero__sub { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  html.ido-js body.page-index .fs-hero .fs-hero__inner > * { animation: none !important; transform: none !important; }
}

/* FIX B — /offers karty czytelne: JASNA powierzchnia + CIEMNY tekst (kanon osada/PW;
   zloto na jasnym = 1.8:1 = FAIL, dlatego NIE ciemne karty/zloty tytul). */
html body.page-offers .offers-container,
html body.page-offers .offers-container .accommodation-rest {
  background: var(--fs-bg, #FAFAF5) !important;
}
html body.page-offers .offers-container h2,
html body.page-offers .offers-container h3,
html body.page-offers .offers-container .accommodation-rest h2,
html body.page-offers .offers-container .accommodation-rest h3 {
  color: var(--fs-charcoal, #1A1917) !important;
}
html body.page-offers .offers-container .accommodation-rest p,
html body.page-offers .offers-container .accommodation-rest li,
html body.page-offers .offers-container .accommodation-short-description {
  color: var(--fs-text, #1A1A1A) !important;
}

/* GAP 1 [KRYTYCZNY] — .fs-btn / .fs-btn--primary NIE istnialy (home CTA = goly tekst).
   Luxury-heritage: zloto + charcoal (charcoal na #CAB48D ~8.7:1 AAA). */
.fs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--fs-font-body, "Source Sans 3", sans-serif);
  font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 15px 32px; background: transparent; color: var(--fs-charcoal, #1A1917);
  border: 1px solid var(--fs-primary, #CAB48D); border-radius: var(--fs-radius, 4px);
  cursor: pointer; transition: background .3s, color .3s, border-color .3s; text-decoration: none;
}
.fs-btn:hover { background: var(--fs-primary, #CAB48D); color: var(--fs-charcoal, #1A1917); }
.fs-btn--primary {
  background: var(--fs-primary, #CAB48D); color: var(--fs-charcoal, #1A1917);
  border-color: var(--fs-primary, #CAB48D);
}
.fs-btn--primary:hover {
  background: var(--fs-primary-dark, #8A6D3B); border-color: var(--fs-primary-dark, #8A6D3B); color: #FFFFFF;
}
/* CTA na ciemnej sekcji CTA: ghost .fs-btn ma jasny tekst dla kontrastu */
body.page-index .fs-cta .fs-btn:not(.fs-btn--primary) { color: #FFFFFF; }

/* GAP 4 [WAZNY] — CTA rezerwacji/kontakt: charcoal na zlocie (bylo bialy ~1.9:1 FAIL). */
html body.page-offer .accommodation-leftbutton,
html body.page-offer .accommodation-reservation .accommodation-leftbutton,
html body.page-offer .accommodation-leftbutton span,
html body.page-contact button[type="submit"],
html body.page-contact .formbutton {
  color: var(--fs-charcoal, #1A1917) !important;
}

/* GAP 2 [WAZNY] — Powered-by widoczny na ciemnej stopce dark-rich (invert on_white). */
html body .fs-footer--dark-rich .powered_by img,
html body .fs-footer--dark-rich .powered_by_logo img,
html body .fs-footer--dark-rich [class*="powered"] img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
}

/* SCROLL REVEAL (home) — neutralizator globalnego .fs-reveal (layer7 @8442) +
   animacja WYLACZNIE .fs-section__inner (pasy full-bleed nieruchome). JS: fs-home-reveal.
   Scope html.ido-js (KONIEC L71 dodaje ido-js) => bez JS tresc widoczna. */
html.ido-js body.page-index .fs-about-teaser.fs-reveal,
html.ido-js body.page-index .fs-offers-section.fs-reveal,
html.ido-js body.page-index .fs-attractions-teaser.fs-reveal,
html.ido-js body.page-index .fs-location-teaser.fs-reveal,
html.ido-js body.page-index .fs-cta.fs-reveal {
  opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto;
}
html.ido-js body.page-index .fs-reveal > .fs-section__inner {
  transition: opacity .7s cubic-bezier(.16,.68,.32,1), transform .7s cubic-bezier(.16,.68,.32,1);
  will-change: opacity, transform;
}
html.ido-js body.page-index .fs-reveal:not(.fs-in) > .fs-section__inner { opacity: 0; transform: translateY(28px); }
html.ido-js body.page-index .fs-reveal.fs-in > .fs-section__inner { opacity: 1; transform: none; }
html.ido-js body.page-index .fs-offers .fs-reveal-item { transition: opacity .6s ease, transform .6s ease; }
html.ido-js body.page-index .fs-offers .fs-reveal-item:not(.fs-in) { opacity: 0; transform: translateY(22px); }
html.ido-js body.page-index .fs-offers .fs-reveal-item.fs-in { opacity: 1; transform: none; }
html.ido-js body.page-index .fs-offers .fs-reveal-item.fs-in:nth-child(2) { transition-delay: .08s; }
html.ido-js body.page-index .fs-offers .fs-reveal-item.fs-in:nth-child(3) { transition-delay: .16s; }
html.ido-js body.page-index .fs-offers .fs-reveal-item.fs-in:nth-child(4) { transition-delay: .24s; }
html.ido-js body.page-index .fs-offers .fs-reveal-item.fs-in:nth-child(5) { transition-delay: .32s; }
html.ido-js body.page-index .fs-offers .fs-reveal-item.fs-in:nth-child(6) { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  html.ido-js body.page-index .fs-reveal:not(.fs-in) > .fs-section__inner,
  html.ido-js body.page-index .fs-offers .fs-reveal-item:not(.fs-in) {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* F16 [verify-live] — stopka dark-rich: kolumny + relokowane ul (kontakt/social)
   na WSPOLNEJ LEWEJ krawedzi (bylo justify/align:center). Ref: bug-klasa F16 (spec 14). */
html body .fs-footer__col {
  align-items: flex-start !important;
  text-align: left !important;
}
html body .fs-footer .footer__contact,
html body .fs-footer .footer__social_media,
html body .fs-footer__col ul {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding-left: 0 !important;
  list-style: none !important;
}
html body .fs-footer .footer__contact li,
html body .fs-footer .footer__social_media li,
html body .fs-footer__col ul li {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ── KONTENER TRESCI SEKCJI HOME (fix "rozjechania") ──────────────────────
   ROOT: scaffold NIE ostylowal .fs-section__inner (max-width:none, margin:0,
   padding:0) => cala tresc sekcji leciala na pelna szerokosc, przyklejona do
   lewej ("jakby bez CSS"). Kontener + wysrodkowanie + oddech pionowy = premium.
   Featured grid (w .fs-section__inner) uklada sie 3-4 w rzedzie zamiast 6 full-width. */
body.page-index .fs-home .fs-section__inner {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px;
  padding-right: 40px;
  width: 100%;
  box-sizing: border-box;
}
body.page-index .fs-home > section {
  padding-top: clamp(84px, 12vh, 160px);
  padding-bottom: clamp(84px, 12vh, 160px);
}
body.page-index .fs-home > section.fs-hero { padding-top: 0; padding-bottom: 0; }
@media (max-width: 767px) {
  body.page-index .fs-home .fs-section__inner { padding-left: 20px; padding-right: 20px; }
  body.page-index .fs-home > section { padding-top: 52px; padding-bottom: 52px; }
}

/* A6 — Atrakcje (icon-grid) + Lokalizacja (mapa+karty) wewnatrz .fs-section__inner:
   neutralizuj wlasny padding/max-width wariantu (sekcja juz je ma) + kontrast na jasnym. */
body.page-index .fs-attractions-teaser .fs-features--icon-grid-4col,
body.page-index .fs-location-teaser .fs-location--info-cards-map {
  padding: 28px 0 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
body.page-index .fs-attractions-teaser .fs-features__icon { color: var(--fs-primary-dark, #8A6D3B); }
body.page-index .fs-location-teaser .fs-location__card h4 { font-family: var(--fs-font-heading); color: var(--fs-charcoal, #1A1917); }
body.page-index .fs-location-teaser .fs-location__directions { color: var(--fs-primary-dark, #8A6D3B) !important; }
/* map: kremowy fallback gdy Leaflet nie wstanie + z-index nad ozdobami */
body.page-index .fs-location-teaser .fs-location__map { background: #ECE5D8; position: relative; z-index: 1; }
body.page-index .fs-location-teaser .fs-location__map .leaflet-container { height: 100%; width: 100%; }

/* A8 — sticky booking bar (desktop). Pojawia sie po przescrollowaniu hero; persistuje
   na wszystkich stronach (tworzony w JS). Charcoal-on-gold (nie bialy=1.9:1 fail).
   Desktop-only: mobile ma litepicker fixed full-width (SC 2.4.11 — zero kolizji). */
.fs-bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: none;
  background: var(--fs-charcoal, #1A1917); color: #fff;
  border-top: 2px solid var(--fs-primary, #CAB48D);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.22);
  transform: translateY(100%); transition: transform .4s cubic-bezier(.16,.68,.32,1);
}
.fs-bookbar.fs-bookbar--in { transform: none; }
.fs-bookbar__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px clamp(20px,3vw,40px); }
.fs-bookbar__text { display: flex; flex-direction: column; line-height: 1.25; }
.fs-bookbar__lead { font-family: var(--fs-font-heading, "Playfair Display", serif); font-size: 15px; font-weight: 600; color: #fff; }
.fs-bookbar__sub { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.fs-bookbar__cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; min-height: 44px; box-sizing: border-box;
  background: var(--fs-primary, #CAB48D); color: var(--fs-charcoal, #1A1917);
  font-family: var(--fs-font-body, "Source Sans 3", sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--fs-radius, 4px); transition: background .3s;
}
.fs-bookbar__cta:hover { background: var(--fs-primary-dark, #8A6D3B); color: #FFFFFF; }
@media (min-width: 992px) { .fs-bookbar { display: block; } }

/* Wyszukiwarka hero submit: primary gold + charcoal (8.7:1) — bylo bialy na secondary #B0914F (3:1) */
html body .fs-search__submit,
html body .fs-search__submit span { background-color: var(--fs-primary, #CAB48D) !important; color: var(--fs-charcoal, #1A1917) !important; }

/* Mapa home — zloty teardrop pin + premium popup (kanon cityofthekings, kafle CARTO Voyager w JS) */
.fs-map-pin { background: transparent !important; border: 0 !important; }
.fs-map-pin__dot { display: block; position: relative; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--fs-primary, #CAB48D); border: 2px solid #FFFFFF; transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(26,25,23,0.4); }
.fs-map-pin__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; transform: translate(-50%,-50%); }
.fs-pop { text-align: center; padding: 4px 8px; }
.fs-pop strong { display: block; font-family: var(--fs-font-heading, "Playfair Display", serif); font-size: 15px; color: var(--fs-charcoal, #1A1917); }
.fs-pop span { display: block; font-size: 12px; color: var(--fs-text-soft, #3A3A3A); margin-top: 3px; }
.fs-pop__link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fs-primary-dark, #8A6D3B); text-decoration: none; }
.fs-pop__link:hover { color: var(--fs-charcoal, #1A1917); }

/* Ukryj zbedny link „Atrakcje" (/txt/202) z menu — tresc scalona w Lokalizacja + sekcja „W okolicy" na home.
   NIE-destrukcyjnie (nie usuwam podstrony): ukrywam TYLKO link nawigacji; strona dostepna pod /txt/202. */
header a[href*="/txt/202/"],
.menu-wrapper a[href*="/txt/202/"],
#navbar a[href*="/txt/202/"],
.footer a[href*="/txt/202/"] { display: none !important; }

/* /offers — chip ceny „Cena już od" leci PIONOWO (siedzi w systemowym col-md-4 = 1/3 wiersza).
   Rozbijam wiersz title+price na pion (kolumny full-width) + chip poziomy nowrap auto-szerokosc. */
body.page-offers .offers-container .accommodation-rest .row { display: block !important; margin: 0 !important; }
body.page-offers .offers-container .accommodation-rest .row > [class*="col-"] {
  width: 100% !important; max-width: 100% !important; flex: none !important; float: none !important; display: block !important; padding-left: 0 !important; padding-right: 0 !important;
}
body.page-offers .offers-container .object-price,
body.page-offers .offers-container .offer-price {
  display: inline-flex !important; flex-direction: row !important; align-items: baseline !important; flex-wrap: nowrap !important;
  width: auto !important; max-width: 100% !important; height: auto !important; min-height: 0 !important;
  gap: 7px !important; padding: 9px 18px !important; margin: 8px 0 6px !important; white-space: nowrap !important;
  border-radius: 10px !important; background: var(--fs-primary, #CAB48D) !important; color: var(--fs-charcoal, #1A1917) !important;
}
body.page-offers .offers-container .object-price small,
body.page-offers .offers-container .offer-price small { font-size: 11px !important; letter-spacing: .04em !important; text-transform: uppercase !important; white-space: nowrap !important; color: var(--fs-charcoal, #1A1917) !important; }
body.page-offers .offers-container .object-price .price,
body.page-offers .offers-container .offer-price .price { font-size: 18px !important; font-weight: 700 !important; white-space: nowrap !important; color: var(--fs-charcoal, #1A1917) !important; }
.leaflet-popup-content-wrapper { border-radius: 8px !important; box-shadow: 0 12px 40px rgba(26,25,23,0.18) !important; }
.leaflet-popup-tip { box-shadow: none !important; }

/* ═══════════════════════════════════════════════════════════════
   §FS-OFFERS-LIST — /offers premium: GRID rownych kolumn + filtry-akordeon.
   Kanon cityofthekings (re-token gold/charcoal). Live DOM 7932:
   .offers_wrapper > .offers-container[a.object-icon.col-md-5 + div.accommodation-rest.col-md-7], tytul h2.
   ═══════════════════════════════════════════════════════════════ */
body.page-offers .offers_wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; align-items: stretch; }
body.page-offers .offers-container {
  display: flex !important; flex-direction: column; margin: 0 !important; background: #FFFFFF;
  border: 1px solid rgba(202,180,141,0.35); border-radius: var(--fs-radius, 6px); overflow: hidden;
  box-shadow: 0 2px 14px rgba(26,25,23,0.08); transition: transform .25s ease, box-shadow .25s ease;
}
body.page-offers .offers-container:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(26,25,23,0.14); }
body.page-offers .offers-container > .object-icon,
body.page-offers .offers-container > .accommodation-rest {
  width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin: 0 !important;
}
body.page-offers .offers-container > .object-icon { display: block; aspect-ratio: 4/3; overflow: hidden; padding: 0 !important; }
body.page-offers .offers-container > .object-icon img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
body.page-offers .offers-container:hover > .object-icon img { transform: scale(1.05); }
body.page-offers .offers-container > .accommodation-rest { padding: 18px 20px 22px !important; display: flex; flex-direction: column; gap: 8px; }
body.page-offers .offers-container h2 { font-family: var(--fs-font-heading, "Playfair Display", serif) !important; font-size: 20px !important; color: var(--fs-charcoal, #1A1917) !important; margin: 0 0 4px !important; }
@media (max-width: 991px) { body.page-offers .offers_wrapper { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { body.page-offers .offers_wrapper { grid-template-columns: 1fr; } }
/* filtry = akordeon zwiniety domyslnie (CSS chevron; JS initOffersFilters przelacza .show) */
body.page-offers .filter_header { display: flex !important; justify-content: space-between !important; align-items: center !important; cursor: pointer !important; padding: 13px 4px !important; border: 0 !important; border-bottom: 1px solid rgba(202,180,141,0.35) !important; font-family: var(--fs-font-heading, serif) !important; color: var(--fs-charcoal, #1A1917) !important; }
body.page-offers .filter_header::after { content: "" !important; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--fs-primary-dark, #8A6D3B) !important; border-bottom: 2px solid var(--fs-primary-dark, #8A6D3B) !important; transform: rotate(45deg); transition: transform .3s ease; }
body.page-offers .filter_header[aria-expanded="true"]::after { transform: rotate(-135deg); }
body.page-offers .filter_content.collapse:not(.show) { display: none !important; }
body.page-offers .filter_content.collapse.show { display: block !important; height: auto !important; overflow: visible !important; }
body.page-offers input[type="checkbox"] { accent-color: var(--fs-primary-dark, #8A6D3B); }

/* ═══ §FS-CONTACT — /contact zamkniety, mapa NAD lista (kanon cityofthekings) ═══ */
body.page-contact #pageContent { padding-top: 120px; max-width: 1100px; margin: 0 auto; }
body.page-contact #pageContent > .contact { display: flex; flex-direction: column; }
body.page-contact #pageContent > .contact > #map_container { order: -1; width: 100% !important; margin: 0 0 40px !important; }
body.page-contact .leaflet-container { border-radius: var(--fs-radius, 8px) !important; overflow: hidden !important; min-height: 380px; border: 1px solid rgba(202,180,141,0.35); }

/* ═══ Micro-interakcje premium — shine-sweep na zlotych CTA (kanon cityofthekings) ═══ */
.fs-btn--primary { position: relative; overflow: hidden; }
.fs-btn--primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.fs-btn--primary:hover::after { left: 150%; }

/* Powered-by IdoBooking na JASNEJ custom-stopce (licencja): wariant on_white (on_black ma biale
   'ido' = znika na jasnym), bez invertu, pelna widocznosc. JS podmienia src on_black->on_white. */
html body .fs-footer .powered_by_logo img,
html body .fs-footer .powered_by img,
html body .fs-footer [class*="powered"] img {
  filter: none !important; opacity: 1 !important; width: 200px !important; height: auto !important; display: inline-block !important;
}

/* ═══ §FS-OFFERS-CONTRAST — audyt live /offers (2026-07-23): tytul=<a> (bialy=niewidoczny),
   przyciski bialo-na-zlocie, chip ceny za jasny, sidebar filtrow ciemny (schemat 2a2829). ═══ */
/* tytul karty + wszystkie linki tekstowe karty -> charcoal (tytul to <a>, NIE h2) */
html body.page-offers .offers-container a,
html body.page-offers .offers-container .accommodation-rest a,
html body.page-offers .offers-container h2,
html body.page-offers .offers-container h3 { color: var(--fs-charcoal, #1A1917) !important; }
/* przyciski (Zastosuj filtry / SZCZEGOLY) bialo-na-zlocie -> charcoal */
html body.page-offers .btn, html body.page-offers .btn span, html body.page-offers button.btn,
html body.page-offers .btn.button, html body.page-offers .btn-reverse, html body.page-offers .btn-reverse span {
  color: var(--fs-charcoal, #1A1917) !important;
}
/* chip ceny: tekst charcoal na zlotym tle (bylo gold-dark 2.4 / bialy 2:1) */
html body.page-offers .price, html body.page-offers span.price,
html body.page-offers [class*="price"] { color: var(--fs-charcoal, #1A1917) !important; }
/* sidebar filtrow: jasny (schemat daje 41,41,41) + naglowki/labelki czytelne */
html body.page-offers .aside, html body.page-offers .sidebar,
html body.page-offers .filter, html body.page-offers .filter_content,
html body.page-offers [id^="filter_header_"], html body.page-offers [class*="filter_"] {
  background-color: transparent !important;
}
html body.page-offers .sidebar strong, html body.page-offers .aside strong,
html body.page-offers [class*="filter"] strong, html body.page-offers [class*="filter"] label,
html body.page-offers .filter_header { color: var(--fs-charcoal, #1A1917) !important; }
html body.page-offers h4 { color: var(--fs-primary-dark, #8A6D3B) !important; }

/* ═══ §FS-HEADER — home: przezroczysty-nad-hero (scrim) → grafit po scrollu (kanon cityofthekings).
   „Ciemny naglowek nie pasuje" — nad hero znika w scrim, solidny dopiero na tresci. JS ido-header-scrolled istnieje. ═══ */
body.page-index header.default13 .menu-wrapper {
  background: linear-gradient(180deg, rgba(16,18,22,0.48) 0%, rgba(16,18,22,0.14) 65%, rgba(16,18,22,0) 100%) !important;
  transition: background .35s ease, box-shadow .35s ease;
}
body.page-index header.default13.ido-header-scrolled .menu-wrapper {
  background: var(--fs-charcoal, #1A1917) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.20);
}
/* podstrony (bez hero): header grafit marki zamiast schematowego 41,41,41 */
body:not(.page-index) header.default13 .menu-wrapper { background: var(--fs-charcoal, #1A1917) !important; }

/* ═══ §FS-TXT — /txt (CMS): naglowki sekcji charcoal Playfair (bylo zloto #CAB48D 1.9:1 na bialym).
   Eyebrow zostaje gold-dark (akcent), naglowki ciemne jak tytul strony (spojna hierarchia). ═══ */
body.page-txt .txt-text h2, body.page-txt .txt-text h3, body.page-txt .txt-text h4,
body.page-txt .fs-h2, body.page-txt .fs-page h2, body.page-txt #pageContent h2, body.page-txt #pageContent h3 {
  color: var(--fs-charcoal, #1A1917) !important;
}
body.page-txt .txt-text a { color: var(--fs-primary-dark, #8A6D3B) !important; }

/* ═══════════════════════════════════════════════════════════════
   §FS-POLISH (2026-07-23, feedback Damiana) — nav-legibility, litepicker, /offers przyciski/chip, powered-by.
   ═══════════════════════════════════════════════════════════════ */
/* (1) NAV nad hero „ledwo widoczne": bialy + text-shadow + mocniejszy scrim u gory */
body.page-index header.default13 .menu-wrapper {
  background: linear-gradient(180deg, rgba(16,18,22,0.62) 0%, rgba(16,18,22,0.30) 58%, rgba(16,18,22,0) 100%) !important;
}
body.page-index header.default13 .menu-wrapper a,
body.page-index header.default13 #navbar a {
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.45) !important;
  font-weight: 600 !important;
}
body.page-index header.default13.ido-header-scrolled .menu-wrapper a,
body.page-index header.default13.ido-header-scrolled #navbar a { text-shadow: none !important; }

/* (2) LITEPICKER — brand (zloto/charcoal, zaokraglony, cien, Playfair naglowek) */
.litepicker { font-family: var(--fs-font-body, "Source Sans 3", sans-serif) !important; }
.litepicker .container__main { border-radius: 14px !important; box-shadow: 0 24px 70px rgba(26,25,23,0.30) !important; overflow: hidden; border: 1px solid rgba(202,180,141,0.4); }
.litepicker .month-item-header { font-family: var(--fs-font-heading, "Playfair Display", serif) !important; color: var(--fs-charcoal, #1A1917) !important; font-weight: 600 !important; }
.litepicker .month-item-weekdays-row > div { color: var(--fs-text-muted, #6B6B6B) !important; }
.litepicker .day-item { border-radius: 8px !important; transition: background .15s, color .15s; }
.litepicker .day-item:hover { box-shadow: inset 0 0 0 1.5px var(--fs-primary, #CAB48D) !important; color: var(--fs-charcoal, #1A1917) !important; background: transparent !important; }
.litepicker .day-item.is-start-date, .litepicker .day-item.is-end-date { background: var(--fs-primary, #CAB48D) !important; color: var(--fs-charcoal, #1A1917) !important; }
.litepicker .day-item.is-in-range { background: var(--fs-cream, #F2EDE4) !important; color: var(--fs-charcoal, #1A1917) !important; }
.litepicker .button-apply { background: var(--fs-primary, #CAB48D) !important; color: var(--fs-charcoal, #1A1917) !important; border-radius: 8px !important; }

/* (3) /offers — przyciski nie „rozlane" (szerokosc do tresci) + chip ceny poziomy, nie nachodzi */
body.page-offers .offers-container .btn,
body.page-offers .offers-container a.btn,
body.page-offers .offers-container .btn.button {
  display: inline-flex !important; width: auto !important; max-width: max-content !important;
  padding: 12px 28px !important; align-self: flex-start; letter-spacing: 1px;
}
body.page-offers .offers-container .offer-price,
body.page-offers .offers-container .object-price {
  position: static !important; width: auto !important; height: auto !important; min-height: 0 !important;
  align-self: flex-start !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px !important;
  padding: 8px 16px !important; margin: 2px 0 10px !important; border-radius: 10px !important;
}
body.page-offers .offers-container .offer-price small,
body.page-offers .offers-container .offer-price span { display: inline !important; }

/* (4) POWERED-BY — wiekszy (licencja 240) + pelna widocznosc na jasnej stopce */
html body .fs-footer .powered_by_logo img,
html body .fs-footer .powered_by img,
html body .fs-footer [class*="powered"] img {
  width: 240px !important; max-width: 100% !important; height: auto !important; min-height: 40px !important;
  filter: none !important; opacity: 1 !important;
}

/* (5) Atrakcje — CTA pod siatka wysrodkowane + oddech */
body.page-index .fs-attractions__cta { text-align: center; margin: 44px 0 0; }
body.page-index .fs-attractions-teaser .fs-features__grid { row-gap: 40px; }

/* ═══════════════════════════════════════════════════════════════
   §FS-HEADER v2 (feedback: „biala belka z napisami na KAZDEJ podstronie" — menu bylo
   nieczytelne = zlote na czarnej belce). Podstrony + home-po-scrollu = BIALA belka +
   charcoal napisy + zloty hover. Home NAD hero zostaje przezroczysty (bez zmian).
   Logo (wideLogo.png) jest JASNE (pod ciemny header) → na bialej belce dajemy ciemny
   „chip" pod logo, zeby nie znikalo i zloto gwiazdek zostalo. (Docelowo: ciemny wariant logo.)
   ═══════════════════════════════════════════════════════════════ */
html body:not(.page-index) header.default13 .menu-wrapper,
html body.page-index header.default13.ido-header-scrolled .menu-wrapper {
  background: #FFFFFF !important;
  box-shadow: 0 2px 16px rgba(26,25,23,0.10) !important;
  border-bottom: 1px solid rgba(202,180,141,0.30) !important;
}
html body:not(.page-index) header.default13 .menu-wrapper a,
html body:not(.page-index) header.default13 #navbar a,
html body.page-index header.default13.ido-header-scrolled .menu-wrapper a,
html body.page-index header.default13.ido-header-scrolled #navbar a {
  color: var(--fs-charcoal, #1A1917) !important; text-shadow: none !important; font-weight: 600 !important;
}
html body:not(.page-index) header.default13 .menu-wrapper a:hover,
html body.page-index header.default13.ido-header-scrolled .menu-wrapper a:hover { color: var(--fs-primary-dark, #8A6D3B) !important; }
/* logo: przezroczysty PNG z CIEMNYMI znakami (lum ~49) → na bialej belce widoczny bez tla.
   ZERO chipa (feedback: „logo jest ok, nie rob czarnej obramowki"). */
/* przycisk rezerwacji w belce: zloto + charcoal (nie bialy-na-zlocie) */
html body header.default13 .navbar-reservation,
html body header.default13 .navbar-reservation a,
html body header.default13 .navbar-reservation span,
html body header.default13 .navbar-reservation button {
  background-color: var(--fs-primary, #CAB48D) !important; color: var(--fs-charcoal, #1A1917) !important;
}

/* ═══ CENNIK (offer detail) — usun zbedne obramowania/linie (feedback) ═══ */
html body.page-offer .season-single-row,
html body.page-offer .season-row_sub,
html body.page-offer .season-cell_dates,
html body.page-offer .season-cell_footer { border: none !important; }
html body.page-offer .season-cell .object-price,
html body.page-offer .season-single-row .object-price,
html body.page-offer .to-offer-prices-wrapper .object-price { border: none !important; box-shadow: none !important; }

/* ═══════════════════════════════════════════════════════════════
   §FS-PLACES — „Co zwiedzić w zasiegu spaceru" (feedback: sekcja atrakcji byla pusta —
   8 identycznych pinezek + „ok. X min". Teraz realne karty miejsc z opisem + dystansem).
   ═══════════════════════════════════════════════════════════════ */
.fs-places { padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 48px); background: var(--fs-cream, #FAFAF5); }
.fs-places .fs-section__inner { max-width: var(--fs-maxw, 1200px); margin: 0 auto; }
.fs-places .fs-eyebrow { color: var(--fs-primary-dark, #8A6D3B); }
.fs-places .fs-h2 { margin: 6px 0 14px; }
.fs-places .fs-lead { max-width: 720px; margin: 0 0 clamp(36px, 5vw, 56px); color: var(--fs-text-soft, #4A463F); }
.fs-places__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.fs-place {
  display: flex; flex-direction: column; gap: 16px;
  background: #FFFFFF; border: 1px solid var(--fs-border, rgba(26,25,23,0.10));
  border-radius: var(--fs-radius, 14px); padding: clamp(24px, 2.4vw, 32px);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.fs-place:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(26,25,23,0.12);
  border-color: rgba(202,180,141,0.55);
}
.fs-place__icon {
  width: 52px; height: 52px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--fs-primary-dark, #8A6D3B);
  background: rgba(202,180,141,0.14); border-radius: 12px;
}
.fs-place__icon svg { width: 26px; height: 26px; }
.fs-place__dist {
  display: inline-block; font-family: var(--fs-font-body, inherit);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fs-primary-dark, #8A6D3B);
}
.fs-place__name {
  font-family: var(--fs-font-heading, Georgia, serif);
  font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; margin: 6px 0 8px;
  color: var(--fs-charcoal, #1A1917);
}
.fs-place__desc { font-size: 15px; line-height: 1.7; margin: 0; color: var(--fs-text-soft, #4A463F); }
.fs-places__cta { text-align: center; margin: clamp(40px, 5vw, 56px) 0 0; }
@media (max-width: 991px) { .fs-places__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fs-places__grid { grid-template-columns: 1fr; } }

/* §FS-PLACES interakcja — klik karty => modal z mapa; scroll-reveal kart; hint na hover.
   (feedback: „sekcja martwa — zrob fajne przejscia, ze cos sie dzieje, pokazuje sie miejsce") */
.fs-place--interactive { cursor: pointer; }
.fs-place--interactive:focus-visible { outline: 2px solid var(--fs-primary-dark, #8A6D3B); outline-offset: 3px; }
.fs-place__hint {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font-family: var(--fs-font-body, inherit); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fs-primary-dark, #8A6D3B);
  opacity: 0; transform: translateX(-4px); transition: opacity .3s ease, transform .3s ease;
}
.fs-place--interactive:hover .fs-place__hint,
.fs-place--interactive:focus-visible .fs-place__hint { opacity: 1; transform: none; }
.fs-place__hint svg { width: 15px; height: 15px; }
/* scroll-reveal (wlasny stan --in, sterowany JS z fallbackiem — pewny na fullpage) */
.fs-places .fs-place { opacity: 0; transform: translateY(26px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.fs-places .fs-place.fs-place--in { opacity: 1; transform: translateY(0); }
.fs-places .fs-place.fs-place--in:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(26,25,23,0.14); border-color: rgba(202,180,141,0.6); }
.fs-place__icon, .fs-place__name { transition: transform .35s ease, color .35s ease; }
.fs-place--interactive:hover .fs-place__icon { transform: scale(1.08) rotate(-3deg); }
.fs-place--interactive:hover .fs-place__name { color: var(--fs-primary-dark, #8A6D3B); }
@media (prefers-reduced-motion: reduce) {
  .fs-places .fs-place { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* modal miejsca (mini-mapa Leaflet + opis + trasa) */
.fs-place-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.fs-place-modal.fs-place-modal--open { opacity: 1; visibility: visible; }
.fs-place-modal__overlay { position: absolute; inset: 0; background: rgba(26,25,23,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.fs-place-modal__panel { position: relative; width: min(720px, 100%); max-height: 90vh; overflow: auto;
  background: #FFFFFF; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  transform: translateY(18px) scale(.98); transition: transform .38s cubic-bezier(.2,.7,.2,1); }
.fs-place-modal--open .fs-place-modal__panel { transform: none; }
.fs-place-modal__map { width: 100%; height: 320px; background: #EDE9E1; border-radius: 16px 16px 0 0; }
.fs-place-modal__body { padding: 22px clamp(20px,3vw,32px) 28px; }
.fs-place-modal__dist { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fs-primary-dark, #8A6D3B); margin: 0 0 6px; }
.fs-place-modal__title { font-family: var(--fs-font-heading, "Playfair Display", serif); font-size: clamp(22px,2.4vw,30px); line-height: 1.2; margin: 0 0 12px; color: var(--fs-charcoal, #1A1917); }
.fs-place-modal__desc { font-size: 16px; line-height: 1.7; color: var(--fs-text-soft, #4A463F); margin: 0; }
.fs-place-modal__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.fs-place-modal__close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 40px; height: 40px; border: none;
  border-radius: 50%; background: rgba(255,255,255,0.94); color: var(--fs-charcoal, #1A1917); font-size: 24px; line-height: 40px;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: background .2s ease, transform .2s ease; }
.fs-place-modal__close:hover { background: #FFFFFF; transform: scale(1.06); }
.fs-map-pin__dot--apt { background: var(--fs-charcoal, #1A1917); }
html.fs-place-modal-lock { overflow: hidden; }

/* §FS-LIFE — „zycie" bez budzetu JS (CSS-only): (1) wyroznione apartamenty hover-polish,
   (2) podstrony /txt wejscie tresci + interaktywna lista atrakcji. Reveal home istnieje juz
   (fs-reveal/fs-in), tu dokladamy warstwe premium + rozszerzamy na /txt (poza page-index). */

/* (1) Wyroznione apartamenty — CTA ze strzalka + glebia zdjecia na hover */
body.page-index .fs-offers__cta { display: inline-flex; align-items: center; gap: 6px; transition: color .3s ease, gap .3s ease; }
body.page-index .fs-offers__cta::after { content: "\2192"; transition: transform .3s ease; }
body.page-index .fs-offers__card:hover .fs-offers__cta { color: var(--fs-charcoal, #1A1917); gap: 10px; }
body.page-index .fs-offers__card:hover .fs-offers__cta::after { transform: translateX(4px); }
body.page-index .fs-offers__media { position: relative; }
body.page-index .fs-offers__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(26,25,23,0.30), transparent 42%); opacity: .55; transition: opacity .4s ease; }
body.page-index .fs-offers__card:hover .fs-offers__media::after { opacity: .95; }

/* (2) Podstrony /txt — delikatne wejscie tresci (on-load, pewne) + interaktywna lista atrakcji */
@keyframes fs-txt-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
body.page-txt .txt-text { animation: fs-txt-rise .7s cubic-bezier(.2,.7,.2,1) both; }
body.page-txt .txt-text ul li { transition: transform .25s ease, color .25s ease; }
body.page-txt .txt-text ul li:hover { transform: translateX(6px); color: var(--fs-charcoal, #1A1917); }
body.page-txt .txt-text ul li strong { transition: color .25s ease; }
body.page-txt .txt-text ul li:hover strong { color: var(--fs-primary-dark, #8A6D3B); }
@media (prefers-reduced-motion: reduce) {
  body.page-txt .txt-text { animation: none; }
  body.page-index .fs-offers__cta, body.page-index .fs-offers__media::after, body.page-txt .txt-text ul li { transition: none; }
}

/* §FS-LIFE-2 — hero scroll-cue + premium hover przyciskow (CSS-only) */
/* Chevron pod wyszukiwarka na hero — subtelny bounce, prowadzi do nastepnej sekcji */
body.page-index .fs-hero__inner::after {
  content: ""; display: block; width: 14px; height: 14px; margin: 42px auto 0;
  border-right: 2px solid rgba(255,255,255,0.85); border-bottom: 2px solid rgba(255,255,255,0.85);
  transform: rotate(45deg); animation: fs-cue 1.8s ease-in-out infinite;
}
@keyframes fs-cue { 0%,100% { transform: rotate(45deg) translate(0,0); opacity: .5; } 50% { transform: rotate(45deg) translate(4px,4px); opacity: 1; } }
@media (max-height: 720px) { body.page-index .fs-hero__inner::after { margin-top: 22px; } }
@media (prefers-reduced-motion: reduce) { body.page-index .fs-hero__inner::after { animation: none; opacity: .8; } }

/* Przyciski — premium hover: wypelnienie zlotem + lift + cien (bylo tylko color/border) */
.fs-btn { transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.fs-btn:hover { background-color: var(--fs-primary, #CAB48D); border-color: var(--fs-primary, #CAB48D); color: var(--fs-charcoal, #1A1917); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(202,180,141,0.35); }
.fs-btn--primary:hover { background-color: var(--fs-primary-dark, #8A6D3B); border-color: var(--fs-primary-dark, #8A6D3B); color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .fs-btn { transition: background-color .3s ease, color .3s ease; } .fs-btn:hover { transform: none; } }

/* §FS-POLISH-2 — etykieta ceny /offers (bylo „od259" sklejone) + polish redakcyjny podstron /txt */
/* /offers: „Cena juz od" jako mala etykieta NAD kwota (osobna linia) */
body.page-offers .offers-container small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; margin-bottom: 2px; }

/* Podstrony /txt: naglowki content ze zlotym akcentem + listy ze zlota kropka + rytm */
body.page-txt .txt-text h2:not(.fs-h2) { position: relative; margin-top: 2em; }
body.page-txt .txt-text h2:not(.fs-h2)::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--fs-primary, #CAB48D); margin-bottom: .55em; }
body.page-txt .txt-text ul { list-style: none; padding-left: 0; }
body.page-txt .txt-text ul li { position: relative; padding-left: 26px; margin-bottom: .55em; }
body.page-txt .txt-text ul li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--fs-primary, #CAB48D); }
body.page-txt .txt-text p { line-height: 1.75; }

/* §FS-MAGIC — universal scroll-reveal (poza home) + hero particles. Sterowane skryptem w HEAD. */
.fs-mg { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.fs-mg.fs-mg-in { opacity: 1; transform: none; }
.fs-mg[data-mg="1"] { transition-delay: .06s; }
.fs-mg[data-mg="2"] { transition-delay: .12s; }
.fs-mg[data-mg="3"] { transition-delay: .18s; }
.fs-mg[data-mg="4"] { transition-delay: .24s; }
.fs-mg[data-mg="5"] { transition-delay: .30s; }
.fs-mg-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
body.page-index .fs-hero__inner { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .fs-mg { opacity: 1 !important; transform: none !important; transition: none; }
  .fs-mg-particles { display: none; }
}