@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════════
   EASY RENT APARTMENTS — THEME (Layer 0)
   Vibe: modern-minimal (override → brand RED + chłodna biel/szarości)
   Prefix: er- (vibe tokens) | kontrakt biblioteki: --ido-* (mapowany niżej)
   Panel 7141 | default13 + fullpage.js | PL+EN
   Czerwień #D6262C = DEFAULT (do kalibracji z logo hi-res)
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ---- ER vibe tokens (modern-minimal + red) ---- */
  --er-primary:          #D6262C;
  --er-primary-light:    #E84B50;
  --er-primary-dark:     #A81B20;
  --er-primary-soft:     rgba(214, 38, 44, 0.08);
  --er-secondary:        #16181D;
  --er-secondary-light:  #2A2D33;
  --er-secondary-dark:   #0B0C0F;
  --er-cream:            #F5F6F7;
  --er-cream2:           #EDEFF1;
  --er-cream3:           #E4E6E9;
  --er-bg:               #FFFFFF;
  --er-text:             #16181D;
  --er-text-soft:        #3A3D42;
  --er-text-muted:       #5E6268; /* audyt 2026-06-23: #71757B dawał 4.29:1 na cream (<4.5 WCAG 1.4.3); #5E6268 = 5.7:1 */
  --er-border:           #E4E6E9;
  --er-gray-mid:         #9AA0A6;
  --er-shadow-sm:        0 1px 3px rgba(15, 15, 14, 0.08);
  --er-shadow-md:        0 6px 24px rgba(15, 15, 14, 0.10);
  --er-shadow-lg:        0 16px 48px rgba(15, 15, 14, 0.12);
  --er-gradient-primary: linear-gradient(135deg, #D6262C 0%, #A81B20 100%);
  --er-gradient-accent:  linear-gradient(135deg, #16181D 0%, #0B0C0F 100%);
  --er-radius:           8px;
  --er-radius-lg:        14px;
  --er-ease:             cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- aliasy używane przez layer4/7/8 (z renamu --er-) ---- */
  --er-accent:           var(--er-primary-light);
  --er-dark:             var(--er-secondary);      /* #16181D near-black */
  --er-white:            #FFFFFF;
  --er-hero-bg:          var(--er-bg);             /* białe tło tekstu hero split-half */
  --er-footer-bg:        #16181D;                  /* ciemna stopka (verify powered-by w Phase 5) */
  --er-shadow:           var(--er-shadow-md);
  --er-font-heading:     'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --er-font-body:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Kontrakt biblioteki (layer1/2 traps+components) ---- */
  --ido-primary:      var(--er-primary);
  --ido-secondary:    var(--er-primary-dark);   /* używane jako hover .btn → ciemniejsza czerwień */
  --ido-accent:       var(--er-primary-light);
  --ido-bg:           var(--er-bg);
  --ido-dark:         var(--er-text);
  --ido-light:        #FFFFFF;
  --ido-font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ido-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ido-radius:       var(--er-radius);
  --ido-header-h:     80px;   /* default13 — kalibracja po live verify */
}

/* ═══════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY — modern-minimal (Manrope nagłówki / Inter body)
   ═══════════════════════════════════════════════════════════════ */
body,
body.default13 {
  font-family: var(--ido-font-body) !important;
  color: var(--er-text) !important;
  background: var(--er-bg) !important;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.er-h1, .er-h2, .er-h3, .er-h4 {
  font-family: var(--ido-font-heading) !important;
  color: var(--er-text);
}
h1, .er-h1 { font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2, .er-h2 { font-weight: 700; line-height: 1.14; letter-spacing: -0.01em; font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h3, .er-h3 { font-weight: 700; line-height: 1.2;  font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
h4, .er-h4 { font-weight: 600; line-height: 1.3;  font-size: clamp(1.05rem, 2vw, 1.25rem); }
p { color: var(--er-text-soft); }
a { color: var(--er-primary); }
a:hover { color: var(--er-primary-dark); }
.er-muted { color: var(--er-text-muted); }
.er-accent { color: var(--er-primary); }

/* ═══════════════════════════════════════════════════════════════
   Poniżej: warstwy biblioteki (1,2,3,4,7,8) — er- → er-
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════ LIBRARY: layer1-traps ═══════════════ */
/* ═══════════════════════════════════════════════════════════════
   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 #D6262C and
   #A81B20 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 #D6262C and #A81B20. */
.formbutton,
#iai_book_form .formbutton {
  background: #D6262C !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: #A81B20 !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:
     #D6262C   → client primary color hex (e.g. #4A6741)
     #A81B20 → 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: #D6262C !important;
  background: #D6262C !important;
  left: auto !important;
  right: 32px !important;
  transform: none !important;
  margin-left: 0 !important;
}

/* Back-to-top button */
#backTop {
  background: #D6262C !important;
}
#backTop:hover {
  background: #A81B20 !important;
}

/* Cookie consent banner */
.ck_dsclr__btn_v2 {
  background: #D6262C !important;
}
.ck_dsclr__btn_v2:hover {
  background: #A81B20 !important;
}
.ck_dsclr_v2 a {
  color: #D6262C !important;
}
.ck_dsclr_x_v2 {
  color: #D6262C !important;
}

/* Skip-to-content accessibility link */
.skip_link {
  background: #D6262C !important;
  color: #fff !important;
}

/* ═══════════════ LIBRARY: layer2-components ═══════════════ */
/*
 * 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;
  }
}

/* ═══════════════ LIBRARY: layer3-offer-page-base ═══════════════ */
/* ═══════════════════════════════════════════════════════════════
   LAYER 3 — /OFFER/N/ PAGE BASE
   Reusable starter dla każdego nowego projektu IdoBooking.
   Adaptuj kolory przez podmianę CSS variables — zmienne `--er-*`
   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(--er-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(--er-font-heading, 'Playfair Display', serif) !important;
  font-size: clamp(32px, 4.4vw, 46px) !important;
  font-weight: 400 !important;
  color: var(--er-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(--er-font-heading, 'Playfair Display', serif) !important;
  color: var(--er-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(--er-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(--er-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(--er-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(--er-primary, #722F37) !important;
  border-bottom-color: var(--er-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(--er-cream, #F2EDE4) !important;
  border: 1px solid var(--er-border, #E5DDD0) !important;
  border-radius: var(--er-radius-lg, 16px) !important;
  padding: 24px 32px !important;
  max-width: 280px !important;
  font-family: var(--er-font-heading, 'Playfair Display', serif) !important;
  font-size: 18px !important;
  color: var(--er-text, #1A1A1A) !important;
  box-shadow: var(--er-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(--er-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(--er-cream, #F2EDE4) !important;
  border-radius: var(--er-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(--er-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(--er-font-body, 'DM Sans', sans-serif) !important;
  color: var(--er-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(--er-primary, #722F37) !important;
  font-family: var(--er-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(--er-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(--er-white, #FFFFFF) !important;
  border-radius: var(--er-radius-lg, 16px) !important;
  border: 1px solid var(--er-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(--er-white, #FFFFFF) !important;
  border-radius: var(--er-radius-lg, 16px) !important;
  border: 1px solid var(--er-border, #E5DDD0) !important;
  padding: 24px !important;
  box-shadow: var(--er-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(--er-font-body, 'DM Sans', sans-serif) !important;
  font-size: 15px !important;
  border: 1px solid var(--er-border, #E5DDD0) !important;
  border-radius: var(--er-radius, 8px) !important;
  padding: 12px 16px !important;
  min-height: 46px !important;
  background: var(--er-white, #FFFFFF) !important;
}
html body.page-offer input:focus,
html body.page-offer select:focus,
html body.page-offer textarea:focus {
  border-color: var(--er-primary, #722F37) !important;
  box-shadow: 0 0 0 3px var(--er-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(--er-shadow, 0 4px 30px rgba(26,26,26,0.08)) !important;
  border-bottom: 1px solid var(--er-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(--er-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(--er-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(--er-primary, #722F37) !important;
  border-bottom-color: var(--er-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(--er-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(--er-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(--er-primary, #722F37) !important;
  border-bottom-color: var(--er-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;
}


/* ──────────────────────────────────────────────────────────
   PRZY KOPIOWANIU DO NOWEGO PROJEKTU:
   1. Replace WSZYSTKIE --er-* na własny prefix klienta (--pk-, --mc-, etc.)
   2. Upewnij się że masz w :root design tokens:
      --er-primary (akcent), --er-text, --er-text-soft, --er-text-muted,
      --er-cream, --er-white, --er-bg, --er-border,
      --er-font-heading, --er-font-body,
      --er-radius, --er-radius-lg, --er-shadow,
      --er-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 text-align: center + display: flex
      - .container-hotspot display: none
   ────────────────────────────────────────────────────────── */

/* ═══════════════ LIBRARY: layer4-variety-patterns ═══════════════ */
/* ═══════════════════════════════════════════════════════════════
   LAYER 4 — VARIETY PATTERNS (70 wariantów sekcji)
   Modular section styles. Aktywacja: <section class="er-hero er-hero--asymmetric-grid">.
   JARVIS pickuje 1 wariant per sekcja per klient (z vibe-presets.json).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ═══════════════════════════════════════════════════════════════
   END OF LAYER 4 — VARIETY PATTERNS
   70 variants across 9 section types.
   ═══════════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── MODAL BASE (positioning) ───────────────────────────────── */
.er-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--er-cream);
  color: var(--er-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 er-modal-fade-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.er-modal--fade-in.er-active {
  animation: er-modal-fade-in 0.3s var(--er-ease) forwards;
}

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

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

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

/* ── MODAL CLOSE (exit animation) ───────────────────────────── */
.er-modal.er-closing {
  animation: er-modal-close 0.25s var(--er-ease) forwards !important;
}
@keyframes er-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 ────────────────────────────────────────────── */
.er-skeleton {
  display: block;
  background-color: var(--er-cream);
  border-radius: 6px;
  animation: er-skeleton-pulse 1.5s var(--er-ease) infinite;
  pointer-events: none;
  user-select: none;
  color: transparent;
}
@keyframes er-skeleton-pulse {
  0%, 100% { background-color: var(--er-cream); }
  50%      { background-color: var(--er-cream3, #e8e2d8); }
}
.er-skeleton--text {
  height: 1em;
  width: 100%;
  margin-bottom: 0.5em;
  border-radius: 4px;
}
.er-skeleton--text:last-child {
  width: 70%;
  margin-bottom: 0;
}
.er-skeleton--title {
  height: 1.4em;
  width: 60%;
  margin-bottom: 0.75em;
  border-radius: 4px;
}
.er-skeleton--circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.er-skeleton--image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}
.er-skeleton--button {
  width: 120px;
  height: 44px;
  border-radius: 8px;
}

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

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

/* ── 2. INPUT ERROR (red x mark) ────────────────────────────── */
.er-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(--er-ease);
}

/* ── 3. ERROR MESSAGE (below input) ─────────────────────────── */
.er-input-error-msg {
  color: #E74C3C;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.er-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 er-input-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
.er-input--shake {
  animation: er-input-shake 0.3s var(--er-ease);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ═══════════════ LIBRARY: layer8-dividers-patterns ═══════════════ */
/* ═══════════════════════════════════════════════════════════════
   LAYER 8 — DIVIDERS + PATTERNS + TEXTURES
   Visual accents do separowania sekcji i bogacenia teł.

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

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


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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

.er-blob--primary { color: var(--er-primary, #722F37); }
.er-blob--secondary { color: var(--er-secondary, #1A2B4A); }
.er-blob--accent { color: var(--er-accent, #C9A961); }
.er-blob--neutral { color: var(--er-cream3, #DCDCD0); }

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


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

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

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

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

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


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

.er-pattern--dots.er-pattern--primary {
  background-image: radial-gradient(rgba(114, 47, 55, 0.18) 1px, transparent 1px);
}
.er-pattern--dots.er-pattern--accent {
  background-image: radial-gradient(rgba(201, 169, 97, 0.22) 1px, transparent 1px);
}
.er-pattern--dots.er-pattern--secondary {
  background-image: radial-gradient(rgba(26, 43, 74, 0.20) 1px, transparent 1px);
}

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

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


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

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

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

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

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

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


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

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

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

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


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


/* ═══════════════════════════════════════════════════════════════
   §ER-CLIENT — Easy Rent overrides (NA KOŃCU = najwyższy priorytet)
   Panel 7141 | default13 + fullpage.js | modern-minimal + red
   ═══════════════════════════════════════════════════════════════ */

/* --- TRAP-09: Ken Burns zoom kill (default13 hero #parallax_topslider) ---
   Recon 7141: #parallax_topslider obecny. Bez tego hero startuje scale(1.1). */
#parallax_topslider .slick-track img,
#parallax_topslider .slick-track img.animate,
.section.parallax .slick-track img,
.section.parallax .slick-track img.animate {
  transform: scale(1) !important;
  transition: none !important;
}

/* --- navbar-brand wideLogo (recon: 160px) — nie kadruj, hug do logo --- */
.navbar-brand,
header.default13 .navbar-brand {
  height: auto !important;
  min-height: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.navbar-brand img,
header.default13 .navbar-brand img {
  object-fit: contain !important;
  height: auto !important;
  max-height: 52px !important;
  width: auto !important;
}

/* --- Powered by IdoBooking — wymóg licencyjny (opacity ≥0.85, widoczne) ---
   FIX: biblioteka layer1 ustawia opacity:0.3 + invert (za mało / wymusza biel).
   Override do pełnej widoczności. Wariant filtra POTWIERDZIĆ live wg footer bg. */
.powered_by_logo img,
.powered-by-idobooking img,
img[src*="powered"] {
  filter: none !important;
  opacity: 1 !important;
}

/* --- fullpage.js: stabilność (brak poziomego page-pan na home) --- */
body.page-index { overflow-x: hidden !important; }

/* --- Reveal safety: bez JS pokaż .er-reveal (inaczej opacity:0 = niewidoczne) ---
   .ido-reveal ma już fallback w layer2; tu domykamy drugi system (layer7). */
html:not(.ido-js) .er-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   §ER-SECTIONS — własne wzorce sekcji (modern-minimal + red)
   Używane na podstronach (body_top) i homepage. Klasy er-*.
   ═══════════════════════════════════════════════════════════════ */

/* --- Page hero (pasek tytułu podstrony) --- */
.er-pagehero {
  background: var(--er-cream);
  padding: clamp(48px, 8vw, 110px) clamp(20px, 4vw, 48px) clamp(40px, 6vw, 80px);
  border-bottom: 1px solid var(--er-border);
}
.er-pagehero__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.er-pagehero__kicker {
  display: inline-block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--er-primary); font-weight: 600; margin-bottom: 16px;
}
.er-pagehero__title { font-size: clamp(30px, 5vw, 52px); margin: 0 0 18px; color: var(--er-text); }
.er-pagehero__subtitle { font-size: clamp(15px, 1.4vw, 18px); color: var(--er-text-soft); line-height: 1.7; margin: 0 auto; max-width: 680px; }

/* --- Sekcja generyczna (wrapper + nagłówek) --- */
.er-section { padding: clamp(56px, 8vw, 110px) clamp(20px, 4vw, 48px); max-width: 1240px; margin: 0 auto; }
.er-section--alt { background: var(--er-cream); max-width: none; }
.er-section--alt > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.er-section__head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 5vw, 64px); }
.er-section__kicker { display: inline-block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--er-primary); font-weight: 600; margin-bottom: 14px; }
.er-section__title { font-size: clamp(26px, 3.4vw, 42px); margin: 0 0 16px; color: var(--er-text); }
.er-section__lead { font-size: clamp(15px, 1.3vw, 17px); color: var(--er-text-soft); line-height: 1.7; margin: 0; }

/* --- Karty (grid responsywny) --- */
.er-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(20px, 3vw, 32px); }
.er-card { background: var(--er-bg); border: 1px solid var(--er-border); border-radius: var(--er-radius-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--er-shadow-sm); transition: transform .3s var(--er-ease), box-shadow .3s var(--er-ease); }
.er-card:hover { transform: translateY(-4px); box-shadow: var(--er-shadow-md); }
.er-card__icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--er-primary-soft); color: var(--er-primary); margin-bottom: 18px; }
.er-card__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.er-card__title { font-family: var(--er-font-heading); font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--er-text); }
.er-card__text { font-size: 15px; color: var(--er-text-soft); line-height: 1.65; margin: 0; }

/* --- Kroki procesu (Współpracuj z nami) --- */
.er-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(20px, 3vw, 32px); counter-reset: erstep; }
.er-step { position: relative; padding: 28px 24px; background: var(--er-bg); border: 1px solid var(--er-border); border-radius: var(--er-radius-lg); }
.er-step::before { counter-increment: erstep; content: counter(erstep); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--er-primary); color: #fff; font-family: var(--er-font-heading); font-weight: 700; margin-bottom: 16px; }
.er-step__title { font-family: var(--er-font-heading); font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--er-text); }
.er-step__text { font-size: 15px; color: var(--er-text-soft); line-height: 1.6; margin: 0; }

/* --- Rabaty partnerskie (3 kategorie) --- */
.er-partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 3vw, 32px); }
.er-partner-cat { background: var(--er-bg); border: 1px solid var(--er-border); border-top: 3px solid var(--er-primary); border-radius: var(--er-radius-lg); padding: 28px 26px; box-shadow: var(--er-shadow-sm); }
.er-partner-cat__title { font-family: var(--er-font-heading); font-size: 19px; font-weight: 700; margin: 0 0 16px; color: var(--er-text); }
.er-partner-list { list-style: none; padding: 0; margin: 0; }
.er-partner-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--er-border); font-size: 15px; color: var(--er-text-soft); }
.er-partner-list li:last-child { border-bottom: 0; }
.er-partner-list b { color: var(--er-primary); font-weight: 700; white-space: nowrap; }

/* --- Kontakt (info + ramka) --- */
.er-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 110px) clamp(20px, 4vw, 48px); align-items: start; }
.er-contact__list { list-style: none; padding: 0; margin: 0; }
.er-contact__list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--er-border); }
.er-contact__list li:last-child { border-bottom: 0; }
.er-contact__label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--er-text-muted); display: block; margin-bottom: 4px; }
.er-contact__value { font-size: 17px; color: var(--er-text); font-weight: 600; }
.er-contact__value a { color: var(--er-text); text-decoration: none; }
.er-contact__value a:hover { color: var(--er-primary); }
.er-contact__map { border-radius: var(--er-radius-lg); overflow: hidden; min-height: 320px; border: 1px solid var(--er-border); }
.er-contact__map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

@media (max-width: 991px) {
  .er-contact { grid-template-columns: 1fr; }
}

/* --- CTA przycisk (reużywalny, gdy nie z layer4) --- */
.er-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; background: var(--er-primary); color: #fff !important; text-decoration: none; border-radius: var(--er-radius); font-family: var(--er-font-heading); font-weight: 600; border: 0; cursor: pointer; transition: background .3s var(--er-ease); }
.er-btn:hover { background: var(--er-primary-dark); color: #fff !important; }
.er-btn--ghost { background: transparent; color: var(--er-primary) !important; border: 1.5px solid var(--er-primary); }
.er-btn--ghost:hover { background: var(--er-primary); color: #fff !important; }

/* --- Placeholder zdjęć (do czasu wgrania foto z Drive) --- */
.er-ph {
  width: 100%; height: 100%; min-height: 260px;
  background: linear-gradient(135deg, #EDEFF1 0%, #E4E6E9 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--er-gray-mid); font-family: var(--er-font-heading); font-size: 13px;
  letter-spacing: 2px; text-transform: uppercase;
}
.er-ph::after { content: "Easy Rent"; }

/* ═══════════════ ADVANCED SECTIONS (v2 2026-06-15) ═══════════════ */
/* ═══════════════════════════════════════════════════════════════
   §ER-ADV — Easy Rent Apartments — ADVANCED SECTIONS + TRAPS-EXTRA
   Dopisane 2026-06-15 (świeży build v2). Catted PO 99_client.css =
   najwyższy priorytet. Panel test 9933 / prod 7141 | default13 | PL+EN
   Recon live 9933: header 70px, root 10px, body 16px, fullpage OFF,
   powered=on_white.svg, footer ::before navy #3E475E.
   Recon live 7141: header 95px, fp-viewing-1 (5 fp-section).
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   §ER-CALIB — recon recalibrations (oba silniki)
   ─────────────────────────────────────────────────────────────── */
:root {
  /* header-h: 9933=70, 7141=95 → JS (KONIEC_BODY) mierzy i nadpisuje.
     Default 96px = bezpieczny (nie chowa treści pod fixed header). */
  --ido-header-h: 96px;
  --er-header-h: var(--ido-header-h);
}
/* root default13 = 10px (62.5%). Body live = 16px, ale wymuszamy pewnie. */
body, body.default13 { font-size: 16px !important; }

/* ───────────────────────────────────────────────────────────────
   §ER-TRAPS-EXTRA — post-Jun-8 + recon-specific (NIE w layer1)
   ─────────────────────────────────────────────────────────────── */

/* TRAP-12 — „niebieska stopka": navy pseudo .footer-contact-baner::before
   (#3E475E, potwierdzone live). layer1 TRAP#18 nadpisuje tło ELEMENTU,
   NIE pseudo. Bez tego pas navy przykrywa stopkę. */
.footer-contact-baner::before,
.footer-contact-baner::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* TRAP-13 — Powered by IdoBooking (wymóg licencyjny).
   on_white.svg ma root fill="none" → jako <img> renderuje PUSTKĘ.
   on_dark.svg = 404. Fix: kremowy chip + background-image (logo ciemne
   widoczne na ciemnej stopce). URL root-relative = działa na 9933 i 7141.
   URL bez ?v= (query). */
.powered_by_logo,
a.powered_by_logo,
.powered_by a.powered_by_logo {
  display: inline-block !important;
  width: 150px !important;
  height: 38px !important;
  background: #F5F6F7 url("/images/panel/newBrand/powered_by_idoBooking_on_white.svg") center / 122px auto no-repeat !important;
  border-radius: 6px !important;
  opacity: 1 !important;
  filter: none !important;
  overflow: hidden;
  text-indent: -9999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.powered_by_logo img,
a.powered_by_logo img {
  opacity: 0 !important;   /* ukryj rozbity <img> on_white, chip pokazuje logo */
  width: 100% !important;
  height: 100% !important;
}

/* TRAP-13b — Płatności VISA/MC: systemowy invert robi wszystko białe →
   zabija KOLOROWY Mastercard. filter:none + monochrom (VISA) → cream. */
.footer-contact-baner svg,
.footer-contact-baner img,
.footer__strip svg,
.footer__strip img {
  filter: none !important;
}
.footer-contact-baner svg path:not([fill]),
.footer__strip svg path:not([fill]) {
  fill: #F5F6F7 !important;   /* :not([fill]) omija pattern Mastercard */
}

/* TRAP — container-hotspot: ukryj systemowy carousel (nasz .er-offers
   przejmuje). JS w KONIEC_BODY robi killHotspotDuplicates() z 4 timeoutami. */
.container-hotspot { display: none !important; }

/* TRAP — Litepicker positioning: popup MUSI uzywac inline left/top systemu (pod polem).
   NIE nadpisuj left (to psulo — picker uciekal na -387px). Tylko transform:none + --static centruj. */
/* Litepicker = wycentrowany modal (position:fixed — absolute psuło sie przez transform fullpage.js;
   pole daty bywa nisko w hero, kalendarz wysoki -> centrowany zawsze na ekranie) + przyciemnione tlo.
   ZAKRES: TYLKO home (page-index) — tam jest fullpage. Na /offer/N (page-offer) reguła globalna
   robila z kalendarza fixed-modal -> "przylepial sie" przy scrollu (bug 7141, 2026-07-01).
   Poza home litepicker uzywa natywnego position:absolute (dropdown pod polem). */
body.page-index .litepicker:not(.litepicker--static) {
  position: fixed !important; left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important; z-index: 10001 !important; max-height: 88vh; overflow: auto;
}
.litepicker.litepicker--static { position: relative !important; left: auto !important; right: auto !important; margin: 0 auto !important; transform: none !important; }
/* systemowy .litepicker-backdrop = always-on 920x92 overlay z-index 10000 NAD widgetem
   -> blokowal kliki w Lokalizacja/Poczatek. Wylacz; wlasny scrim ponizej (tylko gdy picker otwarty). */
.litepicker-backdrop { display: none !important; }
.er-lp-scrim {
  position: fixed; inset: 0; background: rgba(11,12,15,.55); z-index: 10000;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .2s var(--er-ease);
}
.er-lp-scrim.is-on { opacity: 1; visibility: visible; }
@media (max-width: 767px) { body.page-index .litepicker:not(.litepicker--static) { max-width: 94vw !important; } }
/* Poza home: bez pelnoekranowego scrima (kalendarz to zwykly dropdown pod polem, nie modal). */
body:not(.page-index) .er-lp-scrim { display: none !important; }

/* TRAP — fullpage NEUTRALIZER (defensywnie dla 7141 fp-viewing-1).
   Aktywny tylko gdy JS doda html.er-defp (wykrycie fp + nasza homepage).
   Rozwija sztywne 100vh sekcje fullpage do normalnego scrolla. */
html.er-defp #fullpage,
html.er-defp .fp-section,
html.er-defp .section.fp-section {
  height: auto !important;
  min-height: 0 !important;
  transform: none !important;
}
html.er-defp .fp-tableCell { height: auto !important; display: block !important; }
html.er-defp #fullpage { transform: none !important; }

/* §ER-HOME-DEDUPE (2026-07-21) — default13+fullpage na 7141 renderuje frontpage body_top
   DWUKROTNIE: (a) stray <main id="er-main"> bezposrednio w <body> [main0], (b) kanoniczna
   kopia w .section_sub wewnatrz .fullpage-wrapper [main1]. easyrent nie mial reguly
   self-contained (lint N-home-selfcontained WARN) -> cala strona glowna renderowala sie 2x.
   Fix: ukryj stray kopie + inline hero w kopii fullpage; teleportowany hero w .section.parallax
   zostaje. Live-verified 7141: 1 hero + 1x kazda sekcja (trust/stats/cta).
   Scope body.page-index = tylko home (podstrony /txt/offer/contact nietkniete).
   .er-dup-main = JS (KONIEC fitHomeHero) oznacza stray <main> POZA .fullpage-wrapper — stabilne
   ukrycie mimo re-shuffle fullpage (selektor body>main gubil sie po rozwinieciu sekcji, lessons/036). */
body.page-index > main#er-main,
body.page-index .er-dup-main { display: none !important; }
/* H1-discipline (lessons/033): ukryj hero-wrap ORAZ SAM H1 (er-hero-wrap__title) w KAZDEJ kopii
   #er-main (teleportowany hero siedzi w .section.parallax, POZA #er-main -> widoczny). KRYTYCZNE:
   sam H1 musi miec wlasny display:none — test 07-seo liczy getComputedStyle(h1).display IGNORUJAC
   display:none PRZODKA, wiec ukrycie tylko kontenera zostawia dubel H1. Live-verified home: 2->1 H1. */
body.page-index #er-main .er-hero-wrap,
body.page-index #er-main .er-hero-wrap__title { display: none !important; }
/* frontpage body_top (fg_body_top_code) jest GLOBALNY -> cala home + hero-H1 wyciekaja na /offer
   i /txt (2 H1, TRAP feedback_idobooking_frontpage_body_top_global). GLOWNA main ma class er-home
   (podstrony maja #er-main BEZ er-home) -> ukryj wyciek poza home. Live-verified /offer (2->1 H1)
   + /txt (hero-leak zniknal, tresc podstrony zostaje). Lessons/036. */
body:not(.page-index) .er-home { display: none !important; }
/* H1-discipline /txt+/offer (lessons/033): er-home gate chowa KONTENER wycieklej home, ale H1
   (er-hero-wrap__title) ma wlasny display:block -> test 07-seo/11-subpages liczy dubel mimo
   ukrytego przodka. Ukryj SAM H1 wycieku (nasze tytuly podstron = er-storyhero/darkhero/
   splithero__title -> nietkniete). Live-verified /txt 200/201/202: 2->1 H1. */
body:not(.page-index) .er-hero-wrap__title { display: none !important; }
/* mobile: hero (~1340px) > sztywna sekcja fullpage (100vh) -> przelewa sie na trust.
   Rozwin sekcje (JS fitHomeHero ustawia height:auto inline, bo fullpage bije arkusz;
   ten @media = wsparcie/fallback). Desktop bez zmian (hero miesci sie w 100vh). */
@media (max-width: 991px) {
  body.page-index .section.parallax.fp-section,
  body.page-index .section.parallax .fp-tableCell { height: auto !important; min-height: 100vh !important; }
}

/* TRAP — systemowy H1 na podstronach /txt (dubel z naszym pagehero H1, lessons/036).
   Każda /txt ma systemowy `h1.big-label` (nazwa strony z panelu) NAD naszym własnym H1
   (.er-storyhero/darkhero/splithero__title w .txt-text) = 2 H1 (07-seo/11-subpages FAIL).
   Ukryj systemowy — nasz styled H1 zostaje JEDYNYM. Live-verified /txt 200/201/202: 2->1 H1
   (nasz), nigdy 0 (wszystkie 3 podstrony mają własny H1). Nasze tytuły NIE są .big-label/
   .index-info/.header-txt, więc nietknięte. */
body.page-txt .index-info h1,
body.page-txt h1.big-label,
body.page-txt .header-txt > h1:first-child { display: none !important; }

/* ───────────────────────────────────────────────────────────────
   §ER-HEADER — solidny biały header (modern-minimal nav=solid)
   Funkcjonalny i przejrzysty (priorytet #1 klienta). Czerwony REZERWUJ.
   ─────────────────────────────────────────────────────────────── */
header.default13 {
  background: #FFFFFF !important;
  box-shadow: 0 1px 0 var(--er-border), 0 2px 16px rgba(15,15,14,.05);
}
header.default13 .menu-wrapper,
header.default13 .bgd-color-light { background: #FFFFFF !important; }

/* linki menu — ciemne, hover czerwień (matched specificity vs default13) */
body.page-index header.default13 a[href]:not(.logo):not([class*="btn"]):not(.navbar-reservation),
header.default13 .menu-wrapper a[href]:not(.logo):not(.navbar-reservation) {
  color: var(--er-text) !important;
  font-family: var(--er-font-heading);
  font-weight: 600;
  letter-spacing: .2px;
  transition: color .2s var(--er-ease);
}
header.default13 .menu-wrapper a[href]:not(.logo):not(.navbar-reservation):hover {
  color: var(--er-primary) !important;
}

/* REZERWUJ — czerwony button (matched specificity per TRAP-01) */
body.page-index header.default13 .navbar-reservation,
header.default13 .navbar-reservation {
  background: var(--er-primary) !important;
  border-color: var(--er-primary) !important;
  color: #fff !important;
  border-radius: var(--er-radius) !important;
  font-family: var(--er-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  transition: background .25s var(--er-ease), transform .2s var(--er-ease) !important;
}
header.default13 .navbar-reservation:hover {
  background: var(--er-primary-dark) !important;
  border-color: var(--er-primary-dark) !important;
  transform: translateY(-1px);
}

/* aktywny link menu — podkreślenie czerwone */
header.default13 .menu-wrapper li.active > a,
header.default13 .menu-wrapper a.active {
  color: var(--er-primary) !important;
  box-shadow: inset 0 -2px 0 var(--er-primary);
}

/* ───────────────────────────────────────────────────────────────
   §ER-HERO — homepage hero (split modern, czerwień+biel)
   ─────────────────────────────────────────────────────────────── */
.er-hero {
  position: relative;
  background: var(--er-bg);
  padding: calc(var(--er-header-h) + clamp(36px,6vw,80px)) clamp(20px,4vw,48px) clamp(48px,7vw,96px);
  overflow: hidden;
}
.er-hero::before { /* subtelny akcent czerwony top-right */
  content: "";
  position: absolute; top: -120px; right: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, var(--er-primary-soft) 0%, transparent 70%);
  pointer-events: none;
}
.er-hero__inner {
  position: relative; z-index: 1;
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px,5vw,72px); align-items: center;
}
.er-hero__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--er-primary); font-weight: 700; margin-bottom: 18px;
}
.er-hero__kicker::before { content: ""; width: 28px; height: 2px; background: var(--er-primary); display: inline-block; }
.er-hero__title {
  font-family: var(--er-font-heading); font-weight: 800;
  font-size: clamp(34px,5.4vw,60px); line-height: 1.05; letter-spacing: -.02em;
  color: var(--er-text); margin: 0 0 20px;
}
.er-hero__title em { color: var(--er-primary); font-style: normal; }
.er-hero__lead {
  font-size: clamp(16px,1.4vw,19px); line-height: 1.65; color: var(--er-text-soft);
  max-width: 560px; margin: 0 0 32px;
}
.er-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.er-hero__stats { display: flex; flex-wrap: wrap; gap: clamp(20px,3vw,44px); }
.er-hero__stat { display: flex; flex-direction: column; }
.er-hero__stat b { font-family: var(--er-font-heading); font-size: clamp(26px,3vw,36px); font-weight: 800; color: var(--er-text); line-height: 1; }
.er-hero__stat span { font-size: 13px; color: var(--er-text-muted); margin-top: 6px; letter-spacing: .3px; }
.er-hero__media {
  position: relative; border-radius: var(--er-radius-lg); overflow: hidden;
  aspect-ratio: 4 / 5; min-height: 380px; box-shadow: var(--er-shadow-lg);
}
.er-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.er-hero__badge {
  position: absolute; left: 20px; bottom: 20px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border-radius: var(--er-radius); padding: 14px 18px; box-shadow: var(--er-shadow-md);
  font-family: var(--er-font-heading); font-weight: 700; color: var(--er-text); font-size: 14px;
}
.er-hero__badge small { display: block; color: var(--er-text-muted); font-weight: 500; font-size: 12px; }

/* hero search card (styling systemowego widgetu rezerwacji) */
.er-hero__search,
.er-hero .iai-search,
.er-hero #searchForm {
  background: #fff; border: 1px solid var(--er-border); border-radius: var(--er-radius-lg);
  box-shadow: var(--er-shadow-md); padding: 18px;
}

/* ───────────────────────────────────────────────────────────────
   §ER-STATSBAND — pasek liczb (operator: 162 / 3 / 7+)
   ─────────────────────────────────────────────────────────────── */
.er-statsband { background: var(--er-secondary); color: #fff; }
.er-statsband__inner {
  max-width: 1240px; margin: 0 auto; padding: clamp(40px,5vw,64px) clamp(20px,4vw,48px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,3vw,40px); text-align: center;
}
.er-stat__num { font-family: var(--er-font-heading); font-weight: 800; font-size: clamp(30px,4vw,46px); line-height: 1; color: #fff; }
.er-stat__num em { color: var(--er-primary-light); font-style: normal; }
.er-stat__label { font-size: 14px; color: rgba(255,255,255,.72); margin-top: 10px; letter-spacing: .3px; }
.er-stat__sep { display: none; }

/* ───────────────────────────────────────────────────────────────
   §ER-LOCATIONS — 3 miasta (Lublin / Nałęczów / Kazimierz Dolny)
   ─────────────────────────────────────────────────────────────── */
.er-locs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,32px); }
.er-loc {
  position: relative; border-radius: var(--er-radius-lg); overflow: hidden;
  min-height: 360px; display: flex; align-items: flex-end;
  background: var(--er-cream2); box-shadow: var(--er-shadow-sm);
  text-decoration: none; transition: transform .35s var(--er-ease), box-shadow .35s var(--er-ease);
}
.er-loc:hover { transform: translateY(-5px); box-shadow: var(--er-shadow-lg); }
.er-loc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s var(--er-ease); }
.er-loc:hover img { transform: scale(1.05); }
.er-loc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,12,15,.82) 0%, rgba(11,12,15,.15) 55%, transparent 100%); z-index: 1; }
.er-loc__body { position: relative; z-index: 2; padding: 26px 24px; color: #fff; width: 100%; }
.er-loc__name { font-family: var(--er-font-heading); font-weight: 800; font-size: 24px; margin: 0 0 6px; color: #fff; }
.er-loc__count { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: rgba(255,255,255,.85); }
.er-loc__count b { color: var(--er-primary-light); }
.er-loc__cta { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #fff; }
.er-loc__cta::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .25s var(--er-ease); }
.er-loc:hover .er-loc__cta::after { transform: translateX(4px); }

/* ───────────────────────────────────────────────────────────────
   §ER-OFFERS — wyróżnione apartamenty (nasza siatka; JS czyta hotspot)
   ─────────────────────────────────────────────────────────────── */
.er-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(20px,3vw,30px); }
.er-offer {
  background: #fff; border: 1px solid var(--er-border); border-radius: var(--er-radius-lg);
  overflow: hidden; box-shadow: var(--er-shadow-sm); display: flex; flex-direction: column;
  transition: transform .3s var(--er-ease), box-shadow .3s var(--er-ease);
}
.er-offer:hover { transform: translateY(-4px); box-shadow: var(--er-shadow-md); }
.er-offer__media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--er-cream2); }
.er-offer__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--er-ease); }
.er-offer:hover .er-offer__media img { transform: scale(1.05); }
.er-offer__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--er-text); font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; letter-spacing: .3px;
}
.er-offer__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.er-offer__loc { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--er-text-muted); margin: 0 0 8px; }
.er-offer__title { font-family: var(--er-font-heading); font-size: 19px; font-weight: 700; color: var(--er-text); margin: 0 0 12px; line-height: 1.3; }
.er-offer__meta { display: flex; gap: 16px; font-size: 13px; color: var(--er-text-soft); margin: 0 0 16px; }
.er-offer__meta span { display: inline-flex; align-items: center; gap: 6px; }
.er-offer__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--er-border); }
.er-offer__price { font-family: var(--er-font-heading); color: var(--er-text); font-weight: 800; font-size: 17px; }
.er-offer__price small { display: block; font-size: 11px; color: var(--er-text-muted); font-weight: 500; }
.er-offer__price b { color: var(--er-primary); }

/* ───────────────────────────────────────────────────────────────
   §ER-FEATURES — naprzemienne rzędy (operator: standard obsługi)
   ─────────────────────────────────────────────────────────────── */
.er-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,72px); align-items: center; margin-bottom: clamp(40px,6vw,80px); }
.er-feature:last-child { margin-bottom: 0; }
.er-feature:nth-child(even) .er-feature__media { order: -1; }
.er-feature__media { border-radius: var(--er-radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--er-shadow-md); }
.er-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.er-feature__title { font-family: var(--er-font-heading); font-size: clamp(22px,3vw,32px); font-weight: 700; color: var(--er-text); margin: 0 0 16px; }
.er-feature__text { font-size: 16px; line-height: 1.7; color: var(--er-text-soft); margin: 0 0 20px; }
.er-feature__list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.er-feature__list li { position: relative; padding-left: 30px; font-size: 15px; color: var(--er-text-soft); }
.er-feature__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--er-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6262C' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }

/* ───────────────────────────────────────────────────────────────
   §ER-CORPORATE — najem korporacyjny / B2B (split + lista)
   ─────────────────────────────────────────────────────────────── */
.er-corp { background: var(--er-secondary); color: #fff; border-radius: var(--er-radius-lg); overflow: hidden; }
.er-corp__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; padding: clamp(32px,5vw,64px); }
.er-corp__title { font-family: var(--er-font-heading); font-size: clamp(24px,3.4vw,38px); font-weight: 800; color: #fff; margin: 0 0 18px; }
.er-corp__text { color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.7; margin: 0 0 26px; }
.er-corp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.er-corp__item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--er-radius); padding: 20px; }
.er-corp__item b { display: block; font-family: var(--er-font-heading); font-size: 16px; color: #fff; margin-bottom: 6px; }
.er-corp__item span { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.55; }

/* ───────────────────────────────────────────────────────────────
   §ER-GALLERY — siatka + lightbox (ido-lightbox.js w KONIEC_BODY)
   ─────────────────────────────────────────────────────────────── */
.er-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.er-gallery__item { position: relative; overflow: hidden; border-radius: var(--er-radius); cursor: pointer; background: var(--er-cream2); }
.er-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--er-ease); }
.er-gallery__item:hover img { transform: scale(1.07); }
.er-gallery__item::after { content: ""; position: absolute; inset: 0; background: rgba(11,12,15,0); transition: background .3s var(--er-ease); }
.er-gallery__item:hover::after { background: rgba(11,12,15,.18); }
.er-gallery__item--wide { grid-column: span 2; }
.er-gallery__item--tall { grid-row: span 2; }

/* ───────────────────────────────────────────────────────────────
   §ER-FAQ — akordeon (regulamin / pytania)
   ─────────────────────────────────────────────────────────────── */
.er-faq { max-width: 860px; margin: 0 auto; }
.er-faq__item { border-bottom: 1px solid var(--er-border); }
.er-faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-family: var(--er-font-heading); font-size: 17px; font-weight: 700; color: var(--er-text); }
.er-faq__q::after { content: ""; position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .3s var(--er-ease); }
.er-faq__item.is-open .er-faq__q { color: var(--er-primary); }
.er-faq__item.is-open .er-faq__q::after { transform: translateY(-50%) rotate(180deg); }
.er-faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--er-ease); }
.er-faq__a-inner { padding: 0 0 22px; font-size: 15px; line-height: 1.7; color: var(--er-text-soft); }

/* ───────────────────────────────────────────────────────────────
   §ER-CTA — band końcowy (czerwony lub ciemny full-bleed)
   ─────────────────────────────────────────────────────────────── */
.er-cta { background: var(--er-gradient-primary); color: #fff; text-align: center; }
.er-cta--dark { background: var(--er-gradient-accent); }
.er-cta__inner { max-width: 760px; margin: 0 auto; padding: clamp(48px,7vw,96px) clamp(20px,4vw,48px); }
.er-cta__title { font-family: var(--er-font-heading); font-size: clamp(26px,4vw,44px); font-weight: 800; color: #fff !important; margin: 0 0 16px; } /* !important bije globalne h1..h6{color:dark!important} — inaczej tytuł CTA ciemny na czerwieni = niewidoczny (audyt 2026-06-23) */
.er-cta__text { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.9); margin: 0 0 32px; }
.er-cta .er-btn { background: #fff; color: var(--er-primary) !important; }
.er-cta .er-btn:hover { background: var(--er-cream); color: var(--er-primary-dark) !important; }
.er-cta--dark .er-btn { background: var(--er-primary); color: #fff !important; }
.er-cta--dark .er-btn:hover { background: var(--er-primary-light); color: #fff !important; }

/* ───────────────────────────────────────────────────────────────
   §ER-TESTI — opinie gości (prosty grid)
   ─────────────────────────────────────────────────────────────── */
.er-testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,30px); }
.er-testi__card { background: #fff; border: 1px solid var(--er-border); border-radius: var(--er-radius-lg); padding: 28px 26px; box-shadow: var(--er-shadow-sm); }
.er-testi__stars { color: var(--er-primary); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.er-testi__text { font-size: 15px; line-height: 1.7; color: var(--er-text-soft); margin: 0 0 18px; font-style: italic; }
.er-testi__who { font-family: var(--er-font-heading); font-weight: 700; color: var(--er-text); font-size: 15px; }
.er-testi__who span { display: block; font-weight: 500; color: var(--er-text-muted); font-size: 13px; margin-top: 3px; }

/* ───────────────────────────────────────────────────────────────
   §ER-FOOTER — stopka systemowa: ciemna, wycentrowana (BEM trap)
   ─────────────────────────────────────────────────────────────── */
.footer, .footer-wrapper, footer.default13 {
  background: var(--er-footer-bg) !important;
  color: rgba(255,255,255,.82) !important;
}
.footer h3, .footer h4, .footer__contact b, .footer strong { color: #fff !important; }
.footer a { color: rgba(255,255,255,.82) !important; }
.footer a:hover { color: var(--er-primary-light) !important; }
/* Stopka wyrównana do LEWEJ (decyzja Damiana 2026-07-22 — wcześniej celowo wyśrodkowana;
   F16: wyśrodkowanie przez text-align:center pcha inline/flex tresc (CTA/ikony/kontakt) na srodek.
   Kolumny dziedzicza text-align:center -> nadpisz na left; flex uls -> flex-start. Lessons/036. */
ul.footer__contact, ul.footer__social_media {
  justify-content: flex-start !important; margin: 0 !important; padding-left: 0 !important; text-align: left !important;
}
.footer__contact { list-style: none; }
.er-footer__col { text-align: left !important; }
.er-footer__contact-list { align-items: flex-start !important; }
.er-footer__contact-list li,
.er-footer ul.footer__contact li, ul.footer__contact li { text-align: left !important; justify-content: flex-start !important; }

/* ───────────────────────────────────────────────────────────────
   §ER-PAGECTX — page-context guards (NIGDY globalnie — INSTINCT-09)
   ─────────────────────────────────────────────────────────────── */
/* /offers — intro nad listą + filtry */
body.page-offers .er-pagehero { margin-bottom: 0; }
body.page-offers .er-offers-intro { max-width: 1240px; margin: 0 auto; padding: clamp(32px,5vw,56px) clamp(20px,4vw,48px) 0; }

/* /offer/N — #additional absolute overflow fix (memory trap) */
body.page-offer #additional { position: static !important; }

/* /offer/N MOBILE — AKORDEON ZAKLADEK NIE MIESCIL SIE W EKRANIE (zgloszenie Damiana 2026-08-10:
   „klikam cennik w ofercie konkretnej i jest niepasujacy do okna").
   MECHANIZM (zmierzony na live @375 po realnym otwarciu zakladki, NIE na zamknietej):
     DIV.tabs               w 305, flex COLUMN, overflow-x: HIDDEN   <- to UCINA tresc
       DIV.tabs__item       w 464 (!), flex ROW                      <- szersze od rodzica
         SPAN „Cennik"      51 px
         DIV#offer-prices   left 103, w 382                          <- wypchniety w prawo
   `.tabs__item` jest wierszem flex, ktorego min-content ma 464 px, a flex-item NIE zweza sie
   ponizej `min-width:auto` (= min-content). Rodzic `.tabs` ma `overflow-x:hidden`, wiec nadmiar
   jest przycinany i `documentElement`/`body` NIE pokazuja zadnego overflow — dlatego test
   „brak poziomego scrolla" tego nie widzi, a gosc widzi obcieta karte cennika.
   To ta sama pulapka flexa co w stopce ponizej, tylko w akordeonie silnika.
   DODATKOWO: `.season-single-row` kladzie „rok" OBOK karty (flex row), zabierajac jej szerokosc,
   a trzy poziomy zagniezdzonych paddingow (panel 24 + price-list 20 + kolumna Bootstrap 15)
   zjadaly kolejne ~120 px. Tabela ma min-content 312 px, wiec bez `table-layout:fixed` nie
   zwezi sie do kolumny.
   Zmierzone PO fixie @375: panel 49..296, tabela 75..270 (195 px), daty 91..254, przycisk
   109..248 — ZERO elementow poza ekranem (przed: 19), body nadmiar 0.
   Bramka 979px = TA SAMA co u silnika; desktop nietkniety. */
@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; }
  /* ── WYCIEK TYPOGRAFII ETYKIETY DO TRESCI PANELU (zgloszenie Damiana 2026-08-12: „zeby sie to
     miescilo, nie mialo podwojnych podkreslnikow").
     Nasza regula `.tabs__item` (ok. linii 2160) stylizuje ETYKIETE zakladki jak na desktopie:
     `white-space:nowrap` + `text-transform:uppercase` + `letter-spacing:1.4px` + `font-size:12px`
     + `border-bottom:2px`. Na MOBILE `.tabs__item` nie jest juz sama etykieta — ZAWIERA CALY
     PANEL, wiec te wlasciwosci dziedziczyly akapity, listy udogodnien, e-mail i cennik:
       - `nowrap` => nic sie nie zawijalo (zmierzone `#room_desc`: scrollWidth 2706 px w 305 px),
       - `uppercase` => cale akapity opisu szly KAPITALIKAMI (nieczytelne),
       - a moj wczesniejszy `overflow-x:auto` dorzucal do tego PASEK PRZEWIJANIA pod czerwona
         linia `border-bottom` — stad „podwojne podkreslniki".
     Fix: resetujemy typografie w PANELU (etykieta `> span` zostaje nietknieta) i pozwalamy
     tekstowi sie ZAWIJAC zamiast przewijac. `overflow-wrap:anywhere` lamie dlugie tokeny
     (e-mail biuro@…, URL-e). Zmierzone PO: wszystkie panele scrollWidth == clientWidth,
     0 elementow z paskiem (bylo 38 w `#room_desc`), tresc `text-transform:none`. */
  html body.page-offer .tabs__item > div,
  html body.page-offer .tabs__item > div *:not(.btn):not(.btn *),
  html body.page-offer #room_desc, html body.page-offer #room_desc *:not(.btn):not(.btn *),
  html body.page-offer #additional, html body.page-offer #additional *: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,
  html body.page-offer #room_desc,
  html body.page-offer #additional {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--er-text, #1A1A1A) !important;
    overflow-x: visible !important;      /* tekst ZAWIJA sie, wiec pasek jest zbedny */
  }
  /* WYJATEK: kalendarz litepicker ma min-content ~436 px i nie zawinie sie sensownie —
     tylko on dostaje wlasny scroll poziomy zamiast obciecia. */
  html body.page-offer #calendar-data { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  html body.page-offer #offer-prices { padding-left: 12px !important; padding-right: 12px !important; }
  html body.page-offer #offer-prices .price-list { padding: 14px !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body.page-offer #offer-prices .price-list > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  /* rok NAD karta, nie obok — inaczej zabiera jej polowe szerokosci */
  html body.page-offer #offer-prices .season-single-row {
    flex-direction: column !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body.page-offer #offer-prices .seasons { width: 100% !important; flex-wrap: wrap !important; }
  html body.page-offer #offer-prices .year-label { padding-left: 0 !important; }
  html body.page-offer #offer-prices .season-row_sub {
    min-width: 0 !important; max-width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  /* tabela ma min-content 312 px — bez `fixed` nie zejdzie do szerokosci kolumny */
  html body.page-offer #offer-prices table {
    width: 100% !important; max-width: 100% !important; table-layout: fixed !important;
  }
  html body.page-offer #offer-prices .season-cell_dates { display: block !important; }
  html body.page-offer #offer-prices .room_rez .btn { white-space: normal !important; }

  /* ── JEDEN PROSTOKAT + KWOTA W SRODKU (zgloszenie Damiana 2026-08-12: „kwoty poza
     prostokatami i w ogole po co tyle prostokatow jeden w drugim").
     BYLO CZTERY poziomy dekoracji, zmierzone: `.price-list` (krem #F8F6F3, radius 14, padding 14)
     + `table` (biala, ramka 1px) + `.object-price` (krem, RAMKA, radius 14, padding 24/32, cien
     6/24) + `tr.season-cell_footer` (ramka). Zostawiamy JEDNA karte = tabela.
     KWOTA WYCHODZILA POZA TLO, bo `.object-price` ma `white-space:nowrap` i padding 24/32, a
     cena 28 px nie miesci sie w 193 px (tresc mierzyla 217 px, sam <span> 243 px i wychodzil
     po OBU stronach, bo flex centruje). `table-layout:fixed` (wyzej) trzyma kolumne w ryzach,
     wiec bez pozwolenia na zawijanie tekst musial sie wylac. Stad: `white-space:normal` +
     `flex-wrap` + mniejsza cena.
     Zmierzone PO: 0 elementow poza rodzicem, dekorowane prostokaty w panelu = tabela + przycisk. */
  html body.page-offer #offer-prices .price-list {
    background: transparent !important; border-radius: 0 !important; padding: 0 !important;
  }
  html body.page-offer #offer-prices table { border-radius: 12px !important; }
  html body.page-offer #offer-prices .object-price {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 8px !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-wrap: anywhere !important;
  }
  html body.page-offer #offer-prices .object-price span,
  html body.page-offer #offer-prices .object-price strong.price,
  html body.page-offer #offer-prices .season-cell_date { white-space: normal !important; }
  html body.page-offer #offer-prices strong.price { font-size: 22px !important; }
  /* zbedne kreski: stopka rzedu i domykajaca linia pod jedyna karta */
  html body.page-offer #offer-prices tr.season-cell_footer,
  html body.page-offer #offer-prices .season-row_sub { border: 0 !important; }
}

/* STOPKA — dolny pasek wychodzil 26 px za ekran na waskim mobile (zmierzone @375:
   .er-footer__bar clientWidth 315 vs scrollWidth 341; @346: 25 px). To NASZ kod, nie silnik.
   Klasyczna pulapka flexa: elementy maja domyslne `min-width:auto` = min-content, wiec NIE
   zwezaja sie do kontenera — a `.er-footer__meta` sumuje chip powered-by (150 px sztywne)
   + gap 18 px. `min-width:0` przywraca zwezanie, `flex-wrap` pozwala chipowi zejsc do nowej
   linii zamiast wypychac pasek. Po fixie @346: pasek 286 px, zero elementow za krawedzia. */
.er-footer__bar > * { min-width: 0 !important; max-width: 100% !important; }
.er-footer__meta { flex-wrap: wrap !important; }
.er-footer__legal { overflow-wrap: anywhere; }

/* /txt (podstrony CMS) — odsunięcie spod fixed header (TRAP#7 belt) */
body.page-txt #pageContent,
body.page-txt .page-content { padding-top: calc(var(--er-header-h) + 8px); }
body.page-txt #pageContent { padding-bottom: 0 !important; } /* jasna przerwa nad stopką */

/* /contact — podstrona automatyczna; tylko CSS, bez body_top (memory trap) */
body.page-contact .contact-data,
body.page-contact #pageContent { padding-top: calc(var(--er-header-h) + 8px); }
/* mapa NAD listą lokalizacji (TRAP-18 map-over-list): `.contact` = block, mapa (#map_container)
   jest po liście w DOM. Flex-column + order:-1 pcha mapę na górę (align-items:stretch = pełna szer.).
   Live-verified mobile+desktop: mapTop < listTop, mapa pełnej szerokości. Lessons/036. */
body.page-contact .contact { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
body.page-contact .contact > #map_container { order: -1 !important; }

/* ───────────────────────────────────────────────────────────────
   §ER-REVEAL — bezpieczny scroll-reveal (działa też bez JS)
   ─────────────────────────────────────────────────────────────── */
.er-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--er-ease), transform .6s var(--er-ease); }
.er-reveal.is-in, html:not(.ido-js) .er-reveal { opacity: 1; transform: none; }
.er-reveal--d1 { transition-delay: .08s; }
.er-reveal--d2 { transition-delay: .16s; }
.er-reveal--d3 { transition-delay: .24s; }

/* ───────────────────────────────────────────────────────────────
   §ER-RESPONSIVE — breakpoints 1100 / 991 / 767 / 480
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .er-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
  .er-hero__inner { grid-template-columns: 1fr; }
  .er-hero__media { order: -1; aspect-ratio: 16/10; min-height: 280px; }
  .er-statsband__inner { grid-template-columns: repeat(2, 1fr); }
  .er-locs { grid-template-columns: 1fr 1fr; }
  .er-feature, .er-corp__inner { grid-template-columns: 1fr; }
  .er-feature:nth-child(even) .er-feature__media { order: 0; }
  .er-corp__grid { grid-template-columns: 1fr 1fr; }
  .er-testi { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .er-hero { padding-top: calc(var(--er-header-h) + 28px); }
  .er-statsband__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .er-locs { grid-template-columns: 1fr; }
  .er-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .er-gallery__item--wide { grid-column: span 1; }
  .er-gallery__item--tall { grid-row: span 1; }
  .er-corp__grid { grid-template-columns: 1fr; }
  /* mobile: hero search-first (memory trap mobile_search_first) */
  .er-hero__media { display: none; }
}
@media (max-width: 480px) {
  .er-statsband__inner { grid-template-columns: 1fr; }
  .er-hero__actions { flex-direction: column; }
  .er-hero__actions .er-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   §ER-FORMS — formularze (kontakt / współpraca / korporacyjny)
   ═══════════════════════════════════════════════════════════════ */
.er-form { display: grid; gap: 18px; }
.er-form--2col { grid-template-columns: 1fr 1fr; }
.er-field { display: flex; flex-direction: column; gap: 7px; }
.er-field--full { grid-column: 1 / -1; }
.er-field label { font-size: 13px; font-weight: 600; color: var(--er-text); letter-spacing: .2px; }
.er-field label .er-req { color: var(--er-primary); margin-left: 2px; }
.er-input, .er-textarea, .er-select {
  width: 100%; font-family: var(--er-font-body); font-size: 15px; color: var(--er-text);
  background: #fff; border: 1.5px solid var(--er-border); border-radius: var(--er-radius);
  padding: 13px 15px; transition: border-color .2s var(--er-ease), box-shadow .2s var(--er-ease);
}
.er-input::placeholder, .er-textarea::placeholder { color: var(--er-gray-mid); }
.er-input:focus, .er-textarea:focus, .er-select:focus {
  outline: none; border-color: var(--er-primary);
  box-shadow: 0 0 0 3px var(--er-primary-soft);
}
.er-textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.er-select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371757B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.er-input.is-invalid, .er-textarea.is-invalid { border-color: var(--er-primary); box-shadow: 0 0 0 3px var(--er-primary-soft); }
.er-field__err { font-size: 12px; color: var(--er-primary-dark); display: none; }
.er-field.is-invalid .er-field__err { display: block; }
.er-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--er-text-muted); line-height: 1.5; }
.er-form__consent input { margin-top: 3px; accent-color: var(--er-primary); width: 16px; height: 16px; flex-shrink: 0; }
.er-form__note { font-size: 13px; color: var(--er-text-muted); }
.er-form__success {
  display: none; background: var(--er-primary-soft); border: 1px solid var(--er-primary);
  border-radius: var(--er-radius); padding: 16px 18px; color: var(--er-primary-dark); font-weight: 600; font-size: 14px;
}
.er-form.is-sent .er-form__success { display: block; }
.er-form.is-sent .er-form__fields { display: none; }

/* ═══════════════════════════════════════════════════════════════
   §ER-OFFERSFILTER — pasek filtrów /offers (miasta + reset)
   Współgra z JS: pre-check z URL + przycisk „Wyczyść" (memory trap).
   ═══════════════════════════════════════════════════════════════ */
.er-filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  max-width: 1240px; margin: 0 auto; padding: 20px clamp(20px,4vw,48px);
  border-bottom: 1px solid var(--er-border);
}
.er-filterbar__label { font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--er-text-muted); margin-right: 4px; }
.er-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border: 1.5px solid var(--er-border); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--er-text); background: #fff;
  transition: all .2s var(--er-ease); user-select: none;
}
.er-chip:hover { border-color: var(--er-primary); color: var(--er-primary); }
.er-chip input { display: none; }
.er-chip.is-active, .er-chip:has(input:checked) {
  background: var(--er-primary); border-color: var(--er-primary); color: #fff;
}
.er-chip__count { font-size: 12px; opacity: .8; }
.er-filterbar__clear {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--er-text-muted); text-decoration: underline;
}
.er-filterbar__clear:hover { color: var(--er-primary); }

/* ═══════════════════════════════════════════════════════════════
   §ER-PAGINATION — /offers paginacja
   ═══════════════════════════════════════════════════════════════ */
.er-pagination { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: clamp(32px,5vw,56px) 20px; }
.er-pagination a, .er-pagination span {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--er-border); border-radius: var(--er-radius); padding: 0 12px;
  font-family: var(--er-font-heading); font-weight: 700; font-size: 14px; color: var(--er-text);
  text-decoration: none; transition: all .2s var(--er-ease);
}
.er-pagination a:hover { border-color: var(--er-primary); color: var(--er-primary); }
.er-pagination .is-current { background: var(--er-primary); border-color: var(--er-primary); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   §ER-BREADCRUMB — okruszki na podstronach
   ═══════════════════════════════════════════════════════════════ */
.er-breadcrumb { max-width: 1240px; margin: 0 auto; padding: 16px clamp(20px,4vw,48px); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--er-text-muted); }
.er-breadcrumb a { color: var(--er-text-muted); text-decoration: none; }
.er-breadcrumb a:hover { color: var(--er-primary); }
.er-breadcrumb__sep { color: var(--er-gray-mid); }
.er-breadcrumb__current { color: var(--er-text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   §ER-MAP — kontener mapy (Leaflet / iframe)
   ═══════════════════════════════════════════════════════════════ */
.er-map { width: 100%; min-height: 420px; border-radius: var(--er-radius-lg); overflow: hidden; border: 1px solid var(--er-border); background: var(--er-cream2); }
.er-map iframe, .er-map .leaflet-container { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.er-map-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.er-map-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--er-text-soft); }
.er-map-legend__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--er-primary); }

/* ═══════════════════════════════════════════════════════════════
   §ER-LOCMAP — sekcja Lokalizacje: mapa regionu (Leaflet) + lista miast
   JS: buildLocations() w KONIEC_BODY zaciaga miasta/liczby z panelu,
   stawia piny (.er-pin) i wpina hover lista <-> pin.
   ═══════════════════════════════════════════════════════════════ */
.er-locmap { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px,3vw,34px); align-items: stretch; margin-top: clamp(24px,4vw,40px); }
.er-locmap__map { min-height: 400px; border-radius: var(--er-radius-lg); overflow: hidden; border: 1px solid var(--er-border); background: var(--er-cream2); z-index: 0; }
.er-locmap__map .leaflet-container { width: 100%; height: 100%; min-height: 400px; background: var(--er-cream2); font-family: var(--er-font-body); }
.er-locmap__list { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.er-locrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--er-border); border-radius: var(--er-radius); background: #fff; text-decoration: none; cursor: pointer; transition: border-color .25s var(--er-ease), transform .25s var(--er-ease), box-shadow .25s var(--er-ease); }
.er-locrow.is-active { border-left: 3px solid var(--er-primary); }
.er-locrow:hover { border-color: var(--er-primary); transform: translateX(3px); box-shadow: var(--er-shadow-sm); }
.er-locrow:focus-visible { outline: 3px solid var(--er-primary-light, #E84B50); outline-offset: 2px; }
.er-locrow__offers { display: inline-block; margin-top: 8px; font-family: var(--er-font-heading); font-size: 13px; font-weight: 600; color: var(--er-primary); text-decoration: none; }
.er-locrow__offers:hover, .er-locrow__offers:focus-visible { text-decoration: underline; outline: none; }
.er-locrow__name { display: block; font-family: var(--er-font-heading); font-weight: 700; font-size: 18px; color: var(--er-text); }
.er-locrow__desc { display: block; font-size: 13px; color: var(--er-text-muted); margin-top: 3px; }
.er-locrow__count { flex-shrink: 0; font-family: var(--er-font-heading); font-weight: 800; font-size: 22px; color: var(--er-primary); }

/* Leaflet divIcon — reset systemowego bialego pudelka + brandowy pin */
.er-pin { background: transparent !important; border: 0 !important; position: relative; }
.er-pin__dot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--er-primary); color: #fff; font-family: var(--er-font-heading); font-weight: 700; box-shadow: 0 0 0 6px rgba(214,38,44,.16); transition: box-shadow .2s var(--er-ease), background .2s var(--er-ease); }
.er-pin--lg .er-pin__dot { font-size: 13px; }
.er-pin--md .er-pin__dot { font-size: 11px; }
.er-pin--sm .er-pin__dot { font-size: 10px; }
.er-pin__lbl { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 5px; white-space: nowrap; font-family: var(--er-font-heading); font-weight: 700; font-size: 12px; color: var(--er-text); background: rgba(255,255,255,.92); padding: 1px 7px; border-radius: 6px; pointer-events: none; }
.er-pin.is-hot .er-pin__dot { background: var(--er-primary-dark); box-shadow: 0 0 0 9px rgba(214,38,44,.26); }
.leaflet-container a.leaflet-popup-close-button { color: var(--er-text-muted); }

/* witraz — asymetryczny tryptyk zdjec regionu (1 duzy + 2 mniejsze), szczeliny = olow */
.er-locmosaic { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; margin-top: 14px; height: clamp(220px,26vw,300px); }
.er-locmosaic__tile { position: relative; overflow: hidden; border-radius: 10px; display: block; background: var(--er-cream2); }
.er-locmosaic__tile:first-child { grid-row: 1 / 3; }
.er-locmosaic__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--er-ease); }
.er-locmosaic__tile::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); border-radius: 10px; pointer-events: none; }
.er-locmosaic__tile:hover img { transform: scale(1.05); }

@media (max-width: 860px) {
  .er-locmap { grid-template-columns: 1fr; gap: 18px; }
  .er-locmap__map, .er-locmap__map .leaflet-container { min-height: 300px; }
  .er-locmosaic { height: clamp(180px,52vw,240px); }
}

/* ═══════════════════════════════════════════════════════════════
   §ER-AMENITY — siatka udogodnień z ikonami
   ═══════════════════════════════════════════════════════════════ */
.er-amenities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(16px,2.5vw,26px); }
.er-amenity { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--er-border); border-radius: var(--er-radius-lg); background: #fff; transition: border-color .25s var(--er-ease), transform .25s var(--er-ease); }
.er-amenity:hover { border-color: var(--er-primary); transform: translateY(-3px); }
.er-amenity__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--er-primary-soft); color: var(--er-primary); display: inline-flex; align-items: center; justify-content: center; }
.er-amenity__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.er-amenity__body b { display: block; font-family: var(--er-font-heading); font-size: 16px; color: var(--er-text); margin-bottom: 4px; }
.er-amenity__body span { font-size: 14px; color: var(--er-text-soft); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════════
   §ER-DARKSECTION — wariant ciemny (band) + dividers thin-line
   ═══════════════════════════════════════════════════════════════ */
.er-section--dark { background: var(--er-secondary); color: #fff; max-width: none; }
.er-section--dark > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.er-section--dark .er-section__title, .er-section--dark h2, .er-section--dark h3 { color: #fff !important; }
.er-section--dark .er-section__lead, .er-section--dark p { color: rgba(255,255,255,.75); }
.er-section--dark .er-section__kicker { color: var(--er-primary-light); }
.er-divider { height: 1px; background: var(--er-border); max-width: 1240px; margin: 0 auto; }
.er-divider--center { width: 64px; height: 3px; background: var(--er-primary); margin: 0 auto; border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   §ER-UTILITIES — pomocnicze (spacing / text / layout)
   ═══════════════════════════════════════════════════════════════ */
.er-container { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: clamp(20px,4vw,48px); padding-right: clamp(20px,4vw,48px); }
.er-container--narrow { max-width: 880px; }
.er-center { text-align: center; }
.er-left { text-align: left; }
.er-right { text-align: right; }
.er-flex { display: flex; }
.er-flex--center { align-items: center; justify-content: center; }
.er-flex--between { align-items: center; justify-content: space-between; }
.er-flex--wrap { flex-wrap: wrap; }
.er-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px,3vw,32px); }
.er-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,32px); }
.er-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,2.5vw,28px); }
.er-gap-sm { gap: 12px; }
.er-gap-lg { gap: 40px; }
.er-mt-0 { margin-top: 0; } .er-mt-1 { margin-top: 8px; } .er-mt-2 { margin-top: 16px; } .er-mt-3 { margin-top: 24px; } .er-mt-4 { margin-top: 40px; } .er-mt-5 { margin-top: 64px; }
.er-mb-0 { margin-bottom: 0; } .er-mb-1 { margin-bottom: 8px; } .er-mb-2 { margin-bottom: 16px; } .er-mb-3 { margin-bottom: 24px; } .er-mb-4 { margin-bottom: 40px; } .er-mb-5 { margin-bottom: 64px; }
.er-pt-0 { padding-top: 0 !important; }
.er-pb-0 { padding-bottom: 0 !important; }
.er-text-sm { font-size: 14px; }
.er-text-lg { font-size: 18px; }
.er-text-xl { font-size: clamp(20px,2.5vw,28px); }
.er-text-primary { color: var(--er-primary); }
.er-text-muted { color: var(--er-text-muted); }
.er-text-white { color: #fff; }
.er-fw-600 { font-weight: 600; } .er-fw-700 { font-weight: 700; } .er-fw-800 { font-weight: 800; }
.er-uppercase { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; }
.er-radius { border-radius: var(--er-radius); }
.er-radius-lg { border-radius: var(--er-radius-lg); }
.er-shadow { box-shadow: var(--er-shadow-md); }
.er-bg-cream { background: var(--er-cream); }
.er-bg-dark { background: var(--er-secondary); color: #fff; }
.er-bg-primary { background: var(--er-primary); color: #fff; }
.er-hide { display: none !important; }
.er-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--er-primary); font-weight: 700; margin-bottom: 12px; }
.er-lead { font-size: clamp(16px,1.4vw,19px); line-height: 1.7; color: var(--er-text-soft); }
@media (max-width: 991px) {
  .er-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .er-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .er-grid-2, .er-grid-4 { grid-template-columns: 1fr; }
  .er-form--2col { grid-template-columns: 1fr; }
  .er-hide-mobile { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   §ER-A11Y — dostępność (focus, skip-link, sr-only, reduced motion)
   ═══════════════════════════════════════════════════════════════ */
.er-skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--er-primary); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--er-radius) 0; font-weight: 700; }
.er-skip-link:focus { left: 0; }
.er-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; }
.er-btn:focus-visible, .er-chip:focus-visible, .er-input:focus-visible, a:focus-visible,
.er-faq__q:focus-visible, .er-offer:focus-within { outline: 3px solid var(--er-primary-light); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, .er-reveal, .er-loc img, .er-offer__media img { transition: none !important; animation: none !important; }
  .er-reveal { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   §ER-PRINT — wydruk (oferty / kontakt)
   ═══════════════════════════════════════════════════════════════ */
@media print {
  header.default13, .footer, .er-cta, .er-hero__media, .navbar-reservation, .container-hotspot { display: none !important; }
  body, .er-section { background: #fff !important; color: #000 !important; }
  .er-offer, .er-card, .er-amenity { break-inside: avoid; border: 1px solid #ccc !important; box-shadow: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
  .er-section { padding: 16px 0 !important; max-width: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   §ER-OFFERMETA-ICONS — ikony w kartach ofert (osoby / pokoje / m2)
   ═══════════════════════════════════════════════════════════════ */
.er-offer__meta .ico { width: 16px; height: 16px; stroke: var(--er-text-muted); fill: none; stroke-width: 1.7; }
.er-tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.er-tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--er-cream2); color: var(--er-text-soft); letter-spacing: .3px; }
.er-tag--primary { background: var(--er-primary-soft); color: var(--er-primary-dark); }

/* ═══════════════════════════════════════════════════════════════
   §ER-BENEFITS — siatka korzyści (Współpraca z nami / właściciele)
   ═══════════════════════════════════════════════════════════════ */
.er-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(18px,3vw,28px); }
.er-benefit { padding: 26px 24px; border-radius: var(--er-radius-lg); background: var(--er-cream); border: 1px solid var(--er-border); }
.er-benefit__num { font-family: var(--er-font-heading); font-size: 13px; font-weight: 800; color: var(--er-primary); letter-spacing: 1px; margin-bottom: 12px; }
.er-benefit__title { font-family: var(--er-font-heading); font-size: 18px; font-weight: 700; color: var(--er-text); margin: 0 0 8px; }
.er-benefit__text { font-size: 14px; line-height: 1.6; color: var(--er-text-soft); margin: 0; }
@media (max-width: 767px) { .er-benefits { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   §ER-NAV-MOBILE — drawer mobilny (default13 hamburger)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* FIX 2026-06-23 (audyt): wcześniej CAŁY .menu-wrapper (logo+hamburger+menu) był
     translatowany poza ekran (transform:translateX(100%)) => brak dostępnej nawigacji < 992px.
     Teraz .menu-wrapper = STAŁY widoczny pasek górny; slide-in drawerem jest tylko LISTA UL.
     Zweryfikowane live MCP @375 i @768px (klik hamburgera otwiera drawer z linkami). */
  header.default13 .menu-wrapper {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    width: 100% !important; max-width: none !important; transform: none !important;
    height: var(--er-header-h, 64px) !important; min-height: 56px !important; padding: 0 14px !important;
    background: #fff !important; box-shadow: 0 2px 16px rgba(15,15,14,.08) !important;
    overflow: visible !important; z-index: 1200 !important; display: flex !important; align-items: center !important;
  }
  header.default13 .menu-wrapper > .container {
    width: 100% !important; max-width: none !important; height: 100% !important; padding: 0 !important; margin: 0 !important;
  }
  header.default13 nav.navbar {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    justify-content: flex-end !important; height: 100% !important; width: 100% !important; flex-wrap: nowrap !important; gap: 6px !important;
  }
  header.default13 .navbar-brand, header.default13 nav.navbar > .logo {
    display: inline-flex !important; align-items: center !important; order: 0 !important; margin: 0 auto 0 0 !important; flex: 0 1 auto;
  }
  header.default13 .navbar-brand img, header.default13 .logo img { max-height: 36px !important; width: auto !important; }
  header.default13 .navbar-reservation {
    order: 3 !important; margin: 0 !important; width: auto !important; flex: 0 0 auto;
    white-space: nowrap; padding: 9px 14px !important; font-size: 13px !important;
  }
  header.default13 .navbar-toggler {
    order: 5 !important; position: static !important; margin-left: 2px !important; flex: 0 0 auto;
    display: inline-flex !important; flex-direction: column !important; gap: 1px !important;
    visibility: visible !important; opacity: 1 !important;
    align-items: center; justify-content: center; width: 44px; height: 44px; padding: 8px !important;
    border: 0 !important; background: transparent !important;
  }
  /* default13: hamburger = <i class="icon-menu"> (glyph) + <span>Menu</span> (etykieta).
     NIE stylować span jako pasek 2px (manglował tekst => kontrast 1.2, audyt 2026-06-23).
     .icon-bar zostaje na wypadek szablonów które używają pasków. */
  header.default13 .navbar-toggler .icon-bar {
    background: var(--er-text) !important; height: 2px !important; width: 24px !important; display: block; border-radius: 2px;
  }
  header.default13 .navbar-toggler .icon, header.default13 .navbar-toggler .icon-menu {
    font-size: 21px !important; line-height: 1 !important; color: var(--er-text) !important;
    background: none !important; height: auto !important; width: auto !important; display: block !important;
  }
  header.default13 .navbar-toggler span {
    background: none !important; height: auto !important; width: auto !important;
    font-size: 10px !important; line-height: 1.1 !important; letter-spacing: .3px;
    color: var(--er-text) !important; display: block !important; border-radius: 0 !important;
  }
  /* LISTA MENU = slide-in drawer z prawej (pod paskiem) */
  header.default13 .menu-wrapper ul {
    position: fixed !important; top: var(--er-header-h, 64px) !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    width: min(86vw, 340px) !important; flex-direction: column !important; align-items: stretch !important;
    background: #fff !important; box-shadow: -12px 0 40px rgba(15,15,14,.18) !important;
    transform: translateX(110%) !important; transition: transform .35s var(--er-ease) !important;
    padding: 14px 24px 28px !important; overflow-y: auto !important; gap: 2px !important; z-index: 1190 !important; margin: 0 !important;
  }
  body.er-nav-open header.default13 .menu-wrapper ul { transform: translateX(0) !important; }
  /* CLOSED-state (lessons/029 nav close-flash): #navbar (kontener drawera = navbar-nav + social +
     lang) natywnie zostaje display:block ~400ms po zdjeciu er-nav-open -> miga jako statyczny
     wysrodkowany blok. Wymus ukrycie w stanie ZAMKNIETYM (open = er-nav-open pokazuje go).
     Scope page-index (podstrony moga uzywac natywnego #navbar). Live-verified 390: drawer otwiera
     sie OK, leaked 24->0, #navbar ukryty w 13ms (bylo ~400ms). */
  body.page-index:not(.er-nav-open) #navbar { display: none !important; }
  header.default13 .menu-wrapper li > a {
    display: block; padding: 14px 4px !important; font-size: 17px !important;
    border-bottom: 1px solid var(--er-border);
  }
  .er-nav-backdrop {
    position: fixed; inset: 0; background: rgba(11,12,15,.45); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--er-ease); z-index: 1090;
  }
  body.er-nav-open .er-nav-backdrop { opacity: 1; visibility: visible; }
  /* FIX 2026-06-23: backdrop z-index MUSI byc < header (1100) — inaczej backdrop (dziecko body)
     renderuje sie NAD drawerem (drawer jest w headerze) i przechwytuje tapy => menu zamyka sie
     zamiast nawigowac. 1090 = dimming strony OK + linki drawera klikalne. */
  body.er-nav-open { overflow: hidden; }
}

/* ═══════════════════════════════════════════════════════════════
   §ER-LANGSWITCH — przełącznik PL/EN (brief: dwujęzyczna)
   ═══════════════════════════════════════════════════════════════ */
.er-lang, .lang-switcher, [class*="languageVersion"] { display: inline-flex; align-items: center; gap: 4px; }
.er-lang a, .lang-switcher a {
  font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--er-text-muted) !important; text-decoration: none; padding: 6px 9px; border-radius: 6px;
  transition: color .2s var(--er-ease), background .2s var(--er-ease);
}
.er-lang a:hover { color: var(--er-primary) !important; background: var(--er-primary-soft); }
.er-lang a.is-active, .lang-switcher a.active { color: var(--er-text) !important; background: var(--er-cream2); }

/* ═══════════════════════════════════════════════════════════════
   §ER-COOKIE — pasek zgody (7141 ck_dsclr_v2_freeze_bcg)
   ═══════════════════════════════════════════════════════════════ */
.ck_dsclr, [class*="ck_dsclr"] .cookie-bar, #cookieBar, .cookie-disclaimer {
  background: var(--er-secondary) !important; color: rgba(255,255,255,.88) !important;
  font-size: 13px !important; line-height: 1.5;
}
.ck_dsclr a, #cookieBar a { color: var(--er-primary-light) !important; }
#cookieBar .btn, .cookie-disclaimer .btn, .ck_dsclr .btn {
  background: var(--er-primary) !important; border-color: var(--er-primary) !important; color: #fff !important;
  border-radius: var(--er-radius) !important; font-weight: 700 !important;
}
/* FIX kolizji (MCP live 7141, 2026-06-19): toast zgody #ck_dsclr_v2 (--passive,
   fixed, z-index:999, lewy-dol 420x168) nachodzil na pole LOKALIZACJA widgetu
   hero i przechwytywal klik (tylko to pole — daty/osoby/szukaj sa na prawo).
   Na home/desktop przypinamy toast do gornego-lewego rogu (pod fixed header
   ~95px) — odporne na kazda wysokosc viewportu, hero nietkniete. Baner zostaje
   w pelni widoczny i klikalny. Mobile (<=991px) bez zmian. */
@media (min-width: 992px) {
  body.page-index #ck_dsclr_v2,
  body.page-index .ck_dsclr_v2 {
    top: 110px !important;
    bottom: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   §ER-SEARCH — widget rezerwacji (hero) — daty / goście / szukaj
   ═══════════════════════════════════════════════════════════════ */
.er-searchwidget {
  display: grid; grid-template-columns: 1.2fr 1.2fr 1fr auto; gap: 12px; align-items: end;
  background: #fff; border: 1px solid var(--er-border); border-radius: var(--er-radius-lg);
  box-shadow: var(--er-shadow-md); padding: 18px;
}
.er-searchwidget__field { display: flex; flex-direction: column; gap: 6px; }
.er-searchwidget__field label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--er-text-muted); font-weight: 700; }
.er-searchwidget__field .er-input, .er-searchwidget__field .er-select { padding: 11px 13px; }
.er-searchwidget__btn {
  background: var(--er-primary); color: #fff; border: 0; border-radius: var(--er-radius);
  font-family: var(--er-font-heading); font-weight: 700; font-size: 15px; padding: 14px 28px; cursor: pointer;
  transition: background .25s var(--er-ease); white-space: nowrap; height: 46px;
}
.er-searchwidget__btn:hover { background: var(--er-primary-dark); }
@media (max-width: 991px) { .er-searchwidget { grid-template-columns: 1fr 1fr; } .er-searchwidget__btn { grid-column: 1 / -1; } }
@media (max-width: 560px) { .er-searchwidget { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   §ER-OFFERDETAIL — strona /offer/N (galeria, amenities, sticky book)
   ═══════════════════════════════════════════════════════════════ */
body.page-offer .er-offerhead { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(24px,4vw,48px); max-width: 1240px; margin: 0 auto; padding: clamp(24px,4vw,40px) clamp(20px,4vw,48px); align-items: start; }
.er-offergal { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 150px; gap: 10px; border-radius: var(--er-radius-lg); overflow: hidden; }
.er-offergal__main { grid-column: 1; grid-row: 1 / span 2; }
.er-offergal img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; border-radius: 6px; }
/* sticky booking — IntersectionObserver dodaje --fixed (TRAP-17 wzorzec) */
.er-bookbox { position: sticky; top: calc(var(--er-header-h) + 16px); background: #fff; border: 1px solid var(--er-border); border-radius: var(--er-radius-lg); box-shadow: var(--er-shadow-md); padding: 24px; }
.er-bookbox__price { font-family: var(--er-font-heading); font-size: 26px; font-weight: 800; color: var(--er-text); margin: 0 0 4px; }
.er-bookbox__price b { color: var(--er-primary); }
.er-bookbox__price small { font-size: 13px; color: var(--er-text-muted); font-weight: 500; }
/* price chip — prostokąt h64 r12 (NIE pill h56) — memory trap */
.er-pricechip, .offer-price {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 64px !important; border-radius: 12px !important; padding: 10px 18px !important;
  background: var(--er-primary-soft) !important; color: var(--er-primary-dark) !important;
}
.er-amenities-list { columns: 2; column-gap: 28px; list-style: none; padding: 0; margin: 0; }
.er-amenities-list li { break-inside: avoid; padding: 8px 0 8px 28px; position: relative; font-size: 14px; color: var(--er-text-soft); }
.er-amenities-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 18px; height: 18px; background: var(--er-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6262C' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; border-radius: 50%; }
@media (max-width: 991px) {
  body.page-offer .er-offerhead { grid-template-columns: 1fr; }
  .er-bookbox { position: static; }
  .er-offergal { grid-template-columns: 1fr 1fr; }
  .er-amenities-list { columns: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   §ER-STICKYCTA — mobilny pasek „Rezerwuj" (dół ekranu)
   ═══════════════════════════════════════════════════════════════ */
.er-stickycta { display: none; }
@media (max-width: 767px) {
  .er-stickycta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; display: flex; gap: 10px;
    background: #fff; border-top: 1px solid var(--er-border); padding: 10px 14px;
    box-shadow: 0 -6px 24px rgba(15,15,14,.12);
  }
  .er-stickycta .er-btn { flex: 1; justify-content: center; }
  .er-stickycta__call { flex: 0 0 52px; }
  body.has-stickycta { padding-bottom: 72px; }
}

/* ═══════════════════════════════════════════════════════════════
   §ER-BACKTOP — przycisk powrotu na górę + pasek postępu scrolla
   ═══════════════════════════════════════════════════════════════ */
.er-backtop {
  position: fixed; right: 22px; bottom: 22px; z-index: 1090; width: 48px; height: 48px;
  border-radius: 50%; background: var(--er-primary); color: #fff; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .3s var(--er-ease); box-shadow: var(--er-shadow-md);
}
.er-backtop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.er-backtop svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.2; }
.er-backtop:hover { background: var(--er-primary-dark); }
@media (max-width: 767px) { .er-backtop { bottom: 84px; } }
.er-scrollprogress { position: fixed; top: 0; left: 0; height: 3px; background: var(--er-primary); z-index: 1300; width: 0; transition: width .1s linear; }

/* ═══════════════════════════════════════════════════════════════
   §ER-SECTION-INTRO-EXTRA — naprzemienne tła sekcji (band system)
   ═══════════════════════════════════════════════════════════════ */
.er-band { padding: clamp(56px,8vw,110px) 0; }
.er-band--cream { background: var(--er-cream); }
.er-band--white { background: #fff; }
.er-band--dark { background: var(--er-secondary); color: #fff; }
.er-band > .er-container { position: relative; }
.er-eyebrow--center { display: block; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   §ER-KEYFRAMES — animacje reveal/interakcje
   ═══════════════════════════════════════════════════════════════ */
@keyframes erFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes erFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes erScaleIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes erSlideRight { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes erPulse { 0%,100% { box-shadow: 0 0 0 0 var(--er-primary-soft); } 50% { box-shadow: 0 0 0 10px transparent; } }
@keyframes erSpin { to { transform: rotate(360deg); } }
.er-anim-fadeup { animation: erFadeUp .7s var(--er-ease) both; }
.er-anim-fadein { animation: erFadeIn .8s var(--er-ease) both; }
.er-anim-scalein { animation: erScaleIn .6s var(--er-ease) both; }
.er-anim-d1 { animation-delay: .1s; } .er-anim-d2 { animation-delay: .2s; } .er-anim-d3 { animation-delay: .3s; } .er-anim-d4 { animation-delay: .4s; }
.er-spinner { width: 28px; height: 28px; border: 3px solid var(--er-border); border-top-color: var(--er-primary); border-radius: 50%; animation: erSpin .8s linear infinite; }

/* ═══════════════════════════════════════════════════════════════
   §ER-OFFERSLIST — strona /offers (nagłówek wyników + sort)
   ═══════════════════════════════════════════════════════════════ */
body.page-offers .er-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; max-width: 1240px; margin: 0 auto; padding: 18px clamp(20px,4vw,48px) 0; }
.er-results-count { font-size: 14px; color: var(--er-text-muted); }
.er-results-count b { color: var(--er-text); font-family: var(--er-font-heading); }
.er-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--er-text-soft); }
.er-sort .er-select { padding: 8px 36px 8px 12px; font-size: 14px; }
body.page-offers .er-offers { max-width: 1240px; margin: 0 auto; padding: clamp(24px,4vw,40px) clamp(20px,4vw,48px) 0; }

/* ═══════════════════════════════════════════════════════════════
   §ER-TIMELINE — proces Współpracy (pionowa oś)
   ═══════════════════════════════════════════════════════════════ */
.er-timeline { max-width: 760px; margin: 0 auto; position: relative; padding-left: 44px; }
.er-timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--er-border); }
.er-timeline__item { position: relative; padding-bottom: 36px; }
.er-timeline__item:last-child { padding-bottom: 0; }
.er-timeline__item::before { counter-increment: ertl; content: counter(ertl); position: absolute; left: -44px; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--er-primary); color: #fff; font-family: var(--er-font-heading); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.er-timeline { counter-reset: ertl; }
.er-timeline__title { font-family: var(--er-font-heading); font-size: 18px; font-weight: 700; color: var(--er-text); margin: 0 0 6px; }
.er-timeline__text { font-size: 15px; line-height: 1.6; color: var(--er-text-soft); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   §ER-QUOTE — duży cytat / claim (o nas / operator)
   ═══════════════════════════════════════════════════════════════ */
.er-quote { max-width: 920px; margin: 0 auto; text-align: center; }
.er-quote__mark { font-family: var(--er-font-heading); font-size: 72px; line-height: .6; color: var(--er-primary); opacity: .25; }
.er-quote__text { font-family: var(--er-font-heading); font-size: clamp(22px,3vw,34px); font-weight: 700; line-height: 1.35; color: var(--er-text); margin: 0 0 18px; }
.er-quote__cite { font-size: 14px; color: var(--er-text-muted); letter-spacing: 1px; text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════
   §ER-CONTACTCARDS — kafelki kontaktu / biuro
   ═══════════════════════════════════════════════════════════════ */
.er-contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(16px,2.5vw,24px); }
.er-contact-card { text-align: center; padding: 32px 24px; border: 1px solid var(--er-border); border-radius: var(--er-radius-lg); background: #fff; transition: transform .25s var(--er-ease), border-color .25s var(--er-ease); }
.er-contact-card:hover { transform: translateY(-4px); border-color: var(--er-primary); }
.er-contact-card__icon { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 14px; background: var(--er-primary-soft); color: var(--er-primary); display: flex; align-items: center; justify-content: center; }
.er-contact-card__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.er-contact-card__label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--er-text-muted); margin: 0 0 6px; }
.er-contact-card__value { font-family: var(--er-font-heading); font-size: 17px; font-weight: 700; color: var(--er-text); }
.er-contact-card__value a { color: var(--er-text); text-decoration: none; }
.er-contact-card__value a:hover { color: var(--er-primary); }

/* ═══════════════════════════════════════════════════════════════
   §ER-PARTNERBADGE — rabaty partnerskie (kafelki z wartością)
   ═══════════════════════════════════════════════════════════════ */
.er-pbadge { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--er-font-heading); font-weight: 800; color: var(--er-primary); }
.er-pbadge b { font-size: 22px; }
.er-pbadge span { font-size: 13px; }
.er-partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.er-partner-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border: 1px solid var(--er-border); border-radius: var(--er-radius); background: #fff; }
.er-partner-tile__name { font-family: var(--er-font-heading); font-weight: 700; font-size: 15px; color: var(--er-text); }

/* ═══════════════════════════════════════════════════════════════
   §ER-DARKMODE — opt-in [data-er-theme="dark"] (preset modern-minimal)
   NIE auto (prefers-color-scheme) — brand jest jasny; włącz świadomie.
   ═══════════════════════════════════════════════════════════════ */
[data-er-theme="dark"] {
  --er-bg: #0F1012; --er-text: #F2F3F5; --er-text-soft: #C4C7CC; --er-text-muted: #8B9098;
  --er-cream: #17181B; --er-cream2: #1E2024; --er-cream3: #26282D; --er-border: #2A2D33;
  --er-secondary: #06070A;
}
[data-er-theme="dark"] body, [data-er-theme="dark"] .er-band--white { background: var(--er-bg); }
[data-er-theme="dark"] .er-card, [data-er-theme="dark"] .er-offer, [data-er-theme="dark"] .er-amenity,
[data-er-theme="dark"] .er-contact-card, [data-er-theme="dark"] .er-input, [data-er-theme="dark"] .er-textarea, [data-er-theme="dark"] .er-select {
  background: var(--er-cream2); border-color: var(--er-border); color: var(--er-text);
}
[data-er-theme="dark"] header.default13, [data-er-theme="dark"] header.default13 .menu-wrapper { background: #0F1012 !important; }
[data-er-theme="dark"] header.default13 .menu-wrapper a[href]:not(.navbar-reservation) { color: var(--er-text) !important; }
[data-er-theme="dark"] .er-ph { background: linear-gradient(135deg,#1E2024,#26282D); }

/* ═══════════════════════════════════════════════════════════════
   §ER-MISC — domknięcia (selection, scrollbar, hr, focus rings)
   ═══════════════════════════════════════════════════════════════ */
::selection { background: var(--er-primary); color: #fff; }
.er-section + .er-section { padding-top: 0; }
.er-hr { border: 0; height: 1px; background: var(--er-border); margin: clamp(32px,5vw,56px) 0; }
.er-kbd { font-family: monospace; background: var(--er-cream2); border: 1px solid var(--er-border); border-radius: 4px; padding: 2px 6px; font-size: 13px; }
.er-link-arrow { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--er-primary); text-decoration: none; }
.er-link-arrow::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .25s var(--er-ease); }
.er-link-arrow:hover::after { transform: translateX(4px); }
.er-link-arrow:hover { color: var(--er-primary-dark); }

/* ═══════════════════════════════════════════════════════════════
   §ER-CMS — typografia treści systemowych /txt (regulamin, polityka)
   System renderuje surowy HTML w #pageContent — nadajemy mu czytelność.
   ═══════════════════════════════════════════════════════════════ */
body.page-txt #pageContent, .er-cms { max-width: 860px; margin-left: auto; margin-right: auto; }
body.page-txt #pageContent h2, .er-cms h2 { font-family: var(--er-font-heading); font-size: clamp(22px,3vw,30px); font-weight: 700; color: var(--er-text); margin: clamp(32px,4vw,48px) 0 16px; }
body.page-txt #pageContent h3, .er-cms h3 { font-family: var(--er-font-heading); font-size: clamp(18px,2.4vw,22px); font-weight: 700; color: var(--er-text); margin: 28px 0 12px; }
body.page-txt #pageContent h4, .er-cms h4 { font-family: var(--er-font-heading); font-size: 17px; font-weight: 600; color: var(--er-text); margin: 22px 0 10px; }
body.page-txt #pageContent p, .er-cms p { font-size: 16px; line-height: 1.8; color: var(--er-text-soft); margin: 0 0 18px; }
body.page-txt #pageContent ul, body.page-txt #pageContent ol, .er-cms ul, .er-cms ol { margin: 0 0 20px; padding-left: 4px; }
body.page-txt #pageContent ul li, .er-cms ul li { list-style: none; position: relative; padding: 6px 0 6px 28px; font-size: 16px; line-height: 1.7; color: var(--er-text-soft); }
body.page-txt #pageContent ul li::before, .er-cms ul li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--er-primary); }
body.page-txt #pageContent ol, .er-cms ol { counter-reset: ercms; }
body.page-txt #pageContent ol li, .er-cms ol li { counter-increment: ercms; list-style: none; position: relative; padding: 6px 0 6px 34px; font-size: 16px; line-height: 1.7; color: var(--er-text-soft); }
body.page-txt #pageContent ol li::before, .er-cms ol li::before { content: counter(ercms); position: absolute; left: 0; top: 6px; width: 22px; height: 22px; background: var(--er-primary-soft); color: var(--er-primary-dark); border-radius: 50%; font-family: var(--er-font-heading); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
body.page-txt #pageContent a, .er-cms a { color: var(--er-primary); text-decoration: underline; text-underline-offset: 2px; }
body.page-txt #pageContent blockquote, .er-cms blockquote { border-left: 3px solid var(--er-primary); background: var(--er-cream); padding: 18px 22px; margin: 0 0 22px; border-radius: 0 var(--er-radius) var(--er-radius) 0; font-style: italic; color: var(--er-text); }
body.page-txt #pageContent table, .er-cms table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
body.page-txt #pageContent th, .er-cms th { background: var(--er-cream2); text-align: left; padding: 12px 14px; font-family: var(--er-font-heading); font-weight: 700; color: var(--er-text); border-bottom: 2px solid var(--er-border); }
body.page-txt #pageContent td, .er-cms td { padding: 12px 14px; border-bottom: 1px solid var(--er-border); color: var(--er-text-soft); }
body.page-txt #pageContent img, .er-cms img { max-width: 100%; height: auto; border-radius: var(--er-radius); margin: 8px 0; }

/* ═══════════════════════════════════════════════════════════════
   §ER-NOTICE — komunikaty (info / sukces / uwaga)
   ═══════════════════════════════════════════════════════════════ */
.er-notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--er-radius); font-size: 14px; line-height: 1.55; margin: 0 0 18px; border: 1px solid; }
.er-notice__icon { flex-shrink: 0; width: 22px; height: 22px; }
.er-notice__icon svg { width: 22px; height: 22px; stroke-width: 2; fill: none; }
.er-notice--info { background: var(--er-cream); border-color: var(--er-border); color: var(--er-text); }
.er-notice--success { background: rgba(34,160,80,.08); border-color: rgba(34,160,80,.35); color: #1b6e38; }
.er-notice--warn { background: var(--er-primary-soft); border-color: var(--er-primary); color: var(--er-primary-dark); }
.er-notice b { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   §ER-RATING — ocena gości (gwiazdki + liczba)
   ═══════════════════════════════════════════════════════════════ */
.er-rating { display: inline-flex; align-items: center; gap: 10px; }
.er-rating__stars { display: inline-flex; gap: 2px; color: var(--er-primary); }
.er-rating__stars svg { width: 18px; height: 18px; fill: currentColor; }
.er-rating__score { font-family: var(--er-font-heading); font-weight: 800; color: var(--er-text); font-size: 17px; }
.er-rating__count { font-size: 13px; color: var(--er-text-muted); }

/* ═══════════════════════════════════════════════════════════════
   §ER-HERO-VARIANTS — alternatywne hero (centered / minimal)
   ═══════════════════════════════════════════════════════════════ */
.er-hero--centered .er-hero__inner { grid-template-columns: 1fr; text-align: center; max-width: 880px; }
.er-hero--centered .er-hero__lead { margin-left: auto; margin-right: auto; }
.er-hero--centered .er-hero__actions, .er-hero--centered .er-hero__stats { justify-content: center; }
.er-hero--centered .er-hero__kicker { justify-content: center; }
.er-hero--minimal { padding-top: calc(var(--er-header-h) + 64px); padding-bottom: 64px; }
.er-hero--minimal .er-hero__media { display: none; }
.er-hero--minimal .er-hero__inner { grid-template-columns: 1fr; max-width: 960px; }

/* ═══════════════════════════════════════════════════════════════
   §ER-PAGECTX-EXTRA — dodatkowe konteksty + porządek sekcji home
   ═══════════════════════════════════════════════════════════════ */
body.page-index .er-section:first-of-type { padding-top: clamp(40px,6vw,72px); }
body.page-index main > .er-band:nth-child(even) { background: var(--er-cream); }
.er-section--tight { padding-top: clamp(32px,4vw,56px); padding-bottom: clamp(32px,4vw,56px); }
.er-section--flush-top { padding-top: 0; }
.er-anchor { scroll-margin-top: calc(var(--er-header-h) + 16px); }

/* ═══════════════════════════════════════════════════════════════
   §ER-LOGOSTRIP — pasek logotypów partnerów / portale rezerwacyjne
   ═══════════════════════════════════════════════════════════════ */
.er-logostrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px,4vw,56px); opacity: .7; }
.er-logostrip img { height: 30px; width: auto; filter: grayscale(1); transition: filter .3s var(--er-ease), opacity .3s var(--er-ease); opacity: .8; }
.er-logostrip img:hover { filter: grayscale(0); opacity: 1; }
.er-logostrip__label { width: 100%; text-align: center; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--er-text-muted); margin-bottom: 20px; }

/* ═══════════════════════════════════════════════════════════════
   §ER-PRICING — tabela warunków (najem korporacyjny / B2B)
   ═══════════════════════════════════════════════════════════════ */
.er-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,3vw,28px); }
.er-plan { border: 1px solid var(--er-border); border-radius: var(--er-radius-lg); background: #fff; padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--er-shadow-sm); }
.er-plan--featured { border-color: var(--er-primary); box-shadow: var(--er-shadow-md); position: relative; }
.er-plan--featured::before { content: "Najczęściej wybierane"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--er-primary); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.er-plan__name { font-family: var(--er-font-heading); font-size: 20px; font-weight: 800; color: var(--er-text); margin: 0 0 6px; }
.er-plan__desc { font-size: 14px; color: var(--er-text-muted); margin: 0 0 20px; line-height: 1.5; }
.er-plan__price { font-family: var(--er-font-heading); font-size: 34px; font-weight: 800; color: var(--er-text); line-height: 1; margin: 0 0 4px; }
.er-plan__price small { font-size: 14px; color: var(--er-text-muted); font-weight: 500; }
.er-plan__list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; flex: 1; }
.er-plan__list li { position: relative; padding-left: 28px; font-size: 14px; color: var(--er-text-soft); line-height: 1.5; }
.er-plan__list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--er-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6262C' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
@media (max-width: 991px) { .er-pricing { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   §ER-OWNERCARD — korzyści dla właścicieli (Współpracuj z nami)
   ═══════════════════════════════════════════════════════════════ */
.er-ownercard { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; background: var(--er-cream); border-radius: var(--er-radius-lg); padding: clamp(28px,4vw,48px); }
.er-ownercard__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.er-ownermetric { background: #fff; border: 1px solid var(--er-border); border-radius: var(--er-radius); padding: 22px; text-align: center; }
.er-ownermetric b { display: block; font-family: var(--er-font-heading); font-size: clamp(26px,3vw,38px); font-weight: 800; color: var(--er-primary); line-height: 1; }
.er-ownermetric span { font-size: 13px; color: var(--er-text-muted); margin-top: 8px; display: block; }
@media (max-width: 767px) { .er-ownercard { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   §ER-EMPTYSTATE — brak ofert po filtrze
   ═══════════════════════════════════════════════════════════════ */
.er-empty { text-align: center; max-width: 480px; margin: 0 auto; padding: clamp(48px,8vw,96px) 20px; }
.er-empty__icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--er-cream2); color: var(--er-text-muted); display: flex; align-items: center; justify-content: center; }
.er-empty__icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.er-empty__title { font-family: var(--er-font-heading); font-size: 22px; font-weight: 700; color: var(--er-text); margin: 0 0 10px; }
.er-empty__text { font-size: 15px; color: var(--er-text-soft); line-height: 1.6; margin: 0 0 24px; }

/* ═══════════════════════════════════════════════════════════════
   §ER-RATIO — utilities proporcji obrazów
   ═══════════════════════════════════════════════════════════════ */
.er-ratio { position: relative; overflow: hidden; border-radius: var(--er-radius); background: var(--er-cream2); }
.er-ratio > img, .er-ratio > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.er-ratio--16x9 { aspect-ratio: 16/9; }
.er-ratio--4x3 { aspect-ratio: 4/3; }
.er-ratio--3x2 { aspect-ratio: 3/2; }
.er-ratio--1x1 { aspect-ratio: 1/1; }
.er-ratio--4x5 { aspect-ratio: 4/5; }

/* ═══════════════════════════════════════════════════════════════
   §ER-SECTIONNUM — numerowane nagłówki sekcji (proces / etapy)
   ═══════════════════════════════════════════════════════════════ */
.er-sectionnum { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.er-sectionnum__digit { font-family: var(--er-font-heading); font-size: 14px; font-weight: 800; color: var(--er-primary); letter-spacing: 1px; }
.er-sectionnum__line { width: 36px; height: 2px; background: var(--er-primary); }

/* ═══════════════════════════════════════════════════════════════
   §ER-STEPS-H — kroki poziome (z łącznikami)
   ═══════════════════════════════════════════════════════════════ */
.er-steps-h { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: ersh; }
.er-step-h { position: relative; padding: 0 16px; text-align: center; }
.er-step-h::after { content: ""; position: absolute; top: 22px; left: 50%; width: 100%; height: 2px; background: var(--er-border); z-index: 0; }
.er-step-h:last-child::after { display: none; }
.er-step-h__dot { counter-increment: ersh; position: relative; z-index: 1; width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; background: #fff; border: 2px solid var(--er-primary); color: var(--er-primary); font-family: var(--er-font-heading); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.er-step-h__dot::before { content: counter(ersh); }
.er-step-h__title { font-family: var(--er-font-heading); font-size: 16px; font-weight: 700; color: var(--er-text); margin: 0 0 6px; }
.er-step-h__text { font-size: 13px; color: var(--er-text-soft); line-height: 1.5; margin: 0; }
@media (max-width: 767px) {
  .er-steps-h { grid-template-columns: 1fr; gap: 24px; }
  .er-step-h::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   §ER-FAB-CONTACT — szybki kontakt (telefon) — desktop float
   ═══════════════════════════════════════════════════════════════ */
.er-fab { position: fixed; left: 22px; bottom: 22px; z-index: 1080; display: inline-flex; align-items: center; gap: 10px; background: var(--er-primary); color: #fff; padding: 13px 20px; border-radius: 999px; font-family: var(--er-font-heading); font-weight: 700; text-decoration: none; box-shadow: var(--er-shadow-md); transition: background .25s var(--er-ease), transform .25s var(--er-ease); }
.er-fab:hover { background: var(--er-primary-dark); color: #fff; transform: translateY(-2px); }
.er-fab svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
@media (max-width: 767px) { .er-fab { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   §ER-TRUST — pasek sygnałów zaufania (operator, lata, obiekty)
   ═══════════════════════════════════════════════════════════════ */
.er-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px,3vw,40px); padding: 18px clamp(20px,4vw,48px); }
.er-trust__item { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--er-text-soft); }
.er-trust__item svg { width: 20px; height: 20px; stroke: var(--er-primary); fill: none; stroke-width: 1.8; }

/* ═══════════════════════════════════════════════════════════════
   §ER-TOOLTIP — podpowiedzi (data-er-tip)
   ═══════════════════════════════════════════════════════════════ */
[data-er-tip] { position: relative; cursor: help; }
[data-er-tip]::after {
  content: attr(data-er-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--er-secondary); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4;
  padding: 8px 12px; border-radius: var(--er-radius); white-space: nowrap; max-width: 240px;
  opacity: 0; visibility: hidden; transition: opacity .2s var(--er-ease), transform .2s var(--er-ease); z-index: 1400; pointer-events: none;
}
[data-er-tip]:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   §ER-LIGHTBOX — modal galerii (tworzony przez JS w KONIEC_BODY)
   ═══════════════════════════════════════════════════════════════ */
.er-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; }
.er-lightbox.er-active { display: flex; }
.er-lightbox__overlay { position: absolute; inset: 0; background: rgba(11,12,15,.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.er-lightbox__img { position: relative; max-width: 92vw; max-height: 86vh; border-radius: var(--er-radius); box-shadow: 0 24px 70px rgba(0,0,0,.55); z-index: 1; animation: erScaleIn .3s var(--er-ease); }
.er-lightbox__close, .er-lightbox__prev, .er-lightbox__next {
  position: absolute; z-index: 2; background: rgba(255,255,255,.14); border: 0; color: #fff; cursor: pointer;
  width: 52px; height: 52px; border-radius: 50%; font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .2s var(--er-ease);
}
.er-lightbox__close:hover, .er-lightbox__prev:hover, .er-lightbox__next:hover { background: var(--er-primary); }
.er-lightbox__close { top: 22px; right: 22px; }
.er-lightbox__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.er-lightbox__next { right: 22px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) {
  .er-lightbox__prev { left: 10px; } .er-lightbox__next { right: 10px; } .er-lightbox__close { top: 12px; right: 12px; }
  .er-lightbox__close, .er-lightbox__prev, .er-lightbox__next { width: 44px; height: 44px; font-size: 24px; }
}

/* §ER-HEADER-SCROLLED — JS dodaje .ap-header--scrolled (>50px) */
header.default13.ap-header--scrolled { box-shadow: 0 4px 24px rgba(15,15,14,.1) !important; }

/* ═══════════════════════════════════════════════════════════════
   §ER-HERO-SYSTEM — nakladka hero NAD systemowym sliderem (.section.parallax)
   JS (KONIEC_BODY) gdy fp-enabled: teleport .er-hero-wrap do .section.parallax
   .fp-tableCell; tlo = systemowe zdjecia slidera (20 szt na 9933). Wzorzec FR.
   ═══════════════════════════════════════════════════════════════ */
.er-hero-wrap {
  position: relative; width: 100%; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--er-header-h) + 40px) clamp(20px, 4vw, 48px) 56px;
  overflow: visible; z-index: 2;
}
.er-hero-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* scrim minimalny (wybor Damiana 2026-06-19) — zdjecie zywe; bialy H1 broni mocny text-shadow */
  background: linear-gradient(180deg, rgba(11,12,15,.16) 0%, rgba(11,12,15,.06) 45%, rgba(11,12,15,.28) 100%);
}
.er-hero-wrap__inner { position: relative; z-index: 2; width: 100%; max-width: 1080px; margin: 0 auto; text-align: center; color: #fff; }
.er-hero-wrap__kicker {
  display: inline-block; font-family: var(--er-font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: #fff; padding: 8px 20px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  margin: 0 0 26px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.er-hero-wrap__title {
  font-family: var(--er-font-heading); font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  font-size: clamp(34px, 5.2vw, 62px); color: #fff !important; margin: 0 0 22px;
  /* !important bije globalne h1{color:var(--ido-dark)!important} — inaczej H1 czarny na zdjeciu (MCP live 7141 2026-06-19) */
  text-shadow: 0 1px 4px rgba(0,0,0,.5), 0 2px 26px rgba(0,0,0,.42);
}
.er-hero-wrap__title em, .er-hero-wrap__title span { font-style: normal; color: var(--er-primary-light) !important; }
.er-hero-wrap__lead {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: rgba(255,255,255,.94);
  max-width: 640px; margin: 0 auto 32px; text-shadow: 0 1px 14px rgba(0,0,0,.35);
}
.er-hero-wrap__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.er-hero-wrap__facts {
  display: flex; gap: clamp(22px, 4vw, 52px); flex-wrap: wrap; justify-content: center;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.22);
}
.er-hero-wrap__fact { display: flex; flex-direction: column; gap: 5px; color: #fff; }
.er-hero-wrap__fact strong { font-family: var(--er-font-heading); font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: #fff; line-height: 1; }
.er-hero-wrap__fact span { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .85; }
.er-btn--ghost-light { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.6); }
.er-btn--ghost-light:hover { background: #fff; color: var(--er-primary-dark) !important; border-color: #fff; }
/* fallback gdy hero NIE teleportowany (brak fullpage) */
html:not(.fp-enabled) .er-hero-wrap { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--er-secondary); }

/* ═══════════════════════════════════════════════════════════════
   §ER-WIDGET — PRAWDZIWY systemowy widget rezerwacji (.index-info/.iai-search)
   JS relokuje .index-info do hero + wymusza widocznosc (system go chowa).
   Styling pol jak FR, tokeny --er-, widget pozostaje INTERAKTYWNY.
   ═══════════════════════════════════════════════════════════════ */
body.page-index .index-info {
  position: relative !important; z-index: 3 !important; width: 100% !important; max-width: 940px !important;
  margin: 30px auto 0 !important; overflow: visible !important;
  display: block !important; visibility: visible !important; opacity: 1 !important;
}
body.page-index .index-info > h1, body.page-index .index-info > h2,
body.page-index .index-info > .navbar-reservation { display: none !important; }
.iai-search, #iai_book_se.iai_frontpage, #iai_book_form {
  display: block !important; visibility: visible !important; opacity: 1 !important;
  position: relative !important; left: auto !important; transform: none !important; height: auto !important; max-width: none !important;
}
.iai_book_trigger { display: none !important; }
/* KRYTYCZNE: default13 daje .index-info pointer-events:none (overlay dekoracyjny) — przywroc klikalnosc widgetu */
body.page-index .index-info, body.page-index .index-info * { pointer-events: auto !important; }
#iai_book_form {
  display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 10px;
  background: rgba(255,255,255,.97); border-radius: var(--er-radius-lg); padding: 14px;
  box-shadow: 0 24px 70px rgba(11,12,15,.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#iai_book_form .widget__option {
  position: relative; flex: 1 1 175px; min-width: 145px; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  background: #fff; border: 1.5px solid var(--er-border); border-radius: var(--er-radius); padding: 9px 14px; min-height: 56px;
}
#iai_book_form .widget__option label { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--er-text-muted); font-weight: 700; cursor: pointer; }
#iai_book_form .iai_widget_input, #iai_book_form input[type="text"], #iai_book_form input:not([type="submit"]) {
  border: 0 !important; outline: none !important; font-family: var(--er-font-body) !important; font-size: 15px !important;
  color: var(--er-text) !important; background: transparent !important; width: 100% !important; padding: 0 !important; height: auto !important;
}
#iai_book_form .iai_widget_btn { background: transparent !important; border: 0 !important; }
#person_section .iai_widget_btn { position: absolute !important; right: 12px !important; top: 50% !important; left: auto !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; font-size: 0 !important; }
#person_section .iai_widget_btn::after { content: ""; display: block; width: 8px; height: 8px; border-right: 2px solid var(--er-text-muted); border-bottom: 2px solid var(--er-text-muted); transform: rotate(45deg); margin: -2px auto 0; }
#iai_book_form .formbutton {
  flex: 0 0 auto; background: var(--er-primary) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--er-radius) !important; font-family: var(--er-font-heading) !important; font-weight: 700 !important;
  letter-spacing: .5px; padding: 0 32px !important; min-height: 56px !important; min-width: 120px; cursor: pointer !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
#iai_book_form .formbutton:hover { background: var(--er-primary-dark) !important; }
#iai_book_form .formbutton { padding: 0 !important; min-width: 130px; overflow: visible; }
#iai_book_form .formbutton button {
  background: transparent !important; color: #fff !important; border: 0 !important; cursor: pointer !important;
  font-size: 0 !important; width: 100%; min-height: 56px; padding: 0 22px;
  display: flex !important; align-items: center; justify-content: center;
}
/* krotka etykieta na przycisku-pasku (dlugi systemowy tekst "Sprawdz dostepnosc" za szeroki); submit dziala */
#iai_book_form .formbutton button::after {
  content: "Szukaj"; font-family: var(--er-font-heading); font-weight: 700; font-size: 15px; letter-spacing: .5px; color: #fff; white-space: nowrap;
}
html[lang="en"] #iai_book_form .formbutton button::after { content: "Search"; }
/* date/location field: label na gorze, input pelna szer; ukryj zbedny przycisk-kalendarz (input otwiera picker) */
#iai_book_form .datefrom > button, #iai_book_form .dateto > button { display: none !important; }
#iai_book_form .widget__option > label { order: -1; width: 100%; margin: 0; }
#iai_book_form .widget__option > input { width: 100% !important; }
/* LOKALIZACJA: native nadpisuje tekst labela #iai_booking_location_label wybrana wartoscia
   (a wartosc jest tez w inpucie) => podwojny tekst nakladal sie ("LUBLIN"+"Lublin").
   Wymuszamy STALY tekst etykiety przez ::before; wartosc pokazuje tylko input. (MCP live 7141, 2026-06-19) */
#iai_booking_location_label { font-size: 0 !important; }
/* floating label na .showlocation (NIE na #..._label::before — tam ::before lądowałby w pionowym
   środku 54px boxa labela i nakładał się na wartość). Absolutnie u góry pola = stack nad wartością. */
.showlocation::before {
  content: "Lokalizacja"; position: absolute; top: 9px; left: 14px; z-index: 3; pointer-events: none;
  font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--er-text-muted); font-weight: 700;
}
html[lang="en"] .showlocation::before { content: "Location"; }
/* OSOBY: #iai_persons_list = absolutny UL = realny dropdown -> box na nim (dziala) */
#iai_persons_list { background: #fff !important; border: 1px solid var(--er-border) !important; border-radius: var(--er-radius) !important; box-shadow: var(--er-shadow-md) !important; z-index: 60 !important; max-height: 340px; overflow: auto; padding: 6px !important; min-width: 240px; }
/* LOKALIZACJA: #iai_location = TYLKO kotwica (position:relative); realny dropdown to
   absolutny potomek #iailocation-container. Wczesniej box+overflow:auto na kotwicy robil
   z PUSTEJ kotwicy widoczne pudelko 240x14 NAD inputem (z-60) -> klik w pole nie trafial
   w input (bledne kolo: nie fokusuje -> nie populuje). A overflow:auto klipowal absolutny
   panel do 14px. Fix: kotwica przezroczysta/0-size/overflow:visible; branding na panelu.
   (MCP live 7141, 2026-06-19) */
#iai_location { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; max-height: none !important; overflow: visible !important; z-index: 60 !important; }
#iailocation-container { display: block; background: #fff !important; border: 1px solid var(--er-border) !important; border-radius: var(--er-radius) !important; box-shadow: var(--er-shadow-md) !important; padding: 6px !important; max-height: 262px; overflow: auto; z-index: 80 !important; }
/* FIX 2026-06-23 (zgłoszenie mobile): dropdown lokalizacji był uwięziony w kontekście stackingu pola
   (.showlocation = .widget__option z-index:2). Na mobile (pola w PIONIE) pole POCZĄTEK/KONIEC poniżej
   (też z-index:2, później w DOM) malowało się NAD pozycjami dropdownu => „Lublin" znikał za etykietą POCZĄTEK.
   Na desktopie problem niewidoczny (dropdown spadał w pustkę obok). Fix: podnieś CAŁE pole lokalizacji
   ponad pozostałe pola => dropdown jest czystą nakładką nad polami poniżej. Zweryfikowane live @390px. */
#iai_book_form .widget__option.showlocation { z-index: 80 !important; }
.iailocation-countries, .iailocation-cities, .iailocation-districts, .iailocation-addresses { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.iailocation-country { font-family: var(--er-font-heading) !important; font-weight: 800 !important; font-size: 13px !important; letter-spacing: .5px; text-transform: uppercase; color: var(--er-text-muted) !important; padding: 8px 12px 4px !important; cursor: pointer; }
.iailocation-city { font-family: var(--er-font-heading) !important; font-weight: 700 !important; font-size: 15px !important; color: var(--er-text) !important; padding: 9px 12px 4px !important; cursor: pointer; }
.iailocation-district { font-weight: 600 !important; font-size: 13px !important; color: var(--er-text-soft) !important; padding: 5px 12px 5px 22px !important; cursor: pointer; border-radius: 6px; }
.iailocation-addres { font-size: 13px !important; color: var(--er-text-muted) !important; padding: 6px 12px 6px 22px !important; cursor: pointer; border-radius: 6px; }
/* TYLKO wybor per lokalizacja (miasto) — ukryj dzielnice i adresy (klient: bez drazenia w Bronowice/centrum). MCP live 7141 2026-06-19 */
#iailocation-container .iailocation-districts, #iailocation-container .iailocation-addresses { display: none !important; }
.iailocation-country:hover, .iailocation-city:hover, .iailocation-district:hover, .iailocation-addres:hover { background: var(--er-primary-soft) !important; color: var(--er-primary-dark) !important; }
#iai_persons_list li { padding: 8px 12px !important; cursor: pointer; border-radius: 6px; font-size: 14px; }
#iai_persons_list li:hover { background: var(--er-primary-soft) !important; color: var(--er-primary-dark) !important; }
/* pola widgetu w pelni klikalne: label nie przechwytuje (JS forward klika input) */
#iai_book_form .widget__option > label { pointer-events: none !important; }
/* persons dropdown zakotwiczony POD polem (absolute odklejal sie przez transform fullpage) */
#person_section { position: relative !important; }
#iai_persons_list { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; right: auto !important; bottom: auto !important; min-width: 200px; max-height: 280px; overflow: auto; }
@media (max-width: 767px) { #iai_persons_list { left: 0 !important; right: 0 !important; min-width: 0; } }

/* §ER-WIDGET-FILL — input wypelnia CALE pole => realny klik (mousedown+click) trafia
   natywnie w input i otwiera kontrolke. NIE forward JS (walczyl z systemowym mousedown/
   klik-poza-zamyka). Label absolutny u gory (pointer-events:none, tylko wizualny). */
#iai_book_form .widget__option, #person_section { position: relative !important; }
#iai_book_form .widget__option > label, #person_section > label {
  position: absolute !important; top: 9px; left: 14px; pointer-events: none !important; z-index: 1; margin: 0 !important;
  /* FIX 2026-06-23 (zgłoszenie Damiana): system daje etykiecie display:flex; align-items:center; height:54px
     => tekst etykiety (POCZĄTEK/KONIEC/OSOBY) lądował w PIONOWYM ŚRODKU pola i nakładał się na wybraną wartość.
     height:auto + display:block + line-height pinuje etykietę do GÓRY (top:9px), jak floating label lokalizacji.
     NIE ustawiać tu font-size — nadpisałoby #iai_booking_location_label{font-size:0} i odsłoniłoby podwójną etykietę. */
  height: auto !important; display: block !important; line-height: 1.1 !important;
}
/* Etykiety pol (POCZATEK/KONIEC/OSOBY) wycentrowane TAK SAMO jak LOKALIZACJA (::before) —
   natywna etykieta byla left:14px + systemowy padding-left:50px => tekst pchniety w prawo,
   niespojnie z wycentrowana LOKALIZACJA (zgloszenie Damiana 2026-07-22). Rozciagnij na cala
   szerokosc pola + text-align:center + zeruj padding.
   Live-verified 390: wszystkie 4 etykiety textCenterOff=0. */
#iai_book_form .widget__option > label, #person_section > label {
  left: 0 !important; right: 0 !important; width: auto !important;
  padding-left: 0 !important; padding-right: 0 !important; text-align: center !important;
}
/* Ukryj 4 wiodace ikony pol (location/calendar/calendar/users). Na zywo TYLKO users renderowala
   sie (17x27); location=display:none, oba calendar=0x0 => OSOBY bylo JEDYNYM polem z ikona po lewej,
   niespojnie z LOKALIZACJA/POCZATEK/KONIEC (zgloszenie Damiana 2026-07-22 „rozne miejsca"). Przy
   wycentrowanych etykietach ikona-po-lewej i tak klocila sie wizualnie. Ukrycie wszystkich 4 => 4
   jednolite pola z wycentrowana etykieta. Wartosc OSOBY ("2") zostaje (osobny wezel). Ikony spoza
   #iai_book_form (np. .index-info) NIETKNIETE. Live-verified 390: visibleLeadingIcons=0, count OK. */
#iai_book_form i.iaiicon-location, #iai_book_form i.iaiicon-calendar, #iai_book_form i.iaiicon-users {
  display: none !important;
}
#iai_book_form .widget__option > input, #iai_book_form .widget__option > .iai_widget_input,
#person_section > input, #person_section > .iai_widget_input {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  padding: 24px 14px 8px !important; background: transparent !important; border: 0 !important; z-index: 2;
  font-size: 15px !important; color: var(--er-text) !important; cursor: pointer; outline: none !important;
}
#person_section > .iai_widget_btn { z-index: 3 !important; }
/* wartosc (data/osoby) wyrownana do prawej dla czytelnosci pod etykieta */
#iai_booking_date_from, #iai_booking_date_to, #iai_booking_persons { text-align: right; }
#iai_book_form i[class^="iaiicon-"], .index-info i[class^="iaiicon-"] { color: var(--er-primary) !important; }
@media (max-width: 767px) {
  #iai_book_form { flex-direction: column; align-items: stretch; }
  #iai_book_form .widget__option, #iai_book_form .formbutton { width: 100%; flex: 1 1 auto; }
  body.page-index .index-info { margin-top: 22px !important; }
}

/* litepicker — brand (adapt FR -> tokeny --er-) */
html body .litepicker { font-family: var(--er-font-body) !important; border: 1px solid var(--er-border) !important; border-radius: var(--er-radius-lg) !important; box-shadow: var(--er-shadow-lg) !important; background: #fff !important; padding: 16px !important; }
html body .litepicker .container__months .month-item-name, html body .litepicker .cur-month { font-family: var(--er-font-heading) !important; font-size: 17px !important; font-weight: 700 !important; color: var(--er-text) !important; }
html body .litepicker .button-previous-month, html body .litepicker .button-next-month { width: 34px !important; height: 34px !important; border-radius: 50% !important; background: var(--er-cream) !important; border: 1px solid var(--er-border) !important; color: var(--er-text) !important; cursor: pointer !important; }
html body .litepicker .button-previous-month:hover, html body .litepicker .button-next-month:hover { background: var(--er-primary-soft) !important; border-color: var(--er-primary) !important; color: var(--er-primary-dark) !important; }
html body .litepicker .container__days .day-item { font-family: var(--er-font-body) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--er-text) !important; border-radius: 6px !important; }
html body .litepicker .container__days .day-item:hover:not(.is-locked) { background: var(--er-primary-soft) !important; color: var(--er-primary-dark) !important; }
html body .litepicker .container__days .day-item.is-today { color: var(--er-primary) !important; font-weight: 700 !important; }
html body .litepicker .container__days .day-item.is-locked { color: var(--er-gray-mid) !important; text-decoration: line-through !important; cursor: not-allowed !important; }
html body .litepicker .container__days .day-item.is-start-date, html body .litepicker .container__days .day-item.is-end-date { background: var(--er-primary) !important; color: #fff !important; font-weight: 600 !important; }
html body .litepicker .container__days .day-item.is-in-range { background: var(--er-cream2) !important; color: var(--er-text) !important; }
html body .litepicker .container__footer button { font-family: var(--er-font-body) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--er-primary) !important; background: transparent !important; border: none !important; cursor: pointer !important; }

/* ═══════════════════════════════════════════════════════════════
   §ER-PALETTE-WARM — „tła sekcji szare" → cieplejszy, czystszy off-white
   ═══════════════════════════════════════════════════════════════ */
:root { --er-cream: #F8F6F3; --er-cream2: #EFEBE6; --er-cream3: #E6E1DB; }

/* ═══════════════════════════════════════════════════════════════
   §ER-FOOTER — brandowa stopka (JS relokuje wezly systemowe; TRAP-11)
   ═══════════════════════════════════════════════════════════════ */
.er-footer { background: var(--er-secondary); color: rgba(255,255,255,.8); padding: clamp(48px,6vw,72px) clamp(20px,4vw,48px) 0; }
.er-footer__top { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1fr; gap: clamp(28px,4vw,56px); padding-bottom: clamp(36px,4vw,52px); }
.er-footer__brandname { font-family: var(--er-font-heading); font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.er-footer__tagline { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0 0 18px; }
.er-footer__h { font-family: var(--er-font-heading); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.er-footer__nav { display: flex; flex-direction: column; gap: 10px; }
.er-footer__nav a, .er-footer__contact-list a { color: rgba(255,255,255,.72) !important; text-decoration: none; font-size: 14px; transition: color .2s var(--er-ease); }
.er-footer__nav a:hover, .er-footer__contact-list a:hover { color: var(--er-primary-light) !important; }
.er-footer__contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.er-footer__contact-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,.72); }
.er-footer__contact-list li i { color: var(--er-primary-light); }
.er-footer__cta-txt { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.6; margin: 0 0 16px; }
.er-footer__cta-btn { display: inline-flex !important; }
.er-footer ul.footer__social_media { display: flex; gap: 12px; list-style: none; padding: 0; margin: 14px 0 0; }
.er-footer ul.footer__social_media a, .er-footer ul.footer__social_media i { color: #fff !important; font-size: 18px; }
.er-footer__bar { max-width: 1240px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.er-footer__legal { font-size: 13px; color: rgba(255,255,255,.55); }
.er-footer__legal a { color: rgba(255,255,255,.7) !important; text-decoration: none; }
.er-footer__legal a:hover { color: var(--er-primary-light) !important; }
.er-footer__meta { display: flex; align-items: center; gap: 18px; }
@media (max-width: 991px) { .er-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .er-footer__top { grid-template-columns: 1fr; } .er-footer__bar { flex-direction: column; align-items: flex-start; } }

/* ═══════════════════════════════════════════════════════════════
   §ER-OFFER-CTA — /offer/N: wycentruj "Zarezerwuj teraz" + polish panelu
   ═══════════════════════════════════════════════════════════════ */
body.page-offer a.accommodation-reservation,
body.page-offer .accommodation-reservation {
  text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--er-primary) !important; color: #fff !important; border: 0 !important; border-radius: var(--er-radius) !important;
  font-family: var(--er-font-heading) !important; font-weight: 700 !important; letter-spacing: .4px; padding: 16px 24px !important;
}
body.page-offer a.accommodation-reservation:hover { background: var(--er-primary-dark) !important; }
/* link "Sprawdz dostepnosc" / "Zobacz cennik" pod CTA — brand */
body.page-offer .accommodation-reservation + a, body.page-offer .offer-check-availability, body.page-offer .show-pricelist {
  color: var(--er-primary) !important; text-align: center !important; display: block !important;
}

/* ═══════════════════════════════════════════════════════════════
   §ER-OFFERS-FILTERS — /offers: filtry zwiniete + brandowe naglowki
   (JS initOffersAccordion zwija + toggle; FA chevron broken -> CSS)
   ═══════════════════════════════════════════════════════════════ */
/* naglowek akordeonu jak cityofthekings: podkreslenie (hairline) + UPPERCASE + strzalka CSS, kolor marki (red) */
body.page-offers .filter_header {
  display: flex !important; align-items: center; justify-content: space-between; cursor: pointer;
  padding: 14px 2px !important; border: 0 !important; border-bottom: 1px solid var(--er-border) !important; border-radius: 0 !important;
  margin-bottom: 0 !important; background: transparent !important; font-family: var(--er-font-heading) !important;
  font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--er-primary) !important;
  transition: color .2s var(--er-ease);
}
body.page-offers .filter_header:hover { color: var(--er-primary-dark, #A81B20) !important; }
body.page-offers .filter_header strong, body.page-offers .filter_header span { font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--er-primary) !important; }
body.page-offers .filter_header .fa, body.page-offers .filter_header [class^="fa-"], body.page-offers .filter_header [class*=" fa-"], body.page-offers .filter_header i { display: none !important; }
body.page-offers .filter_header::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--er-primary); border-bottom: 2px solid var(--er-primary);
  transform: rotate(45deg); transition: transform .3s var(--er-ease); margin-left: 12px; margin-top: -3px;
}
body.page-offers .filter_header.is-open::after, body.page-offers .filter_header[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
body.page-offers .filter_content.collapse:not(.show) { display: none !important; }
body.page-offers .filter_content { padding: 10px 6px 16px !important; }
body.page-offers .filter_content label { font-size: 14px !important; color: var(--er-text-soft) !important; }
/* span.btn line-height trap (system 49px) */
body.page-offers span.btn { line-height: normal !important; }
/* intro nad lista (gdy OFERTA_PL wklejona) */
body.page-offers .er-pagehero { margin-bottom: 8px; }

/* ═══════════════════════════════════════════════════════════════
   §ER-FULLBLEED (§19 / TRAP-14) — KRYTYCZNE
   default13 wstrzykuje body_top w <div class="section_sub container">
   max-width:1170px (margines ~127px po bokach). Bez tego pasy z tłem
   (hero/band/statsband/cta) siedzą w 1140px kolumnie zamiast pełnej
   szerokosci. Wyrwanie na 100vw + overflow-x:clip (NIE hidden — clip
   nie psuje position:sticky, np. .er-bookbox na /offer).
   Wewnetrzne wrappery (__inner / .er-container) trzymaja tresc na 1240.
   ═══════════════════════════════════════════════════════════════ */
.er-hero, .er-trust, .er-band, .er-statsband, .er-cta, .er-darkhero, .er-pagehero, .er-pagination {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.er-section, .er-storyhero, .er-splithero, .er-keyrow, .er-contact, .er-filterbar, .er-results-head, .er-breadcrumb,
body.page-offer .er-offerhead {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: none !important;
  padding-left: max(clamp(20px, 4vw, 48px), calc((100vw - 1240px) / 2)) !important;
  padding-right: max(clamp(20px, 4vw, 48px), calc((100vw - 1240px) / 2)) !important;
}
body.page-index, body.page-offers, body.page-offer, body.page-txt, body.page-contact {
  overflow-x: clip !important;
}

/* ═══════════════════════════════════════════════════════════════
   §ER-PAGES — odrebne sygnatury 3 podstron (redesign 2026-06-23)
   O nas = editorial jasny | Najem = ciemny B2B | Wspolpracuj = jasny proces
   ═══════════════════════════════════════════════════════════════ */

/* placeholder zdjecia z podpisem (data-img) — wspolny; podmien <img> w panelu */
.er-imgph { position: relative; background: #E9E6E0; border-radius: var(--er-radius-lg); overflow: hidden; min-height: 220px; }
.er-imgph::after { content: attr(data-img); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; font-size: 13px; line-height: 1.5; color: var(--er-text-muted); font-family: var(--er-font-heading); font-weight: 700; }
.er-imgph img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }

/* ── O NAS — STORY HERO (editorial, asymetryczny, zdjecie) ── */
.er-storyhero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,64px); align-items: center; max-width: 1240px; margin: 0 auto; padding: clamp(48px,7vw,104px) clamp(20px,4vw,48px); }
.er-storyhero__kicker { display: inline-block; font-family: var(--er-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--er-primary); margin-bottom: 18px; }
.er-storyhero__title { font-family: var(--er-font-heading); font-size: clamp(32px,5vw,58px); font-weight: 800; line-height: 1.08; color: var(--er-text); margin: 0 0 20px; }
.er-storyhero__title em { color: var(--er-primary); font-style: normal; }
.er-storyhero__text { font-size: clamp(16px,1.4vw,18px); line-height: 1.75; color: var(--er-text-soft); margin: 0 0 28px; max-width: 30em; }
.er-storyhero__media { aspect-ratio: 4/5; }
@media (max-width: 860px) { .er-storyhero { grid-template-columns: 1fr; } .er-storyhero__media { aspect-ratio: 16/10; order: -1; } }

/* ── NAJEM — DARK HERO (B2B, near-black, czerwony akcent) ── */
.er-darkhero { background: var(--er-secondary); color: #fff; }
.er-darkhero__inner { max-width: 1100px; margin: 0 auto; padding: clamp(64px,9vw,128px) clamp(20px,4vw,48px); }
.er-darkhero__kicker { display: inline-block; font-family: var(--er-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--er-primary-light); margin-bottom: 18px; }
.er-darkhero__title { font-family: var(--er-font-heading); font-size: clamp(32px,5.2vw,60px); font-weight: 800; line-height: 1.08; color: #fff !important; margin: 0 0 20px; max-width: 16em; }
.er-darkhero__text { font-size: clamp(16px,1.4vw,18px); line-height: 1.7; color: rgba(255,255,255,.78); margin: 0 0 30px; max-width: 46em; }
.er-darkhero .er-btn { background: var(--er-primary); color: #fff !important; }
.er-darkhero .er-btn:hover { background: var(--er-primary-light); color: #fff !important; }

/* kompaktowy rzad korzysci B2B (ikona + tekst) */
.er-keyrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: clamp(18px,2.5vw,30px); max-width: 1240px; margin: 0 auto; padding: clamp(48px,6vw,88px) clamp(20px,4vw,48px); }
.er-key__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--er-primary-soft); color: var(--er-primary); margin-bottom: 14px; }
.er-key__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.er-key b { display: block; font-family: var(--er-font-heading); font-size: 17px; color: var(--er-text); margin-bottom: 6px; }
.er-key span { font-size: 14px; line-height: 1.6; color: var(--er-text-soft); }

/* ── WSPOLPRACUJ — SPLIT HERO (text + zdjecie) ── */
.er-splithero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; max-width: 1240px; margin: 0 auto; padding: clamp(48px,7vw,104px) clamp(20px,4vw,48px); }
.er-splithero__kicker { display: inline-block; font-family: var(--er-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--er-primary); margin-bottom: 18px; }
.er-splithero__title { font-family: var(--er-font-heading); font-size: clamp(30px,4.6vw,54px); font-weight: 800; line-height: 1.1; color: var(--er-text); margin: 0 0 20px; }
.er-splithero__text { font-size: clamp(16px,1.4vw,18px); line-height: 1.75; color: var(--er-text-soft); margin: 0 0 28px; }
.er-splithero__media { aspect-ratio: 5/4; }
/* <img> wewnatrz media MUSI wypelnic box (er-imgph img jest position:relative => zostawia pustke; !important bije) */
.er-storyhero__media img, .er-splithero__media img, .er-feature__media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit; }
@media (max-width: 860px) { .er-splithero { grid-template-columns: 1fr; } .er-splithero__media { aspect-ratio: 16/10; order: -1; } }

/* ── WSPOLPRACUJ — pionowy timeline procesu ── */
.er-timeline { max-width: 760px; margin: 0 auto; }
.er-tl { position: relative; padding: 0 0 30px 46px; }
.er-tl:last-child { padding-bottom: 0; }
.er-tl::before { content: ""; position: absolute; left: 13px; top: 24px; bottom: -6px; width: 2px; background: var(--er-border); }
.er-tl:last-child::before { display: none; }
.er-tl__dot { position: absolute; left: 4px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--er-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--er-font-heading); font-size: 13px; font-weight: 800; z-index: 1; }
.er-tl__title { font-family: var(--er-font-heading); font-size: 18px; font-weight: 700; color: var(--er-text); margin: 0 0 6px; }
.er-tl__text { font-size: 15px; line-height: 1.65; color: var(--er-text-soft); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   §ER-OFFERS-UI — /offers: zaokraglone karty + filtry jako pills (2026-06-23)
   ═══════════════════════════════════════════════════════════════ */
body.page-offers .offers-container { border-radius: 16px !important; overflow: hidden !important; border: 1px solid var(--er-border) !important; }
body.page-offers .accommodation-buttons a, body.page-offers .accommodation-buttons .btn, body.page-offers .offers-container a.btn, body.page-offers .offers-container span.btn { border-radius: 10px !important; }
/* filtry = NATYWNE checkboxy (styl jak cityofthekings; user 2026-07-01: bez pigułek/„okręgów") */
body.page-offers .filter_items label {
  display: flex !important; align-items: center; cursor: pointer;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  padding: 5px 0 !important; margin: 0 0 2px 0 !important; font-size: 14px; line-height: 1.3; color: var(--er-text-soft) !important;
  transition: color .2s var(--er-ease);
}
body.page-offers .filter_items label input[type=checkbox] {
  position: static !important; opacity: 1 !important; width: 16px !important; height: 16px !important; margin: 0 9px 0 0 !important;
  accent-color: var(--er-primary) !important; cursor: pointer; flex: 0 0 auto; clip: auto !important; clip-path: none !important;
}
body.page-offers .filter_items label:hover { color: var(--er-primary) !important; }
body.page-offers .filter_items label:has(input:checked) { color: var(--er-text) !important; font-weight: 600; }
/* ukryj smieciowy typ obiektu z panelu (value=" - ", brak nazwy) — do wyczyszczenia w panelu */
body.page-offers .filter_items label:has(input[value=" - "]) { display: none !important; }

/* dwa <i class="icon-arrow_smaller_down">: lang-toggler (zostaje) + systemowy back-to-top #backTop
   (redundantny — mamy wlasny .er-backtop). Ukryj systemowy => jeden back-to-top (2026-06-23). */
a#backTop { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   §ER-TXT-HEADINGS — FIX 2026-06-23 (zgloszenie: czerwony-na-czerwonym / czarny-na-czarnym)
   Podstrony /txt sa owijane w .txt-text; regula `.txt-text h2,h3{color:--ido-primary!important}`
   (0,1,1) malowala WSZYSTKIE nasze tytuly komponentow na CZERWONO (na CTA czerwonym = niewidoczne).
   + globalne h1..h6{--ido-dark!important} robilo .er-corp__title czarny na ciemnym (home „Najem").
   Wymuszamy poprawny kolor per kontekst, specyficznosc > .txt-text h2 i > global.
   ═══════════════════════════════════════════════════════════════ */
.er-corp__title { color: #fff !important; }
body.page-txt .er-cta__title, body.page-txt .er-corp__title, body.page-txt .er-darkhero__title { color: #fff !important; }
body.page-txt .er-cta__text, body.page-txt .er-corp__text, body.page-txt .er-darkhero__text { color: rgba(255,255,255,.9) !important; }
body.page-txt .er-section__title, body.page-txt .er-feature__title, body.page-txt .er-card__title, body.page-txt .er-benefit__title, body.page-txt .er-tl__title, body.page-txt .er-storyhero__title, body.page-txt .er-splithero__title { color: var(--er-text) !important; }
body.page-txt .er-storyhero__title em, body.page-txt .er-splithero__title em { color: var(--er-primary) !important; }

/* ═══════════════════════════════════════════════════════════════
   §ER-TICKET-0630 — uwagi klienta 2026-06-30
   ═══════════════════════════════════════════════════════════════ */

/* #12 — mapa na /offer/N ~+50% (kolumna .offer-right ogranicza szerokosc -> powiekszamy wysokosc 300->450) */
body.page-offer #map_container { height: 450px !important; min-height: 450px !important; }
@media (max-width: 767px) { body.page-offer #map_container { height: 340px !important; min-height: 340px !important; } }

/* #11/#13 — przycisk zamkniecia (X) systemowego kalendarza (litepicker autoApply: brak X, tylko ESC).
   .litepicker ma position:fixed (patrz §ER-WIDGET) -> X pozycjonuje sie wzgledem kalendarza.
   JS (KONIEC_BODY initLitepickerClose) wstrzykuje <button.er-lp-close> i chowa kalendarz na klik. */
.litepicker .er-lp-close { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--er-text, #16181D); font-size: 26px; line-height: 1; cursor: pointer; z-index: 6; transition: background .15s, color .15s; }
.litepicker .er-lp-close:hover, .litepicker .er-lp-close:focus-visible { background: rgba(0,0,0,.08); color: var(--er-primary, #D6262C); outline: none; }

/* #14 — przycisk „Wyczyść wszystkie filtry" na /offers (JS initOffersClearFilters wstrzykuje na gore #menu_filter_form) */
body.page-offers .er-filter-clear { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--er-border, #E3E1DC); border-radius: 12px; background: #fff; color: var(--er-text, #16181D); font-family: var(--er-font-heading, inherit); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
body.page-offers .er-filter-clear:hover, body.page-offers .er-filter-clear:focus-visible { border-color: var(--er-primary, #D6262C); color: var(--er-primary, #D6262C); background: var(--er-primary-soft, #FBEAEA); outline: none; }
body.page-offers .er-filter-clear svg { width: 16px; height: 16px; flex: none; }

/* #15 — etykieta „LOKALIZACJA" w wyszukiwarce wysrodkowana jak POCZATEK/KONIEC/OSOBY.
   Bylo: ::before pinowane left:14px + ikona pinezki po lewej (x~208) = label odstawal w lewo,
   gdy sasiednie pola maja label wysrodkowany. Fix: ::before na cala szerokosc+center,
   chowamy ikone pinezki (pola dat nie maja ikon), wartosc inputu tez center. (MCP live 7141, 2026-06-30) */
.showlocation::before { left: 0 !important; right: 0 !important; text-align: center !important; }
.showlocation > i.iaiicon-location { display: none !important; }
#iai_booking_location { text-align: center !important; }

/* #8 — sociale na gornym pasku obok wyboru jezyka (JS initTopSocial klonuje linki z ul.footer__social_media,
   wiec FB/IG dodane w panelu lapia sie same). Desktop: na mobile #navbar/.page-top__language ukryte (sociale w stopce). */
.er-topsocial { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; vertical-align: middle; }
.er-topsocial a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: inherit; text-decoration: none; transition: color .15s, background .15s; }
.er-topsocial a:hover { color: var(--er-primary, #D6262C); background: rgba(0,0,0,.06); }
.er-topsocial a:focus-visible { color: var(--er-primary, #D6262C); background: rgba(0,0,0,.06); outline: 3px solid var(--er-primary-light, #E84B50); outline-offset: 2px; }
.er-topsocial i { font-size: 18px; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════
   §ER-A11Y-MOBILE-0630 — audyt a11y mobile (WCAG 2.1 AA), workflow 31 findingow
   ═══════════════════════════════════════════════════════════════ */

/* STRZALKI ZMIANY MIESIACA na MOBILE (zgloszenie klienta). Litepicker pokazuje 2 miesiace (~706px)
   -> nie miesci sie w 375px, strzalki off-screen + visibility:hidden. Mobile: 1 miesiac, strzalki
   widoczne i klikalne. Zweryfikowane live: czerwiec->lipiec, obie strzalki w viewporcie. */
@media (max-width: 767px) {
  .litepicker .container__months .month-item:nth-child(2) { display: none !important; }
  .litepicker .container__months { width: auto !important; max-width: 100% !important; display: block !important; }
  .litepicker .container__months .month-item { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  .litepicker .button-previous-month, .litepicker .button-next-month { visibility: visible !important; min-width: 44px !important; min-height: 44px !important; }
}

/* CELE DOTYKOWE (WCAG 2.5.8/2.5.5): X kalendarza, sociale stopki, wyczysc filtry */
.litepicker .er-lp-close { width: 44px !important; height: 44px !important; }
.er-footer ul.footer__social_media { gap: 4px; }
.er-footer ul.footer__social_media a { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
body.page-offers .er-filter-clear { min-height: 44px; box-sizing: border-box; }

/* FOCUS-VISIBLE (WCAG 2.4.7): rozdziel od hover, dodaj widoczny ring (zamiast outline:none) */
.litepicker .er-lp-close:focus-visible,
body.page-offers .er-filter-clear:focus-visible,
.er-backtop:focus-visible { outline: 3px solid var(--er-primary-light, #E84B50) !important; outline-offset: 2px !important; }

/* KONTRAST HOVER ciemnych przyciskow (WCAG 1.4.3): primary-light #E84B50 (3.78:1) -> primary-dark #A81B20 (7.39:1) */
.er-cta--dark .er-btn:hover, .er-darkhero .er-btn:hover { background: var(--er-primary-dark, #A81B20) !important; color: #fff !important; }

/* HERO: akcent (miasto) na bialo nad zdjeciem — czerwien mid-luminance nieczytelna nad slajderem (WCAG 1.4.3) */
.er-hero-wrap__title em, .er-hero-wrap__title span { color: #fff !important; }

/* Pasek lokalizacji .er-chip: checkbox visually-hidden + ring na fokusie (NIE display:none — zostaje w tab-order).
   Systemowe filtry .filter_items = NATYWNE checkboxy (widoczne, wlasny fokus) — patrz §ER-OFFERS-UI. */
.er-chip input {
  display: inline-block !important; position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
}
.er-chip:has(input:focus-visible), .er-chip.is-focus {
  outline: 3px solid var(--er-primary-light, #E84B50) !important; outline-offset: 2px !important;
}

/* P3 — nasz przycisk „wyczysc" w pasku filtrow /offers (.er-filterbar__clear): cel dotykowy + focus ring
   (rozne od systemowego .er-filter-clear ktory juz pokryty wyzej) */
.er-filterbar__clear { min-height: 44px; padding: 8px 6px; box-sizing: border-box; }
.er-filterbar__clear:focus-visible { outline: 3px solid var(--er-primary-light, #E84B50) !important; outline-offset: 2px !important; }

/* P2 — naglowek akordeonu filtrow /offers dostepny z klawiatury (JS initOffersAccordion dodaje tabindex+role+keydown) */
body.page-offers .filter_header:focus-visible { outline: 3px solid var(--er-primary-light, #E84B50) !important; outline-offset: 2px !important; }

/* #10 — MOBILE „rozjezdza sie": sekcje full-bleed (§ER-FULLBLEED, width:100vw) licza tez szerokosc paska
   przewijania -> ~8-11px poziomego przepelnienia = poziomy scroll/jiggle. `clip` (NIE hidden — nie psuje
   position:sticky) usuwa nadmiar bez utraty pelnej szerokosci pasm. Zweryfikowane: overflow 11->0, header fixed OK. */
html { overflow-x: clip; }

/* MAPA LOKALIZACJI = STABILNY EMBED Google Maps (Leaflet zarzucony — nie renderowal sie niezawodnie + CDN kafli flaky).
   iframe wypelnia box .er-locmap__map (statycznie w body_top, zero JS/Leaflet/CDN). */
.er-locmap__map { overflow: hidden; }
.er-locmap__iframe { display: block; width: 100%; height: 100%; min-height: 400px; border: 0; }
@media (max-width: 859px) { .er-locmap__iframe { min-height: 300px; } }

/* ═══════════════════════════════════════════════════════════════
   §ER-TICKET-0708 — uwagi klienta 2026-07-08
   #8 naglowki filtrow + ceny kart /offers na czarno (byly czerwone --er-primary)
   #1 /contact: ukryta systemowa lista lokalizacji (115 adresow; adres biura zostaje na mapie)
   ═══════════════════════════════════════════════════════════════ */
/* #8a — naglowki filtrow /offers (Typ obiektu / Udogodnienia / Powierzchnia / Lokalizacja): czarna czcionka + chevron */
body.page-offers .filter_header,
body.page-offers .filter_header strong,
body.page-offers .filter_header span,
body.page-offers .filter_header:hover { color: #16181D !important; }
body.page-offers .filter_header::after { border-right-color: #16181D !important; border-bottom-color: #16181D !important; }
/* #8b — ceny przy kazdym apartamencie na liscie /offers: czarna czcionka (byla czerwona) */
body.page-offers .offers-container span.price,
body.page-offers .offers-container .price,
body.page-offers .object-price .price { color: #16181D !important; }
/* #1 — /contact: ukryj systemowa liste lokalizacji (115 adresow apartamentow); adres biura pozostaje na mapie */
body.page-contact .contact__locations { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   END §ER-ADV — Easy Rent Apartments advanced stylesheet
   Warstwy: theme(L0) + biblioteka(L1,2,3,4,7,8) + 99_client + zz(ADV)
   Build: bash clients/easyrent/_build/build_css.sh
   ═══════════════════════════════════════════════════════════════ */