/* CSS_EDYTOR.css — SCAFFOLD (maksymalna baza) dla Apartamenty Centrum
   Wygenerowany: node scripts/jarvis.js scaffold apartamenty-centrum
   Prefix: --ac-  ·  Vibe: modern-minimal  ·  Theme: default13
   WORKFLOW SUBTRAKTYWNY: usuwaj nieuzywane warianty/regiony, NIE dopisuj od zera. */


/* ============================================================
   §ROOT — brand tokens
   ============================================================ */
/* ============================================================
   §ROOT — brand tokens (alias-at-root). Prefix: --ac-*
   Kolory z brief.kolory (override) lub palety vibe "modern-minimal".
   --xx-* aliasy → warstwy uzywajace --xx-* dziedzicza marke bez renamingu.
   ============================================================ */
:root {
  --ac-primary:   #B08D57;
  --ac-secondary: #14110E;
  --ac-primary-light: #C6A876;
  --ac-primary-dark: #8F6E3E;
  --ac-secondary-light: #2A2724;
  --ac-cream: #F3EEE6;
  --ac-bg: #FAF7F2;
  --ac-text: #0F0F0E;
  --ac-text-soft: #3A3A38;
  --ac-text-muted: #7A736B;
  --ac-border: #E6DECE;
  --ac-maxw: 1240px;
  /* v2: JASNA custom stopka (cream) — powered-by on_white widoczny natywnie, bez filtra */
  --ac-footer-bg: #EFE9DE;

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

  /* 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(--ac-secondary);
  --xx-accent: var(--ac-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(--ac-secondary);
  /* v2.1: fonty/radius aliasy — L3/L4 offer uzywa var(--xx-font-*/--xx-radius*),
     zdefiniowane dotad TYLKO w [data-vibe] (body bez data-vibe) → /offer/N renderowal
     sie SERIF (fallback Playfair/DM Sans). Alias-at-root naprawia cala powierzchnie. */
  --xx-font-heading: var(--ido-font-heading);
  --xx-font-body: var(--ido-font-body);
  --xx-radius: var(--ido-radius);
  --xx-radius-lg: 8px;
  --xx-primary-soft: rgba(176, 141, 87, 0.15);
}


/* ============================================================
   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(--ac-primary) and
   var(--ac-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(--ac-primary) and var(--ac-secondary). */
.formbutton,
#iai_book_form .formbutton {
  background: var(--ac-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(--ac-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 circle — system renders oval 244x161, force 150x150 circle */
.offer-price {
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ido-primary) !important;
  color: #fff !important;
  padding: 0 !important;
  text-align: center !important;
}
.offer-price small {
  font-size: 13px !important;
  line-height: 1.2 !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: #fff !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(--ido-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════
   §E — /contact PAGE (system auto — CSS-only; kanon: osada + CK + igielna)
   Mapa nad listą + stylowane pola formularza + typografia + marka.
   ═══════════════════════════════════════════════════════════════ */
/* offset pod fixed header (jak /txt) + wysrodkowana kolumna */
body.page-contact #pageContent { padding-top: 84px !important; max-width: var(--ac-maxw); margin: 0 auto; }

/* naglowki + typografia (system renderuje za duzo) */
body.page-contact h1, body.page-contact .contact__label {
  font-size: clamp(26px, 3.4vw, 40px) !important; line-height: 1.12 !important;
  font-family: var(--ido-font-heading) !important; color: var(--ac-secondary) !important;
}
body.page-contact h2, body.page-contact h3 {
  font-family: var(--ido-font-heading) !important; color: var(--ac-secondary) !important;
}
body.page-contact .contact p, body.page-contact .contact li,
body.page-contact .contact span, body.page-contact .contact address,
body.page-contact .contact a,
body.page-contact .contact__block, body.page-contact .contact__block strong,
body.page-contact .contact__block a, body.page-contact .contact__block span,
body.page-contact .contact__locations strong, body.page-contact .contact__locations span,
body.page-contact .contact__locations a:not(.contact__btn) {
  font-size: 16px !important; line-height: 1.65 !important;
}

/* linki + przycisk (marka) */
body.page-contact a { color: var(--ac-primary) !important; }
body.page-contact a:hover { color: var(--ac-secondary) !important; }
body.page-contact .btn,
body.page-contact form button,
body.page-contact form input[type="submit"] {
  background: var(--ac-primary) !important; border-color: var(--ac-primary) !important; color: #FFFFFF !important;
}
body.page-contact .btn:hover,
body.page-contact form button:hover { background: var(--ac-primary-dark) !important; }
body.page-contact .contact__btn { justify-content: center !important; text-align: center !important; }
body.page-contact .contact__item .contact__btn[href=""],
body.page-contact .contact__item .contact__btn:not([href]) { display: none !important; }

/* POLA FORMULARZA (kanon City of the Kings M5) */
body.page-contact input[type="text"],
body.page-contact input[type="email"],
body.page-contact input[type="tel"],
body.page-contact textarea {
  width: 100%; font-family: var(--ido-font-body); font-size: 15px; color: var(--ac-text);
  background: #FFFFFF; border: 1px solid var(--ac-border); border-radius: var(--ido-radius);
  padding: 12px 14px; min-height: 44px; transition: border-color .2s ease, box-shadow .2s ease;
}
body.page-contact input:focus,
body.page-contact textarea:focus {
  outline: 0; border-color: var(--ac-primary);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, .18);
}
body.page-contact textarea { min-height: 140px; resize: vertical; }

/* MAPA NAD LISTA + 2-kol lokalizacje (kanon osada §E / TRAP-18) */
body.page-contact .contact { display: flex; flex-direction: column; }
body.page-contact #map_container {
  order: -1; width: 100% !important; min-height: 420px; margin: 0 0 40px !important;
  border-radius: var(--ido-radius); overflow: hidden;
}
body.page-contact .leaflet-container { border-radius: var(--ido-radius) !important; overflow: hidden !important; }
body.page-contact .contact__locations { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 12px; }
body.page-contact .contact__item { padding: 12px 0; border-bottom: 1px solid var(--ac-border); }
@media (max-width: 767px) {
  body.page-contact .contact__locations { grid-template-columns: 1fr; }
  body.page-contact #pageContent { padding-top: 72px !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(--ac-primary)   → client primary color hex (e.g. #4A6741)
     var(--ac-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(--ac-primary) !important;
  background: var(--ac-primary) !important;
  left: auto !important;
  right: 32px !important;
  transform: none !important;
  margin-left: 0 !important;
}

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

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

/* Skip-to-content accessibility link */
.skip_link {
  background: var(--ac-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="ac-home">
   (scaffold bodyTopFor robi to automatycznie). Tu ukrywamy ja wszedzie POZA
   strona glowna; na body.page-index .ac-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) .ac-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 .ac-footer
   --------------------------------------------------------------------------
   Struktura budowana przez library/js/ido-footer-rebuild.js:
     footer.ac-footer
       > .ac-footer__top       (grid kolumn)
           > .ac-footer__col
               .ac-footer__logo   (svg + brand)
               .ac-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)
       > .ac-footer__bottom
           > .ac-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.ac-footer { background: <dark> }` + kolory tekstu w §CLIENT.
   ========================================================================== */

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

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

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

/* ── PASEK DOLNY: © + płatności, lewo-wyrównany ── */
.ac-footer__bottom {
  border-top: 1px solid var(--ac-border, #E6DECE);
}
/* prawy padding 90px = miejsce na #backTop (fixed, right ~26px) */
.ac-footer__bottom-in {
  max-width: var(--ac-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(--ac-text-muted, #8A8378);
}
.ac-footer__bottom-in a {
  color: var(--ac-text-muted, #8A8378);
  text-decoration: none;
}
.ac-footer__bottom-in a:hover {
  color: var(--ac-primary, #B8892B);
}

/* ── RELOKOWANE WĘZŁY SYSTEMOWE (przejmują nasz styl, dane z panelu) ── */
.ac-footer .footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  justify-items: start;
}
.ac-footer .footer__contact li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  justify-content: flex-start;
}
.ac-footer .footer__contact a {
  text-decoration: none;
}
/* link do regulaminu bywa w osobnym li — do lewej, nie wyśrodkowany */
.ac-footer .footer__contact li.footer-contact-terms {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 4px;
}
.ac-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ł */
.ac-footer .footer-contact-adress {
  display: block !important;
}
.ac-footer ul.footer__social_media {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 16px 0 0;
}
.ac-footer ul.footer__social_media a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ac-border, #E6DECE);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-text-soft, #4A4A4A);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ac-footer ul.footer__social_media a:hover {
  background: var(--ac-primary, #B8892B);
  color: #FFF;
  border-color: var(--ac-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. */
.ac-footer .powered_by,
.powered_by {
  margin-top: 6px;
  display: inline-block;
}
.ac-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,
.ac-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 .ac-pay (VISA + MC).
   TRAP-12: kill navy pseudo-pas .footer-contact-baner::before/::after. */
.ac-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;
}
.ac-footer .footer-contact-baner::before,
.ac-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 */
.ac-pay {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.ac-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ł */
.ac-footer .footer-contact-baner svg,
.ac-footer .footer-contact-baner img {
  filter: none !important;
  height: 22px;
  width: auto;
  opacity: 1 !important;
}

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

/* ── RESPONSYWNOŚĆ: 4 kol → 2 → 1 ── */
@media (max-width: 860px) {
  .ac-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media (max-width: 560px) {
  .ac-footer__top {
    grid-template-columns: 1fr;
  }
  .ac-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.ac-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 ac-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.ac-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(--ac-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.ac-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.ac-nav-open #navbar ul,
  body.ac-nav-open #navbar .menu {
    display: block !important;
    flex-direction: column !important;
  }
  body.ac-nav-open #navbar a {
    display: block !important;
    padding: 12px 0 !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, #722F37) !important;
  border-bottom-color: var(--xx-primary, #722F37) !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, #722F37) !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, #722F37) !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, #722F37) !important;
  box-shadow: 0 0 0 3px var(--xx-primary-soft, rgba(114, 47, 55, 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, #722F37) !important;
  border-bottom-color: var(--xx-primary, #722F37) !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, #722F37) !important;
  border-bottom-color: var(--xx-primary, #722F37) !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
   .ac-price-chip + defeat systemowego kształtu na .offer-price/.object-price. */
.ac-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ę .ac-offer-amenities (JS/body_top), systemowe
   listy udogodnień są duplikatem. Ukryj systemowe TYLKO gdy body ma znacznik
   `.ac-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.ac-has-amenities .offer-features,
body.page-offer.ac-has-amenities .amenities,
body.page-offer.ac-has-amenities .features-list,
body.page-offer.ac-has-amenities .object-amenities,
body.page-offer.ac-has-amenities .object-facilities {
  display: none !important;
}

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

/* ── ZAREZERWUJ TERAZ = PRIMARY CTA: brand-fill + WYSRODKOWANY (TRAP center+brand) ──
   Struktura default13: <a.accommodation-reservation> (wrapper, przezroczysty, text-align:left)
   > <span.btn.button.accommodation-leftbutton> (wlasciwy przycisk). Wrapper CENTRUJE dziecko;
   brand-fill + flex-center na WLASCIWYM przycisku. Specyficznosc html body.page-offer (0,3,3+)
   bije systemowe + legacy .accommodation-leftbutton. Kanon: prosty-wynajem (live 2026-07-08). */
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;
  text-align: center !important;
}
html body.page-offer a.accommodation-reservation .accommodation-leftbutton,
html body.page-offer .accommodation-reservation .accommodation-leftbutton,
html body.page-offer span.accommodation-leftbutton,
html body.page-offer .accommodation-leftbutton {
  background: var(--ac-secondary) !important;   /* grafit = pop przy mosieznym price-chip */
  color: #FFFFFF !important;                     /* na #14110E ~16:1 (na mosiadzu bialy = WCAG fail) */
  border: none !important;
  border-radius: var(--xx-radius-lg, 8px) !important;
  min-height: 52px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: var(--ac-font-heading, "Manrope", sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-indent: 0.3px !important;                 /* kompensuje trailing letter-spacing */
  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(--ac-secondary-light, #2A2724) !important;
  color: #FFFFFF !important;
}

/* linki poboczne sidebaru — wysrodkowane + tap-target 44 + odstep od mapy */
html body.page-offer a.offerCalendar,
html body.page-offer a.to-offer-prices,
html body.page-offer #generateDirections {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 44px !important;
}
html body.page-offer #generateDirections { margin-top: 16px !important; }

/* ── PRICE CHIP na /offer/N: ciemny tekst (WCAG) — brass tlo + bialy maly tekst = fail ──
   §D daje bg brass; „od" (small 13px) na mosiadzu bialy < 4.5:1. Grafit #14110E ~6:1. */
body.page-offer .offer-price,
body.page-offer .offer-price *,
body.page-offer .offer-price small,
body.page-offer .offer-price .price { color: var(--ac-secondary) !important; }

/* ── object-fit: cover na zdjeciach oferty (iPhone Safari crop/stretch — §200m) ── */
html body.page-offer .slick-slide img,
html body.page-offer .offer img,
html body.page-offer a[href*="/offer/"] img,
html body.page-offer main .pictures img,
html body.page-offer .offer-gallery img { object-fit: cover !important; object-position: center !important; }

/* ── #additional + opisy: lamanie dlugich maili/URLi (overflow) ── */
body.page-offer #additional,
body.page-offer .additional_info,
body.page-offer .addonsList,
body.page-offer .tabs__item,
body.page-offer #additional a,
body.page-offer #additional strong { overflow-wrap: anywhere !important; word-break: break-word !important; }

/* (usunieto bledny /offers equalize — cele .offers-list/.offer nie istnieja; realny
   wrapper = .offers-container ROWS → reskin w §AC-OFFERS-LIST na koncu pliku) */


/* ──────────────────────────────────────────────────────────
   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 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 `.ac-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ć `.ac-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: `ac` → 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.
   -------------------------------------------------------------------------- */
.ac-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 .ac-fullbleed) sięga krawędzi ekranu. */
.ac-fullbleed > .ac-inner,
.ac-inner {
  max-width: var(--ac-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 `.ac-` 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 `.ac-fullbleed`. Preferuj jednak klasę (a).│
      └────────────────────────────────────────────────────────────────┘
   -------------------------------------------------------------------------- */
.ac-section,
.ac-hero,
.ac-hero-lite,
.ac-pagehead,
.ac-pagehero,
.ac-band,
.ac-statsband,
.ac-trust,
.ac-cta,
.ac-darkhero,
.ac-storyhero,
.ac-splithero,
.ac-keyrow,
.ac-contact,
.ac-filterbar,
.ac-results-head,
.ac-breadcrumb,
.ac-pagination,
.ac-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. */
.ac-storyhero,
.ac-splithero,
.ac-keyrow,
.ac-contact,
.ac-filterbar,
.ac-results-head,
.ac-breadcrumb {
  padding-left: max(clamp(20px, 4vw, 48px), calc((100vw - var(--ac-maxw, 1240px)) / 2)) !important;
  padding-right: max(clamp(20px, 4vw, 48px), calc((100vw - var(--ac-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)
   ============================================================ */



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

/* uwaga: selektory [data-vibe="modern-minimal"] zachowane — ustaw <body data-vibe="modern-minimal"> LUB usuń atrybut selektora recznie */
────────────────────────────────────────────────────────── */
:root[data-vibe="modern-minimal"],
[data-vibe="modern-minimal"] {
  --xx-primary:         #E2D700;
  --xx-primary-light:   #F4EE5C;
  --xx-primary-dark:    #B8AE00;
  --xx-primary-soft:    rgba(226, 215, 0, 0.08);
  --xx-secondary:       #0F0F0E;
  --xx-secondary-light: #2A2A28;
  --xx-secondary-dark:  #050504;
  --xx-cream:           #F0EAE0;
  --xx-cream2:          #E8E1D4;
  --xx-cream3:          #DED5C5;
  --xx-bg:              #FAF7F2;
  --xx-text:            #0F0F0E;
  --xx-text-soft:       #3A3A38;
  --xx-text-muted:      #7A736B;
  --xx-shadow-sm:       0 2px 8px rgba(15, 15, 14, 0.05);
  --xx-shadow-md:       0 4px 30px rgba(15, 15, 14, 0.07);
  --xx-shadow-lg:       0 12px 40px rgba(15, 15, 14, 0.10);
  --xx-gradient-primary: linear-gradient(135deg, #E2D700 0%, #B8AE00 100%);
  --xx-gradient-accent:  linear-gradient(135deg, #0F0F0E 0%, #050504 100%);
  --xx-radius:          4px;
  --xx-radius-lg:       8px;
  --xx-ease:            cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  [data-vibe="modern-minimal"]:not([data-mode="light"]) {
    --xx-primary:         #F4EE8A;
    --xx-primary-light:   #F8F2A8;
    --xx-primary-dark:    #C8C25A;
    --xx-primary-soft:    rgba(244, 238, 138, 0.14);
    --xx-secondary:       #FFFFFF;
    --xx-secondary-light: #FFFFFF;
    --xx-secondary-dark:  #D8D8D8;
    --xx-cream:           #1A1A18;
    --xx-cream2:          #161614;
    --xx-cream3:          #121210;
    --xx-bg:              #0F0F0E;
    --xx-text:            #FFFFFF;
    --xx-text-soft:       #E5E5E0;
    --xx-text-muted:      #A8A29A;
    --xx-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.35);
    --xx-shadow-md:       0 4px 30px rgba(0, 0, 0, 0.45);
    --xx-shadow-lg:       0 12px 40px rgba(0, 0, 0, 0.60);
    --xx-gradient-primary: linear-gradient(135deg, #F4EE8A 0%, #C8C25A 100%);
    --xx-gradient-accent:  linear-gradient(135deg, #FFFFFF 0%, #D8D8D8 100%);
  }
}

[data-vibe="modern-minimal"][data-mode="dark"],
[data-vibe="modern-minimal"].force-dark {
  --xx-primary:         #F4EE8A;
  --xx-primary-light:   #F8F2A8;
  --xx-primary-dark:    #C8C25A;
  --xx-primary-soft:    rgba(244, 238, 138, 0.14);
  --xx-secondary:       #FFFFFF;
  --xx-secondary-light: #FFFFFF;
  --xx-secondary-dark:  #D8D8D8;
  --xx-cream:           #1A1A18;
  --xx-cream2:          #161614;
  --xx-cream3:          #121210;
  --xx-bg:              #0F0F0E;
  --xx-text:            #FFFFFF;
  --xx-text-soft:       #E5E5E0;
  --xx-text-muted:      #A8A29A;
  --xx-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.35);
  --xx-shadow-md:       0 4px 30px rgba(0, 0, 0, 0.45);
  --xx-shadow-lg:       0 12px 40px rgba(0, 0, 0, 0.60);
  --xx-gradient-primary: linear-gradient(135deg, #F4EE8A 0%, #C8C25A 100%);
  --xx-gradient-accent:  linear-gradient(135deg, #FFFFFF 0%, #D8D8D8 100%);
}


/* ──────────────────────────────────────────────────────────
   3. RUSTIC WARM
   Agroturystyka, klimat wiejski


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

/* uwaga: selektory [data-vibe="modern-minimal"] zachowane — ustaw <body data-vibe="modern-minimal"> LUB usuń atrybut selektora recznie */
────────────────────────────────────────────────────────── */
[data-vibe="modern-minimal"] {
  --xx-font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --xx-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --xx-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --xx-letter-spacing-heading: -0.02em;
  --xx-letter-spacing-caption: 1.2px;
  --xx-line-height-tight: 1.05;
  --xx-line-height-base: 1.55;
  --xx-line-height-loose: 1.7;
}

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

[data-vibe="modern-minimal"] h1,
[data-vibe="modern-minimal"] .ac-h1 {
  font-family: var(--xx-font-heading);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 700;
  line-height: var(--xx-line-height-tight);
  letter-spacing: var(--xx-letter-spacing-heading);
  margin: 0 0 0.5em;
}
[data-vibe="modern-minimal"] h2,
[data-vibe="modern-minimal"] .ac-h2 {
  font-family: var(--xx-font-heading);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--xx-letter-spacing-heading);
  margin: 0 0 0.6em;
}
[data-vibe="modern-minimal"] h3,
[data-vibe="modern-minimal"] .ac-h3 {
  font-family: var(--xx-font-heading);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.6em;
}
[data-vibe="modern-minimal"] h4,
[data-vibe="modern-minimal"] .ac-h4 {
  font-family: var(--xx-font-heading);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.7em;
}
[data-vibe="modern-minimal"] p,
[data-vibe="modern-minimal"] .ac-p {
  font-family: var(--xx-font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: var(--xx-line-height-base);
  margin: 0 0 1em;
}
[data-vibe="modern-minimal"] .ac-caption {
  font-family: var(--xx-font-body);
  font-size: 12px;
  letter-spacing: var(--xx-letter-spacing-caption);
  text-transform: uppercase;
  font-weight: 600;
}
[data-vibe="modern-minimal"] .ac-eyebrow {
  font-family: var(--xx-font-body);
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--xx-primary);
}
[data-vibe="modern-minimal"] .ac-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);
  font-weight: 700;
}
[data-vibe="modern-minimal"] .ac-lead {
  font-family: var(--xx-font-body);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.55;
  color: var(--xx-text-soft);
}


/* ──────────────────────────────────────────────────────────
   3. RUSTIC WARM — Cormorant Garamond + Lato


/* ============================================================
   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).
   ═══════════════════════════════════════════════════════════════ */

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

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

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

/* ── 3. SLIDE UNDERLINE ─────────────────────────────────────── */
.ac-hover--slide-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}
.ac-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;
}
.ac-hover--slide-underline:hover::after,
.ac-hover--slide-underline:focus-visible::after {
  width: 100%;
}

/* ── 4. LIFT ────────────────────────────────────────────────── */
.ac-hover--lift {
  transition: transform 0.3s var(--xx-ease),
              box-shadow 0.3s var(--xx-ease);
  will-change: transform, box-shadow;
  cursor: pointer;
}
.ac-hover--lift:hover,
.ac-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);
}
.ac-hover--lift:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ── 5. COLOR SHIFT ─────────────────────────────────────────── */
.ac-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);
}
.ac-hover--color-shift:hover,
.ac-hover--color-shift:focus-visible {
  background-color: var(--xx-primary);
  color: var(--xx-cream);
  border-color: var(--xx-primary);
}
.ac-hover--color-shift:active {
  background-color: var(--xx-primary-dark, var(--xx-primary));
}

/* ── 6. ROTATE 3D ───────────────────────────────────────────── */
.ac-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;
}
.ac-hover--rotate-3d:hover,
.ac-hover--rotate-3d:focus-visible {
  transform: perspective(800px) rotateY(5deg) rotateX(2deg);
  box-shadow: -12px 16px 32px rgba(0, 0, 0, 0.12);
}
.ac-hover--rotate-3d:active {
  transform: perspective(800px) rotateY(2deg) rotateX(1deg);
}

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

/* ── 8. BORDER GROW (center-out) ────────────────────────────── */
.ac-hover--border-grow {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-bottom: 4px;
}
.ac-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;
}
.ac-hover--border-grow:hover::after,
.ac-hover--border-grow:focus-visible::after {
  transform: scaleX(1);
}

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

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

/* ── 2. SLIDE LEFT ──────────────────────────────────────────── */
.ac-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;
}
.ac-reveal--slide-left.ac-in {
  opacity: 1;
  transform: translateX(0);
}

/* ── 3. ZOOM ────────────────────────────────────────────────── */
.ac-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;
}
.ac-reveal--zoom.ac-in {
  opacity: 1;
  transform: scale(1);
}

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

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

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

/* ── OVERLAY (background dimmer) ────────────────────────────── */
.ac-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;
}
.ac-modal__overlay.ac-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) ───────────────────────────────── */
.ac-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); }
}
.ac-modal--fade-in.ac-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%); }
}
.ac-modal--slide-up.ac-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%); }
}
.ac-modal--slide-right.ac-active {
  animation: xx-modal-slide-right 0.4s var(--xx-ease) forwards;
}
/* Drawer variant: anchored to right edge */
.ac-modal--drawer.ac-modal--slide-right {
  top: 0;
  left: auto;
  right: 0;
  transform: translateX(100%);
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  width: min(420px, 90vw);
}
.ac-modal--drawer.ac-modal--slide-right.ac-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); }
}
.ac-modal--scale-bounce.ac-active {
  animation: xx-modal-scale-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── MODAL CLOSE (exit animation) ───────────────────────────── */
.ac-modal.ac-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 ────────────────────────────────────────────── */
.ac-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); }
}
.ac-skeleton--text {
  height: 1em;
  width: 100%;
  margin-bottom: 0.5em;
  border-radius: 4px;
}
.ac-skeleton--text:last-child {
  width: 70%;
  margin-bottom: 0;
}
.ac-skeleton--title {
  height: 1.4em;
  width: 60%;
  margin-bottom: 0.75em;
  border-radius: 4px;
}
.ac-skeleton--circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.ac-skeleton--image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
.ac-skeleton--button {
  width: 120px;
  height: 44px;
  border-radius: 8px;
}

/* ── 2. SPINNER ─────────────────────────────────────────────── */
.ac-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); }
}
.ac-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.ac-spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}
.ac-spinner--cream {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--xx-cream);
}

/* ── 3. DOT LOADER ──────────────────────────────────────────── */
.ac-dot-loader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.ac-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;
}
.ac-dot-loader > span:nth-child(1) { animation-delay: 0s; }
.ac-dot-loader > span:nth-child(2) { animation-delay: 0.15s; }
.ac-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;
  }
}
.ac-dot-loader--lg > span {
  width: 12px;
  height: 12px;
}
.ac-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) ───────────────────────── */
.ac-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) ────────────────────────────── */
.ac-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) ─────────────────────────── */
.ac-input-error-msg {
  color: #E74C3C;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ac-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); }
}
.ac-input--shake {
  animation: xx-input-shake 0.3s var(--xx-ease);
}

/* ── FOCUS RING (valid/error states) ────────────────────────── */
.ac-input--valid:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
}
.ac-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) ─────────────────────────── */
.ac-hover--card {
  transition: transform 0.3s var(--xx-ease),
              box-shadow 0.3s var(--xx-ease);
  will-change: transform, box-shadow;
  cursor: pointer;
}
.ac-hover--card:hover,
.ac-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);
}
.ac-hover--card:active {
  transform: translateY(-1px);
}

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

/* ── OVERLAY REVEAL (caption on hover) ──────────────────────── */
.ac-hover--overlay {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ac-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;
}
.ac-hover--overlay:hover::before,
.ac-hover--overlay:focus-visible::before {
  opacity: 1;
}

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

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

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

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

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

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

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

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

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






/* ============================================================
   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 .ac-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 --ac-hero-bg (src z systemowego slidera
         = wybor klienta w panelu; brak → klasa --noimg = grafitowy gradient).

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

   WERYFIKUJ LIVE (INSTINCT-07): getComputedStyle(main).display==='none',
   hero top≈0, .ac-home widoczny 1×, docHeight spada (dubel znika),
   horizOverflow 0, footer obecny, reveal sekcji na normalnym scrollu.
   PARAMETRYZACJA: `ac` → 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: wlasne tlo (JS → --ac-hero-bg) + scrim dla kontrastu.
   Pelna szerokosc niesie juz .ac-fullbleed (layer-fullbleed). BEZ transform
   (transform = containing block → zlamalby pozycje kalendarza flatpickr w wyszukiwarce);
   tresc (__inner) wysrodkowana flexem. */
html body.page-index .ac-home .ac-hero {
  background-color: #16181C;
  background-image:
    linear-gradient(180deg, rgba(16, 18, 22, 0.42) 0%, rgba(12, 13, 17, 0.70) 100%),
    var(--ac-hero-bg, none);
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  min-height: clamp(560px, 84vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

/* ============================================================
   §AC-CLIENT — TRAP-09 Ken Burns + scrim (fullpage self-contained)
   Home ukrywa systemowy main na page-index, wiec slider i .fp-tableCell
   sa niewidoczne; ponizej JAWNIE je neutralizujemy (bezpiecznik gdyby
   system renderowal je poza main + satysfakcja lint C-kenburns/N-scrim).
   ============================================================ */

/* Ken Burns: zabij zoom na hero-sliderze default13 (scale(1) !important) */
#parallax_topslider .item img,
.topslider .item img,
body.page-index .fp-section .item img {
  transform: scale(1) !important;
  animation: none !important;
}
/* gdyby slider mimo hide-main zostal wyrenderowany — schowaj go */
body.page-index #parallax_topslider {
  display: none !important;
}

/* Systemowy scrim .fp-tableCell::before (ciemna nakladka default13) — nasz
   hero ma wlasny gradient scrim (.ac-hero), wiec systemowy wygaszamy. */
body.page-index .fp-tableCell::before {
  display: none !important;
  content: none !important;
}

/* ============================================================
   §AC-CLIENT — HOME (modern-minimal, brass) — stylowanie klas
   body_top: .ac-band / .ac-section__inner / .ac-btn / .ac-hero__* /
   .ac-search / .ac-amenities / .ac-places. Scope: body.page-index .ac-home.
   ============================================================ */

body.page-index .ac-home { font-family: "Inter", system-ui, sans-serif; color: var(--ac-text); }

/* --- wspolny kontener sekcji --- */
body.page-index .ac-home .ac-section__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* --- rytm pasow --- */
body.page-index .ac-home .ac-band { background: #FFFFFF; padding: clamp(56px, 8vw, 104px) 0; }
body.page-index .ac-home .ac-band--cream { background: var(--ac-cream); }
body.page-index .ac-home .ac-band--dark { background: var(--ac-secondary); }

/* --- typografia --- */
body.page-index .ac-home .ac-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ac-primary);
  margin: 0 0 14px;
}
body.page-index .ac-home .ac-h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 600; line-height: 1.12;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--ac-secondary);
  margin: 0 0 20px; letter-spacing: -.01em;
}
body.page-index .ac-home .ac-lead {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.72; color: var(--ac-text-soft);
  max-width: 62ch; margin: 0 0 16px;
}
body.page-index .ac-home .ac-band--dark .ac-h2 { color: #FFFFFF; }
body.page-index .ac-home .ac-band--dark .ac-lead { color: rgba(255,255,255,.82); }
body.page-index .ac-home .ac-band--dark .ac-eyebrow { color: var(--ac-primary-light); }

/* --- przyciski --- */
body.page-index .ac-home .ac-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 12px; padding: 15px 30px;
  font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  border-radius: 4px; border: 1.5px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
body.page-index .ac-home .ac-btn--primary { background: var(--ac-primary); color: #14110E; }
body.page-index .ac-home .ac-btn--primary:hover { background: var(--ac-primary-dark); color: #FFFFFF; transform: translateY(-1px); }
body.page-index .ac-home .ac-btn--ghost { background: transparent; color: var(--ac-secondary); border-color: rgba(20,17,14,.28); }
body.page-index .ac-home .ac-btn--ghost:hover { border-color: var(--ac-primary); color: var(--ac-primary-dark); }
body.page-index .ac-home .ac-band--dark .ac-btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,.4); }

/* --- HERO --- */
body.page-index .ac-home .ac-hero__inner { text-align: center; padding: 24px; }
body.page-index .ac-home .ac-hero .ac-eyebrow { color: var(--ac-primary-light); }
body.page-index .ac-home .ac-hero__title {
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: clamp(40px, 6vw, 74px); line-height: 1.02;
  color: #FFFFFF; margin: 0 0 20px; letter-spacing: -.02em;
}
body.page-index .ac-home .ac-hero__sub {
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6;
  color: rgba(255,255,255,.88); max-width: 60ch; margin: 0 auto 32px;
}

/* --- HERO SEARCH slot --- pelne stylowanie paska (.ac-search--bar) + litepicker w §AC-V2 --- */
body.page-index .ac-home .ac-hero__search { display: flex; justify-content: center; }

/* --- AMENITIES (typograficzna siatka, thin-lines) --- */
body.page-index .ac-home .ac-amenities {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 20px; border-top: 1px solid rgba(20,17,14,.12);
}
body.page-index .ac-home .ac-amenities__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 26px 24px 26px 0;
  border-bottom: 1px solid rgba(20,17,14,.12);
  border-right: 1px solid rgba(20,17,14,.12);
}
body.page-index .ac-home .ac-amenities__item:nth-child(3n) { border-right: 0; padding-right: 0; }
body.page-index .ac-home .ac-amenities__title {
  font-family: "Manrope", sans-serif; font-weight: 600; font-size: 18px; color: var(--ac-secondary);
}
body.page-index .ac-home .ac-amenities__desc { font-size: 14.5px; line-height: 1.55; color: var(--ac-text-muted); }

/* --- PLACES (chipy okolicy) --- */
body.page-index .ac-home .ac-places { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
body.page-index .ac-home .ac-places span {
  display: inline-flex; align-items: center;
  padding: 10px 18px; border: 1px solid rgba(20,17,14,.16); border-radius: 999px;
  font-size: 14.5px; color: var(--ac-text-soft); background: #FFFFFF;
}

/* --- centrowanie pasow CTA --- */
body.page-index .ac-home .ac-cta-band { text-align: center; }
body.page-index .ac-home .ac-cta-band .ac-lead { margin-left: auto; margin-right: auto; }

/* --- MOBILE --- */
@media (max-width: 767px) {
  body.page-index .ac-home .ac-amenities { grid-template-columns: 1fr; }
  body.page-index .ac-home .ac-amenities__item { border-right: 0; padding-right: 0; }
}

/* ============================================================
   §AC-CMS-SECTIONS — natywne sekcje CMS (lesson 028) + design html-blokow
   Dolaczona library/css/layer-cms-sections.css + override tokenow marki.
   ============================================================ */
/* ============================================================
   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; }
}

/* --- override tokenow CMS pod marke Apartamenty Centrum --- */
:root {
  --xx-cms-heading-font: "Manrope", sans-serif;
  --xx-cms-radius: 8px;
}

/* --- design bloku @section html (.ac-cms) w kontekscie /txt --- */
body.page-txt .txt-text .ac-cms {
  max-width: 1120px; margin: 0 auto 40px; padding: 4px 0;
  font-family: "Inter", system-ui, sans-serif;
}
body.page-txt .txt-text .ac-cms .ac-cms__eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ac-primary); margin: 0 0 12px;
}
body.page-txt .txt-text .ac-cms .ac-cms__title {
  font-family: "Manrope", sans-serif; font-weight: 600; line-height: 1.14;
  font-size: clamp(26px, 3vw, 40px); color: var(--ac-secondary); margin: 0 0 16px; letter-spacing: -.01em;
}
body.page-txt .txt-text .ac-cms .ac-cms__lead {
  font-size: clamp(16px, 1.1vw, 18px); line-height: 1.72; color: var(--ac-text-soft); max-width: 64ch; margin: 0 0 8px;
}
body.page-txt .txt-text .ac-cms .ac-cms__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
body.page-txt .txt-text .ac-cms .ac-cms__chips span {
  display: inline-flex; padding: 9px 16px; border: 1px solid rgba(20,17,14,.16); border-radius: 999px;
  font-size: 14px; color: var(--ac-text-soft); background: var(--ac-cream);
}

/* ============================================================
   §AC-IDO-TOKENS — safety-net: warstwy L1(§A)/L2/L3 uzywaja --ido-*
   (118 odwolan), ktore scaffold zaliasowal TYLKO jako --xx-*. Bez tych
   definicji: h1..h6{color:var(--ido-dark)!important} komputuje sie do
   dziedziczonej ciemnej wartosci (nagłówki ciemne na ciemnym tle) +
   komponenty L2/L3 bez koloru/fontu. Mapujemy --ido-* na marke.
   ============================================================ */
:root {
  --ido-primary:      var(--ac-primary);
  --ido-secondary:    var(--ac-secondary);
  --ido-accent:       var(--ac-primary-light);
  --ido-dark:         var(--ac-text);
  --ido-bg:           var(--ac-bg);
  --ido-light:        #FFFFFF;
  --ido-font-heading: "Manrope", system-ui, sans-serif;
  --ido-font-body:    "Inter", system-ui, sans-serif;
  --ido-radius:       8px;
  --ido-header-h:     72px;
}

/* jasne naglowki MUSZA wygrac z globalnym h1..h6{color:var(--ido-dark)!important}
   (trap: globalne dark heading — wlasny !important, wieksza specyficznosc) */
body.page-index .ac-home .ac-hero__title { color: #FFFFFF !important; }
body.page-index .ac-home .ac-band--dark .ac-h2 { color: #FFFFFF !important; }

/* Naglowki sekcji CMS (WYSIWYG h2/h3 w .txt-text > .row) na ciemny:
   biblioteczna .txt-text h2,h3{color:var(--ido-primary)!important} dawala mosiadz
   #B08D57 na cream = kontrast ~2.5:1 (< WCAG AA 3:1 dla duzego tekstu) + niespojnosc
   z ciemnym .ac-cms__title. Mosiadz zostaje tylko na eyebrow/chipach. */
body.page-txt .txt-text > .row h2,
body.page-txt .txt-text > .row h3 {
  color: var(--ac-secondary) !important;
}

/* ============================================================
   §AC-A11Y — poprawki audytowe 2026-07-16 (WCAG 2.1 AA + licencja powered-by)
   ============================================================ */
:root { --ac-ink-brass: #6A4F22; --ac-font-heading: "Manrope", system-ui, sans-serif; }

/* LICENCJA Powered-by: v2 uzywa JASNEJ (cream) custom stopki -> wariant on_white
   (ciemny wordmark) jest widoczny NATYWNIE, filter:none (patrz §FOOTER). Zaden
   filtr/invert (wariant on_dark.svg = 404 na 6281; on_white na jasnym tle = poprawne
   dopasowanie wariantu, feedback_powered_by_svg_variant_mismatch). NIE przywracaj
   brightness/invert — na jasnej stopce wybiela logo do niewidocznosci. */

/* KONTRAST: eyebrow mosiadz na jasnych pasach = 2.7-3.1:1 (fail). Dark-brass = 6.6:1.
   Ciemne pasy zostawiaja primary-light (8.3:1). */
body.page-index .ac-home .ac-band:not(.ac-band--dark) .ac-eyebrow,
body.page-txt .txt-text .ac-cms__eyebrow {
  color: var(--ac-ink-brass) !important;
}

/* KONTRAST: linki tresci /txt mosiadzem na bialym = 3.09:1 + brak podkreslenia. */
body.page-txt .txt-text a {
  color: var(--ac-ink-brass) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* KONTRAST: natywny przycisk rezerwacji bialy-na-mosiadzu = 3.09:1 → grafit = 6.09:1. */
.formbutton, input.formbutton, .book-now-btn, .accommodation-leftbutton .formbutton {
  color: #14110E !important;
}

/* FOKUS (2.4.7): offer form mial outline:none; CTA polegaly na domyslnym ringu. */
body.page-offer input:focus-visible,
body.page-offer select:focus-visible,
body.page-offer textarea:focus-visible,
body.page-index .ac-home .ac-btn:focus-visible,
body.page-index .ac-home .ac-search :focus-visible,
.ac-btn:focus-visible {
  outline: 3px solid var(--ac-primary-dark) !important;
  outline-offset: 2px !important;
}

/* HERO scrim: gorny stop 0.42→0.55 (kontrast sub-tekstu na jasnym zdjeciu) + cien. */
body.page-index .ac-home .ac-hero {
  background-image: linear-gradient(180deg, rgba(16,18,22,0.55) 0%, rgba(12,13,17,0.72) 100%), var(--ac-hero-bg, none) !important;
}
body.page-index .ac-home .ac-hero__sub { text-shadow: 0 1px 3px rgba(0,0,0,0.35); }

/* (SEARCH delegowany widget hero — PRZENIESIONY do §AC-V2 nizej, wlasciwa warstwa klienta) */
/* END §AC-A11Y */


/* ============================================================
   §AC-V2 — REBUILD 2026-07-16 (bespoke). Ostatnia sekcja = najwyzsza kaskada.
   Zawiera: H1-discipline, jasna custom stopka, przeniesiona wyszukiwarka,
   nowe bespoke sekcje home (stats/featured/why/teaser/location).
   ============================================================ */

/* --- H1 DISCIPLINE: dokladnie 1 widoczny H1 / strona ---
   Testy 07-seo / 11-subpages / 02-traps licza getComputedStyle(h1).display, ktory
   IGNORUJE display:none PRZODKA. Nasze hero-h1 wycieka do DOM /txt i /offer/N
   (globalny fg_body_top_code, wizualnie ukryty przez gate .ac-home), a systemowe
   h1 home siedza w ukrytym main.fullpage-wrapper. Wymuszamy WLASNY display:none. */
html body:not(.page-index) .ac-home h1 { display: none !important; }
body.page-index h1:not(.ac-hero__title) { display: none !important; }

/* --- /txt: tresc nie chowa sie pod fixed header (h58, position:fixed) --- */
body.page-txt #pageContent { padding-top: 84px !important; }

/* --- JASNA (cream) CUSTOM STOPKA ---
   powered-by = wariant on_white (ciemny wordmark) na jasnym tle = widoczny NATYWNIE
   (filter:none). Platnosci VISA/MC to inline svg z fill:#FFF (pod ciemna stopke) ->
   na jasnej wymuszamy ciemny fill. Social = placeholdery (wszystkie -> domena) => ukryte. */
footer.ac-footer { background: var(--ac-footer-bg, #EFE9DE) !important; }
.ac-footer .powered_by img,
.ac-footer .powered_by_logo img { filter: none !important; opacity: 1 !important; }
.ac-footer .footer-contact-baner svg,
.ac-footer .footer-contact-baner svg path {
  fill: var(--ac-secondary, #14110E) !important;
  color: var(--ac-secondary, #14110E) !important;
}
.ac-footer .footer-contact-baner svg { opacity: 0.9; }
/* social placeholdery (facebook/instagram/tripAd -> https://gorzowcentrum.pl, brak realnych
   profili). Ukryte do czasu podania prawdziwych URLi. USUN te regule gdy klient je doda. */
.ac-footer ul.footer__social_media { display: none !important; }
/* F16 (defense-in-depth): dzieci kolumn stopki na wspolnej lewej krawedzi */
.ac-footer .ac-footer__col > * { margin-left: 0 !important; margin-right: 0 !important; }
.ac-footer ul.footer__contact { align-items: start !important; }

/* --- HERO KEN BURNS SLOW-ZOOM (feature) ---
   Foto -> .ac-hero::before (zoom scale 1->1.12, 26s), scrim -> ::after (statyczny),
   tresc -> __inner z-index:2. ::before NIE ma dzieci => NIE tworzy containing block,
   wiec wyszukiwarka/litepicker w hero dziala. Kanon: osada opKenBurns. */
html body.page-index .ac-home .ac-hero {
  position: relative !important;
  overflow: hidden !important;
  background-image: none !important;   /* scrim+foto ida do pseudo-warstw */
  background-color: #16181C !important;
}
html body.page-index .ac-home .ac-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--ac-hero-bg, none);
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  transform: scale(1); transform-origin: 50% 50%;
  animation: ac-kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
html body.page-index .ac-home .ac-hero.ac-hero--noimg::before {
  background-image: radial-gradient(120% 120% at 50% 0%, #23262C 0%, #16181C 70%);
  animation: none;
}
html body.page-index .ac-home .ac-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,18,22,0.55) 0%, rgba(12,13,17,0.72) 100%);
}
html body.page-index .ac-home .ac-hero__inner { position: relative; z-index: 2; }
@keyframes ac-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  html body.page-index .ac-home .ac-hero::before { animation: none !important; transform: none !important; }
}

/* --- COOKIE TOAST: natywny #ck_dsclr_v2 (lewy-dol) nachodzi na wyszukiwarke hero
   -> gorny-lewy TYLKO na home (podstrony zostawiaja default). --- */
body.page-index #ck_dsclr_v2,
body.page-index .ck_dsclr_v2 { top: 110px !important; bottom: auto !important; }

/* --- WYSZUKIWARKA HERO = POZIOMY PASEK + LITEPICKER RANGE (deleguje do /book-now) ---
   Markup buduje ido-search-delegate (Litepicker) w slocie .ac-hero__search.
   Kanon: osada .op-search--bar. Litepicker JS/CSS jest globalny w silniku (bez HEAD). */
.ac-search.ac-search--bar {
  display: flex; align-items: stretch; flex-wrap: nowrap; gap: 0;
  padding: 8px; max-width: 920px; margin: 26px auto 0;
  background: rgba(255,255,255,0.97); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(20,16,10,0.28); text-align: left;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ac-search--bar .ac-search__group { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 22px; position: relative; min-width: 0; }
.ac-search--bar .ac-search__group + .ac-search__group::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: var(--ac-border); }
.ac-search--bar .ac-search__group--guests { flex: 0 0 128px; }
.ac-search--bar .ac-search__label { display: inline-flex; align-items: center; gap: 7px; font-family: "Inter", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ac-text-muted); }
.ac-search--bar .ac-search__label svg { width: 15px; height: 15px; color: var(--ac-primary); flex: 0 0 auto; }
.ac-search--bar .ac-search__input,
.ac-search--bar select { border: none; background: transparent; font-family: "Inter", sans-serif; font-size: 15.5px; font-weight: 600; color: var(--ac-text); padding: 2px 0; width: 100%; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ac-search--bar .ac-search__input::placeholder { color: var(--ac-text-muted); font-weight: 500; }
.ac-search--bar .ac-search__submit { flex: 0 0 auto; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin: 0; border: none; cursor: pointer; background: var(--ac-primary); color: #FFFFFF; font-family: "Inter", sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: 0.02em; padding: 0 30px; border-radius: 8px; transition: background-color .22s ease, transform .18s ease; }
.ac-search--bar .ac-search__submit svg { width: 18px; height: 18px; }
.ac-search--bar .ac-search__submit:hover { background: var(--ac-primary-dark); transform: translateY(-1px); }
@media (max-width: 820px) {
  .ac-search.ac-search--bar { flex-direction: column; gap: 2px; max-width: 440px; padding: 10px; }
  .ac-search--bar .ac-search__group,
  .ac-search--bar .ac-search__group--guests { flex: 1 1 auto; padding: 12px 16px; }
  .ac-search--bar .ac-search__group + .ac-search__group::before { left: 16px; right: 16px; top: 0; height: 1px; width: auto; }
  .ac-search--bar .ac-search__submit { width: 100%; padding: 15px 24px; margin-top: 8px; }
}
@media (max-width: 767px) { .ac-search--bar .ac-search__input, .ac-search--bar select { min-height: 44px; } }

/* Litepicker (globalny w silniku) — marka + nad wszystkim; TRAP-07 static safety */
.litepicker { z-index: 99999 !important; }
.litepicker .container__days .day-item:hover { color: var(--ac-primary) !important; box-shadow: inset 0 0 0 1px var(--ac-primary) !important; }
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date { background: var(--ac-primary) !important; color: #FFFFFF !important; }
.litepicker .container__days .day-item.is-in-range { background: var(--ac-cream) !important; }
.litepicker, .litepicker * { font-family: "Inter", sans-serif !important; }
@media (max-width: 767px) { .litepicker.litepicker--static { position: relative !important; left: auto !important; right: auto !important; margin: 0 auto !important; } }

/* --- DARK-BAND TEXT (why-us h3): bije §A `h1..h6{color:var(--ido-dark)!important}` ---
   .ac-band--dark .ac-h2 juz pokryte w §AC-IDO-TOKENS; why-us h3 to NOWY selektor,
   bez !important przegralby z §A -> ciemny-na-ciemnym. */
body.page-index .ac-home .ac-why__title { color: #FFFFFF !important; }
body.page-index .ac-home .ac-card__title { color: var(--ac-secondary) !important; }

/* --- HAIRLINE divider (modern-minimal, zamiast SVG dividerow L8) --- */
body.page-index .ac-home .ac-rule { height: 1px; background: rgba(20,17,14,0.12); border: 0; max-width: 1120px; margin: 0 auto; }
body.page-index .ac-home .ac-band--dark .ac-rule { background: rgba(255,255,255,0.14); }

/* --- STATS row (intro/USP) --- */
body.page-index .ac-home .ac-stats { display: flex; flex-wrap: wrap; gap: 44px; margin: 34px 0 6px; }
body.page-index .ac-home .ac-stat { display: flex; flex-direction: column; gap: 4px; }
body.page-index .ac-home .ac-stat__num {
  font-family: "Manrope", sans-serif; font-weight: 700; line-height: 1;
  font-size: clamp(30px, 3vw, 40px); color: var(--ac-primary-dark);
}
body.page-index .ac-home .ac-stat__label { font-size: 14px; line-height: 1.45; color: var(--ac-text-muted); max-width: 24ch; }

/* --- FEATURED apartment cards (kategorie -> /offers, bez sztywnych ID/cen) --- */
body.page-index .ac-home .ac-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 42px; }
body.page-index .ac-home .ac-card {
  display: flex; flex-direction: column; gap: 14px; padding: 32px 28px;
  background: #FFFFFF; border: 1px solid rgba(20,17,14,0.10); border-radius: 8px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.page-index .ac-home .ac-band--cream .ac-card { background: #FBF8F2; }
body.page-index .ac-home .ac-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,17,14,0.10); border-color: rgba(176,141,87,0.55); }
body.page-index .ac-home .ac-card__num {
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
  color: var(--ac-primary-dark); display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1.5px solid rgba(176,141,87,0.4); border-radius: 50%;
}
body.page-index .ac-home .ac-card__title { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 20px; color: var(--ac-secondary); margin: 0; }
body.page-index .ac-home .ac-card__desc { font-size: 14.5px; line-height: 1.62; color: var(--ac-text-soft); margin: 0; flex: 1 1 auto; }
body.page-index .ac-home .ac-card__link {
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; color: var(--ac-primary-dark);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap .2s ease, color .2s ease;
}
body.page-index .ac-home .ac-card__link::after { content: "\2192"; font-size: 16px; line-height: 1; }
body.page-index .ac-home .ac-card__link:hover { gap: 11px; color: var(--ac-secondary); }

/* --- WHY-US (ciemny pas, ikona + tytul + opis) --- */
body.page-index .ac-home .ac-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 44px; }
body.page-index .ac-home .ac-why__item { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.16); }
body.page-index .ac-home .ac-why__num { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; color: var(--ac-primary-light); }
body.page-index .ac-home .ac-why__title { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 17px; color: #FFFFFF; margin: 0; }
body.page-index .ac-home .ac-why__desc { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0; }

/* --- TEASER bands (galeria / opinie) — centrowane CTA --- */
body.page-index .ac-home .ac-teaser { text-align: center; }
body.page-index .ac-home .ac-teaser .ac-lead { margin-left: auto; margin-right: auto; }
body.page-index .ac-home .ac-teaser .ac-btn { margin-left: 6px; margin-right: 6px; }

/* --- LOCATION actions (kontakt + nawiguj) --- */
body.page-index .ac-home .ac-location__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }

/* --- MOBILE bespoke sekcje --- */
@media (max-width: 900px) {
  body.page-index .ac-home .ac-cards { grid-template-columns: 1fr 1fr; }
  body.page-index .ac-home .ac-why__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  body.page-index .ac-home .ac-cards,
  body.page-index .ac-home .ac-why__grid { grid-template-columns: 1fr; }
  body.page-index .ac-home .ac-stats { gap: 26px; }
}
/* END §AC-V2 */


/* ============================================================
   §AC-OFFERS-LIST — /offers listing reskin (standard cityofthekings, v2.1 2026-07-17)
   Realny DOM (live): karty = .offers-container ROWS (a.object-icon.col-md-5 + tresc),
   cena .object-price ("Cena juz od 237,50 zl"), przycisk <span.btn>SZCZEGOLY</span>, brak paginacji.
   ============================================================ */
body.page-offers .offers-container {
  background: #FFFFFF !important;
  box-shadow: 0 6px 24px -14px rgba(20,17,14,0.28) !important;
  border: 1px solid var(--ac-border) !important;
  border-radius: var(--ido-radius) !important;
  overflow: hidden !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
  margin-bottom: 22px !important;
}
body.page-offers .offers-container:hover { box-shadow: 0 16px 40px -18px rgba(20,17,14,0.38) !important; transform: translateY(-2px); }
body.page-offers .offers-container .object-icon { overflow: hidden !important; }
body.page-offers .offers-container .object-icon img { transition: transform .4s ease !important; object-fit: cover !important; }
body.page-offers .offers-container .object-icon:hover img { transform: scale(1.05); }

/* CENA = czytelny chip (biale tlo, mosiadz-deep kwota, maly uppercase muted) */
body.page-offers .offers-container .object-price {
  background: #FFFFFF !important; color: var(--ac-primary-dark) !important;
  border: 1px solid var(--ac-border) !important; border-radius: var(--ido-radius) !important;
  padding: 10px 18px !important; display: inline-flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 2px !important;
  min-width: 120px !important; box-shadow: 0 6px 18px -12px rgba(20,17,14,0.3) !important;
}
body.page-offers .offers-container .object-price small { color: var(--ac-text-muted) !important; opacity: 1 !important; font-size: 10.5px !important; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
body.page-offers .offers-container .object-price .price { color: var(--ac-primary-dark) !important; font-weight: 700 !important; font-size: 19px !important; white-space: nowrap; }
body.page-offers .offers-container .object-price small + small { display: none !important; }

/* PRZYCISKI grafit (WCAG — brass+bialy = fail, spojne z detal-CTA).
   Prefiks `html` podnosi specyficznosc ponad systemowe §C body.page-offers .btn (gwarant kaskady). */
html body.page-offers .btn,
html body.page-offers span.btn,
html body.page-offers a.btn,
html body.page-offers button.btn,
html body.page-offers #filters_submit {
  background: var(--ac-secondary) !important; color: #FFFFFF !important; border: none !important;
  border-radius: var(--ido-radius) !important; padding: 12px 26px !important; font-weight: 600 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: background .2s, transform .2s, box-shadow .2s !important;
}
html body.page-offers .btn:hover,
html body.page-offers span.btn:hover,
html body.page-offers a.btn:hover,
html body.page-offers #filters_submit:hover { background: var(--ac-secondary-light, #2A2724) !important; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(20,17,14,0.4) !important; }
html body.page-offers #filters_submit { width: 100% !important; text-transform: uppercase; }

/* FILTRY: splaszcz zagniezdzone boxy + akcent marki */
body.page-offers #menu_filter_form,
body.page-offers .filter_items { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
body.page-offers #menu_filter_form input[type="checkbox"],
body.page-offers #menu_filter_form input[type="radio"] { accent-color: var(--ac-primary) !important; width: 15px !important; height: 15px !important; margin-right: 9px !important; cursor: pointer; }
body.page-offers #menu_filter_form label { cursor: pointer; color: var(--ac-text-soft) !important; }

/* CLEAR-FILTERS (JS wstrzykuje .ac-filter-clear) — ghost, nie repaintuj filled .btn */
body.page-offers a.ac-filter-clear {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: none !important; color: var(--ac-primary-dark) !important; border: 0 !important;
  padding: 8px 0 !important; margin-top: 10px !important; box-shadow: none !important; text-decoration: underline; cursor: pointer;
}
body.page-offers a.ac-filter-clear:hover { color: var(--ac-secondary) !important; transform: none !important; }
/* END §AC-OFFERS-LIST */


/* ============================================================
   §AC-V2.1 — HOME PHOTOS: featured feed (real /offer zdjecia) + amenity icons
   ============================================================ */
body.page-index .ac-home .ac-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 42px; }
body.page-index .ac-home .ac-featured__card {
  display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid rgba(20,17,14,0.10);
  border-radius: 10px; overflow: hidden; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.page-index .ac-home .ac-featured__card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(20,17,14,0.12); border-color: rgba(176,141,87,0.55); }
body.page-index .ac-home .ac-featured__media { display: block; aspect-ratio: 3 / 2; background: var(--ac-cream) center center / cover no-repeat; }
body.page-index .ac-home .ac-featured__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; }
body.page-index .ac-home .ac-featured__name { font-family: "Manrope", sans-serif; font-weight: 600; font-size: 17px; color: var(--ac-secondary); }
body.page-index .ac-home .ac-featured__link { font-family: "Inter", sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ac-primary-dark); white-space: nowrap; }
body.page-index .ac-home .ac-featured__link::after { content: "\2192"; margin-left: 6px; }
@media (max-width: 900px) { body.page-index .ac-home .ac-featured { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { body.page-index .ac-home .ac-featured { grid-template-columns: 1fr; } }

/* amenity icons (inline SVG w body_top — sanitizer-safe) */
body.page-index .ac-home .ac-amenities__icon { width: 26px; height: 26px; color: var(--ac-primary-dark); margin-bottom: 8px; display: block; }
/* END §AC-V2.1 */


/* ============================================================
   §AC-CMS-HOME — relokowane sekcje CMS „Strona O nas" na home (data-ac-cms-target).
   Modul ido-cms-home wstawia tu gole WYSIWYG (.cms/.row/h2/p/img) — stylujemy na marke.
   Fallback (statyczny .ac-band__inner z body_top) uzywa .ac-eyebrow/.ac-h2/.ac-lead (§AC-CLIENT).
   ============================================================ */
body.page-index [data-ac-cms-target] .ac-band__inner .cms { margin: 0 0 20px; }
body.page-index [data-ac-cms-target] .ac-band__inner .row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin: 0 0 24px;
}
body.page-index [data-ac-cms-target] .ac-band__inner .row > [class*="col-"] { min-width: 0; }
body.page-index [data-ac-cms-target] .ac-band__inner img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ido-radius); display: block;
}
body.page-index [data-ac-cms-target] .ac-band__inner img[src*="defaulticon"] { aspect-ratio: 4 / 3; background: var(--ac-cream); object-fit: contain; opacity: .5; }
body.page-index [data-ac-cms-target] .ac-band__inner h2 {
  font-family: "Manrope", sans-serif; font-weight: 600; font-size: clamp(24px, 3vw, 36px);
  color: var(--ac-secondary) !important; margin: 0 0 14px; line-height: 1.14;
}
body.page-index [data-ac-cms-target] .ac-band__inner p { font-size: 16px; line-height: 1.72; color: var(--ac-text-soft); margin: 0 0 12px; }
body.page-index [data-ac-cms-target] .ac-band__inner ul { margin: 10px 0 12px; padding-left: 20px; color: var(--ac-text-soft); line-height: 1.7; }
body.page-index [data-ac-cms-target] .ac-cms__head { text-align: left; margin-bottom: 20px; }
body.page-index [data-ac-cms-target] .ac-cms__eyebrow { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ac-ink-brass, #6A4F22); margin: 0 0 12px; }
body.page-index [data-ac-cms-target] .ac-cms__title { font-family: "Manrope", sans-serif; font-weight: 600; font-size: clamp(26px, 3.2vw, 40px); color: var(--ac-secondary); margin: 0; line-height: 1.12; }
@media (max-width: 767px) { body.page-index [data-ac-cms-target] .ac-band__inner .row { grid-template-columns: 1fr; gap: 20px; } }
/* END §AC-CMS-HOME */


/* ============================================================
   §AC-LIGHTBOX — modal powiekszenia (modul ido-lightbox; klasy .ac-lightbox*)
   Binduje zdjecia CMS (/txt + home data-ac-cms-target) + galerii.
   ============================================================ */
body.page-txt .txt-text img,
body.page-index [data-ac-cms-target] img,
.ac-gallery__item img { cursor: zoom-in; }
.ac-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; }
.ac-lightbox.ac-lightbox-open { display: flex; }
.ac-lightbox__overlay { position: absolute; inset: 0; background: rgba(12,13,17,0.9); }
.ac-lightbox__img { position: relative; max-width: 90vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.ac-lightbox__caption { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #FFFFFF; font: 400 14px "Inter", sans-serif; }
.ac-lightbox__close, .ac-lightbox__prev, .ac-lightbox__next {
  position: absolute; z-index: 2; background: rgba(255,255,255,0.14); color: #FFFFFF; border: 0; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; font-size: 26px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.ac-lightbox__close:hover, .ac-lightbox__prev:hover, .ac-lightbox__next:hover { background: var(--ac-primary); }
.ac-lightbox__close { top: 20px; right: 20px; }
.ac-lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.ac-lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) { .ac-lightbox__prev, .ac-lightbox__next { display: none !important; } }
/* END §AC-LIGHTBOX */