/* CSS_EDYTOR.css - SCAFFOLD (maksymalna baza) dla Willa Osada Pogodno
   Wygenerowany: node scripts/jarvis.js scaffold osada-pogodno
   Prefix: --op-  ·  Vibe: rustic-warm  ·  Theme: default13
   WORKFLOW SUBTRAKTYWNY: usuwaj nieuzywane warianty/regiony, NIE dopisuj od zera. */


/* ============================================================
   §ROOT - brand tokens
   ============================================================ */
/* ============================================================
   §ROOT - brand tokens (alias-at-root). Prefix: --op-*
   Kolory z brief.kolory (override) lub palety vibe "rustic-warm".
   --xx-* aliasy → warstwy uzywajace --xx-* dziedzicza marke bez renamingu.
   ============================================================ */
:root {
  /* PALETA „KARKONOSZE - NATURA/DREWNO" (2026-07-20) - zieleń świerkowa (dominująca, CTA/eyebrow)
     + ciepłe DREWNO (akcent: ikony, chipy, hovery) + grafit leśny. Damian: „coś bardziej z naturą".
     Zmiana 07-20: akcent złoto/mosiądz -> cedr/orzech (drewno). Zieleń + grafit bez zmian. */
  --op-primary:   #8C6A3C;   /* CIEPŁE DREWNO (cedr/dąb) - akcent: ikony, hovery, chip-border */
  --op-secondary: #1F5138;   /* GŁĘBOKA ZIELEŃ ŚWIERKOWA - dominujący CTA/eyebrow (biały tekst ~10:1) */
  --op-primary-light: #D3B98D;
  --op-primary-dark: #6E4E28; /* orzech - tekst chipów/ikon na kremie (AA ~6.5:1) */
  --op-secondary-light: #9FC2AC; /* jasna szałwia - eyebrow na zdjęciu/ciemnym pasie */
  --op-cream: #F3EEE1;
  --op-bg: #FCFAF4;
  --op-text: #1F2A23;        /* grafit zielono-czarny */
  --op-text-soft: #414B44;
  --op-text-muted: #5C655E;   /* AA na kremie/piasku (5.2:1 / 4.7:1) - było #66706A (fail) */

  /* --xx-* alias → brand (legalny wzorzec; linter B3 to dopuszcza) */
  --xx-primary:   var(--op-primary);
  --xx-secondary: var(--op-secondary);
  --xx-primary-light: var(--op-primary-light);
  --xx-primary-dark: var(--op-primary-dark);
  --xx-secondary-light: var(--op-secondary-light);
  --xx-cream: var(--op-cream);
  --xx-bg: var(--op-bg);
  --xx-text: var(--op-text);
  --xx-text-soft: var(--op-text-soft);
  --xx-text-muted: var(--op-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(--op-secondary);
  --xx-accent: var(--op-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(--op-secondary);
  /* FONTY globalnie (F1): warstwy /offer używają var(--xx-font-*), a te były zdefiniowane
     TYLKO w [data-vibe] → offer-page spadał na niewczytane Playfair/DM Sans = „dziwne czcionki". */
  --xx-font-heading: var(--op-font-heading);
  --xx-font-body:    var(--op-font-body);
  --xx-font-display: var(--op-font-heading);
  --xx-primary-soft: rgba(31, 81, 56, 0.16);   /* focus-ring offer inputs (był maroon fallback) */

  /* --- OP support tokens (uzywane przez §OP-CLIENT + warstwy L2/L4) --- */
  --op-secondary-dark: #163B29;   /* ciemniejsza zieleń - hover CTA */
  --op-cream2: #EAE1CD;   /* piaskowy pas */
  --op-cream3: #DFD4BB;   /* placeholder tla zdjec */
  --op-dark: #16241B;     /* grafit leśny - ciemne pasy + stopka */
  --op-radius: 6px;
  --op-radius-lg: 14px;
  --op-shadow-sm: 0 2px 8px rgba(42, 38, 30, 0.08);
  --op-shadow-md: 0 8px 26px rgba(42, 38, 30, 0.12);
  --op-shadow-lg: 0 18px 50px rgba(42, 38, 30, 0.18);
  --op-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --op-border: rgba(31, 42, 35, 0.13);
  --op-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --op-font-body: "Lato", system-ui, -apple-system, sans-serif;
  --op-header-h: 76px;
  --op-maxw: 1200px;

  /* --- ido-* alias -> marka (L2 components uzywaja --ido-*; bez tego renderuja sie
     w fallbackowym brazie + subpage padding-top pada, bo --ido-header-h byl niezdefiniowany) --- */
  --ido-primary: var(--op-primary);
  --ido-primary-light: var(--op-primary-light);
  --ido-primary-dark: var(--op-primary-dark);
  --ido-secondary: var(--op-secondary);
  --ido-secondary-light: var(--op-secondary-light);
  --ido-secondary-dark: var(--op-secondary-dark);
  --ido-dark: var(--op-text);
  --ido-bg: var(--op-bg);
  --ido-cream: var(--op-cream);
  --ido-text: var(--op-text);
  --ido-text-soft: var(--op-text-soft);
  --ido-text-muted: var(--op-text-muted);
  --ido-border: var(--op-border);
  --ido-radius: var(--op-radius);
  --ido-radius-lg: var(--op-radius-lg);
  --ido-shadow-sm: var(--op-shadow-sm);
  --ido-shadow-md: var(--op-shadow-md);
  --ido-shadow-lg: var(--op-shadow-lg);
  --ido-font-heading: var(--op-font-heading);
  --ido-font-body: var(--op-font-body);
  --ido-header-h: var(--op-header-h);
  --ido-ease: var(--op-ease);
}


/* ============================================================
   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(--op-primary) and
   var(--op-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(--op-primary) and var(--op-secondary). */
.formbutton,
#iai_book_form .formbutton {
  background: var(--op-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(--op-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 (universal)
   ═══════════════════════════════════════════════════════════════ */
body.page-contact a {
  color: var(--ido-primary) !important;
}
body.page-contact a:hover {
  color: var(--ido-secondary) !important;
}
body.page-contact .btn,
body.page-contact form button,
body.page-contact form input[type="submit"] {
  background: var(--ido-primary) !important;
  border-color: var(--ido-primary) !important;
  color: #fff !important;
}
body.page-contact .btn:hover {
  background: var(--ido-secondary) !important;
}
body.page-contact .leaflet-container {
  border-radius: var(--ido-radius) !important;
  overflow: hidden !important;
}


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


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


/* ═══════════════════════════════════════════════════════════════
   §H - SYSTEM ELEMENTS WITH HARDCODED HEX (no CSS var inheritance)
   WARNING: Do NOT replace these tokens manually.
   The pipeline generator substitutes them at build time:
     var(--op-primary)   → client primary color hex (e.g. #4A6741)
     var(--op-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(--op-primary) !important;
  background: var(--op-primary) !important;
  left: auto !important;
  right: 32px !important;
  transform: none !important;
  margin-left: 0 !important;
}

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

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

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

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

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

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

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

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

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

/* ── RESPONSYWNOŚĆ: 4 kol → 2 → 1 ── */
@media (max-width: 860px) {
  .op-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media (max-width: 560px) {
  .op-footer__top {
    grid-template-columns: 1fr;
  }
  .op-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.op-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;
  }

  /* HOME: zamknięty drawer musi zniknąć NATYCHMIAST.
     Na page-index nasz harness op-nav-open jest jedynym mechanizmem menu mobilnego,
     ale systemowy natywny hamburger default13 RÓWNIEŻ podpina #navbar i chowa go z
     opóźnieniem (~350ms) jako statyczny wyśrodkowany blok - bez tej reguły menu po
     zamknięciu "miga" na środku, zanim natywny JS ustawi display:none.
     Scope page-index celowy: na PODSTRONACH menu mobilne = natywny #navbar (NIE ukrywać). */
  body.page-index #navbar {
    display: none !important;
  }

  /* #navbar jako slide-drawer - schowany domyślnie, wjeżdża po dodaniu klasy */
  body.op-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(--op-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.op-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.op-nav-open #navbar ul,
  body.op-nav-open #navbar .menu {
    display: block !important;
    flex-direction: column !important;
  }
  body.op-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
   .op-price-chip + defeat systemowego kształtu na .offer-price/.object-price. */
.op-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ę .op-offer-amenities (JS/body_top), systemowe
   listy udogodnień są duplikatem. Ukryj systemowe TYLKO gdy body ma znacznik
   `.op-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.op-has-amenities .offer-features,
body.page-offer.op-has-amenities .amenities,
body.page-offer.op-has-amenities .features-list,
body.page-offer.op-has-amenities .object-amenities,
body.page-offer.op-has-amenities .object-facilities {
  display: none !important;
}

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


/* ──────────────────────────────────────────────────────────
   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 `.op-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ć `.op-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: `op` → 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.
   -------------------------------------------------------------------------- */
.op-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 .op-fullbleed) sięga krawędzi ekranu. */
.op-fullbleed > .op-inner,
.op-inner {
  max-width: var(--op-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 `.op-` 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 `.op-fullbleed`. Preferuj jednak klasę (a).│
      └────────────────────────────────────────────────────────────────┘
   -------------------------------------------------------------------------- */
.op-section,
.op-hero,
.op-hero-lite,
.op-pagehead,
.op-pagehero,
.op-band,
.op-statsband,
.op-trust,
.op-cta,
.op-darkhero,
.op-storyhero,
.op-splithero,
.op-keyrow,
.op-contact,
.op-filterbar,
.op-results-head,
.op-breadcrumb,
.op-pagination,
.op-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. */
.op-storyhero,
.op-splithero,
.op-keyrow,
.op-contact,
.op-filterbar,
.op-results-head,
.op-breadcrumb {
  padding-left: max(clamp(20px, 4vw, 48px), calc((100vw - var(--op-maxw, 1240px)) / 2)) !important;
  padding-right: max(clamp(20px, 4vw, 48px), calc((100vw - var(--op-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 PATTERNS: USUNIETE (subtraktywny cleanup 2026-07-16)
   70 wariantow sekcji dla 20 vibe (.op-*--wariant) - home osady jest bespoke
   (.op-* w §OP-CLIENT), zaden wariant nie byl uzywany w markupie => martwy CSS.
   Zrodlo wariantow: library/css/layer4-variety-patterns.css (regeneruj scaffoldem).
   ============================================================ */


/* ============================================================
   LAYER 5 - COLOR SYSTEM (vibe) - vibe "rustic-warm" (wycięty blok)
   ============================================================ */

/* uwaga: selektory [data-vibe="rustic-warm"] zachowane - ustaw <body data-vibe="rustic-warm"> LUB usuń atrybut selektora recznie */

:root[data-vibe="rustic-warm"],
[data-vibe="rustic-warm"] {
  --xx-primary:         #B0873C;
  --xx-primary-light:   #D6BE86;
  --xx-primary-dark:    #886224;
  --xx-primary-soft:    rgba(176, 135, 60, 0.10);
  --xx-secondary:       #1F5138;
  --xx-secondary-light: #9FC2AC;
  --xx-secondary-dark:  #163B29;
  --xx-cream:           #F3EEE1;
  --xx-cream2:          #EAE1CD;
  --xx-cream3:          #DFD4BB;
  --xx-bg:              #FCFAF4;
  --xx-text:            #1F2A23;
  --xx-text-soft:       #414B44;
  --xx-text-muted:      #66706A;
  --xx-shadow-sm:       0 2px 8px rgba(22, 36, 27, 0.06);
  --xx-shadow-md:       0 4px 30px rgba(22, 36, 27, 0.08);
  --xx-shadow-lg:       0 12px 40px rgba(22, 36, 27, 0.12);
  --xx-gradient-primary: linear-gradient(135deg, #1F5138 0%, #163B29 100%);
  --xx-gradient-accent:  linear-gradient(135deg, #B0873C 0%, #886224 100%);
  --xx-radius:          10px;
  --xx-radius-lg:       18px;
  --xx-ease:            cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  [data-vibe="rustic-warm"]:not([data-mode="light"]) {
    --xx-primary:         #94A488;
    --xx-primary-light:   #ACBA9F;
    --xx-primary-dark:    #758070;
    --xx-primary-soft:    rgba(148, 164, 136, 0.14);
    --xx-secondary:       #DC7A48;
    --xx-secondary-light: #E89060;
    --xx-secondary-dark:  #BA6238;
    --xx-cream:           #2A2A24;
    --xx-cream2:          #24241F;
    --xx-cream3:          #1E1E1A;
    --xx-bg:              #1A1A14;
    --xx-text:            #F5F0E8;
    --xx-text-soft:       #DCD6CB;
    --xx-text-muted:      #A89D8A;
    --xx-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.32);
    --xx-shadow-md:       0 4px 30px rgba(0, 0, 0, 0.42);
    --xx-shadow-lg:       0 12px 40px rgba(0, 0, 0, 0.55);
    --xx-gradient-primary: linear-gradient(135deg, #94A488 0%, #758070 100%);
    --xx-gradient-accent:  linear-gradient(135deg, #DC7A48 0%, #BA6238 100%);
  }
}

[data-vibe="rustic-warm"][data-mode="dark"],
[data-vibe="rustic-warm"].force-dark {
  --xx-primary:         #94A488;
  --xx-primary-light:   #ACBA9F;
  --xx-primary-dark:    #758070;
  --xx-primary-soft:    rgba(148, 164, 136, 0.14);
  --xx-secondary:       #DC7A48;
  --xx-secondary-light: #E89060;
  --xx-secondary-dark:  #BA6238;
  --xx-cream:           #2A2A24;
  --xx-cream2:          #24241F;
  --xx-cream3:          #1E1E1A;
  --xx-bg:              #1A1A14;
  --xx-text:            #F5F0E8;
  --xx-text-soft:       #DCD6CB;
  --xx-text-muted:      #A89D8A;
  --xx-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.32);
  --xx-shadow-md:       0 4px 30px rgba(0, 0, 0, 0.42);
  --xx-shadow-lg:       0 12px 40px rgba(0, 0, 0, 0.55);
  --xx-gradient-primary: linear-gradient(135deg, #94A488 0%, #758070 100%);
  --xx-gradient-accent:  linear-gradient(135deg, #DC7A48 0%, #BA6238 100%);
}


/* ──────────────────────────────────────────────────────────
   4. MODERN COASTAL
   Morze, plażowe apartamenty


/* ============================================================
   LAYER 6 - TYPOGRAPHY (vibe) - vibe "rustic-warm" (wycięty blok)
   ============================================================ */

/* uwaga: selektory [data-vibe="rustic-warm"] zachowane - ustaw <body data-vibe="rustic-warm"> LUB usuń atrybut selektora recznie */

[data-vibe="rustic-warm"] {
  --xx-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --xx-font-body:    'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  --xx-font-display: 'Cormorant Garamond', Georgia, serif;
  --xx-letter-spacing-heading: -0.01em;
  --xx-letter-spacing-caption: 1.8px;
  --xx-line-height-tight: 1.15;
  --xx-line-height-base: 1.65;
  --xx-line-height-loose: 1.85;
}

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

[data-vibe="rustic-warm"] h1,
[data-vibe="rustic-warm"] .op-h1 {
  font-family: var(--xx-font-heading);
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 500;
  line-height: var(--xx-line-height-tight);
  letter-spacing: var(--xx-letter-spacing-heading);
  margin: 0 0 0.5em;
}
[data-vibe="rustic-warm"] h2,
[data-vibe="rustic-warm"] .op-h2 {
  font-family: var(--xx-font-heading);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.6em;
}
[data-vibe="rustic-warm"] h3,
[data-vibe="rustic-warm"] .op-h3 {
  font-family: var(--xx-font-heading);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.6em;
}
[data-vibe="rustic-warm"] h4,
[data-vibe="rustic-warm"] .op-h4 {
  font-family: var(--xx-font-heading);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 0.7em;
}
[data-vibe="rustic-warm"] p,
[data-vibe="rustic-warm"] .op-p {
  font-family: var(--xx-font-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: var(--xx-line-height-loose);
  margin: 0 0 1em;
}
[data-vibe="rustic-warm"] .op-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="rustic-warm"] .op-eyebrow {
  font-family: var(--xx-font-body);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--xx-primary);
}
[data-vibe="rustic-warm"] .op-drop-cap::first-letter {
  font-family: var(--xx-font-heading);
  font-size: 4.2em;
  float: left;
  line-height: 0.9;
  margin: 6px 12px 0 0;
  color: var(--xx-primary);
}
[data-vibe="rustic-warm"] .op-lead {
  font-family: var(--xx-font-body);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.65;
  color: var(--xx-text-soft);
}


/* ──────────────────────────────────────────────────────────
   4. MODERN COASTAL - Quicksand + Open Sans


/* ============================================================
   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) {
  .op-hover--scale,
  .op-hover--glow,
  .op-hover--lift,
  .op-hover--rotate-3d,
  .op-hover--slide-underline,
  .op-hover--color-shift,
  .op-hover--brightness-pop,
  .op-hover--border-grow,
  .op-reveal,
  .op-reveal--slide-left,
  .op-reveal--zoom,
  .op-reveal--stagger > *,
  .op-reveal--parallax,
  .op-skeleton,
  .op-spinner,
  .op-dot-loader > span,
  .op-modal--fade-in,
  .op-modal--slide-up,
  .op-modal--slide-right,
  .op-modal--scale-bounce {
    transition: none !important;
    animation: none !important;
  }
  .op-reveal,
  .op-reveal--slide-left,
  .op-reveal--zoom,
  .op-reveal--parallax {
    opacity: 1 !important;
    transform: none !important;
  }
  .op-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. .op-card.op-hover--lift.
   ═══════════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ═══════════════════════════════════════════════════════════════
   END LAYER 7 - INTERACTIONS
   ═══════════════════════════════════════════════════════════════ */



/* ============================================================
   LAYER 8 - DIVIDERS/PATTERNS/TEXTURES: USUNIETE (subtraktywny cleanup 2026-07-16)
   Dekoracje .op-divider--/.op-pattern--/.op-texture--/.op-accent/.op-blob dla 20 vibe.
   Zero uzyc w markupie i w zywym DOM (jedyny divider = bespoke .op-divider-line <hr>
   zdefiniowany w §OP-CLIENT). Zrodlo: library/css/layer8-dividers-patterns.css (scaffold).
   ============================================================ */



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

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

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

/* (1) === REDESIGN home-w-CMS (2026-07-13, Wariant A) + fallback body_top =========
   Docs: docs/plans/2026-07-13-osada-home-in-cms-redesign.md
   DWUTRYBOWO przez :has() - bezpieczne niezaleznie od tego, GDZIE jest .op-home
   (nie ma footguna przy samodzielnym deployu CSS):
     • body_top (fallback, sprawdzony): .op-home POZA main → ukryj systemowy main.
     • CMS (redesign): .op-home W main (sekcja „Kod HTML") → main WIDOCZNY, fullpage
       zneutralizowany (normalny flow), stock hero/slider/parallax ukryte (zostaja w
       DOM → ido-home-selfcontained czyta z nich --op-hero-bg). Footer POZA main.
   ROLLBACK: ustaw body_top_pl w panel_content.json (bez cms_section) → gałąź fallback
   sama zadziała (main znów ukryty), bez zmian w tym CSS.
   ------------------------------------------------------------------------------- */
/* FALLBACK body_top: .op-home nie jest w main → ukryj systemowy main (stare zachowanie) */
html body.page-index:not(:has(main .op-home)) main.fullpage-wrapper,
html body.page-index:not(:has(main .op-home)) main#pageContent {
  display: none !important;
}
/* REDESIGN CMS: .op-home w main → main widoczny, fullpage bez snap/100vh */
html body.page-index:has(main .op-home) main.fullpage-wrapper,
html body.page-index:has(main .op-home) main#pageContent {
  height: auto !important;
  overflow: visible !important;
}
html body.page-index:has(main .op-home) .fp-section,
html body.page-index:has(main .op-home) .section.fp-table,
html body.page-index:has(main .op-home) .fp-tableCell {
  height: auto !important;
  display: block !important;
}
/* stock hero/slider/parallax + scroll-hint ukryte (zostaja w DOM dla --op-hero-bg) */
html body.page-index:has(main .op-home) #parallax_topslider,
html body.page-index:has(main .op-home) .section.parallax,
html body.page-index:has(main .op-home) #bounce {
  display: none !important;
}
/* kontener CMS bez wlasnego max-width/paddingu - .op-home rzadzi szerokoscia
   (contained przez --op-maxw, pelny bleed przez .op-fullbleed 100vw) */
html body.page-index:has(main .op-home) main .section_sub.container {
  display: block !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* (2) hero samodzielny: zdjecie + WOLNY ZOOM (Ken Burns) na warstwie ::before.
   BEZ ciemnego filtra (zyczenie klienta 2026-07-14) - czytelnosc napisow zapewnia
   text-shadow (zdjecie 16 jest srednio-ciemne, mid-luminancja ~95/255).
   Zoom siedzi na ::before (pseudo bez potomkow) → NIE tworzy containing-block dla
   wyszukiwarki (litepicker dolacza sie do <body>, wiec go nie przycina), a overflow:hidden
   przycina powiekszony obraz (zero poziomego scrolla). Pelna szerokosc niesie .op-fullbleed.
   TLO Z PANELU (system): ido-home-selfcontained.js ustawia --op-hero-bg ze zdjecia
   frontpageGallery wybranego przez klienta (pierwszy slajd); fallback = grafit lesny. */
html body.page-index .op-home .op-hero {
  position: relative;
  overflow: hidden;
  background-color: #16181C;              /* fallback nim zaladuje sie zdjecie */
  background-image: none;
  min-height: clamp(560px, 84vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
}
html body.page-index .op-home .op-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* ZDJECIE HERO = ZAWSZE PIERWSZE ZDJECIE Z PANELU (decyzja Damiana 2026-08-10). Klient
     wybiera je przeciagnieciem na 1. pozycje w „Strona glowna → galeria" - zero pracy w kodzie.
     Nadpisuje je `--op-hero-bg`, ktore ustawia setHeroBg z body_bottom (1. slajd systemowego
     slidera). Wartosc PONIZEJ to statyczny FALLBACK = ten sam plik co dzisiejszy 1. slajd:
     LCP nie moze czekac na JS (lessons/047), a preload w HEAD musi wskazywac ten sam obraz.
     PRZY ZMIANIE KOLEJNOSCI W PANELU: podmien tu i w HEAD (preload + og:image + JSON-LD) -
     inaczej preload ciagnie plik, ktorego hero nie uzywa. Sciezka RELATYWNA (przetrwa
     przepiecie na osadapogodno.pl). `center center` = neutralny kadr pod DOWOLNE zdjecie. */
  background-image: var(--op-hero-bg, url("/images/frontpageGallery/pictures/large/0/0/136_full.jpg"));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: 50% 50%;
  animation: opKenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes opKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  html body.page-index .op-home .op-hero::before { animation: none; transform: none; }
}

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

/* BEZ SCRIMA / BEZ PRZYCIEMNIENIA - decyzja Damiana 2026-08-10: „ma tego w ogole nie byc, tylko
   normalnie zdjecie". Zdjecie hero idzie czyste, `::after` na `.op-hero` jest WOLNE i ma takie
   zostac. NIE przywracaj tu gradientu bez pytania.
   KONSEKWENCJA DO SWIADOMOSCI (zmierzone na panoramie = 1. zdjeciu z panelu, worst-case bialego
   tekstu): eyebrow 8,02 · h1 3,20 · lead 1,85. Lead lokalnie schodzi ponizej progu 3,0 tam, gdzie
   pod tekst wchodzi przepalone niebo lub jasna skala. Jesli kiedys wroci temat „napisy slabo
   widac na jasnym zdjeciu", to sa TRZY drogi bez dociemniania kadru: (1) pierwsze zdjecie
   w panelu o ciemniejszej dolnej polowie, (2) wyrownanie tekstu hero do lewej na ciemniejszym
   pasie, (3) delikatna plaszczyzna TYLKO pod blokiem tekstu. Cienie tekstu sa celowo 1-px
   (halo 30-px rysowalo ciemne prostokaty wokol linii - to samo zgloszenie). */

/* WARSTWA TEKSTU HERO - bez tego napisow NIE WIDAC (zgloszenie klienta 2026-08-10:
   „totalnie brakuje napisu h1 nad wyszukiwarka" + „nazwa niewidoczna na stronie glownej").
   MECHANIZM: ::before/::after sa `position:absolute` z `z-index:0`, czyli pozycjonowanym
   kontekstem, ktory w kolejnosci malowania CSS idzie w kroku 6 - NAD niepozycjonowana
   trescia inline (krok 5). Eyebrow/H1/lead byly `position:static` => zdjecie je zamalowywalo.
   Computed style KLAMAL (display:block, visibility:visible, opacity:1, color:#FFF) -
   dowodem byl hit-test: elementsFromPoint w srodku H1 zwracal .op-hero PRZED h1.
   Wyszukiwarka przezyla, bo .op-search__group ma wlasne position:relative; z-index:2.
   UWAGA: z-index NIE MOZE isc na .op-hero__inner - ten kontener trzyma wyszukiwarke,
   a `position:relative` zrobilby z niego containing block dla popupu Litepickera
   (TRAP-07 + nota `--hero__lede` w skillu jarvis-deploy-quality). Dlatego pozycjonujemy
   WYLACZNIE 3 elementy tekstowe; .op-hero__search zostaje ich rodzenstwem. */
html body.page-index .op-home .op-hero__eyebrow,
html body.page-index .op-home .op-hero__title,
html body.page-index .op-home .op-hero__lead {
  position: relative;
  z-index: 1;
}

/* Rezerwacja wysokosci pod pasek wstrzykiwany JS-em (ido-search-delegate). Hero jest
   flex-centrowany, wiec bez tego cala tresc przeskakuje w chwili injekcji = CLS
   (lessons/047). Zmierzone wysokosci paska: 100px poziomo, 384px w kolumnie (prog 820px).
   `:empty` przestaje pasowac po injekcji, wiec rezerwacja nie sumuje sie z trescia. */
html body.page-index .op-home .op-hero__search:empty { min-height: 100px; }
@media (max-width: 820px) {
  html body.page-index .op-home .op-hero__search:empty { min-height: 384px; }
}

/* PROG 820px, NIE 767px: to szerokosc, na ktorej pasek wyszukiwarki lamie sie na KOLUMNE
   (~384px zamiast 100px), wiec dopiero tu tresc hero przestaje sie miescic w `min-height`.
   Przy `align-items:center` + `overflow:hidden` nadwyzka byla przycinana U GORY - eyebrow
   siedzial na y=0, pod belka i hamburgerem (zmierzone @375 i @768x700). flex-start + padding
   naprawia to w calym pasie kolumnowym. Zmierzone po zmianie: eyebrowTop 0 -> 84. */
@media (max-width: 820px) {
  html body.page-index .op-home .op-hero {
    align-items: flex-start;
    padding-top: 84px;
    padding-bottom: 36px;
  }
}

@media (max-width: 767px) {
  html body.page-index .op-home .op-hero {
    min-height: clamp(520px, 80vh, 700px);
  }
  html body.page-index .op-home .op-hero__lead {
    font-size: 16px;
    line-height: 1.55;
    max-width: 34ch;
  }
}


/* ============================================================================
   §OP-CLIENT - Willa Osada Pogodno (rustic-warm)
   Bespoke UX + brand-token overrides + page guards.
   Edytuj TYLKO tutaj przy zmianach per-klient. Reszta pliku = biblioteka.
   Fonty: Cormorant Garamond (nagłówki) + Lato (tekst) - z HEAD.
   Reveal: uzywamy .ido-reveal (ido-base.js podpina IntersectionObserver);
   NIE .op-reveal (brak JS dodajacego .op-in → zostaloby ukryte).
   ============================================================================ */

/* ── BRAND HEADER (default13 solid, kremowy pasek, zielono-terakotowe akcenty) ── */
header.default13,
header.default13 .menu-wrapper {
  background: var(--op-bg) !important;
  box-shadow: 0 1px 0 var(--op-border);
}
/* MENU: font TEKSTOWY, nie displayowy szeryf (zgloszenie klienta 2026-08-10 „czcionka w menu
   zbyt malo widoczna"). Pomiar wykluczyl kontrast jako przyczyne: #1F2A23 na #FCFAF4 = 14,2:1.
   Winowajca byl Cormorant Garamond w 15,5px - szeryf o duzym kontrascie kresek zawsze czyta sie
   blado w rozmiarze UI. Naglowki zostaja w Cormorant, wiec jezyk wizualny marki jest nietkniety. */
header.default13 a[href]:not(.navbar-reservation):not(.logo):not([class*="btn"]) {
  color: var(--op-text) !important;
  font-family: var(--op-font-body);
  font-weight: 700;
  letter-spacing: 0.04em;
}
header.default13 a[href]:not(.navbar-reservation):not(.logo):not([class*="btn"]):hover {
  color: var(--op-secondary) !important;      /* #1F5138 = 8,8:1 na kremie (wood #8C6A3C mial 4,7:1) */
  text-decoration: underline;
  text-underline-offset: 4px;
}
header.default13 .navbar-toggler {
  background: transparent !important;
  border-color: var(--op-primary) !important;
  color: var(--op-primary) !important;
}
body.page-index header.default13:not(.op-header--scrolled) .navbar-reservation,
header.default13 .navbar-reservation {
  background: var(--op-secondary) !important;
  border-color: var(--op-secondary) !important;
  color: #FFFFFF !important;
}
header.default13 .navbar-reservation:hover {
  background: var(--op-secondary-dark) !important;
  border-color: var(--op-secondary-dark) !important;
}
header.default13 .navbar-brand {
  height: auto !important;
  min-height: 0 !important;
  line-height: 0 !important;
}
header.default13 .navbar-brand img { max-height: 52px; width: auto; }

/* body_top <header> nie moze lapac header{position:fixed} (§32) */
.op-home > header,
.op-page > header,
.op-section > header { position: static !important; }

/* ── BANDS - system 3+ tonów. Full-bleed niesie base-rule (100vw). Tu: rytm + tło ── */
.op-band { padding: clamp(56px, 8vw, 112px) 0; }
.op-band__inner {
  max-width: var(--op-maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.op-band--cream { background: var(--op-cream); }
.op-band--white { background: var(--op-bg); }
.op-band--sand  { background: var(--op-cream2); }
.op-band--dark  { background: var(--op-dark); color: #EDE6D8; }
.op-band--flush { padding-top: 0; padding-bottom: 0; }

/* jasne napisy na ciemnym MUSZA miec wlasny !important (globalne h1..h6 daja dark) */
.op-band--dark :is(h1, h2, h3, h4),
.op-band--dark .op-section-title,
.op-band--dark p,
.op-band--dark .op-lead,
.op-band--dark li { color: #EDE6D8 !important; }
.op-band--dark .op-eyebrow { color: var(--op-secondary-light) !important; }
.op-band--dark .op-divider-line { background: var(--op-secondary-light); }

/* /txt wrapper .txt-text koloruje nasze tytuly na ciemno - przywroc brand */
body.page-txt .txt-text .op-section-title,
body.page-txt .op-page :is(h1, h2) { color: var(--op-text) !important; }

/* ── TYPOGRAFIA - atomy uzywane w body_top ── */
.op-eyebrow {
  display: block;
  font-family: var(--op-font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--op-secondary);
  margin: 0 0 14px;
}
.op-section-title {
  font-family: var(--op-font-heading);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.08;
  color: var(--op-text);
  margin: 0 0 16px;
}
.op-lead {
  font-family: var(--op-font-body);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.75;
  color: var(--op-text-soft);
  margin: 0 0 18px;
}
.op-p {
  font-family: var(--op-font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--op-text-soft);
  margin: 0 0 16px;
}
.op-p:last-child { margin-bottom: 0; }
.op-center { text-align: center; }
.op-center .op-lead { margin-left: auto; margin-right: auto; max-width: 660px; }
.op-divider-line { width: 56px; height: 2px; background: var(--op-secondary); border: none; margin: 0 0 24px; }
.op-center .op-divider-line { margin-left: auto; margin-right: auto; }
.op-drop-cap::first-letter {
  float: left;
  font-family: var(--op-font-heading);
  font-size: 4.2em;
  line-height: 0.82;
  font-weight: 600;
  color: var(--op-secondary);
  margin: 6px 12px 0 0;
}

/* ── BUTTONS ── */
.op-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--op-font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 15px 34px;
  border-radius: var(--op-radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.25s var(--op-ease), color 0.25s var(--op-ease),
              border-color 0.25s var(--op-ease), transform 0.2s var(--op-ease), box-shadow 0.25s var(--op-ease);
}
.op-btn--primary { background: var(--op-secondary); color: #FFFFFF; box-shadow: var(--op-shadow-sm); }
.op-btn--primary:hover { background: var(--op-secondary-dark); color: #FFFFFF; transform: translateY(-2px); box-shadow: var(--op-shadow-md); }
.op-btn--ghost { background: transparent; color: var(--op-text); border-color: var(--op-text); }
.op-btn--ghost:hover { background: var(--op-text); color: var(--op-bg); }
.op-btn--light { background: var(--op-cream); color: var(--op-text); }
.op-btn--light:hover { background: #FFFFFF; transform: translateY(-2px); box-shadow: var(--op-shadow-md); }
.op-btn:focus-visible { outline: 3px solid var(--op-secondary); outline-offset: 3px; }
.op-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.op-center .op-cta-actions { justify-content: center; }

/* ── HERO (self-contained) - tekst + delegowana wyszukiwarka ── */
html body.page-index .op-home .op-hero__inner { text-align: center; padding: 0 24px; color: #FFFFFF; }
/* CIENIE TEKSTU HERO - CELOWO MINIMALNE (zgloszenie Damiana 2026-08-10: „dodałeś jakąś czarną
   poświatę, usuń ją"). Bylo: 2-3 warstwy z rozmyciem 8/10/16/30 px. Te cienie siedzialy w pliku
   od poczatku, ale byly NIEWIDOCZNE - caly tekst hero lezal pod zdjeciem (lessons/052).
   Po podniesieniu tekstu 30-px halo zaczelo rysowac ciemne prostokaty wokol kazdej linii.
   Czytelnosc bierzemy z GLADKIEGO scrima na ::after, nie z halo wokol liter - scrim nie tworzy
   krawedzi. Cien zostaje tylko jako 1-px separacja od jasnych pikseli. */
.op-hero__eyebrow { color: var(--op-secondary-light); font-weight: 700; text-transform: uppercase; letter-spacing: 3px; font-size: 0.8125rem; margin: 0 0 18px; font-family: var(--op-font-body); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); }
/* color !important - bije globalne h1..h6{color:var(--ido-dark)!important} (inaczej napis ciemny na ciemnym). Mocniejszy cien = czytelnosc bez ciemnego filtra. */
.op-hero__title { color: #FFFFFF !important; font-family: var(--op-font-heading); font-weight: 600; font-size: clamp(40px, 6.2vw, 82px); line-height: 1.03; margin: 0 0 20px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.32); }
.op-hero__lead { color: rgba(255, 255, 255, 0.96); font-family: var(--op-font-body); font-size: clamp(16px, 1.6vw, 21px); line-height: 1.65; max-width: 680px; margin: 0 auto 28px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); }
.op-hero__search { margin-top: 8px; }

/* NOWY SILNIK (2026-07-14) - POZIOMY PASEK rezerwacji (zastępuje pionową kartę).
   Litepicker (kalendarz zakresu dat, ładowany globalnie przez IdoBooking) + delegacja
   do natywnego #iai_book_form. JS (ido-search-delegate) buduje .op-search--bar w slocie. */
.op-search.op-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.96);
  border-radius: var(--op-radius-lg);
  box-shadow: 0 24px 60px rgba(20, 16, 10, 0.30);
  text-align: left;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.op-search--bar .op-search__group {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 22px;
  position: relative;
  min-width: 0;
}
.op-search--bar .op-search__group + .op-search__group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  height: 64%;
  width: 1px;
  background: var(--op-border);
}
.op-search--bar .op-search__group--guests { flex: 0 0 128px; }
.op-search--bar .op-search__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--op-font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--op-text-muted);
}
.op-search--bar .op-search__label svg { width: 15px; height: 15px; color: var(--op-secondary); flex: 0 0 auto; }
.op-search--bar .op-search__input,
.op-search--bar select {
  border: none;
  background: transparent;
  font-family: var(--op-font-body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--op-text);
  padding: 2px 0;
  width: 100%;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.op-search--bar .op-search__input::placeholder { color: var(--op-text-muted); font-weight: 500; }
.op-search--bar .op-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(--op-secondary);
  color: #FFFFFF;
  font-family: var(--op-font-body);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.02em;
  padding: 0 30px;
  border-radius: calc(var(--op-radius-lg) - 4px);
  transition: background-color 0.22s var(--op-ease), transform 0.18s var(--op-ease);
}
.op-search--bar .op-search__submit svg { width: 18px; height: 18px; }
.op-search--bar .op-search__submit:hover { background: var(--op-secondary-dark); transform: translateY(-1px); }
@media (max-width: 820px) {
  .op-search.op-search--bar { flex-direction: column; gap: 2px; max-width: 440px; padding: 10px; }
  .op-search--bar .op-search__group,
  .op-search--bar .op-search__group--guests { flex: 1 1 auto; padding: 12px 16px; }
  .op-search--bar .op-search__group + .op-search__group::before { left: 16px; right: 16px; top: 0; height: 1px; width: auto; }
  .op-search--bar .op-search__submit { width: 100%; padding: 15px 24px; margin-top: 8px; }
}
/* Litepicker (silnik dat) - marka rustic-warm + nad wszystkim; TRAP-07 mobile safety */
.litepicker { z-index: 99999 !important; }
.litepicker .container__days .day-item:hover { color: var(--op-secondary) !important; box-shadow: inset 0 0 0 1px var(--op-secondary) !important; }
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date { background: var(--op-secondary) !important; color: #FFFFFF !important; }
.litepicker .container__days .day-item.is-in-range { background: var(--op-cream2) !important; }
@media (max-width: 767px) {
  .litepicker.litepicker--static { position: relative !important; left: auto !important; right: auto !important; margin: 0 auto !important; }
}

/* ── SIATKI + SEKCJE BESPOKE ── */
.op-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; }
.op-grid-2--top { align-items: start; }

/* dwie czesci: Glowny Dom + Stara Stajnia */
.op-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 8px; }
.op-part {
  display: flex;
  flex-direction: column;
  background: var(--op-bg);
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius-lg);
  overflow: hidden;
  box-shadow: var(--op-shadow-sm);
  transition: transform 0.28s var(--op-ease), box-shadow 0.28s var(--op-ease);
}
.op-part:hover { transform: translateY(-4px); box-shadow: var(--op-shadow-md); }
.op-part__media { aspect-ratio: 16 / 10; background: var(--op-cream3) center / cover no-repeat; }
.op-part__body { padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.op-part__title { font-family: var(--op-font-heading); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); color: var(--op-text); margin: 0; }
.op-part__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.op-chip {
  font-family: var(--op-font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--op-primary-dark);
  background: var(--op-cream);
  border: 1px solid var(--op-border);
  border-radius: 999px;
  padding: 6px 13px;
}
.op-part__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.op-part__body .op-cta-actions { margin-top: auto; padding-top: 10px; }

/* lista z ptaszkami */
.op-lead-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.op-lead-list li { position: relative; padding-left: 30px; font-family: var(--op-font-body); font-size: 15.5px; line-height: 1.6; color: var(--op-text-soft); }
.op-lead-list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 15px; height: 8px; border-left: 2px solid var(--op-secondary); border-bottom: 2px solid var(--op-secondary); transform: rotate(-45deg); }
.op-band--dark .op-lead-list li { color: #DED4C2; }
.op-band--dark .op-lead-list li::before { border-color: var(--op-secondary-light); }

/* ogród-SPA - siatka udogodnien z ikonami */
.op-spa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 12px; }
.op-spa__item { background: var(--op-bg); border: 1px solid var(--op-border); border-radius: var(--op-radius-lg); padding: clamp(22px, 2.4vw, 30px); text-align: left; box-shadow: var(--op-shadow-sm); }
.op-spa__icon { width: 40px; height: 40px; color: var(--op-primary); margin-bottom: 14px; }
.op-spa__title { font-family: var(--op-font-heading); font-weight: 600; font-size: 21px; color: var(--op-text); margin: 0 0 7px; }
.op-spa__desc { font-family: var(--op-font-body); font-size: 14.5px; line-height: 1.65; color: var(--op-text-muted); margin: 0; }

/* figura / placeholder zdjecia (foto wgrywa klient do panelu) */
.op-figure { position: relative; border-radius: var(--op-radius-lg); overflow: hidden; background: var(--op-cream3) center / cover no-repeat; min-height: 320px; box-shadow: var(--op-shadow-sm); }
.op-figure--tall { min-height: 440px; }
.op-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-figure__label { position: absolute; left: 16px; bottom: 16px; background: rgba(38, 34, 28, 0.72); color: #F5F0E8; font-family: var(--op-font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; padding: 7px 14px; border-radius: 999px; }

/* badge „wkrótce" (Studio Pogodno - foto/otwarcie po 17.07) */
/* badge „wkrótce" - domyślnie kontekst JASNY (dark brass na zielonej mgle, AA ~5:1);
   wariant na ciemnym pasie = jasna szałwia. Było: sage + hardcoded terakota (niewidoczne na białym). */
.op-soon { display: inline-block; font-family: var(--op-font-body); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--op-primary-dark); background: rgba(31, 81, 56, 0.10); border: 1px solid rgba(31, 81, 56, 0.28); border-radius: 999px; padding: 6px 14px; margin-bottom: 16px; }
.op-band--dark .op-soon { color: var(--op-secondary-light); background: rgba(159, 194, 172, 0.12); border-color: rgba(159, 194, 172, 0.35); }

/* pas lokalizacji / atrakcji (chipy) */
.op-places { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 8px; }
.op-places span { font-family: var(--op-font-heading); font-size: 17px; font-weight: 600; color: var(--op-text); background: var(--op-cream); border: 1px solid var(--op-border); border-radius: 999px; padding: 9px 18px; }
.op-center .op-places { justify-content: center; }

/* pasek zaufania (USP strip pod hero) */
.op-strip { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; background: var(--op-secondary); color: #FFFFFF; padding: 16px 24px; }
.op-strip__txt { font-family: var(--op-font-heading); font-weight: 600; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: 0.01em; }

/* stat / liczby */
.op-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; margin-top: 30px; }
.op-stat__num { font-family: var(--op-font-heading); font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); color: var(--op-secondary); line-height: 1; }
.op-stat__lbl { font-family: var(--op-font-body); font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--op-text-muted); margin-top: 8px; }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .op-grid-2, .op-parts, .op-spa { grid-template-columns: 1fr; }
  .op-spa { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .op-spa, .op-stat-row { grid-template-columns: 1fr; }
  .op-search { max-width: 100%; }
  .op-search__row { grid-template-columns: 1fr; }
  .op-cta-actions .op-btn { width: 100%; justify-content: center; }
}
/* ── PODSTRONY /txt - kontener dokumentu (NIE full-bleed; treść w sekcji CMS „HTML").
   Tytuł strony (H1) renderuje system z fg_title → w treści uzywamy tylko <h2> (1×H1). ── */
.op-page {
  max-width: var(--op-maxw);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 5vw, 48px) clamp(48px, 7vw, 96px);
  font-family: var(--op-font-body);
}
.op-page__intro { max-width: 820px; margin: 0 0 clamp(30px, 4vw, 56px); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; color: var(--op-text-soft); }
.op-page > section { margin: 0 0 clamp(36px, 5vw, 64px); }
.op-page > section:last-child { margin-bottom: 0; }
.op-page .op-section-title { font-size: clamp(26px, 3.4vw, 40px); }
.op-page .op-parts,
.op-page .op-spa { margin-top: 0; }
.op-page .op-figure { min-height: 260px; }

/* galeria - siatka kafli (placeholdery do czasu zdjęć z panelu) */
.op-galgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.op-galgrid .op-figure { min-height: 240px; }
@media (max-width: 991px) { .op-galgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .op-galgrid { grid-template-columns: 1fr; } }

/* prosty blok regulaminu / info */
.op-doc h2 { font-family: var(--op-font-heading); font-weight: 600; font-size: clamp(21px, 2.2vw, 27px); color: var(--op-text); margin: 0 0 10px; }
.op-doc > div { margin-bottom: 26px; }
.op-doc > div:last-child { margin-bottom: 0; }

/* karta kontaktowa (na /txt lub jako uzupelnienie) */
.op-contactcard { display: grid; gap: 10px; }
.op-contactcard a { color: var(--op-secondary); text-decoration: none; font-weight: 600; }
.op-contactcard a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   §OP-FIX 2026-07-13 - review Damiana (traps + PW-parity)
   ════════════════════════════════════════════════════════════════ */

/* ── A. ROOT FONT - default13 daje html{62.5%}=10px → wszystko z `rem` było o połowę
   za małe (hero, menu, eyebrow, opisy). Reset do 16px. Memory: default13_root_10px_rem. ── */
html { font-size: 100% !important; }
body.default13, body[class*="page-"] { font-size: 16px !important; }
header.default13 a[href]:not(.logo):not([class*="btn"]) { font-size: 15px !important; }   /* Lato 700 - patrz §OP-CLIENT BRAND HEADER */
header.default13 .navbar-reservation { font-size: 15px !important; }

/* ── B. STOPKA - ciemny espresso + TRAP-12/13. Nadpisuje layer1 TRAP#18, które robiło
   invert(1)+opacity:0.3 → loga VISA/MC „złe" + Powered-by poniżej wymogu licencji. ── */
footer.op-footer { background: var(--op-dark) !important; border-top: none !important; color: #EDE6D8 !important; }
.op-footer .footer__contact, .op-footer .footer__contact *,
.op-footer .op-footer__col, .op-footer .op-footer__col *,
.op-footer .op-footer__tag { color: #DED4C2 !important; }
.op-footer .op-footer__logo, .op-footer .op-footer__col h4 { color: #FFFFFF !important; }
.op-footer .footer__contact a:hover, .op-footer .op-footer__col a:hover { color: var(--op-secondary-light) !important; }
.op-footer__bottom { background: rgba(0, 0, 0, 0.22); }
.op-footer__bottom, .op-footer__bottom * { color: #C4B7A2 !important; }
/* TRAP-12: navy pseudo-pas pod banerem płatności */
.footer-contact-baner::before, .footer-contact-baner::after { display: none !important; content: none !important; }
/* TRAP-13: baner przezroczysty; loga w PRAWDZIWYCH kolorach (kasuje invert). VISA monochrom
   (path bez fill) → kremowy; :not([fill]) omija kolorowy <pattern> Mastercard (zachowuje czerwień/żółć). */
.op-footer .footer-contact-baner { background: transparent !important; border-top: none !important; }
.op-footer .footer-contact-baner svg, .op-footer .footer-contact-baner img { filter: none !important; opacity: 1 !important; }
.op-footer .footer-contact-baner svg path:not([fill]) { fill: #EDE6D8 !important; }
.op-footer .footer-contact-baner span, .op-footer .footer-contact-baner a { color: #C4B7A2 !important; font-size: 13px !important; }
/* Powered-by (licencja - ZAWSZE widoczne). on_white.svg renderuje się pusto jako <img> (fill=none)
   → chip z bg-image na jasnym tle, czytelny na ciemnej stopce. Kasuje opacity:0.3 z TRAP#18. */
.op-footer .powered_by { text-align: left; }
.op-footer .powered_by_logo img, .op-footer .powered-by-idobooking img { filter: none !important; opacity: 1 !important; }
.op-footer .powered_by a.powered_by_logo {
  display: inline-block; width: 200px; height: 46px;
  background: #F5F0E8 url("https://static.idobooking.com/images/logo_powered_by_on_white.svg") center / 150px no-repeat;
  border-radius: 4px;
}

/* ── C. /offers (Apartamenty) - 2 kolumny kart pionowych + marka (PW-parity). ── */
body.page-offers .offers_wrapper { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; align-items: stretch !important; }
body.page-offers .offers-container { flex-direction: column !important; height: 100% !important; margin: 0 !important; border: 1px solid var(--op-border) !important; border-radius: var(--op-radius-lg) !important; overflow: hidden !important; background: var(--op-bg) !important; transition: box-shadow .25s var(--op-ease), transform .25s var(--op-ease), border-color .25s var(--op-ease) !important; }
body.page-offers .offers-container:hover { box-shadow: var(--op-shadow-lg) !important; transform: translateY(-4px) !important; border-color: var(--op-secondary) !important; }
body.page-offers .object-icon { width: 100% !important; max-width: 100% !important; flex: none !important; }
body.page-offers .object-icon img { width: 100% !important; height: 240px !important; object-fit: cover !important; }
body.page-offers .accommodation-rest { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 22px 24px !important; }
body.page-offers .btn, body.page-offers a.btn, body.page-offers span.btn { background: var(--op-secondary) !important; border-color: var(--op-secondary) !important; color: #FFFFFF !important; }
body.page-offers .btn:hover, body.page-offers a.btn:hover { background: var(--op-secondary-dark) !important; }
@media (max-width: 767px) { body.page-offers .offers_wrapper { grid-template-columns: 1fr !important; } }

/* ── D. /offer (pojedyncza oferta) - marka CTA + trapy (memory: reservation_cta_center, additional_absolute). ── */
.accommodation-leftbutton, body.page-offer .btn-success, body.page-offer a.btn-success { background: var(--op-secondary) !important; border-color: var(--op-secondary) !important; color: #FFFFFF !important; }
.accommodation-leftbutton:hover, body.page-offer .btn-success:hover { background: var(--op-secondary-dark) !important; border-color: var(--op-secondary-dark) !important; }
body.page-offer #additional { position: static !important; }

/* ── E. /contact - mapa NA GÓRZE + lokalizacje w 2 kolumnach (PW-parity, TRAP-18). ── */
body.page-contact .contact { display: flex; flex-direction: column; }
body.page-contact #map_container { order: -1; width: 100%; min-height: 420px; margin: 0 0 40px; border-radius: var(--op-radius-lg); overflow: hidden; }
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(--op-font-heading) !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 { font-size: 16px !important; line-height: 1.65 !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(--op-border); }
@media (max-width: 767px) { body.page-contact .contact__locations { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   §OP-FIX2 2026-07-13 - audyt live (stopka/offers/offer-detail)
   ════════════════════════════════════════════════════════════════ */

/* ── STOPKA równo: 3 kolumny (nav pusty pomijamy), bez separatorów „|",
   bez zdublowanego nagłówka marki (był w kol.1 i kol.4). ── */
.op-footer__top { grid-template-columns: 1.6fr 1.2fr 1fr !important; gap: 34px !important; align-items: start !important; }
.op-footer__top .op-footer__col:last-child h4 { display: none !important; }
.op-footer .footer__contact { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column; gap: 9px; }
.op-footer .footer__contact li { margin: 0 !important; padding: 0 !important; display: block !important; }
.op-footer .footer__contact li::before, .op-footer .footer__contact li::after,
.op-footer .footer__contact a::before, .op-footer .footer__contact a::after { content: none !important; display: none !important; }
.op-footer .footer__contact .footer-contact-terms { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.op-footer .footer__contact .footer-contact-adress span { display: inline; }
@media (max-width: 767px) { .op-footer__top { grid-template-columns: 1fr !important; gap: 26px !important; } }

/* ── /offers: ukryj zdublowany inline link „SZCZEGÓŁY" (a.offers-object-detail) -
   zostaje przycisk .btn + klikalne zdjęcie (a.object-icon → /offer/N). ── */
body.page-offers .offers-object-detail { display: none !important; }

/* ── /offer (detal): tekst przycisków WYŚRODKOWANY (ZAREZERWUJ TERAZ, Zobacz na mapie). ── */
body.page-offer .accommodation-leftbutton,
body.page-offer .accommodation-reservation .btn,
body.page-offer .btn, body.page-offer button.btn, body.page-offer a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ── HOME: kontener wyróżnionych obiektów (auto z /offers przez ido-offers-feed) ── */
.op-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.op-featured__card { display: flex; flex-direction: column; background: var(--op-bg); border: 1px solid var(--op-border); border-radius: var(--op-radius-lg); overflow: hidden; box-shadow: var(--op-shadow-sm); transition: transform .28s var(--op-ease), box-shadow .28s var(--op-ease); text-decoration: none; }
.op-featured__card:hover { transform: translateY(-4px); box-shadow: var(--op-shadow-md); }
.op-featured__media { aspect-ratio: 3 / 2; background: var(--op-cream3) center / cover no-repeat; }
.op-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-featured__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.op-featured__name { font-family: var(--op-font-heading); font-weight: 600; font-size: 22px; color: var(--op-text); margin: 0; }
.op-featured__meta { font-family: var(--op-font-body); font-size: 14px; color: var(--op-text-muted); }
.op-featured__cta { margin-top: 8px; align-self: flex-start; font-family: var(--op-font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.4px; color: var(--op-secondary); text-transform: uppercase; }
@media (max-width: 991px) { .op-featured { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .op-featured { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════
   §OP-FIX3 2026-07-13 - home w body_top: wymuś hide-main na page-index.
   DOWÓD: CMS fillHomeCmsSection (injection) nie utrwala się → stara sekcja
   „O nas" (literal JS) siedzi w <main> i cowork-owy `:has(main .op-home)`
   trzymałby tryb CMS (main widoczny = garbage). Wymuszamy ukrycie systemowego
   main na home w OBU trybach detekcji → garbage znika; .op-home z GLOBALNEGO
   body_top (przed main) renderuje czysty home (gate §914 chowa go poza page-index).
   ════════════════════════════════════════════════════════════════ */
html body.page-index main.fullpage-wrapper,
html body.page-index main#pageContent,
html body.page-index:has(main .op-home) main.fullpage-wrapper,
html body.page-index:has(main .op-home) main#pageContent { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   §OP-FIX4 2026-07-14 - audyt senior (paleta Karkonosze, stopka, WCAG, klikalność)
   Źródła: audyt WCAG/fontów/klikalności + audyt SEO (agenci) + uwagi Damiana.
   ════════════════════════════════════════════════════════════════ */

/* F11 - hero eyebrow biały (jasna szałwia na jasnym niebie ~1.8:1); tytuł/lead białe z cieniem */
html body.page-index .op-home .op-hero__eyebrow { color: #FFFFFF !important; }

/* F4 - cena/oferta na jasnym: ciemny mosiądz (jasny mosiądz 2.7:1 fail → 5.2:1) */
body.page-offer .price, body.page-offer [class*="price"] { color: var(--op-primary-dark) !important; }

/* F13 - nav hover = zieleń (mocny kontrast); ikony SPA = ciemniejszy mosiądz */
header.default13 a[href]:not(.navbar-reservation):not(.logo):not([class*="btn"]):hover { color: var(--op-secondary) !important; }
.op-spa__icon { color: var(--op-primary-dark); }

/* F7 - focus-visible dla linków / kart / kafli / PRZYCISKÓW (WCAG 2.4.7).
   .op-btn dodane 2026-07-20: primary/ghost/light CTA nie mialy keyboard focus-ring. */
.op-featured__card:focus-visible, .op-part:focus-visible, .op-page a:focus-visible,
header.default13 a:focus-visible, .op-galgrid .op-figure:focus-visible, .op-contactcard a:focus-visible,
.op-btn:focus-visible {
  outline: 3px solid var(--op-secondary); outline-offset: 3px; border-radius: 6px;
}
/* na ciemnym pasie (Studio) jasniejszy ring - kontrast do grafitu */
.op-band--dark .op-btn:focus-visible { outline-color: var(--op-secondary-light); }

/* ── STOPKA równa (Damian: „stopka nie jest równa", „Kontakt" nierówny) ── */
.op-footer__top { align-items: start !important; }
.op-footer__col { text-align: left; }
.op-footer__col h4 { margin: 0 0 18px; font-family: var(--op-font-heading); font-weight: 600; font-size: 22px; line-height: 1.15; color: #FFFFFF; }
.op-footer__logo { display: inline-flex; align-items: center; gap: 10px; min-height: 0; margin: 0 0 16px; font-family: var(--op-font-heading); font-size: 22px; line-height: 1.15; color: #FFFFFF; }
.op-footer__logo svg { width: 26px; height: 26px; color: var(--op-primary-light); flex: 0 0 auto; }
.op-footer .footer__contact, .op-footer .footer__contact * { text-align: left !important; }
.op-footer__col .powered_by { margin-top: 2px; }

/* fb / social - czysty okrągły przycisk marki (było: „losowa" ikona icon-font; SVG wstawia JS) */
.op-footer .footer__social_media { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 10px; }
.op-footer .footer__social_media li { margin: 0; }
.op-footer .footer__social_media a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #EDE6D8; transition: background-color .2s var(--op-ease), border-color .2s var(--op-ease), transform .2s var(--op-ease); }
.op-footer .footer__social_media a:hover { background: var(--op-secondary); border-color: var(--op-secondary); transform: translateY(-2px); }
.op-footer .footer__social_media a svg { width: 20px; height: 20px; }

/* visa/mc - oddech, nie dotykają krawędzi/© (Damian: „leciutko niżej bo dotykają elementu") */
.op-footer__bottom { padding: 0 !important; }
.op-footer__bottom-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 0 28px !important; }
.op-footer .footer-contact-baner { margin: 0 !important; }
@media (max-width: 767px) { .op-footer__bottom-in { justify-content: center; text-align: center; } }

/* ── BACK-TO-TOP #backTop - okrągły przycisk marki + strzałka CSS (Damian: brzydki glif) ── */
a#backTop, #backTop { width: 46px !important; height: 46px !important; border-radius: 50% !important; background: var(--op-secondary) !important; box-shadow: var(--op-shadow-md) !important; border: none !important; display: flex !important; align-items: center; justify-content: center; transition: background-color .2s var(--op-ease), transform .2s var(--op-ease); }
a#backTop:hover, #backTop:hover { background: var(--op-secondary-dark) !important; transform: translateY(-3px); }
#backTop i { display: none !important; }
#backTop::after { content: ""; width: 11px; height: 11px; margin-top: 5px; border-left: 2.5px solid #FFFFFF; border-top: 2.5px solid #FFFFFF; transform: rotate(45deg); }

/* ── KLIKALNOŚĆ + hover zdjęć sekcji CMS + galerii (Damian: „z hoverami i klikalne") ── */
body.page-txt .txt-text img, [data-op-cms-target] img { border-radius: var(--op-radius-lg); transition: transform .35s var(--op-ease), box-shadow .35s var(--op-ease); }
.op-galgrid .op-figure { cursor: pointer; transition: transform .35s var(--op-ease), box-shadow .35s var(--op-ease); }
.op-galgrid .op-figure:hover { transform: translateY(-4px); box-shadow: var(--op-shadow-md); }
.op-galgrid .op-figure img { transition: transform .5s var(--op-ease); }
.op-galgrid .op-figure:hover img { transform: scale(1.04); }
body.page-txt .txt-text a:hover img { transform: scale(1.02); box-shadow: var(--op-shadow-md); }

/* ── LIGHTBOX (ido-lightbox, prefiks op) - modal klik-w-zdjęcie ── */
.op-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; }
.op-lightbox.op-active { display: flex; }
.op-lightbox__overlay { position: absolute; inset: 0; background: rgba(16, 24, 20, 0.92); }
.op-lightbox__img { position: relative; max-width: 90vw; max-height: 86vh; border-radius: var(--op-radius); box-shadow: 0 24px 70px rgba(0,0,0,0.5); }
.op-lightbox__caption { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #EDE6D8; font-family: var(--op-font-body); font-size: 14px; }
.op-lightbox__close, .op-lightbox__prev, .op-lightbox__next { position: absolute; z-index: 2; background: rgba(255,255,255,0.12); border: none; color: #FFFFFF; width: 46px; height: 46px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; transition: background-color .2s var(--op-ease); }
.op-lightbox__close:hover, .op-lightbox__prev:hover, .op-lightbox__next:hover { background: var(--op-secondary); }
.op-lightbox__close { top: 22px; right: 22px; }
.op-lightbox__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.op-lightbox__next { right: 22px; top: 50%; transform: translateY(-50%); }

/* ════════════════════════════════════════════════════════════════
   §OP-FIX5 2026-07-14 - spójność fontów (Litepicker/menu/języki) + para strzałek scroll
   ════════════════════════════════════════════════════════════════ */

/* Litepicker miał własny (systemowy) font - ujednolić z resztą (Lato, jak formularz/pasek) */
.litepicker, .litepicker * { font-family: var(--op-font-body) !important; }
.litepicker .month-item-name, .litepicker .month-item-year { font-family: var(--op-font-heading) !important; font-weight: 600; }

/* Przełącznik języka „PL" w rogu = ten sam font co menu (nagłówkowy Cormorant) - spójny header */
.language__toggler, .language__toggler *, .lang-switch, .lang-switch * { font-family: var(--op-font-heading) !important; }

/* DWIE STRZAŁKI scroll (#backTop w górę + #bounce w dół, icon-arrow_big_down) - ten sam kolor
   marki + obok siebie, prawy-dolny róg (życzenie Damiana: „mogą być, ale ten sam kolor, jedna obok drugiej"). */
a#backTop, #backTop, #bounce {
  position: fixed !important; bottom: 24px !important; z-index: 999 !important;
  width: 46px !important; height: 46px !important; border-radius: 50% !important;
  background: var(--op-secondary) !important; box-shadow: var(--op-shadow-md) !important;
  border: none !important; margin: 0 !important; opacity: 1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background-color .2s var(--op-ease), transform .2s var(--op-ease) !important;
}
#backTop { right: 24px !important; }
#bounce  { right: 80px !important; left: auto !important; top: auto !important; }
a#backTop:hover, #backTop:hover, #bounce:hover { background: var(--op-secondary-dark) !important; transform: translateY(-3px); }
#backTop i, #bounce i { display: none !important; }
#backTop::after, #bounce::after { content: ""; width: 11px; height: 11px; border-left: 2.5px solid #FFFFFF; border-top: 2.5px solid #FFFFFF; }
#backTop::after { transform: rotate(45deg); margin-top: 5px; }      /* grot w górę */
#bounce::after  { transform: rotate(225deg); margin-bottom: 5px; }   /* grot w dół */
@media (max-width: 767px) {
  /* cel dotykowy ≥44px (WCAG 2.5.5) - live-verify 2026-07-15: 42px = 2px za malo */
  a#backTop, #backTop, #bounce { width: 44px !important; height: 44px !important; bottom: 18px !important; }
  #backTop { right: 16px !important; }
  #bounce  { right: 68px !important; }
}

/* Cele dotykowe ≥44px (WCAG 2.5.5) - audyt mobilny 2026-07-14 */
.op-footer .footer__social_media a { width: 44px; height: 44px; }
@media (max-width: 820px) {
  .op-search--bar .op-search__input, .op-search--bar select { min-height: 44px; }
}
@media (max-width: 767px) {
  .op-footer .footer__contact a { display: inline-block; padding: 7px 0; }
  .op-footer__bottom-in a, .op-footer__bottom-in { min-height: 24px; }
  /* przyciski oferty (SZCZEGÓŁY / ZAREZERWUJ) - cel dotykowy ≥44px */
  body.page-offers .btn, body.page-offers a.btn, body.page-offer .btn, body.page-offer a.btn,
  body.page-offer .accommodation-leftbutton { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
}

/* ════════════════════════════════════════════════════════════════
   §OP-FIX6 2026-07-15 - live-verify po wdrożeniu (computed-style, 1280+375)
   ════════════════════════════════════════════════════════════════ */

/* F14 - chip ceny /offer: §D daje tło mosiądz (--ido-primary), a F4 barwi tekst
   wewnątrz na ciemny mosiądz → 1.9:1 (nieczytelne, live-verified). Chip na kremie
   z ramką; kolor na CHIPIE też ciemny mosiądz (spadek dla span bez klasy "price"
   - §D wymuszał #fff, na kremie = niewidoczny). AA ~5:1. */
body.page-offer .offer-price {
  background: var(--op-cream) !important;
  border: 1px solid var(--op-border) !important;
  color: var(--op-primary-dark) !important;
}

/* F15 - ZAREZERWUJ TERAZ na /offer to a.accommodation-reservation (BEZ klas
   .btn/.btn-success/leftbutton - reguły marki go omijały): był ghost jasny
   mosiądz na białym 3.3:1. Marka: zielony CTA jak SZCZEGÓŁY/leftbutton. */
body.page-offer a.accommodation-reservation {
  background: var(--op-secondary) !important;
  border-color: var(--op-secondary) !important;
  color: #FFFFFF !important;
  border-radius: var(--op-radius) !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
}
body.page-offer a.accommodation-reservation:hover,
body.page-offer a.accommodation-reservation:focus-visible {
  background: var(--op-secondary-dark) !important;
  border-color: var(--op-secondary-dark) !important;
  color: #FFFFFF !important;
}

/* F9 - mapa okolicy (/txt/204, sekcja CMS js) - kontener + hint gesture-zoom
   (TRAP-17: scroll strony ≠ zoom mapy; Ctrl/Cmd+kółko lub 2 palce). */
.op-okmap {
  width: 100%;
  height: 430px;
  border-radius: var(--op-radius-lg);
  overflow: hidden;
  box-shadow: var(--op-shadow-md);
  background: var(--op-cream3);
  position: relative;
  z-index: 1;
  margin: 26px 0 18px;
}
.op-okmap__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 36, 27, 0.55);
  color: #FFFFFF;
  font-family: var(--op-font-body);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--op-ease);
  z-index: 800;
}
.op-okmap__hint.is-on { opacity: 1; }
.op-okmap .leaflet-popup-content-wrapper {
  border-radius: var(--op-radius);
  font-family: var(--op-font-body);
}
@media (max-width: 767px) { .op-okmap { height: 340px; } }

/* F16 - STOPKA RÓWNO (zgłoszenie Damiana 2026-07-15, mobile+PC).
   ROOT CAUSE (computed-style): (a) `footer` systemowo text-align:center - dziedziczone
   przez wszystko bez własnego text-align; (b) §OP-FIX2 przestawił relokowany
   ul.footer__contact na flex-COLUMN nie ustawiając align-items → systemowe
   align-items:center CENTROWAŁO li-elementy (węższe od kolumny) FIZYCZNIE.
   Poprzednia "naprawa" leczyła tylko text-align = nie działała (INSTINCT-02). */
footer.op-footer, .op-footer__top, .op-footer__col { text-align: left !important; }
.op-footer .footer__contact { align-items: flex-start !important; justify-content: flex-start !important; }
.op-footer .footer__contact li { justify-content: flex-start !important; text-align: left !important; }
.op-footer ul.footer__social_media { justify-content: flex-start !important; }
.op-footer ul.footer__social_media li { padding: 0 !important; margin: 0 !important; list-style: none !important; }
.op-footer .footer-contact-baner { justify-content: flex-start !important; text-align: left !important; }
/* pasek dolny (c) zostaje centrowany celowo - osobna belka pod border-top */

/* ─────────────────────────────────────────────────────────────────
   §OP-FIX8 2026-07-20 - PIVOT „jeden obiekt": systemowa pozycja menu „Apartamenty"
   (→ /offer/10/Osada-Pogodno = pojedynczy obiekt) jest RELABELOWANA na „Rezerwacja"
   (panel_content.json menu). Usuwa sporny wyraz „Apartamenty" (klient), a ZOSTAWIA
   funkcjonalne wejście do rezerwacji na KAŻDEJ podstronie (header navbar-reservation
   jest ukryty przez silnik). Gdyby klient chciał zakładkę CAŁKOWICIE usunąć, odkomentuj
   poniższy hide (i/lub wyłącz pozycję w /panel/menu):
   #navbar li.nav-item:has(> a.nav-link[href*="/offer/"]) { display: none !important; } */

/* ─────────────────────────────────────────────────────────────────
   §OP-FIX9 2026-07-20 - Galeria: (a) sekcje grupowe auto-galerii (auto-podzial
   wg zrodla: obiekt / podstrony), (b) styl NATYWNEJ galerii podstrony
   (.gallery-lightbox/.gallery-sub z panelu „Dodaj zdjecie" - domyslnie surowy
   Bootstrap „na dole"; teraz zaokraglone, jednolity kadr 4:3, hover-zoom). */
.op-galgroup { margin-bottom: 44px; }
.op-galgroup:last-child { margin-bottom: 0; }
.op-galgroup__title { font-family: var(--op-font-heading); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); color: var(--op-text); margin: 0 0 18px; }

body.page-txt .gallery-lightbox { margin: 32px 0 !important; }
body.page-txt .gallery-lightbox .gallery-sub a { display: block; border-radius: var(--op-radius-lg); overflow: hidden; box-shadow: var(--op-shadow-sm); transition: box-shadow .35s var(--op-ease), transform .35s var(--op-ease); }
body.page-txt .gallery-lightbox .gallery-sub a:hover { transform: translateY(-4px); box-shadow: var(--op-shadow-md); }
body.page-txt .gallery-lightbox .gallery-sub img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s var(--op-ease); }
body.page-txt .gallery-lightbox .gallery-sub a:hover img { transform: scale(1.05); }
/* END §OP-FIX9 */

/* END §OP-CLIENT */

/* ════════════════════════════════════════════════════════════════
   §OP-CMS-SECTIONS 2026-07-14 - styl natywnych sekcji CMS (lesson 028).
   Podstrony /txt budowane jako sekcje TYPOWANE (photo_and_text itd.,
   panel-fill `sections_pl`) - klient sam podmienia zdjecia/teksty w panelu.
   Zrodlo wzorca: library/css/layer-cms-sections.css (tu z tokenami --op-*).
   Sekcje „Kod HTML" (.op-page) NIE sa dotykane - selektory celuja tylko
   w gole rzedy col-12/col-md-6 i output WYSIWYG.
   ════════════════════════════════════════════════════════════════ */
:root {
  --xx-cms-radius: var(--op-radius-lg);
  --xx-cms-gap: 56px;
  --xx-cms-img-ratio: 4 / 3;
  --xx-cms-heading-font: var(--op-font-heading);
}
body.page-txt .txt-text > .row {
  margin-bottom: var(--xx-cms-gap);
  align-items: center;
  row-gap: 24px;
}
body.page-txt .txt-text > .row:last-child { margin-bottom: 0; }
body.page-txt .txt-text > .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(--op-shadow-md);
  background: var(--op-cream3);
}
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;
  opacity: 0.35;
}
body.page-txt .txt-text > .row h2 {
  font-family: var(--xx-cms-heading-font);
  color: var(--op-text);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  margin: 0 0 16px;
}
body.page-txt .txt-text > .row h3 {
  font-family: var(--xx-cms-heading-font);
  color: var(--op-text);
  font-size: clamp(20px, 2.2vw, 26px);
  margin: 0 0 10px;
}
body.page-txt .txt-text > .row p {
  color: var(--op-text-soft);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 14px;
}
body.page-txt .txt-text > .row ul {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
}
body.page-txt .txt-text > .row ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  color: var(--op-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(--op-secondary);
}
body.page-txt .txt-text > .row a {
  color: var(--op-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.page-txt .txt-text > .row [style*="font-family"] { font-family: inherit !important; }
/* .op-page--sec = kompaktowy wariant .op-page dla sekcji „Kod HTML" MIEDZY sekcjami
   natywnymi (strona = wiele sekcji, wiec bez duzego paddingu pelnostronicowego;
   0 15px wyrownuje do paddingu kolumn Bootstrapa w rzedach natywnych). */
.op-page--sec { max-width: none; padding: 0 15px; margin: 0 0 40px; }
.op-page--sec:last-child { margin-bottom: 0; }
.op-page--sec .op-page__intro { margin-bottom: clamp(24px, 3vw, 40px); }
@media (max-width: 767px) {
  body.page-txt .txt-text > .row { margin-bottom: 40px; }
  body.page-txt .txt-text > .row h2 { font-size: 26px; }
}

/* ── HOME „O nas" (sekcja CMS relokowana przez ido-cms-onas do banda cream) ──
   Te same zasady co na /txt: rzedy Bootstrap + WYSIWYG output, plus drop-cap
   pierwszego akapitu (zachowanie designu op-drop-cap z wersji statycznej). */
body.page-index [data-op-cms-target] .row {
  margin-bottom: 0;
  align-items: center;
  row-gap: 24px;
}
body.page-index [data-op-cms-target] .row > [class*="col-"] > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;              /* wysoki kadr jak op-figure--tall; cover przytnie kazdy format */
  object-fit: cover;
  border-radius: var(--op-radius-lg);
  box-shadow: var(--op-shadow-md);
  background: var(--op-cream3);
}
body.page-index [data-op-cms-target] .row > [class*="col-"] > img[src*="defaulticon"],
body.page-index [data-op-cms-target] .row > [class*="col-"] > img[data-src*="defaulticon"] {
  object-fit: none;
  opacity: 0.35;
}
body.page-index [data-op-cms-target] .row h2 {
  font-family: var(--op-font-heading);
  color: var(--op-text);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  margin: 0 0 16px;
}
body.page-index [data-op-cms-target] .row p {
  color: var(--op-text-soft);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 14px;
}
/* drop-cap tylko w strefie "onas" (zachowanie designu op-drop-cap ze statycznej wersji) */
body.page-index [data-op-cms-target="onas"] .row > [class*="col-"]:first-child > p:first-of-type::first-letter {
  font-family: var(--op-font-heading);
  font-size: 3.1em;
  line-height: 0.85;
  float: left;
  padding: 4px 10px 0 0;
  color: var(--op-secondary);
}
/* strefa "studio" = ciemny band -> jasna typografia (WYSIWYG h2/p bez klas) */
body.page-index [data-op-cms-target="studio"] .row h2 { color: var(--op-cream); }
body.page-index [data-op-cms-target="studio"] .row p { color: var(--op-cream2); }
body.page-index [data-op-cms-target="studio"] .op-center-left { margin-bottom: 8px; }
body.page-index [data-op-cms-target] [style*="font-family"] { font-family: inherit !important; }
/* pusty/zepsuty slot (klient jeszcze nie wybral zdjecia): pseudo-element na IMG renderuje sie
   w Chrome/FF TYLKO gdy obraz sie nie zaladuje -> automatyczny kremowy placeholder zamiast
   ikony zepsutego obrazka. Dziala tez na /txt. */
body.page-txt .txt-text > .row > [class*="col-"] > img,
body.page-index [data-op-cms-target] .row > [class*="col-"] > img { position: relative; }
body.page-txt .txt-text > .row > [class*="col-"] > img::after,
body.page-index [data-op-cms-target] .row > [class*="col-"] > img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--op-cream3);
  border-radius: inherit;
}

/* ── SKALOWANIE UNIWERSALNE: obraz w KAZDEJ sekcji natywnej nigdy nie rozpycha
   kolumny (klient moze wrzucic dowolnie szerokie/wysokie zdjecie - cover kadruje). ──
   Dotyczy tez img wklejonych recznie w tresc WYSIWYG (bez aspect-ratio, ale w ryzach). */
body.page-txt .txt-text > .row img,
body.page-index [data-op-cms-target] .row img {
  max-width: 100%;
  height: auto;
}
/* END §OP-CMS-SECTIONS */


/* ═══════════════════════════════════════════════════════════════
   §OP-DELIVERABLES - kontrakt jakości (lessons/034 back-port biblioteki)
   ---------------------------------------------------------------
   Braki wychwycone przez deliverable-lint (2026-07-17): cookie-hero-overlap
   + H1-discipline (lessons/033). Kanony biblioteczne: layer-home-selfcontained.
   /txt offset pod fixed header - juz w §TRAP-7 (body.page-txt{padding-top:--ido-header-h}).
   ═══════════════════════════════════════════════════════════════ */

/* COOKIE TOAST na home (desktop). HISTORIA: toast szedl do gornego-lewego rogu (top:110px),
   zeby nie zaslanial wyszukiwarki hero. Po odsloneiciu napisow hero (2026-08-10, lessons/052)
   okazalo sie, ze w tym miejscu przykrywa POCZATEK NAZWY OBIEKTU - zmierzone @1440x900:
   toast 64..484 x 110..278, kolizja z H1 348x57 px i z eyebrow 348x20 px. Nazwa musi byc
   bezdyskusyjnie widoczna (zgloszenie klienta), a hero jest wysrodkowany, wiec gorny-lewy rog
   NIE JEST wolny - wolne pasmo jest PONIZEJ wyszukiwarki.
   Zmierzone @1440x900: wyszukiwarka konczy sie na y=580, toast przy bottom:24 zajmuje 708..876
   (margines 128 px). @1440x760: search konczy 513, toast 568..736 (margines 55 px). */
/* POZYCJA = KANON lessons/047: przypiety pod header, `top:110px; bottom:auto`, BEZ bramki
   szerokosci (bramka `min-width:992px` byla wlasnie bledem - na mobile toast zostawal na dole
   i zaslanial CALY przycisk „Sprawdz dostepnosc": zmierzone @375x834 CTA 707..763 vs toast
   649..819 = 307x56 px). Sprawdzone tez, ze toast nie zaslania nawigacji: @1440 zero linkow
   menu, @390 hamburger 12..94 wolny i klikalny (elementFromPoint = navbar-toggler).

   REZERWA W HERO: pozycja pod headerem sama nie wystarcza - po odsloneiciu napisow (lessons/052)
   toast na `top:110px` przykrywal POCZATEK NAZWY OBIEKTU (@1440x900: kolizja z H1 348x57 px).
   Dlatego dopoki zgoda nie jest udzielona, hero rezerwuje pas pod toastem. Hook jest pewny:
   silnik (default13 app.js) robi `body.classList.add('ck_dsclr_v2_freeze_bcg')` przy pokazaniu
   toastu i `.remove(...)` przy „Zamknij" - odczytane z kodu silnika, nie zgadniete. Po zgodzie
   hero wraca do normalnych proporcji. Przeskok po kliknieciu NIE liczy sie do CLS (zmiana w
   500 ms od inputu uzytkownika).

   Zmierzone po zmianie (zero kolizji z eyebrow/H1/lead/wyszukiwarka/CTA na wszystkich):
     1440x900 · 1440x700 · 800x900 · 768x700 · 390x833 - toast 110..280, eyebrow 300+. */
body.page-index #ck_dsclr_v2,
body.page-index .ck_dsclr_v2 {
  top: 110px !important;
  bottom: auto !important;
}
body.page-index.ck_dsclr_v2_freeze_bcg .op-home .op-hero {
  padding-top: 300px;
}
@media (max-width: 820px) {
  /* w pasie kolumnowym karta wyszukiwarki ma ~384px - lead + rezerwa + karta nie zmieszcza sie
     razem, wiec na czas zgody chowamy lead (wraca po „Zamknij"; ten sam komunikat niesie pasek
     USP zaraz pod hero). Zmierzone @390x833: CTA konczy sie na 785, toast na 280. */
  html body.page-index.ck_dsclr_v2_freeze_bcg .op-home .op-hero__lead { display: none; }
  /* Rezerwa zepchnela karte wyszukiwarki dokladnie na wysokosc DEKORACYJNYCH strzalek scroll
     (fixed, prawy-dol) → nachodzily na przycisk „Sprawdz dostepnosc" (zmierzone @375x834:
     #backTop 772..816 vs CTA 777..833 = 16x39 px). Chowamy je TYLKO na czas zgody: przy
     scrollY=0 „do gory" jest i tak bezuzyteczne, a po „Zamknij" karta wraca wyzej i strzalki
     nie koliduja. Priorytet: przycisk rezerwacji > dekoracja. */
  body.page-index.ck_dsclr_v2_freeze_bcg a#backTop,
  body.page-index.ck_dsclr_v2_freeze_bcg #backTop,
  body.page-index.ck_dsclr_v2_freeze_bcg #bounce { display: none !important; }
}

/* H1-DISCIPLINE - dokladnie 1 widoczny H1 / strona (test 07-seo liczy
   getComputedStyle(h1).display, ktory IGNORUJE display:none przodka). Hero-h1
   (.op-hero__title) wycieka do DOM /txt+/offer przez globalny fg_body_top_code;
   systemowy home-h1 siedzi w ukrytym main. Wymuszamy WLASNY display:none. */
html body:not(.page-index) .op-home h1 {
  display: none !important;
}
body.page-index h1:not(.op-hero__title) {
  display: none !important;
}

/* ============================================================================
   RUNDA 21 (2026-09-09) - poprawki ze zgloszenia klienta (Wojciech, Kazilla)
   ============================================================================ */

/* (a) LOGO lekko wieksze (zyczenie klienta). Systemowa regula
   `header .menu-wrapper.clean .navbar-brand img{max-height:85px}` (0,2,3) bila
   nasza `header.default13 .navbar-brand img` (0,2,2) - zmierzone na live: 85px
   mimo wpisanych 52px. Dlatego celujemy w TEN SAM selektor z klasa `.default13`
   (0,3,3), bez `!important`. Plik zrodlowy logo ma 160x160 px, wiec 104 px to
   gorna granica bez rozmycia na ekranie 1x; na retinie warto poprosic klienta
   o wersje >=320 px. */
header.default13 .menu-wrapper.clean .navbar-brand img,
header.default13 .navbar-brand img { max-height: 104px; width: auto; }

/* (b) KADR NIE WYPELNIAL RAMKI (zgloszenie: „zdjecie nie pasuje wielkoscia").
   `.op-figure` ma tylko `min-height`, a NIE `height`, wiec `height:100%` na
   obrazku nie mial bazy procentowej i przegladarka liczyla go jak `auto`:
   zmierzone na sekcji Studio 531x353 px obrazu w ramce 531x440 px = 87 px
   pustego kremowego tla pod zdjeciem. Obraz wyjmujemy z przeplywu i rozciagamy
   na cala ramke - `object-fit: cover` (juz ustawiony) przytnie kazdy format. */
.op-figure > img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* (c) GALERIA: grupy tematyczne wpadaly w KOLUMNY siatki (zgloszenie: „do lekkiej poprawki
   sposob, w jaki wyswietlaja sie zdjecia"). Ta sama klasa `.op-galgrid` sluzy jako kontener
   grup (z body_top) i jako siatka kadrow wewnatrz grupy (buduje ja JS), wiec zewnetrzny grid
   3 x 1fr rozdzielal 5 grup na trzy pionowe slupy, a wewnetrzny dzielil 359 px kolumny na
   kolejne 3 czesci: zmierzone kadry 109 x 240 px przy stronie wysokiej 6785 px. Grupa ma
   zajmowac WSZYSTKIE kolumny - wtedy idzie pod poprzednia na pelnej szerokosci, a jej wlasna
   siatka dostaje pelne 1104 px (kadr ~368 px). Jedna deklaracja, bez zmian w JS i bez `:has`. */
.op-galgrid > .op-galgroup { grid-column: 1 / -1; }

/* (d) PASEK ZGODY NA PODSTRONACH zaslanial tresc (zmierzone 2026-09-09 na /txt/201:
   `#ck_dsclr_v2` jest `fixed`, y=504 przy KAZDEJ pozycji przewijania, a `elementsFromPoint`
   pod jego srodkiem pokazywal zdjecia i kafle galerii). Regula z §COOKIE dotyczy tylko
   `body.page-index` - tam toast siedzi na `top:110px`, a hero rezerwuje pas, wiec home
   zostaje bez zmian. Na pozostalych trasach przypinamy toast do LEWEGO DOLNEGO naroznika:
   strzalki scroll silnika siedza po prawej, wiec kolizji nie ma, a tresc jest wolna.
   Na waskich ekranach toast dostaje marginesy zamiast sztywnych 420 px. */
html body:not(.page-index) #ck_dsclr_v2,
html body:not(.page-index) .ck_dsclr_v2 {
  top: auto !important;
  bottom: 16px !important;
  left: 16px !important;
  right: auto !important;
}
@media (max-width: 600px) {
  html body:not(.page-index) #ck_dsclr_v2,
  html body:not(.page-index) .ck_dsclr_v2 {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}
@media (max-width: 600px) {
  /* Po przypieciu toastu do dolu kolidowal ze strzalka „do gory" (zmierzone @375x812: toast
     12..348 x 626..796, #backTop w 300,750). Ten sam priorytet co na home: pasek zgody wazniejszy
     od dekoracyjnej strzalki, wiec chowamy ja TYLKO na czas zgody (klasa `ck_dsclr_v2_freeze_bcg`
     zdejmuje silnik po „Zamknij"). */
  html body:not(.page-index).ck_dsclr_v2_freeze_bcg a#backTop,
  html body:not(.page-index).ck_dsclr_v2_freeze_bcg #backTop,
  html body:not(.page-index).ck_dsclr_v2_freeze_bcg #bounce { display: none !important; }
}

/* ═══ §OP-WORD-NORM - normalizacja tresci wklejonej z Worda ═════════════════
   Zgloszenie klienta: „gdzie cos nierowno poustawialem, tekst jest przesuniety,
   szczegolnie w zakladce Studio Pogodno".
   Zmierzone na LIVE (/txt/203): **18 akapitow `.MsoNormal`, ZERO prawdziwych list**,
   a wypunktowania to akapity zaczynajace sie od znaku `·` z recznie wpisanymi
   spacjami - raz dziewiecioma, raz trzema. Do tego Word zostawia inline
   `margin-left: 42.9px` i `text-indent: -24px` tylko na jednej z dwoch list.
   Efekt: dwie listy na jednym ekranie stoja na roznych krawedziach (185 vs 143 px).
   Pozostale podstrony sa czyste (Willa 6 prawdziwych list, Okolica 16) - klient
   wkleil z Worda wylacznie te jedna zakladke.

   Tresc siedzi w sekcji typu `text`, czyli w polu EDYTOWALNYM przez klienta -
   dlatego NIE poprawiamy jej recznie (to jego praca i moze ja nadpisac przy
   kazdej edycji). Normalizujemy wygladem, wiec poprawka przetrwa kolejne wklejki. */
html body .txt-text [class*="Mso"],
html body .op-page [class*="Mso"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  line-height: 1.7 !important;
  font-family: inherit !important;
  font-size: inherit !important;
}
/* Akapity-punktory zamieniane skryptem na prawdziwa liste (patrz KONIEC_BODY).
   Gdyby skrypt nie wystartowal, powyzsza regula i tak zrownuje je do jednej
   krawedzi - wiec bez JS jest poprawnie, tylko bez ladnych punktorow. */
html body .op-lista-word {
  list-style: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
}
html body .op-lista-word li {
  position: relative;
  margin: 0 0 8px !important;
  padding-left: 22px !important;
  line-height: 1.7 !important;
  text-indent: 0 !important;
}
/* Klient ma juz regule dekoracyjna na `li::before` (kreska 14x2 px), ktora
   bila nasz punktor przy rownej specyficznosci - stad `!important` i pelna
   sciezka selektora. Zmierzone przed poprawka: width 14px, height 2px. */
html body .txt-text ul.op-lista-word li::before,
html body ul.op-lista-word li::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: .72em !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--op-primary, #8A6A45) !important;
  transform: none !important;
}
/* /§OP-WORD-NORM */

/* ═══ §OP-R22 2026-10-07 - zgloszenie klienta (ticket „kontynuacja strony www", 8 punktow) ═══ */

/* (1) HERO: napis „widac tylko zarys" na zimowym zdjeciu (snieg pod bialym tekstem).
   2026-10-12 decyzja Damiana: BEZ ZADNEGO PRZYCIEMNIENIA zdjecia (elipsa z R22 wygladala jak ciemna
   poswiata - usunieta). Czytelnosc niesie wylacznie cien samych liter (ciasny + szerszy, bez plamy na kadrze).
   NIE przywracaj ::after z gradientem bez pytania (zob. tez decyzja 2026-08-10 wyzej). */
html body.page-index .op-home .op-hero::after { content: none !important; background: none !important; }
html body.page-index .op-home .op-hero__title { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.35) !important; }
html body.page-index .op-home .op-hero__lead { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 10px rgba(0, 0, 0, 0.45) !important; }
html body.page-index .op-home .op-hero__eyebrow { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 1px 8px rgba(0, 0, 0, 0.4) !important; }

/* (4) NAGLOWEK JEDNAKOWY NA KAZDEJ TRASIE. Zmierzone: silnik dokleja na podstronach pozycje
   „Strona glowna", a na /offer i /offers przycisk „Rezerwacja online" - menu mialo inna dlugosc na
   kazdej stronie, wiec „..." i przelacznik jezyka skakaly (1366: x=1100/1048/1082/1020), na 1024
   przycisk spadal do 2. rzedu, a na telefonie logo uciekalo ze srodka na lewo (136 -> 37 px).
   Strone glowna niesie logo, rezerwacje - pozycja menu „Rezerwacja" (jest na kazdej trasie). */
html body:not(#_) header.default13 .navbar-nav > li.nav-item:has(> a.nav-link[href="/"]),
html body:not(#_) header.default13 .navbar-nav > li.nav-item:has(> a.nav-link[href="/en"]),
html body:not(#_) header.default13 .navbar-nav > li.nav-item:has(> a.nav-link[href="/de"]),
html body:not(#_) header.default13 .navbar-nav > li.nav-item:has(> a.nav-link[href="/en/"]),
html body:not(#_) header.default13 .navbar-nav > li.nav-item:has(> a.nav-link[href="/de/"]),
html body:not(#_) header.default13 .navbar-reservation { display: none !important; }
/* Telefon: na stronie glownej ikona i napis „Menu" byly BIALE na kremowym pasku (regula z czasow
   przezroczystego naglowka), na podstronach #282828 - jeden kolor wszedzie. */
html body:not(#_).page-index header.default13 .navbar-toggler i,
html body:not(#_).page-index header.default13 .navbar-toggler span { color: #282828 !important; }

/* (5) PODSTRONY: jedna lewa krawedz dla tytulu, wstepu, akapitow i galerii. Zmierzone na Studio
   (1366): H1 113, wstep i nadtytul 128 (padding 15 px .op-page--sec), akapity 113, zdjecia
   galerii 133 (padding .gallery-lightbox 16 + 4). Do tego puste akapity z Worda (2 x 27 px) i zdjecie
   wysrodkowane w pionie wzgledem dlugiego tekstu (start 263 px nizej niz tekst). */
html body.page-txt .op-page--sec { padding-left: 0 !important; padding-right: 0 !important; }
html body.page-txt .gallery-lightbox.row {
  margin-left: -4px !important;
  margin-right: -4px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body.page-txt .txt-text p.op-pusty { display: none !important; }
html body.page-txt .txt-text .row.mb-5 { align-items: flex-start !important; }
/* (3) „REZERWACJA" = strona obiektu /offer/10: panel rezerwacji (cena, kalendarz, ZAREZERWUJ), zdjecia
   i udogodnienia zostaja, chowamy STARY OPIS obiektu z panelu (tekst ze starej strony: „cztery sypialnie",
   „13 osob" - sprzeczny z tym, co mowi strona). Zrodlo w panelu zostaje nietkniete (klient moze je
   zaktualizowac: Oferta -> obiekt -> opis). */
html body.page-offer #room_desc .room_desc { display: none !important; }
/* Stopka: link „IdoBooking" (dopisany 2026-10-07) dostawal na /contact zloty kolor trasy (body.page-contact a)
   - 3,26:1 na ciemnym pasie (14u). Ten sam kolor co pozostale linki stopki. */
html body:not(#_) .op-footer .ido-ib-link a { color: #DED4C2 !important; }
/* /§OP-R22 */

/* ═══ §OP-R23 2026-10-08 - zaleglosci z nowych asercji (14b/14e/14x/14bd/14g/14h/15) - kanon z library/ ═══ */
/* ═══════════════════════════════════════════════════════════════════════════════
   §LANG-SWITCHER — przelacznik jezyka (naglowek, prawy gorny rog)
   ───────────────────────────────────────────────────────────────────────────────
   BUG-KLASA (2026-07-31, five-stars, zgloszenie Damiana: „ta sekcja jest taka szara"):
   natywny dropdown jezykow default13 to `#language_menu` z tlem **#E5E5E5**, BEZ ramki,
   cienia i promienia, `z-index:auto`, a flagi to PNG **20x13 px** wciete w `display:flex`
   bez odstepow. Wyglada jak systemowy panel sterowania wklejony w premium naglowek.
   Zaden nasz layer tego nie dotykal, wiec KAZDY klient wielojezyczny mial to szare.

   ANATOMIA (z live DOM, nie z domyslu):
     .page-top__language            wrapper (position:relative)
       button.language__toggler     etykieta biezacego jezyka + i.icon-arrow_smaller_down
                                    (+ span.visuallyhidden = nazwa dostepna, NIE RUSZAC)
       #language_menu.language      panel (klasa `.active` gdy otwarty)
         .flags > a[hreflang][title]  link jezyka; `title` = NAZWA jezyka („Polski"/„English")
           img.flag                   PNG 20x13
         .currency > form > select    waluty (u wielu klientow display:none — stylujemy defensywnie)

   ZASADY:
   1. Etykieta jezyka bierze sie z `attr(title)` — silnik podaje ja per jezyk, wiec ZERO
      hardkodowania nazw i zero pracy przy dodaniu kolejnego jezyka.
   2. Aktywny jezyk zaznaczamy STATYCZNIE przez `html[lang="xx"] … a[hreflang="xx"]` —
      bez JS, dziala tez gdy panel renderuje sie po stronie serwera.
   3. Kolor etykiety = `inherit` (dziedziczy po naglowku), zeby przelacznik byl czytelny
      i na przezroczystym naglowku nad hero, i na bialej belce podstron.
   4. `filter` TYLKO na flagach — nigdy na logo powered-by (TRAP-03).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- toggler (etykieta biezacego jezyka) --- */
header .page-top__language .language__toggler {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 6px 2px !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--op-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: inherit !important;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}
header .page-top__language .language__toggler:hover { color: var(--op-primary) !important; }
header .page-top__language .language__toggler i {
  display: inline-block;
  font-size: 9px;
  transition: transform 0.25s ease;
}
header .page-top__language .language__toggler[aria-expanded="true"] i { transform: rotate(180deg); }
header .page-top__language .language__toggler:focus-visible {
  outline: 2px solid var(--op-primary);
  outline-offset: 3px;
}

/* --- panel --- */
header .page-top__language #language_menu.language {
  top: calc(100% + 12px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 178px;
  max-width: calc(100vw - 24px);
  padding: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(140, 106, 60, 0.35) !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 44px rgba(20, 20, 20, 0.16) !important;
  z-index: 1200 !important;
}
/* dziobek — kotwiczy panel wizualnie w togglerze */
header .page-top__language #language_menu.language::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 8px;
  height: 8px;
  background: #FFFFFF;
  border-left: 1px solid rgba(140, 106, 60, 0.35);
  border-top: 1px solid rgba(140, 106, 60, 0.35);
  transform: rotate(45deg);
}

/* --- lista jezykow: flaga + NAZWA z attr(title) --- */
header .page-top__language #language_menu .flags {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
header .page-top__language #language_menu .flags a {
  display: flex !important;
  align-items: center;
  gap: 11px;
  padding: 9px 10px !important;
  margin: 0 !important;
  text-decoration: none !important;
  border-radius: 0;
  transition: background-color 0.2s ease;
}
header .page-top__language #language_menu .flags a::after {
  content: attr(title);
  font-family: var(--op-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--op-text);
  transition: color 0.2s ease;
}
header .page-top__language #language_menu .flags a:hover { background: var(--op-bg, #FCFAF4) !important; }
header .page-top__language #language_menu .flags a:hover::after { color: var(--op-primary); }
header .page-top__language #language_menu .flags a:focus-visible {
  outline: 2px solid var(--op-primary);
  outline-offset: -2px;
}
header .page-top__language #language_menu .flags img.flag {
  width: 24px !important;
  height: 16px !important;
  max-width: none !important;
  object-fit: cover;
  display: block !important;
  border: 1px solid rgba(20, 20, 20, 0.14);
  filter: saturate(0.9);
  transition: filter 0.2s ease, transform 0.2s ease;
}
header .page-top__language #language_menu .flags a:hover img.flag {
  filter: none;
  transform: scale(1.06);
}

/* --- aktywny jezyk: pasek zlota + etykieta w kolorze marki (bez JS) --- */
html[lang="pl"] header .page-top__language #language_menu .flags a[hreflang="pl"],
html[lang="en"] header .page-top__language #language_menu .flags a[hreflang="en"],
html[lang="de"] header .page-top__language #language_menu .flags a[hreflang="de"],
html[lang="es"] header .page-top__language #language_menu .flags a[hreflang="es"],
html[lang="cs"] header .page-top__language #language_menu .flags a[hreflang="cs"],
html[lang="uk"] header .page-top__language #language_menu .flags a[hreflang="uk"] {
  background: var(--op-bg, #FCFAF4) !important;
  box-shadow: inset 2px 0 0 var(--op-primary);
}
html[lang="pl"] header .page-top__language #language_menu .flags a[hreflang="pl"]::after,
html[lang="en"] header .page-top__language #language_menu .flags a[hreflang="en"]::after,
html[lang="de"] header .page-top__language #language_menu .flags a[hreflang="de"]::after,
html[lang="es"] header .page-top__language #language_menu .flags a[hreflang="es"]::after,
html[lang="cs"] header .page-top__language #language_menu .flags a[hreflang="cs"]::after,
html[lang="uk"] header .page-top__language #language_menu .flags a[hreflang="uk"]::after {
  color: var(--op-primary);
}
html[lang="pl"] header .page-top__language #language_menu .flags a[hreflang="pl"] img.flag,
html[lang="en"] header .page-top__language #language_menu .flags a[hreflang="en"] img.flag,
html[lang="de"] header .page-top__language #language_menu .flags a[hreflang="de"] img.flag,
html[lang="es"] header .page-top__language #language_menu .flags a[hreflang="es"] img.flag,
html[lang="cs"] header .page-top__language #language_menu .flags a[hreflang="cs"] img.flag,
html[lang="uk"] header .page-top__language #language_menu .flags a[hreflang="uk"] img.flag { filter: none; }

/* --- waluty (gdy klient je pokazuje) --- */
header .page-top__language #language_menu .currency {
  margin: 6px 0 0 !important;
  padding: 8px 10px 2px !important;
  border-top: 1px solid rgba(20, 20, 20, 0.1);
}
header .page-top__language #language_menu .currency select {
  width: 100%;
  padding: 7px 8px;
  background: #FFFFFF;
  border: 1px solid rgba(20, 20, 20, 0.16);
  border-radius: 0;
  font-family: var(--op-font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--op-text);
}
header .page-top__language #language_menu .currency select:focus {
  outline: 0;
  border-color: var(--op-primary);
  box-shadow: 0 0 0 3px rgba(176, 145, 79, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  header .page-top__language .language__toggler i,
  header .page-top__language #language_menu .flags a,
  header .page-top__language #language_menu .flags img.flag { transition: none !important; }
  header .page-top__language #language_menu .flags a:hover img.flag { transform: none !important; }
}
/* --- TELEFON: rzad czterech przyciskow zamiast pudelka panelu (2026-10-02, wschodnia-elegans) ---
   Silnik w szufladzie chowa .language__toggler (span display:none, przycisk 4x12 px) i pokazuje liste na stale,
   a regula panelu wyzej obudowywala ja bialym pudelkiem 154 px z dziobkiem. Na telefonie jeden rzad
   flaga + KOD jezyka: jedno stukniecie zmienia jezyk, nic nie zajmuje pol ekranu. Asercja 14bd. */
@media (max-width: 991px) {
  header .page-top__language #language_menu.language {
    position: static !important; display: block !important; min-width: 0; max-width: none; margin: 18px 0 0 !important;
    padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
  }
  header .page-top__language #language_menu.language::after { content: none !important; display: none !important; }
  /* 4 przyciski w JEDNYM rzedzie przy kolumnie szuflady 260 px (zmierzone: przy padding 12 i fladze 24 px
     wychodzilo 4 x 74 px = dwa rzedy) */
  header .page-top__language #language_menu .flags { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px; }
  header .page-top__language #language_menu .flags a {
    gap: 5px; padding: 7px 8px !important; border: 1px solid rgba(20, 20, 20, 0.14); border-radius: 999px;
    background: transparent !important; box-shadow: none !important;
  }
  header .page-top__language #language_menu .flags a::after { content: attr(hreflang) !important; text-transform: uppercase; letter-spacing: .08em; font-size: 11px !important; }
  header .page-top__language #language_menu .flags a img.flag { width: 20px !important; height: 13px !important; }
  html[lang="pl"] header .page-top__language #language_menu .flags a[hreflang="pl"],
  html[lang="en"] header .page-top__language #language_menu .flags a[hreflang="en"],
  html[lang="de"] header .page-top__language #language_menu .flags a[hreflang="de"],
  html[lang="es"] header .page-top__language #language_menu .flags a[hreflang="es"],
  html[lang="cs"] header .page-top__language #language_menu .flags a[hreflang="cs"],
  html[lang="uk"] header .page-top__language #language_menu .flags a[hreflang="uk"] {
    border-color: var(--op-primary) !important; background: var(--op-bg, #FCFAF4) !important;
  }
  header .page-top__language #language_menu .flags img.flag { filter: none !important; }
}
/* /§LANG-SWITCHER */

/* ── §COOKIE-PASYWNY: baner zgody w LEWYM DOLNYM rogu (decyzja Damiana 2026-10-01, lessons/102) ──
   Silnik maluje toast `--passive` na ciemno (link w kolorze marki niewidoczny) i ~420x220, przez co
   wchodzil na wyszukiwarke hero. Kanon: jasna karta, desktop plaski pasek 600 px (tekst i „Zamknij"
   w jednym wierszu, ~135 px), telefon pelna szerokosc, 11 px. Wariant `--blocked` (modal prawny) NIETKNIETY.
   Zmierzone u-aniolka: 1280x800 wyszukiwarka do 589, baner od 649; 375x812 karta do 567, baner od 612. */
html body #ck_dsclr_v2.--passive, html body.page-index #ck_dsclr_v2.--passive {
  top: auto !important; bottom: 16px !important; left: 16px !important; right: auto !important;
  width: min(380px, calc(100vw - 32px)) !important; max-width: none !important; transform: none !important;
  padding: 14px 16px !important; border-radius: 16px !important; box-shadow: 0 18px 44px rgba(8,16,11,.24) !important;
  background: #FFFFFF !important; color: var(--xx-text, #1A1A1A) !important; border: 1px solid rgba(0,0,0,.10) !important;
}
html body #ck_dsclr_v2.--passive p { color: var(--xx-text-soft, #3A3A3A) !important; font-size: 12px !important; line-height: 1.45 !important; margin: 0 0 10px !important; padding-right: 22px; }
html body #ck_dsclr_v2.--passive a { color: var(--xx-primary, #1A1A1A) !important; font-weight: 800; text-decoration: underline !important; }
html body #ck_dsclr_v2.--passive .ck_dsclr_x_v2, html body #ck_dsclr_v2.--passive .ck_dsclr_x_v2 i { color: var(--xx-text-muted, #6B6B6B) !important; }
html body #ck_dsclr_v2.--passive .ck_dsclr__btn_v2 { color: #FFFFFF !important; padding: 8px 18px !important; min-height: 0 !important; border-radius: 10px !important; }
@media (min-width: 768px) {
  html body #ck_dsclr_v2.--passive, html body.page-index #ck_dsclr_v2.--passive { width: min(600px, calc(100vw - 32px)) !important; }
  html body #ck_dsclr_v2.--passive .ck_dsclr__sub_v2 { display: flex !important; align-items: center; gap: 18px; }
  html body #ck_dsclr_v2.--passive .ck_dsclr__sub_v2 p { margin: 0 !important; flex: 1 1 auto; }
  html body #ck_dsclr_v2.--passive .ck_dsclr__sub_v2 > div { flex: 0 0 auto; margin: 0 26px 0 0 !important; }
}
@media (max-width: 767px) {
  html body #ck_dsclr_v2.--passive, html body.page-index #ck_dsclr_v2.--passive { left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important; padding: 10px 12px !important; }
  html body #ck_dsclr_v2.--passive p { font-size: 11px !important; line-height: 1.4 !important; margin-bottom: 8px !important; }
}

/* telefon: zwarty pasek 2x2 (mickiewicza40 2026-10-01): jedna kolumna miala 366 px @375 i wchodzila pod baner
   cookies w lewym dolnym rogu. Lokalizacja na cala szerokosc, daty obok siebie, goscie + przycisk w jednym rzedzie. */
@media (max-width: 560px) {
  .op-search--bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .op-search--bar .op-search__group--loc { grid-column: 1 / -1; }
  .op-search--bar .op-search__group, .op-search--bar .op-search__group--guests { padding: 10px 12px; min-width: 0; }
  .op-search--bar .op-search__submit { width: auto; margin: 8px 6px 6px; padding: 10px; font-size: 14px; line-height: 1.15; white-space: normal; text-align: center; align-self: center; }
  .op-search--bar .op-search__submit svg { display: none; }
}
/* siatka 2x2 (<=560): kreski-dzielniki z ukladu kolumnowego (::before na kolejnych grupach) w siatce stawaly
   w przypadkowych miejscach (nad „Wyjazd", pod „Przyjazd") - w siatce dzielniki zbedne (wschodnia 2026-10-01) */
@media (max-width: 560px) { .op-search--bar .op-search__group + .op-search__group::before { display: none !important; } }

/* ── §PASEK-CTA: staly przycisk rezerwacji na telefonie (wstawia ido-mobile-nav.js, lessons/060 §B, test 14g) ── */
.op-pasek { display: none; }
@media (max-width: 767px) {
  .op-pasek { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1050; transform: translateY(calc(100% + 28px)); transition: transform .3s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
  .op-pasek.op-pasek--on { transform: none; pointer-events: auto; }
  body:has(.op-pasek--on) #backTop { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }   /* strzalka „do gory" nad paskiem, nie pod nim (villa-haffnera 2026-10-07) */
  .op-pasek__btn { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: max(10px, 10px); background: var(--xx-secondary) !important; color: #FFFFFF !important; font-family: var(--xx-font-body); font-weight: 800; font-size: 16px; text-decoration: none !important; box-shadow: 0 14px 34px rgba(8,16,11,.32); }
  body footer { padding-bottom: 84px; }   /* pasek nie zaslania dolu stopki */
}
@media (prefers-reduced-motion: reduce) { .op-pasek { transition: none; } }

/* ── §LEAFLET-KROJ: kontrolki i podpisy mapy w kroju marki (u-aniolka + mickiewicza40 2026-10-01, spec 15:
   Leaflet daje „Helvetica Neue" na linkach, „Lucida Console" na +/- i „Tahoma" na zamknieciu dymka) ── */
html body .leaflet-container, html body .leaflet-container a, html body .leaflet-control-zoom a,
html body .leaflet-control-attribution, html body .leaflet-popup-close-button, html body .leaflet-popup-content {
  font-family: var(--xx-font-body, system-ui, sans-serif) !important;
}

/* 10b. AKORDEON NA TELEFONIE (<=979px, bramka silnika) — lessons/053 (easyrent), u-aniolka 2026-10-01.
   Na telefonie `.tabs__item` nie jest juz sama etykieta: ZAWIERA CALY PANEL (opis, kalendarz, cennik).
   Regula etykiet wyzej (nowrap, uppercase, 12 px, inline-flex row) dziedziczyla sie do tresci:
   tabela cennika i kalendarz wychodzily 178 px za ekran, a `.tabs` z overflow-x:hidden je ucinal
   (body czyste, wiec 01-smoke tego nie widzi; lapie 14b „przycinanie na krawedzi").
   Etykieta (`> span`) zostaje; panel dostaje kolumne, zwezanie i zwykla typografie. */
@media (max-width: 979px) {
  html body.page-offer .tabs__item { flex-direction: column !important; align-items: stretch !important; min-width: 0 !important; max-width: 100% !important; }
  html body.page-offer .tabs__item > *, html body.page-offer .tabs .tab { min-width: 0 !important; max-width: 100% !important; }
  html body.page-offer .tabs__item > div, html body.page-offer .tabs__item > div *:not(.btn):not(.btn *) {
    white-space: normal !important; text-transform: none !important; letter-spacing: normal !important; overflow-wrap: anywhere !important;
  }
  html body.page-offer .tabs__item > div { font-size: 15px !important; font-weight: 400 !important; color: var(--xx-text, #1A1A1A) !important; overflow-x: visible !important; }
  /* kalendarz ma min-content ~436 px i nie zawinie sie sensownie - tylko on dostaje wlasny scroll */
  html body.page-offer #calendar-data, html body.page-offer #calendar-data_mobile { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  html body.page-offer .season-row_sub { min-width: 0 !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  /* tabela sezonu ma min-content 312 px - bez `fixed` nie zejdzie do szerokosci kolumny */
  html body.page-offer .season-row_sub table { width: 100% !important; max-width: 100% !important; table-layout: fixed !important; }
  html body.page-offer .room_rez .btn { white-space: normal !important; }
}
/* opis lozek z panelu: silnik daje `.roomspace.sublink > span{white-space:nowrap}` - dlugi tekst (508 px) wypychal strone */
html body.page-offer .roomspace.sublink > span, html body.page-offer .roomspace.sublink > span * { white-space: normal !important; max-width: 100%; }

/* Cookie: osada miala na home toast POD naglowkiem (top:110px) + rezerwe 300 px w hero na czas zgody
   (runda 08-10). Kanon od 2026-10-01 = zwarta karta w lewym dolnym rogu (wyzej), wiec rezerwa znika,
   a lead wraca. Na telefonie wyszukiwarka 2x2 (wyzej) - karta 1-kolumnowa wchodzila pod baner. */
html body.page-index.ck_dsclr_v2_freeze_bcg .op-home .op-hero { padding-top: 0; }
@media (max-width: 820px) {
  /* naglowek telefonu ma 133 px - 84 px chowalo nadtytul pod nim (takze bez banera zgody) */
  html body.page-index .op-home .op-hero, html body.page-index.ck_dsclr_v2_freeze_bcg .op-home .op-hero { padding-top: 150px !important; }
  /* na czas zgody lead znika (wraca po „Zamknij"): bez tego karta wyszukiwarki 406..616 schodzila 4 px pod baner 612+ */
  html body.page-index.ck_dsclr_v2_freeze_bcg .op-home .op-hero__lead { display: none !important; }
}
@media (max-width: 820px) { html body.page-index .op-home .op-hero__search:empty { min-height: 212px; } }

/* Stopka: default13 daje footer{filter:brightness(.97)} - przygasza znak licencyjny (14e). Znak Powered by
   przenosi JS do pasa platnosci (14x); tu rozmiar wg layer2 §PAS-PLATNOSCI. */
html body:not(#_) footer, html body:not(#_) footer.op-footer { filter: none !important; }
html body:not(#_) .op-footer .footer-contact-baner { background: transparent !important; display: inline-flex !important; gap: 28px !important; align-items: center !important; flex-wrap: wrap !important; padding: 0 !important; box-shadow: none !important; }
html body:not(#_) .op-footer .footer-contact-baner > .powered_by { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
html body:not(#_) .powered_by img, html body:not(#_) .powered_by_logo img { height: 52px !important; width: auto !important; max-width: none !important; max-height: none !important; padding: 0 !important; box-sizing: content-box !important; filter: none !important; opacity: 1 !important; }
@media (max-width: 560px) { html body:not(#_) .powered_by img { height: 44px !important; } }

/* Szuflada telefonu: silnik ustawia jej w linii top = wysokosc naglowka, a 100vh wypychalo dol 133 px
   pod ekran (14bd). bottom:0 konczy ja na dole ekranu. */
@media (max-width: 991px) {
  html body:not(#_) #navbar[style*="top"], html body.op-nav-open:not(#_) #navbar { bottom: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; }
}

/* Telefon: odsloniecie z boku (translateX -30 px) wystawalo poza ekran = poziome przewijanie 10 px (14h). */
@media (max-width: 767px) {
  .ido-reveal--left:not(.ido-revealed), .ido-reveal--right:not(.ido-revealed) { transform: translateY(30px) !important; }
}

/* H1 (14k): tytul hero to teraz <p> (globalny body_top wstrzykiwal drugi H1 na kazda trase). Jedynym H1 strony
   glownej jest systemowy naglowek z panelu - schowany WIZUALNIE (sr-only), nie display:none, zeby zostal dla Google. */
html body.page-index:not(#_) h1:not(.op-hero__title) {
  display: block !important; position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* /contact: ostatni kontener dotykal stopki (spec 15, min. 24 px). */
html body.page-contact #pageContent > .contact:last-child, html body.page-contact #pageContent > .container:last-child { padding-bottom: 48px !important; }
@media (max-width: 560px) { html body:not(#_) .op-hero__search .op-search--bar { display: grid !important; } }
/* /§OP-R23 */
/* §OP-R24 (2026-10-09, ticket: biale fragmenty liter nad napisem w hero)
   Na desktopie hero (min-height 84vh, align-items:center) zaczyna sie pod przyklejonym naglowkiem 120 px.
   Przy niskim oknie (laptop, np. 1280x640) wysrodkowana tresc wjezdzala pod naglowek i z nadtytulu
   „Milkow · Karkonosze" zostawaly dolne krawedzie liter (zmierzone: nadtytul 106 px, naglowek do 120 px).
   Gorny odstep = naglowek + 24 px: tresc centruje sie w pasie pod naglowkiem, a na niskim ekranie hero rosnie.
   Telefon ma ten sam mechanizm od R23 (padding-top 150 px). Po zmianie nadtytul >= 158 px na 8 wysokosciach okna. */
@media (min-width: 821px) {
  html body.page-index .op-home .op-hero, html body.page-index.ck_dsclr_v2_freeze_bcg .op-home .op-hero { box-sizing: border-box !important; padding-top: 144px !important; padding-bottom: 40px !important; }
}
/* /§OP-R24 */
/* §OP-R25 (2026-10-09, ticket 1240145695) - ostre logo „Willa Osada Pogodno"
   Panel generuje z logo obiektu tylko wideLogo.png 160x160 (nieprzezroczyste, biale tlo), a naglowek
   pokazuje je w 104 px - na ekranach 2x i 3x obraz jest rozmyty. Tu podmieniamy obraz na plik klienta
   (1254 px, przyciety do tych samych proporcji, czarny znak na przezroczystym tle, WebP 320x320, 11 kB).
   Przegladarka bez obslugi content na img pokazuje dalej obraz z panelu - nic sie nie psuje. */
header.default13 .navbar-brand img[src*="wideLogo"] { content: url("data:image/webp;base64,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"); }
/* /§OP-R25 */