/* =========================================================
   WarmEscape — design system & shared styles
   Fonts: Fraunces (display/serif) + Work Sans (body)
   ========================================================= */

:root {
  /* "Ciepło po zmroku" — tokens lifted from Claude outputs/prototyp-zrodlo-dla-claude-code.html
     (see AUDYT-3.md §2). Dark base, linen for light-rhythm sections, mint
     reserved for buttons/prices/links (not headings), ember only in glows. */
  --night: #110c08; --bark: #19130e; --char: #221a13; --char-2: #2b2118;
  --linen: #f3eee5; --sand: #e8dfcf; --ink: #1b1510; --ink-2: #5d5245;
  --cream: #f4efe5; --muted: #bdb3a2; --faint: #958a77; /* AUDYT-19: było #8a7f6d (4,36:1 na kartach) — teraz ≥5:1 na każdym tle */
  --mint: #b6e7c6; --mint-2: #93d8ab; --mint-ink: #0f2318;
  --ember: #e9a45c;
  --line-d: rgba(244, 239, 229, 0.12); --line-l: rgba(27, 21, 16, 0.12);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --pad: clamp(20px, 4vw, 56px); --max: 1320px;

  /* Legacy aliases — every pre-"fundament" section still reads these, so
     nothing is allowed to rename/remove them until that section is rebuilt
     (see AUDYT-3.md Prompty 23-28). */
  --bg: var(--night);
  --bg-alt: var(--bark);
  --surface: var(--char);
  --surface-2: var(--char-2);
  --line: var(--line-d);
  --text: var(--cream);
  --text-muted: var(--muted);
  --text-faint: var(--faint);
  --accent: var(--mint);
  --accent-strong: var(--mint-2);
  --accent-ink: var(--mint-ink);
  --gold: var(--ember);

  --header-h: 84px;
  --container: 1180px;
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 26px;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;

  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* .site-header is position:fixed (Prompt 23) and out of flow, so every
     page needs this to not have its first section tucked under it. The
     homepage hero cancels it back out with a negative margin-top so it can
     bleed up under the transparent header — see .hero below. */
  padding-top: var(--header-h);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
/* Every .btn/.btn-ghost/.chip/.opt-tile in this project was originally only
   ever applied to <a> tags, which have no native chrome — so those classes
   never needed to clear a background or border. The configurator introduces
   real <button> elements (wizard nav, print, filter chips), which DO carry a
   UA-stylesheet gray background/border by default; without this reset that
   gray shows through any class that doesn't set its own explicit background
   (e.g. .btn-ghost), rendering as a washed-out box instead of a clean pill. */
button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  color: inherit;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
em { font-style: italic; }
p { margin: 0 0 1em; color: var(--text-muted); }
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }
.light .eyebrow { color: #2f6b47; }
.section-title { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--text); }
.section-lede { max-width: 620px; font-size: 1.05rem; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Prototype fundament: .wrap/.sec/.sec.light, available for
   section-by-section migration (AUDYT-3.md Prompty 23-28) alongside the
   existing .container/<section>/.alt-bg this site already uses. ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
/* AUDYT-6 pkt 6: było clamp(90px, 12vw, 170px) → na 1440 px 340 px pustki między
   sekcjami. Teraz 72–120 px (komputer) i 56 px (telefon). */
.sec { padding: clamp(72px, 9vw, 120px) 0; }
@media (max-width: 700px) { .sec { padding: 56px 0; } section:not(.sec):not(.hero):not(.final) { padding: 56px 0; } }
.sec.light { background: var(--linen); color: var(--ink); }
.sec.light .section-lede, .light .lede { color: var(--ink-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { border-color: rgba(242,239,228,0.35); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 11px 22px; font-size: 0.75rem; }
/* .btn-mint: prototype's own button color (same mint as .btn-primary, kept as
   a separate class so sections migrated in later prompts can use the
   prototype's exact markup/shape without touching .btn-primary's callers). */
.btn-mint { background: var(--mint); color: var(--mint-ink); }
.btn-mint:hover { background: #cdf1d8; }
.arr { display: inline-block; transition: transform 0.45s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

@media (max-width: 480px) {
  .cta-actions, .hero-ctas, .wizard-summary-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn, .hero-ctas .btn, .wizard-summary-actions .btn,
  .wizard-summary-form-wrap .btn { width: 100%; white-space: normal; text-align: center; }
}
/* AUDYT-3 §3.6: długie etykiety przycisków (np. "Zobacz wszystkie
   realizacje →") z nowrap+uppercase+letter-spacing nie mieszczą się w 360px
   i wywalają poziomy scroll całej strony — pozwól im zawijać się tam, gdzie
   nie są już wymuszone na pełną szerokość (.btn-block) regułą wyżej. */
@media (max-width: 400px) {
  .btn:not(.btn-block) { white-space: normal; text-align: center; }
}

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: transform .5s var(--ease);
}
/* Background + blur live on a pseudo-element, not on .site-header itself:
   backdrop-filter directly on the header makes it establish a new
   containing block for fixed-position descendants on Chromium, which broke
   the full-height mobile nav drawer (a fixed-position child of this
   header) — it collapsed to a tiny box instead of covering the viewport.
   The pseudo-element has no such descendants, so it's filter-safe. Every
   page gets a solid header from the first paint (opacity:1); only
   .header-overlay (the homepage, which has a hero to show through) starts
   transparent and fades the pseudo-element in once .is-scrolled is set. */
.site-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(23,17,12,0.92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  opacity: 1;
  transition: opacity .4s var(--ease);
}
.site-header.header-overlay::before { opacity: 0; }
.site-header.header-overlay.is-scrolled::before { opacity: 1; }
.site-header .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.15rem; flex-shrink: 0; }
.brand img { width: auto; height: 46px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  flex-wrap: nowrap;
}
/* Direct-child combinator so this doesn't also repaint the .btn CTA
   nested inside .nav-cta-row on mobile (a plain ".nav-links a" descendant
   selector would out-specificity ".btn-primary" and turn its text muted). */
.nav-links > a { color: var(--text-muted); position: relative; padding: 6px 0; }
.nav-links > a:hover, .nav-links > a[aria-current="page"] { color: var(--text); }
.nav-links > a[aria-current="page"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-cta-row { display: none; }
.header-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
/* Below 1100px the phone collapses to an icon-only link (number hidden);
   below 900px it disappears entirely — the mobile drawer's own
   "Zadzwoń: …" button in .nav-cta-row covers that case instead. */
.header-phone { display: none; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }
.header-phone svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.header-phone:hover { color: var(--accent); }
.header-phone-num { display: none; }
@media (min-width: 900px) {
  .header-phone { display: flex; }
}
@media (min-width: 1100px) {
  .header-phone-num { display: inline; }
}

/* ---------- Nav dropdown submenus (Sauny / Balie models) ---------- */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { color: var(--text-muted); position: relative; padding: 6px 0; }
.nav-item:has(.nav-link[aria-current="page"]) .nav-link,
.nav-links > a[aria-current="page"] { color: var(--text); }
.nav-item:has(.nav-link[aria-current="page"]) .nav-link::after,
.nav-links > a[aria-current="page"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-link:hover { color: var(--text); }
.nav-submenu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 2px; color: var(--text-faint);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.nav-submenu-toggle:hover { color: var(--accent); }
.nav-item.is-open .nav-submenu-toggle, .nav-item.is-hover-open .nav-submenu-toggle { transform: rotate(180deg); color: var(--accent); }
.nav-submenu {
  display: none;
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  width: 300px; padding: 10px; z-index: 110;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.nav-item:focus-within .nav-submenu,
.nav-item.is-open .nav-submenu,
.nav-item.is-hover-open .nav-submenu { display: block; }
.nav-submenu-item {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.nav-submenu-item:hover, .nav-submenu-item:focus-visible { background: var(--bg-alt); color: var(--text); }
.nav-submenu-item img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.nav-submenu-item strong { display: block; font-size: 0.86rem; color: var(--text); font-weight: 600; line-height: 1.3; }
.nav-submenu-item small { font-size: 0.78rem; color: var(--accent); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  align-items: center; justify-content: center;
}

@media (max-width: 900px) {
  .nav-links { position: fixed; top: var(--header-h, 84px); left: 0; right: 0; bottom: 0; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 24px 24px 32px; background: var(--bg); gap: 0; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 99; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav-links > a { display: block; width: 100%; padding: 14px 4px; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  body.nav-open .nav-links { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-toggle { display: inline-flex; }
  /* AUDYT-19 (persona „mobilny”): słuchawka widoczna od pierwszego ekranu, obok ☰
     (wcześniej numer był dopiero w menu albo w pasku, który pojawia się po przewinięciu). */
  .header-phone { display: inline-flex; width: 42px; height: 42px; justify-content: center; gap: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--text); }
  .header-phone svg { width: 18px; height: 18px; color: var(--text); }
  .header-phone-num { display: none; }
  .header-actions { gap: 10px; }
  .header-actions .btn-primary.btn-sm { display: none; }
  .nav-cta-row { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }

  /* Sauny/Balie become an accordion: the model row is a plain block link,
     the caret button toggles a stacked list beneath it via .is-open (JS) —
     hover never opens it here, touch taps are unreliable for :hover. */
  .nav-item { flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--line); }
  .nav-item .nav-link { display: block; width: 100%; padding: 14px 34px 14px 4px; font-size: 1.1rem; border-bottom: none; }
  .nav-submenu-toggle { position: absolute; right: 4px; top: 6px; width: 40px; height: 40px; }
  .nav-item:hover .nav-submenu, .nav-item:focus-within .nav-submenu, .nav-item.is-hover-open .nav-submenu { display: none; }
  .nav-item.is-open .nav-submenu { display: block; position: static; width: 100%; transform: none; box-shadow: none; border: none; background: transparent; padding: 0 0 12px; }
  .nav-submenu-item { padding: 8px 4px; }
  .nav-submenu-item img { width: 48px; height: 48px; }
}

@media (max-width: 480px) {
  .brand { font-size: 1rem; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
  /* Cancels body's padding-top (added for the now fixed/overlaid header,
     see body rule above) so the hero media bleeds all the way up under the
     transparent header instead of starting below it. */
  margin-top: calc(-1 * var(--header-h));
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
/* Two different photos are art-directed in via <picture><source media> —
   each needs its own crop focus, so this is a breakpoint switch on
   object-position, not the generic [data-focus] mechanism (one <img>
   element, but a different decoded image depending on viewport). Mobile:
   hero-cover.jpg (portrait) — 30% left-biased keeps the sauna wall and
   trees in frame while cropping out the wind turbine visible through the
   glass door on the right. Desktop: the sauna-in-sunlight photo — 60%
   down-biased keeps the calmer lawn under the hero copy at the bottom. */
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
@media (min-width: 861px) {
  .hero-media img, .hero-media video { object-position: 50% 60%; }
}
/* Prompt 41: wieczorne hero (podświetlona sauna/balia) ma inny kadr niż stare
   zdjęcia — drzwi sauny i podświetlona woda muszą zostać w kadrze na tablecie. */
@media (max-width: 640px) {
  .hero-media--ad img, .hero-media--ad video { object-position: 50% 50%; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .hero-media--ad img, .hero-media--ad video { object-position: 65% 55%; }
}
/* AUDYT-28: na desktopie (hero-desktop: balia z lewej, sauna z prawej) przy 50% prawa
   krawędź sauny wypadała poza kadr — przesuwamy kadr w prawo, balia zostaje widoczna. */
@media (min-width: 861px) {
  .hero-media--ad img { object-position: 80% 60%; }
}
html.motion .hero-media img { animation: kenburns 18s var(--ease) both; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1); } }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(17,12,8,.42) 0%, rgba(17,12,8,.1) 26%, rgba(17,12,8,.3) 55%, rgba(17,12,8,.9) 100%),
    radial-gradient(70% 45% at 15% 95%, rgba(17,12,8,.5), transparent 70%);
}
@media (min-width: 861px) {
  .hero::after {
    background:
      linear-gradient(90deg, rgba(17,12,8,.78) 0%, rgba(17,12,8,.55) 32%, rgba(17,12,8,.12) 58%, transparent 72%),
      linear-gradient(180deg, rgba(17,12,8,.42) 0%, rgba(17,12,8,.08) 26%, rgba(17,12,8,.2) 60%, rgba(17,12,8,.85) 100%);
  }
}
/* "Para" nad wodą — trzy rozmyte plamy światła, bardzo delikatnie dryfujące. */
.steam { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.steam i { position: absolute; width: 42vw; height: 42vw; max-width: 620px; max-height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(255,250,240,.16), rgba(255,250,240,0) 65%); filter: blur(20px); }
.steam i:nth-child(1) { left: 52%; top: 38%; }
.steam i:nth-child(2) { left: 64%; top: 30%; width: 30vw; height: 30vw; }
.steam i:nth-child(3) { left: 44%; top: 46%; width: 26vw; height: 26vw; }
html.motion .steam i { animation: steam-drift 16s ease-in-out infinite alternate; }
html.motion .steam i:nth-child(2) { animation-duration: 21s; animation-delay: -6s; }
html.motion .steam i:nth-child(3) { animation-duration: 13s; animation-delay: -3s; }
@keyframes steam-drift { 0% { transform: translate(0,0) scale(.9); opacity: .5; } 50% { opacity: 1; } 100% { transform: translate(-6vw,-9vh) scale(1.25); opacity: .35; } }

.hero-inner { width: 100%; padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(48px, 9vh, 110px); }
/* AUDYT-7 pkt 5: rozmiar liczony też od wysokości ekranu (11vh) — przy 8,2vw
   nagłówek miał 3 × 120 px i przycisk "Sprawdź cenę" lądował pod zgięciem. */
.hero h1 { font-size: clamp(2.6rem, min(6.6vw, 11.5vh), 6.6rem); line-height: .98; letter-spacing: -.035em; font-weight: 350; max-width: none; margin-bottom: 0; }
.hero h1 .line { display: block; padding-bottom: .06em; }
.hero h1 em { color: var(--mint); font-weight: 300; display: block; }
.hero .eyebrow { margin-bottom: 20px; }
.hero-row { display: flex; gap: 48px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-top: 26px; }
.hero p.lede { font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: rgba(244,239,229,.88); max-width: 46ch; margin: 0 0 18px; text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-sub { margin-top: 16px; font-size: 14px; color: rgba(244,239,229,.7); }
.hero-sub a { color: var(--cream); }
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(244,239,229,.6); }
.scroll-cue i { display: block; width: 1px; height: 56px; background: rgba(244,239,229,.25); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--cream); }
html.motion .scroll-cue i::after { animation: scrollcue 2.2s var(--ease-io) infinite; }
@keyframes scrollcue { to { top: 100%; } }
@media (max-width: 700px) { .scroll-cue { display: none; } .hero-row { gap: 0; } }

/* AUDYT-8: pełne, delikatne podkreślenie (natywne — działa też, gdy link łamie się
   w dwie linie). Wcześniej kreska na 35% szerokości wyglądała jak urwana. */
.link-u { position: relative; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(127, 127, 127, 0.55); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color .25s var(--ease); }
.link-u:hover, .link-u:focus-visible { text-decoration-color: currentColor; }

/* ---------- Marquee (pasek atutów pod hero) ---------- */
.marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; border-top: 1px solid rgba(244,239,229,.14); background: rgba(17,12,8,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: hidden; }
.marquee-track { display: flex; width: max-content; }
html.motion .marquee-track { animation: marquee-scroll 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
.marquee ul { display: flex; list-style: none; margin: 0; padding: 0; }
.marquee li { display: flex; align-items: center; gap: 14px; padding: 18px 34px; font-size: 14px; white-space: nowrap; color: rgba(244,239,229,.85); }
.marquee li b { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--cream); }
.marquee li::after { content: "✦"; margin-left: 34px; color: var(--ember); font-size: 10px; }

.page-hero {
  padding: 116px 0 40px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 15% 0%, rgba(182,231,198,0.08), transparent 55%);
}
.page-hero .eyebrow { display: block; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 760px; }
.page-hero p { max-width: 620px; font-size: 1.05rem; }

/* =========================================================
   Sections
   ========================================================= */
section { padding: 80px 0; }
.section-head { margin-bottom: 40px; }
.section-head.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }

.alt-bg { background: var(--bg-alt); }

/* Story split */
.story {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.story-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.story-media img { aspect-ratio: 4/5; object-fit: cover; }
/* Homepage "O nas" teaser only — brand-story.jpg is a wide landscape shot
   that loses its subject when forced into the standard 4:5 model-page
   ratio, so this one section gets its own, wider crop. */
.story-media--wide img { aspect-ratio: 3/2; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; border-top: 1px solid var(--line); padding-top: 40px; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); color: var(--accent); }
.stat span { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- "jasne" (light/linen) sections, Prompt 24 ----------
   .sec.light (background+base text color) comes from the Prompt 22
   fundament above; headings and body copy have their own hardcoded
   --text/--text-muted colors elsewhere in this file, so they need an
   explicit override here or they'd render cream-on-linen (invisible). */
.sec.light .section-title, .sec.light h1, .sec.light h2, .sec.light h3, .sec.light h4 { color: var(--ink); }
.sec.light p { color: var(--ink-2); }

/* ---------- O nas: manifest (words-lit-on-scroll) + brand photo ----------
   The highlight-as-you-scroll effect is pure enhancement: public/js/motion.js
   wraps each word in a .w span and lits them progressively, but the
   un-enhanced paragraph (no JS, or prefers-reduced-motion) renders as
   ordinary, fully legible text — see the plain (unscoped) color below. */
.manifest { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.manifest-text { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.75rem); line-height: 1.22; letter-spacing: -0.015em; font-weight: 350; color: var(--text); margin: 22px 0 34px; }
.manifest-text em { color: var(--mint); font-style: italic; }
html.motion .manifest-text .w { color: rgba(244,239,229,.16); transition: color .4s; }
html.motion .manifest-text .w.lit { color: var(--cream); }
@media (max-width: 860px) { .manifest { grid-template-columns: 1fr; } }

/* .ph: the clip-reveal + parallax photo wrapper — oversized img (124% height,
   -12% inset) gives data-parallax room to shift without exposing an edge. */
.ph { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; }
.ph img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
@media (max-width: 860px) { .ph { aspect-ratio: 4/3; } }

/* ---------- Dlaczego warto: sticky photo + 4-point list ----------
   Desktop: left photo column is position:sticky and crossfades between 4
   images as public/js/motion.js's IntersectionObserver marks the nearest
   .why-item "on"; the inactive items dim. Mobile: no sticky (not enough
   viewport height to make it work well one-handed) — each point gets its
   own inline photo instead (.why-item-img), and the shared .why-media
   column is hidden there. */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); }
.why-media { position: sticky; top: calc(var(--header-h) + 30px); height: calc(100vh - var(--header-h) - 60px); max-height: 720px; border-radius: var(--radius-lg); overflow: hidden; }
.why-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1s var(--ease), transform 1.6s var(--ease); }
.why-media img.on { opacity: 1; transform: none; }
.why-media .tag { position: absolute; left: 20px; bottom: 20px; padding: 8px 14px; border-radius: 999px; background: rgba(17,12,8,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; color: var(--cream); }
.why-item { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line-d); padding: 40px 0; opacity: .32; transition: opacity .7s var(--ease); }
.why-item.is-on { opacity: 1; }
.why-item .n { font-family: var(--font-display); font-style: italic; color: var(--ember); font-size: 18px; }
.why-item h3 { margin: 14px 0 14px; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.why-item p { color: var(--text-muted); max-width: 44ch; margin: 0; }
.why-item-img { display: none; }
@media (max-width: 860px) {
  .why { grid-template-columns: 1fr; }
  .why-media { display: none; }
  .why-item { min-height: 0; opacity: 1; padding: 34px 0; }
  /* height:auto is required, not cosmetic: Photo.astro's <img> carries HTML
     width/height attributes (the real photo's natural size) which the HTML
     spec maps into the UA stylesheet as a presentational height hint — with
     no explicit `height` here, that hint wins over aspect-ratio entirely
     (neither dimension ends up "auto"), stretching/cropping to the photo's
     own natural height instead of 4:3. Same fix as .tile.realization-photo img. */
  .why-item-img { display: block; height: auto; border-radius: var(--radius); margin-top: 20px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
}

/* ---------- Proces: oś czasu (timeline), light section ----------
   --p (0 -> 1) is set by public/js/motion.js's scroll loop; the line fills
   and each dot "lights up" once the line reaches it. Horizontal on desktop,
   vertical (line on the left) on mobile. */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 44px; --p: 0; }
.steps::before, .steps::after { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 1px; background: var(--line-l); }
.steps::after { background: #2f6b47; transform: scaleX(var(--p)); transform-origin: left; }
.step { position: relative; }
.step::before { content: ""; position: absolute; top: -40px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--linen); border: 1px solid #2f6b47; transition: background .5s, transform .5s var(--ease); }
.step.is-on::before { background: #2f6b47; transform: scale(1.25); }
.step .n { font-family: var(--font-display); font-style: italic; font-size: 44px; line-height: 1; color: #2f6b47; font-weight: 300; }
.step h3 { font-size: 1.45rem; margin: 18px 0 10px; }
.step p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 40px; gap: 40px; }
  .steps::before, .steps::after { top: 0; bottom: 0; left: 6px; right: auto; width: 1px; height: auto; }
  .steps::after { transform: scaleY(var(--p)); transform-origin: top; }
  .step::before { top: 6px; left: -40px; }
}

/* ---------- Realizacje: masonry + per-tile filter (homepage + realizacje.html) ----------
   .tile doubles up as .realization-photo (dual class in the markup) so the
   existing public/js/lightbox.js picks it up unchanged; .masonry doubles as
   .realization-photo-grid for the same reason. public/js/realizacje.js
   drives the filter chips, fading non-matching tiles out before hiding
   them (.is-hiding -> .is-hidden-filter) rather than an instant cut. */
figure.tile { margin: 0; }
.masonry { columns: 3 300px; column-gap: 16px; }
.tile { position: relative; break-inside: avoid; margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.tile img { width: 100%; height: auto; display: block; transition: transform 1.2s var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 18px 16px; background: linear-gradient(transparent, rgba(17,12,8,.75)); color: var(--cream); font-size: 14px; transform: translateY(100%); transition: transform .6s var(--ease); }
.tile:hover figcaption, .tile:focus-visible figcaption { transform: none; }
@media (hover: none) { .tile figcaption { transform: none; } }
.tile.is-hiding { opacity: 0; transform: scale(.96); }
.tile.is-hidden-filter { display: none; }
@media (max-width: 640px) { .masonry { columns: 2; column-gap: 10px; } .tile { margin: 0 0 10px; border-radius: 12px; } .tile figcaption { font-size: 12px; padding: 30px 10px 10px; } }

/* .masonry doubles as .realization-photo-grid, and .tile as .realization-photo
   (dual class, see markup) purely so the existing public/js/lightbox.js picks
   them up unchanged — but .realization-photo-grid/.realization-photo further
   down this file set a plain square-grid layout for the model-page thumbnail
   strips, which would otherwise clobber the masonry/natural-aspect-ratio
   look here. These compound selectors win on specificity regardless of
   source order and restore the masonry's own rules. */
.masonry.realization-photo-grid { display: block; columns: 3 300px; column-gap: 16px; gap: normal; }
@media (max-width: 640px) { .masonry.realization-photo-grid { columns: 2; column-gap: 10px; } }
.tile.realization-photo { aspect-ratio: auto; border-radius: var(--radius); }
@media (max-width: 640px) { .tile.realization-photo { border-radius: 12px; } }
.tile.realization-photo img { height: auto; }

/* Category / product grid */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }
/* 404.html's "pick a category" grid: stay 2×2 on mobile instead of
   collapsing to one column — compact card variant hides the description
   paragraph there, keeping photo + name + price + link. (The homepage
   oferta section was rebuilt as .cats below, Prompt 23 — this grid lives on
   to cover 404's simpler 4-link layout.) */
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .offer-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) {
  .offer-grid { gap: 10px; }
  .offer-grid .card-media { aspect-ratio: 4/3; }
  .offer-grid .card-body { padding: 12px 14px 14px; gap: 4px; }
  .offer-grid .card-body h3 { font-size: 0.92rem; margin-bottom: 0; }
  .offer-grid .card-body p, .offer-grid .card-body .btn { display: none; }
  .offer-grid .card-body .price { font-size: 0.84rem; padding-top: 2px; }
  .offer-grid .card-body .config-link { font-size: 0.72rem; }
}

/* ---------- Oferta (homepage "cats" panels, Prompt 23) ----------
   Four tall photo panels in a row; hovering/focusing one expands it to show
   a description + two CTAs while the rest dim. Below 860px (the point
   where 4 columns get too cramped to read) it becomes a horizontal
   snap-scroll carousel with dots instead — see main.js for the dot sync. */
.cats { display: flex; gap: 12px; height: min(74vh, 660px); min-height: 520px; }
.cat { position: relative; flex: 1; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; transition: flex .9s var(--ease); }
.cat-link-media { position: absolute; inset: 0; display: block; }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease), filter .9s; }
.cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17,12,8,.1) 30%, rgba(17,12,8,.88) 100%); transition: background .6s; }
.cat-num { position: absolute; top: 22px; left: 24px; z-index: 1; font-family: var(--font-display); font-style: italic; font-size: 18px; color: rgba(244,239,229,.8); pointer-events: none; }
.cat-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px 26px; }
.cat-body h3 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); white-space: nowrap; margin-bottom: 0; }
.cat-body .price { display: block; margin-top: 6px; font-size: 15px; color: var(--mint); font-weight: 600; }
.cat-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease); }
.cat-more > div { overflow: hidden; }
.cat-more p { margin: 14px 0 18px; color: rgba(244,239,229,.8); max-width: 36ch; font-size: 15.5px; opacity: 0; transform: translateY(10px); transition: opacity .6s .15s, transform .8s var(--ease) .15s; }
.cat-links { display: flex; gap: 10px; flex-wrap: wrap; opacity: 0; transition: opacity .6s .25s; }
.cat-links .btn { height: 44px; font-size: 14px; padding: 0 18px; }
@media (hover: hover) and (min-width: 861px) {
  .cats:hover .cat { flex: .8; }
  .cats .cat:hover, .cats .cat:focus-within { flex: 2.3; }
  .cat:hover img { transform: scale(1.06); }
  .cats:hover .cat:not(:hover) img { filter: saturate(.6) brightness(.75); }
  .cat:hover .cat-more, .cat:focus-within .cat-more { grid-template-rows: 1fr; }
  .cat:hover .cat-more p, .cat:focus-within .cat-more p { opacity: 1; transform: none; }
  .cat:hover .cat-links, .cat:focus-within .cat-links { opacity: 1; }
}
@media (max-width: 860px), (hover: none) {
  /* -24px/24px matches .container's own side padding, so the carousel's
     first/last card still lines up with the rest of the page at full bleed. */
  .cats { height: auto; min-height: 0; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -24px; padding: 0 24px 8px; scrollbar-width: none; }
  .cats::-webkit-scrollbar { display: none; }
  .cat { flex: 0 0 82%; height: min(118vw, 560px); scroll-snap-align: start; }
  .cat-more { grid-template-rows: 1fr; }
  .cat-more p { opacity: 1; transform: none; }
  .cat-links { opacity: 1; }
}
.dots { display: none; gap: 8px; justify-content: center; margin-top: 18px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(244,239,229,.25); transition: background .3s, width .4s var(--ease); }
.dots i.on { background: var(--mint); width: 22px; border-radius: 4px; }
@media (max-width: 860px), (hover: none) { .dots { display: flex; } }

/* Hero: three small "atuty" (financing / delivery / warranty) under the
   CTA row — a single reusable class rather than one-off inline styles. */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: rgba(182,231,198,0.35); }
.card-media { aspect-ratio: 4/5; overflow: hidden; position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.06); }
/* AUDYT-3 §3.1 — GoogleRatingBadge.astro, gated on opinie.yaml's `ocena`. */
.google-rating-badge { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; font-size: 0.85rem; color: var(--text-faint); }
.google-rating-badge-star { color: var(--ember); }
.google-rating-badge a { color: var(--accent); margin-left: 2px; }
.hero .google-rating-badge, .category-hero-inner .google-rating-badge { color: rgba(244,239,229,.78); }
.hero .google-rating-badge a, .category-hero-inner .google-rating-badge a { color: var(--mint); }

.card-badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; font-weight: 700;
}
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { font-size: 1.25rem; margin-bottom: 2px; }
.card-body .price { color: var(--accent); font-weight: 600; font-size: 0.98rem; margin-top: auto; padding-top: 10px; }
.card-body .dims { font-size: 0.78rem; color: var(--text-faint); letter-spacing: 0.04em; text-transform: uppercase; }
/* Jacuzzi model cards (no "Opcje" step — see js/konfigurator.js
   renderModelStep) stack persons + jets chips here; give repeated .dims
   siblings a gap instead of running together as one word. */
.pick-card-body .dims { font-size: 0.78rem; color: var(--text-faint); letter-spacing: 0.04em; text-transform: uppercase; display: inline-block; margin: 0 10px 6px 0; }
.card-body p { font-size: 0.92rem; margin-bottom: 6px; }
.card-body .btn { margin-top: 10px; align-self: flex-start; }

/* USP list */
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
@media (max-width: 900px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .usp-grid { grid-template-columns: 1fr; } }
.usp {
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.usp .num { font-family: var(--font-display); color: var(--accent); font-size: 1.6rem; display: block; margin-bottom: 14px; }
.usp h3 { font-size: 1.08rem; margin-bottom: 8px; }
.usp p { font-size: 0.92rem; margin: 0; }

/* ---------- Opinie: one quote at a time (Prompt 25) ----------
   Stacked absolutely so the container's height is set by the tallest quote
   (avoids a layout jump as autoplay/arrows switch between shorter/longer
   texts) — only the .q.is-on one is actually in flow/visible. */
.quotes { position: relative; max-width: 980px; margin: 0 auto; text-align: center; }
.q { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .9s var(--ease); pointer-events: none; }
.q.is-on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.q blockquote { margin: 0; font-family: var(--font-display); font-weight: 350; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.25; letter-spacing: -.015em; }
.q cite { display: block; margin-top: 26px; font-style: normal; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.q .stars { color: #c48a2c; letter-spacing: 6px; margin-bottom: 26px; font-size: 18px; }
.q-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }
.q-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-l); transition: background .3s, color .3s; }
.q-nav button:hover { background: var(--ink); color: var(--linen); }
.q-dots { display: flex; gap: 8px; }
.q-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-l); transition: width .4s var(--ease), background .3s; }
.q-dots i.is-on { width: 24px; border-radius: 4px; background: var(--ink); }

/* DIY / configurator */
.configurator {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) { .configurator { grid-template-columns: 1fr; padding: 36px 26px; } }
.config-steps { display: flex; flex-direction: column; gap: 18px; }
.config-step { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-alt); }
.config-step .idx { font-family: var(--font-display); color: var(--accent); font-size: 1.3rem; min-width: 32px; }
.config-step h4 { margin: 0 0 4px; font-size: 1rem; }
.config-step p { margin: 0; font-size: 0.88rem; }

/* Financing banner */
.financing {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px;
  background: linear-gradient(120deg, rgba(182,231,198,0.09), transparent 60%), var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.financing .pct { font-family: var(--font-display); font-size: 3.6rem; color: var(--accent); line-height: 1; }

/* Spec tables */
.spec-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; background: var(--surface); }
.spec-block h3 { font-size: 1.1rem; color: var(--accent); margin-bottom: 18px; }
.spec-list { display: grid; gap: 10px; }
.spec-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.spec-list li span:first-child { color: var(--text-muted); }
.spec-list li span:last-child { color: var(--text); font-weight: 600; text-align: right; }

.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.addon {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px; background: var(--bg-alt);
}
.addon h4 { font-size: 0.92rem; margin: 0 0 6px; }
.addon .addon-price { color: var(--accent); font-weight: 700; font-size: 0.9rem; }

.color-row { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; color: var(--text-faint);
}

/* Contact / footer */
.contact-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.contact-wrap > * { min-width: 0; }
@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: minmax(0, 1fr); }
  /* Form first on mobile — the thing people actually came to do — details below. */
  .contact-form-wrap { order: -1; }
}
.contact-info-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 28px; }
.contact-info-list li { min-width: 0; }
.contact-info-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-list li > div { min-width: 0; flex: 1 1 0; overflow-wrap: anywhere; }
.contact-info-list .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.contact-info-list strong { display: block; color: var(--text); }
.contact-info-list span { color: var(--text-muted); font-size: 0.92rem; }

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-alt); color: var(--text);
  font-family: var(--font-body); font-size: 0.95rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-note { font-size: 0.8rem; color: var(--text-faint); margin-top: 14px; }
.form-success { display: none; padding: 16px; border-radius: var(--radius-sm); background: rgba(182,231,198,0.12); border: 1px solid var(--accent); color: var(--accent); font-size: 0.9rem; margin-bottom: 18px; }
.form-success.is-visible { display: block; }
.form-banner { display: none; padding: 16px; border-radius: var(--radius-sm); background: rgba(182,231,198,0.12); border: 1px solid var(--accent); color: var(--accent); font-size: 0.85rem; margin-bottom: 18px; }
.form-banner.is-visible { display: block; }

/* Field-level validation messages (replaces the browser's own reportValidity() bubble) */
.field-error { display: none; color: #e08a8a; font-size: 0.78rem; margin-top: 6px; }
.field-error.is-visible { display: block; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #e08a8a; }

/* Error banner shown when the request itself fails (network/endpoint) — the
   filled-in fields stay exactly as the visitor left them. */
.form-error-banner { display: none; padding: 16px; border-radius: var(--radius-sm); background: rgba(224,138,138,0.12); border: 1px solid #e08a8a; color: #e08a8a; font-size: 0.88rem; margin-bottom: 18px; }
.form-error-banner.is-visible { display: block; }
.form-error-banner a { color: inherit; text-decoration: underline; }
/* Shown only inside <noscript> — see CallbackForm.astro / kontakt.astro. */
.form-js-required { padding: 16px; border-radius: var(--radius-sm); background: rgba(182,231,198,0.1); border: 1px solid var(--line); color: var(--text); font-size: 0.88rem; margin-bottom: 18px; }
.form-js-required a { color: var(--accent); text-decoration: underline; }

/* Honeypot — present in the DOM/tab order for nobody but bots that fill in
   every field; invisible and unreachable for real visitors and assistive tech. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Thank-you card that replaces a submitted form in place */
.form-thanks { padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--accent); }
.form-thanks h3 { color: var(--text); font-size: 1.2rem; margin-bottom: 10px; }
.form-thanks p { margin-bottom: 6px; }
.form-thanks a { color: var(--accent); text-decoration: underline; }

/* Chip-style radio group (e.g. "Preferowany kontakt") — same visual language
   as .chip, but real <input type="radio"> so the value is just there in the
   FormData with no extra JS to track selection state. */
.chip-radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-radio span {
  display: inline-block; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text-muted); font-size: 0.82rem; cursor: pointer;
  transition: all .2s var(--ease);
}
.chip-radio:has(input:checked) span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip-radio:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 2px; }

.consent-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--text-muted); margin: 4px 0 4px; cursor: pointer; }
.consent-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.consent-check a { color: var(--accent); text-decoration: underline; }

/* Reusable "we'll call you back" mini-form dropped into category/model page
   and homepage closing CTAs. */
.callback-form { max-width: 480px; margin: 28px auto 0; text-align: left; }
.callback-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.callback-form-row .form-field { flex: 1 1 180px; margin-bottom: 14px; }
.callback-form .consent-check { margin-bottom: 16px; }
/* AUDYT-3 §3.2 — "Umów rozmowę z doradcą": drugi tryb w CallbackForm, czysty
   CSS (bez JS) do przełączania widoczności pól terminu/rodzaju rozmowy. */
.callback-mode-row { margin-bottom: 18px; }
.rodzaj-kontaktu-row { margin-bottom: 18px; }
/* AUDYT-17: warianty (teraz / termin / wideo / wizyta) leżą w jednym miejscu
   na sobie (grid, ta sama komórka) — widoczny jest jeden, ale miejsce zajmuje
   najwyższy, więc formularz nie zmienia wysokości przy przełączaniu.
   Ukrywamy przez visibility (dziedziczona), nigdy nie ustawiamy "visible" na
   elemencie wewnątrz ukrytego wariantu. */
.callback-variants, .callback-telefon-slot { display: grid; }
.callback-variants > .callback-variant, .callback-telefon-slot > * { grid-area: 1 / 1; min-width: 0; }
.callback-teraz-hint { margin: 0; align-self: center; font-size: 0.88rem; color: var(--text-muted); }
.callback-variant--wideo, .callback-variant--wizyta { visibility: hidden; }
.callback-form:has(input[name="rodzajKontaktu"][value="wideorozmowa"]:checked) .callback-variant--wideo,
.callback-form:has(input[name="rodzajKontaktu"][value="wizyta"]:checked) .callback-variant--wizyta { visibility: visible; }
.callback-form:has(input[name="rodzajKontaktu"][value="wideorozmowa"]:checked) .callback-variant--telefon,
.callback-form:has(input[name="rodzajKontaktu"][value="wizyta"]:checked) .callback-variant--telefon { visibility: hidden; }
.callback-form:not(:has(input[name="callbackMode"][value="termin"]:checked)) .callback-telefon-fields { visibility: hidden; }
.callback-form:has(input[name="callbackMode"][value="termin"]:checked) .callback-teraz-hint { visibility: hidden; }
.callback-form-termin .chip-radio-row { margin-bottom: 14px; }

.callback-wizyta-adres { margin-top: 4px; font-size: 0.85rem; color: var(--text-muted); }
.callback-wizyta-adres a { color: var(--accent); text-decoration: underline; }

/* Contact page: Google Maps loaded only after a click, so an embedded iframe
   never costs load time for visitors who never ask for it. */
.map-placeholder {
  aspect-ratio: 16/9; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
  margin-top: 28px;
}
.map-placeholder iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

/* ---------- Homepage final CTA "#kontakt" (Prompt 25) ----------
   Full-height photo + form split, replacing the old centered .alt-bg CTA.
   .final-form below scopes a floating-label restyle of the shared
   CallbackForm to just this section — the component's markup/submit logic
   is untouched, and every other page keeps the plain stacked-label look. */
.final { display: grid; grid-template-columns: .9fr 1.1fr; min-height: min(92vh, 820px); overflow: hidden; }
.final-media { position: relative; overflow: hidden; }
.final-media img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.final-body { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(50px, 7vw, 110px) clamp(24px, 6vw, 100px); overflow: hidden; isolation: isolate; }
.glow { position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -15%; bottom: -25%; background: radial-gradient(closest-side, rgba(233,164,92,.35), rgba(201,115,47,.08) 60%, transparent); }
html.motion .glow { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.15); opacity: .75; } }
.final h2 em { color: var(--ember); }
.tel-big { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--cream); }
.tel-big small { display: block; font-family: var(--font-body); font-size: 13px; color: var(--text-faint); }
@media (max-width: 860px) { .final { grid-template-columns: 1fr; } .final-media { height: 56vw; min-height: 280px; } }

.final-form .callback-form { max-width: 560px; margin: 24px 0 0; }
.final-form .callback-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .final-form .callback-form-row { grid-template-columns: 1fr; } }
.final-form .form-field { position: relative; margin-bottom: 12px; }
.final-form .form-field input {
  height: 58px; width: 100%; padding: 22px 18px 8px; border-radius: 14px;
  background: rgba(244,239,229,.04); border: 1px solid var(--line-d); color: var(--cream);
}
.final-form .form-field input::placeholder { color: transparent; }
.final-form .form-field input:focus { border-color: var(--mint); background: rgba(244,239,229,.07); outline: none; }
.final-form .form-field label {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%); margin: 0;
  font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text-faint);
  pointer-events: none; transition: top .3s var(--ease), font-size .3s, transform .3s;
}
.final-form .form-field:has(input:focus) label,
.final-form .form-field:has(input:not(:placeholder-shown)) label {
  top: 9px; transform: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.final-form .callback-form button[type="submit"] { width: 100%; justify-content: center; }

/* ---------- Poradnik teaser: image cards, no borders (Prompt 25) ---------- */
.poradnik-teaser .card { background: transparent; border: none; border-radius: 0; }
.poradnik-teaser .card:hover { transform: translateY(-4px); border-color: transparent; }
.poradnik-teaser .card-media { border-radius: var(--radius-lg); }
.poradnik-teaser .card-body { padding: 20px 2px 0; }

/* ---------- Footer giant outlined wordmark (Prompt 25) ---------- */
.wordmark { font-family: var(--font-display); font-weight: 300; font-size: clamp(4rem, 17vw, 16rem); line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(244,239,229,.16); white-space: nowrap; margin-top: 70px; overflow: hidden; }

.site-footer { border-top: 1px solid var(--line); padding: 64px 0 0; background: var(--bg-alt); overflow: hidden; }
.site-footer .footer-bottom { padding-bottom: 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 48px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h3 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; font-weight: 600; }
.footer-grid ul { display: grid; gap: 12px; }
.footer-grid a:hover { color: var(--accent); }
.footer-brand p { font-size: 0.9rem; max-width: 280px; }
.social-row { display: flex; gap: 12px; margin-top: 18px; }
.social-row a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.social-row a:hover { border-color: var(--accent); color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--text-faint); }

/* Breadcrumb */
.breadcrumb { font-size: 0.78rem; color: var(--text-faint); letter-spacing: 0.05em; margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--accent); }

/* Utility */
.mt-0 { margin-top: 0; }
.center-copy { max-width: 680px; margin: 0 auto; text-align: center; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink);
  padding: 12px 20px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

body.nav-open { overflow: hidden; }

/* =========================================================
   Sticky mobile action bar (Zadzwoń / WhatsApp / Wycena) — every page
   except konfigurator.html (body.has-sticky-actions), mobile only.
   Floating rounded/blurred pill (Prompt 25): hidden until public/js/
   motion.js's scroll loop adds .show (past ~60% of the first screen), and
   forced back off by .is-hidden (a contact form is in view — js/main.js's
   IntersectionObserver) or while the nav drawer is open.
   ========================================================= */
.sticky-actions { display: none; }
@media (max-width: 980px) {
  body.has-sticky-actions { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .sticky-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: 6px;
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90;
    padding: 6px;
    border-radius: 20px;
    background: rgba(25,19,14,.86);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--line-d);
    transform: translateY(140%);
    transition: transform .6s var(--ease);
  }
  .sticky-actions.show { transform: none; }
  .sticky-actions.is-hidden, body.nav-open .sticky-actions { transform: translateY(140%); }
  .sticky-action {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; border-radius: 14px; color: var(--cream);
    font-size: 0.85rem; font-weight: 600;
  }
  .sticky-action--primary { background: var(--mint); color: var(--mint-ink); }
}

/* =========================================================
   Motion system (Prompt 22 fundament) — see public/js/motion.js and
   AUDYT-3.md §2 "Katalog animacji" for the 4 safety nets. Every rule here
   is scoped under html.motion (added by JS only, and only without
   prefers-reduced-motion), so with JS disabled — or motion reduced —
   every [data-reveal] element is visible by default (no opacity:0 outside
   this scope). "clip" elements are observed through their parent in JS,
   because clip-path zeroes out the intersection area IntersectionObserver
   measures on the element itself.
   ========================================================= */
html.motion [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
html.motion [data-reveal="fade"] { transform: none; }
html.motion [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-io); }
html.motion [data-reveal].in { opacity: 1; transform: none; }
html.motion [data-reveal="clip"].in { clip-path: inset(0 0 0 0); }

/* Parallax is skipped on phone in motion.js (AUDYT-3 §3.2) — don't force the
   compositor layer there either, it's dead weight with nothing to animate. */
@media (min-width: 701px) {
  [data-parallax] { will-change: transform; }
}

/* Header hide-on-scroll-down (transition declared on .site-header itself,
   see top of file) — a basic UX behavior, not a decorative animation, so it
   stays outside html.motion; still killed by the reduced-motion catch-all below. */
.site-header.is-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   Category promo callouts (used on category pages + a
   "which one is right for me" nudge toward the configurator)
   ========================================================= */
.promo-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 28px;
  background: linear-gradient(120deg, rgba(182,231,198,0.08), transparent 60%), var(--surface);
  margin-bottom: 56px;
}
.promo-callout p { margin: 0; color: var(--text); font-size: 0.98rem; }
.promo-callout strong { color: var(--accent); }
.promo-callout .btn { flex-shrink: 0; }

.card-body .config-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-top: 2px;
}
.card-body .config-link:hover { color: var(--accent); }

/* Homepage "pick a category" tiles inside the .configurator promo block */
.category-picks { display: flex; flex-direction: column; gap: 14px; }
.category-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.category-pick:hover { border-color: var(--accent); transform: translateX(4px); }
.category-pick h3 { margin: 0 0 2px; font-size: 1rem; font-weight: 600; }
.category-pick span { font-size: 0.82rem; color: var(--text-faint); }
.category-pick .arrow { color: var(--accent); font-size: 1.2rem; flex-shrink: 0; }

/* ---------- Homepage #konfigurator "studio" (Prompt 25) ----------
   Borderless 2-col layout (unlike .configurator, which balie.astro/
   kontakt.astro/o-nas.astro still use for their own boxed-card look —
   this section gets its own class instead of restyling that shared one). */
.cfg { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 860px) { .cfg { grid-template-columns: 1fr; } }
.studio { position: relative; border-radius: var(--radius-lg); background: radial-gradient(70% 60% at 50% 45%, #3a2c1f 0%, #1f1710 60%, #17110c 100%); padding: clamp(18px, 3vw, 36px); overflow: hidden; }
.studio::before { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%; background: radial-gradient(closest-side, rgba(233,164,92,.22), transparent); pointer-events: none; }
.studio canvas { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.studio-label { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); margin: 6px 0 16px; }
.studio-label b { color: var(--cream); font-weight: 600; }
.sw-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sw-row small { width: 100%; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(244,239,229,.2); box-shadow: inset 0 0 0 3px #1f1710; transition: transform .3s var(--ease), border-color .3s; padding: 0; cursor: pointer; }
.sw:hover { transform: scale(1.12); }
.sw.is-on { border-color: var(--mint); }
.auto-note { position: absolute; top: 18px; right: 20px; font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; }
.auto-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); opacity: .4; }
html.motion .auto-note.is-playing i { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 1; } }

/* ---------- Raty: kalkulator ---------- */
.raty { position: relative; border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 64px); background: linear-gradient(120deg, #22301f 0%, #1a1510 55%, #1a1510 100%); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.raty::after { content: ""; position: absolute; right: -10%; top: -40%; width: 60%; height: 180%; background: radial-gradient(closest-side, rgba(182,231,198,.13), transparent); pointer-events: none; }
.raty .big { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.4rem, 8vw, 7rem); line-height: .9; letter-spacing: -.04em; }
.raty .big small { font-size: .32em; letter-spacing: 0; color: var(--text-muted); margin-left: 8px; }
.raty-range { width: 100%; margin: 24px 0 10px; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--mint) var(--fill, 30%), rgba(244,239,229,.15) var(--fill, 30%)); }
.raty-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 6px rgba(182,231,198,.25); cursor: grab; }
.raty-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--cream); border: 0; box-shadow: 0 0 0 6px rgba(182,231,198,.25); cursor: grab; }
.raty-scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-faint); }
@media (max-width: 860px) { .raty { grid-template-columns: 1fr; } }

/* =========================================================
   Configurator wizard (konfigurator.html)
   ========================================================= */
.wizard-hero { padding: 150px 0 40px; }
.wizard-hero p { max-width: 620px; font-size: 1.05rem; }
/* Mobile: the hero above the wizard used to eat almost the whole first
   screen (eyebrow + two-line h1 + full lede), pushing product choice below
   the fold. Collapse it to a single-line title there; desktop unchanged. */
@media (max-width: 640px) {
  .wizard-hero { padding: 118px 0 22px; }
  .wizard-hero .breadcrumb, .wizard-hero .eyebrow, .wizard-hero p { display: none; }
  .wizard-hero h1 { font-size: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wizard-hero h1 br { display: none; }
}

.wizard-shell { padding-top: 0; padding-bottom: 24px; }

/* Named, clickable steps (Produkt · Model · Opcje · Wycena) — replaces the
   old "Krok X z Y" bar. Only steps already visited (state.maxStepIndex)
   are enabled — see goToVisited() in js/konfigurator.js. */
.wizard-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 32px; }
.wizard-step-sep { color: var(--text-faint); }
.wizard-step-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  font-size: 0.78rem; letter-spacing: 0.03em; color: var(--text-faint);
}
.wizard-step-pill-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 0.68rem; font-weight: 700;
  background: var(--surface-2); color: var(--text-faint);
}
.wizard-step-pill.is-visited { color: var(--text-muted); cursor: pointer; }
.wizard-step-pill.is-visited .wizard-step-pill-num { background: rgba(182,231,198,0.16); color: var(--accent); }
.wizard-step-pill.is-visited:hover { color: var(--text); }
.wizard-step-pill.is-current { color: var(--text); font-weight: 600; }
.wizard-step-pill.is-current .wizard-step-pill-num { background: var(--accent); color: var(--accent-ink); }
.wizard-step-pill[disabled] { cursor: default; }

/* Two-column layout ≥1024px: left column is a sticky "you always see the
   photo and price" rail (#wizard-aside); right column is the step content
   (#wizard-stage). Below 1024px the aside is hidden entirely — its job is
   covered by the mobile sticky color preview + fixed bottom price bar. */
.wizard-aside { display: none; }
@media (min-width: 1024px) {
  .wizard-layout { display: grid; grid-template-columns: minmax(0, 45%) 1fr; gap: 48px; align-items: start; }
  .wizard-aside {
    display: block; position: sticky; top: calc(var(--header-h) + 24px);
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
    padding: 22px; max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto;
  }
}
.wizard-aside-media { border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; background: var(--bg-alt); }
.wizard-aside-media canvas, .wizard-aside-media img { display: block; width: 100%; height: auto; }
.wizard-aside-media .sauna-preview-caption { padding: 10px 4px 0; font-size: 0.78rem; color: var(--text-faint); }
.wizard-aside-price { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.wizard-aside-price span { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.wizard-aside-price b { font-family: var(--font-display); font-size: 1.7rem; color: var(--accent); }
.wizard-aside-list { display: grid; gap: 8px; }
.wizard-aside-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.84rem; padding: 6px 0; border-bottom: 1px solid var(--line); }
.wizard-aside-list li span:first-child { color: var(--text-faint); }
.wizard-aside-list li span:last-child { color: var(--text); font-weight: 600; text-align: right; }

/* What the price includes + financing line — shown under every price
   (aside + summary). Bracketed values are confirmed with the client before
   launch, same convention as the rest of this project. */
.wizard-price-disclosure { font-size: 0.76rem; color: var(--text-faint); margin: 10px 0 0; line-height: 1.5; }
.wizard-price-disclosure b { color: var(--accent); }

/* min-height keeps step transitions from jumping the page height around */
.wizard-stage { min-height: 320px; }
.wizard-step-title { margin-bottom: 8px; }
.wizard-step-hint { color: var(--text-muted); max-width: 620px; margin-bottom: 36px; }

/* Selectable cards (category / model) — reuse .grid-4/.grid-3/.grid-2 for layout */
.pick-card {
  display: block;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
}
.pick-card:hover { transform: translateY(-4px); border-color: rgba(182,231,198,0.4); }
.pick-card.is-selected, .pick-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(182,231,198,0.35);
}
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card-media { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-alt); }
.pick-card-media img { width: 100%; height: 100%; object-fit: cover; }
.pick-card-body { padding: 20px 22px 22px; }
.pick-card-body h3, .pick-card-body h4 { font-size: 1.1rem; margin-bottom: 6px; }
.pick-card-body p { font-size: 0.88rem; margin-bottom: 10px; }
.pick-card-price { color: var(--accent); font-weight: 600; font-size: 0.95rem; }
.pick-card-check {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(242,239,228,0.35);
  background: rgba(23,17,12,0.55);
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 0.85rem;
  transition: all .2s var(--ease);
}
.pick-card.is-selected .pick-card-check, .pick-card:has(input:checked) .pick-card-check {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}

/* Simple, no-image variant for category step */
.pick-card--plain .pick-card-body { padding: 26px 22px; text-align: center; }
.pick-card--plain .pick-card-icon { font-size: 1.8rem; margin-bottom: 10px; display: block; }

/* Filter chips (e.g. jacuzzi "for how many people?") */
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.chip {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--text-muted); font-size: 0.82rem;
  cursor: pointer; transition: all .2s var(--ease);
}
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip:hover { border-color: var(--accent); }

/* Option fieldsets (heater / niecka / addons / mounting etc.) */
.field-group { margin-bottom: 40px; }
.field-group h3 { font-size: 1.02rem; color: var(--accent); margin-bottom: 4px; }
.field-group .field-group-hint { font-size: 0.85rem; color: var(--text-faint); margin-bottom: 18px; }
.opt-list { display: grid; gap: 12px; }
@media (min-width: 640px) { .opt-list.opt-list--2col { grid-template-columns: 1fr 1fr; } }
.opt-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-alt); cursor: pointer; transition: border-color .2s var(--ease);
}
.opt-tile:hover { border-color: rgba(182,231,198,0.4); }
.opt-tile.is-selected { border-color: var(--accent); background: rgba(182,231,198,0.06); }
.opt-tile input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.opt-tile-text { flex: 1; min-width: 0; }
.opt-tile-text strong { display: block; font-size: 0.92rem; color: var(--text); font-weight: 600; }
.opt-tile-text span { font-size: 0.78rem; color: var(--text-faint); }
.opt-tile-price { font-size: 0.88rem; color: var(--accent); font-weight: 700; white-space: nowrap; }
/* AUDYT-27: opcja ze zdjęciem z warsztatu (pokrywa na filtr, schodki, półka na napoje) —
   kwadratowa miniatura między przyciskiem a nazwą; klik w zdjęcie wybiera opcję. */
.opt-tile.has-photo { padding-top: 12px; padding-bottom: 12px; }
.opt-tile-photo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--bg); }
.opt-tile-photo picture, .opt-tile-photo img { display: block; width: 100%; height: 100%; }
.opt-tile-photo img { object-fit: cover; }
.opt-tile-text > span { display: block; margin-top: 2px; }
@media (min-width: 640px) { .opt-tile-photo { width: 84px; height: 84px; } }
/* Combination the CRM can't accept (e.g. Wi-Fi on a wood heater, niecka
   akrylowa on Ø225cm balia) — see js/konfigurator.js BALIA_TUB_COLOR_RULES
   and isElectricSaunaHeater(). */
.opt-tile.is-disabled { cursor: not-allowed; opacity: 0.5; }
.opt-tile.is-disabled:hover { border-color: var(--line); }
/* The disabled reason ("Niedostępne dla modelu Beczka"/"Tylko przy piecu
   elektrycznym") is a short sentence, not a price badge — needs to wrap
   instead of inheriting .opt-tile-price's nowrap, or it pushes the tile
   past the viewport on narrow screens. */
.opt-tile.is-disabled .opt-tile-price { color: var(--text-faint); font-weight: 600; white-space: normal; text-align: right; flex-shrink: 0; max-width: 40%; }


/* Simple select fields for color/finish pickers inside the wizard */
.wizard-stage .form-field { max-width: 420px; }
.wizard-stage .form-field textarea { resize: vertical; min-height: 90px; }
.wizard-summary .form-field { max-width: none; }

/* Free-entry dimension fields (pergola width/depth) */
.dim-inputs { display: flex; gap: 16px; flex-wrap: wrap; }
.dim-inputs .form-field { flex: 1 1 160px; max-width: 220px; margin-bottom: 0; }

/* Color swatch pickers (roof shingle / stain / tub color) — replaced the old
   plain <select> with "Wariant 01" placeholders. Each swatch is a bigger
   round color chip with its name underneath, radio-style, laid out in a
   grid that wraps to fit both 5 roof colors and 15 stain colors. */
.wizard-stage .form-field.form-field--swatches { max-width: none; }
/* Selected color's name shown above the row — mostly useful on mobile,
   where the circles shrink too small to read reliably, but shown at every
   width since it's a harmless, always-accurate label either way. */
.swatch-selected-name { font-size: 0.92rem; color: var(--accent); font-weight: 600; margin-bottom: 10px; min-height: 1.3em; }
/* flex + justify-content:center (not grid) so a half-empty last row — e.g.
   5 leftover swatches out of 15 — centers as a group instead of sitting
   flush left the way an auto-fill grid would leave it. */
.swatch-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.swatch-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 92px; height: 108px; padding: 10px 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-alt); cursor: pointer; text-align: center;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
/* 5–6 small circles per row instead of 2 big tiles — the whole label stays
   the click target (≥44×44px) even though the visible dot shrinks. */
@media (max-width: 640px) {
  .swatch-row { gap: 8px; }
  .swatch-tile { width: 58px; height: 68px; padding: 6px 2px; gap: 3px; }
  .swatch-dot { width: 34px; height: 34px; }
  .swatch-label { display: none; } /* name already shown live above the row */
}
.swatch-tile:hover { border-color: rgba(182,231,198,0.4); }
.swatch-tile.is-selected { border-color: var(--accent); background: rgba(182,231,198,0.06); }
.swatch-tile:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Fills the square above the label and centers the circle inside it, so
   the dot sits in the middle of the tile whether the name below wraps to
   one line or two — instead of the whole circle+label block just centering
   itself as a unit (which drifts up/down with the label's line count). */
.swatch-dot-wrap { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.swatch-dot {
  position: relative;
  display: block; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.18); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);
}
.swatch-dot::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); font-size: 1.15rem; opacity: 0;
}
.swatch-tile.is-selected .swatch-dot { border-color: var(--accent); }
.swatch-tile.is-selected .swatch-dot::after { opacity: 1; }
.swatch-label { font-size: 0.76rem; color: var(--text); line-height: 1.25; }

/* Live sauna color preview — canvas recolored client-side from the base
   product photo + roof/wood masks, see js/konfigurator.js renderSaunaPreview(). */
.sauna-preview-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--bg-alt); }
.sauna-preview-wrap {
  max-width: 460px; margin: 0 auto 22px; border-radius: var(--radius-sm); overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.04), transparent 70%);
}
.sauna-preview-wrap canvas, .sauna-preview-wrap img { display: block; width: 100%; height: auto; }
.sauna-preview-caption { padding: 10px 4px 0; font-size: 0.8rem; color: var(--text-faint); text-align: center; }
/* Sticky color preview while scrolling the swatch pickers, mobile only —
   desktop's "always visible photo" job is covered by .wizard-aside instead
   (this inline copy inside the step content is hidden there entirely via
   .wizard-aside-media, which is a separate DOM node — see
   js/konfigurator.js saunaPreviewMediaHTML()/asideMediaHTML()). */
@media (max-width: 1023px) {
  .sauna-preview-wrap {
    position: sticky; top: calc(var(--header-h) + 8px); z-index: 5;
    height: 35vh; max-width: none; margin: 0 0 16px;
    background: var(--bg); display: flex; align-items: center; justify-content: center;
  }
  .sauna-preview-wrap canvas, .sauna-preview-wrap img { width: auto; height: 100%; max-width: 100%; }
  .sauna-preview-wrap .sauna-preview-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(23,17,12,0.75); margin: 0; padding: 6px; }
}
/* ≥1024px the photo lives in .wizard-aside instead (always visible while
   scrolling the options) — this inline copy would just duplicate it right
   next to it, so only the swatch pickers below stay in the step content. */
@media (min-width: 1024px) {
  .sauna-preview-wrap { display: none; }
}

/* Bottom nav bar — deliberately NOT position:sticky. It was originally
   pinned to the viewport bottom, but that meant it could float on top of
   whatever content happened to be scrolling past underneath it — on some
   viewport sizes that meant it visibly overlapped option tiles (a "weird
   bar" cutting across the page). A plain in-flow bar after the step's
   content is less flashy but never covers anything; the price is still
   live and visible once you reach it, and repeated in the final summary. */
.wizard-nav {
  margin-top: 40px;
}
.wizard-nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
/* Below 1024px this bar DOES pin to the bottom of the screen — that's the
   one exception to the "never sticky" reasoning above. The difference from
   the earlier, reverted attempt: body.has-wizard-nav reserves the matching
   padding-bottom (see below), so the bar never overlaps step content the
   way an un-compensated fixed bar did. Previously it also sat ~4 screens
   below the step title with no price visible until scrolled past all the
   options — this keeps price + "Dalej" in view the whole time. */
@media (max-width: 1023px) {
  body.has-wizard-nav { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .wizard-nav {
    margin-top: 0; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(23,17,12,0.97); border-top: 1px solid var(--line);
  }
  /* Strona modelu (ma .model-buy): pasek konfiguratora przyklejony TYLKO, gdy
     sekcja #konfigurator jest na ekranie (body.wizard-in-view z model-page.js,
     AUDYT-6 pkt 1). Poza nią wraca do zwykłego przepływu pod krokami
     konfiguratora, a dół ekranu należy do #model-sticky-bar. */
  body:has(.model-buy):not(.wizard-in-view) .wizard-nav { position: static; margin-top: 16px; background: transparent; border-top: 0; }
  body:has(.model-buy):not(.wizard-in-view) .wizard-nav .container { padding: 0 16px; }
  body:has(.model-buy):not(.wizard-in-view) .wizard-nav-inner { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; }
  .wizard-nav .container { padding: 10px max(16px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)); }
  .wizard-nav-inner { border: 0; border-radius: 0; background: transparent; padding: 0; }
  /* Model pages (sauna-*.html etc.) also carry the generic 3-way
     Zadzwoń/WhatsApp/Wycena sticky bar — with the wizard embedded on the
     same page, two fixed bottom bars would stack on top of each other.
     The wizard's own price+Dalej bar takes over there; body.has-sticky-actions'
     padding-bottom is simply unused in that case. */
  body.has-wizard-nav .sticky-actions { display: none; }
}
.wizard-nav-price { display: none; flex-direction: column; }
.wizard-nav-price span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.wizard-nav-price b { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent); }
.wizard-nav-actions { display: flex; gap: 12px; margin-left: auto; }
.wizard-nav [disabled] { opacity: 0.4; pointer-events: none; }

/* Summary / offer step */
.wizard-summary {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: 44px;
}
@media (max-width: 640px) { .wizard-summary { padding: 28px 22px; } }
.wizard-summary-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.wizard-summary-head h3 { font-size: 1.3rem; margin-bottom: 4px; }
.wizard-summary-price { text-align: right; }
.wizard-summary-price span { display: block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.wizard-summary-price b { font-family: var(--font-display); font-size: 2.1rem; color: var(--accent); }
.wizard-summary-list { display: grid; gap: 12px; margin-bottom: 8px; }
.wizard-summary-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.wizard-summary-list li span:first-child { color: var(--text-faint); }
.wizard-summary-list li span:last-child { color: var(--text); font-weight: 600; text-align: right; }
.wizard-summary-note { font-size: 0.85rem; color: var(--text-faint); margin-top: 20px; }
.wizard-summary-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.wizard-summary-restart { display: block; margin-top: 18px; font-size: 0.82rem; color: var(--text-faint); background: none; border: none; cursor: pointer; }
.wizard-summary-restart:hover { color: var(--accent); }

/* Summary = the actual contact form now (point 10 of the mobile UX pass) —
   the same "Wyślij zapytanie" submit that used to redirect to kontakt.html
   with a prefilled query string now lives right here, under the config
   list. Reuses .callback-form's field layout. */
.wizard-summary-form-wrap { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.wizard-lead-form { max-width: none; }
/* "Wydrukuj / zapisz PDF" + "Skopiuj link" are secondary now that the form
   above is the primary action — same quiet text-link treatment as
   "Zacznij od nowa", laid out in a row instead of stacked. */
.wizard-summary-actions--secondary { margin-top: 20px; gap: 24px; }
.wizard-summary-actions--secondary .wizard-summary-restart { margin-top: 0; }

/* =========================================================
   Realizacje — preview cards linked from product pages, and the
   photo grid/placeholder styling used on realizacje.html and the
   per-model landing pages (np. sauna-beczka-otwarta.html).
   ========================================================= */
.realizacje-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.realizacja-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.realizacja-card:hover { transform: translateY(-6px); border-color: rgba(182,231,198,0.35); }
.realizacja-media { aspect-ratio: 4/5; overflow: hidden; }
.realizacja-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.realizacja-label { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.realizacja-label h3 { font-size: 1.02rem; margin: 0; }
.realizacja-link { font-size: 0.8rem; color: var(--text-faint); }
.realizacja-card:hover .realizacja-link { color: var(--accent); }

/* Placeholder photo — swap the containing <img>/background in later once
   real project photos are supplied; kept visually obvious as a stand-in. */
.placeholder-photo {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 16px;
  background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 10px, var(--surface) 10px, var(--surface) 20px);
  border: 1px dashed var(--line);
  color: var(--text-faint);
}
.placeholder-icon { font-size: 1.6rem; opacity: .7; }
.placeholder-text { font-size: 0.72rem; letter-spacing: .04em; text-transform: uppercase; }
.placeholder-path { font-size: 0.66rem; opacity: .7; word-break: break-all; font-family: monospace; }

/* Bottom-of-page 3-way CTA row (self-configure / leave contact / call) */
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.realization-photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.realization-photo { aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; }
.realization-photo img { transition: transform .4s var(--ease); }
.realization-photo:hover img { transform: scale(1.04); }
.realization-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.realization-empty-note { border: 1px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center; background: var(--surface); }
.realization-empty-note p { margin: 0; color: var(--text-muted); }
.realization-empty-note a { color: var(--accent); text-decoration: underline; }

/* =========================================================
   Per-model landing pages (np. sauna-beczka-otwarta.html) —
   plain spec line under the hero copy. The configurator further down
   is the same wizard markup as konfigurator.html, inlined directly
   into the page (no <iframe>) so the whole page has one scrollbar.
   ========================================================= */
/* Model page top section: gallery (left) + info column (right) — replaces
   the old single catalog photo. Gallery reuses .realization-photo-grid /
   .realization-photo as-is (same lightbox + swipe, js/lightbox.js
   untouched) so it doubles as the model's full photo set instead of
   showing the catalog shot once here and the same realization photos
   again lower on the page. */
.model-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .model-top { grid-template-columns: 1fr; } }
.model-gallery-note { font-size: 0.8rem; color: var(--text-faint); margin-top: 12px; }

.model-price-block { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 6px 0 20px; }
.model-price-block b { font-family: var(--font-display); font-size: 1.9rem; color: var(--accent); }
.model-price-block span { font-size: 0.88rem; color: var(--text-faint); }
/* AUDYT-3 §3.6 — kalkulator rat przy cenie modelu (compact variant of .raty's
   slider; .raty-range/.raty-scale are shared with the homepage block). */
.model-raty { margin: 0 0 6px; max-width: 360px; }
.model-raty-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.model-raty-row b { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.model-raty-row span { font-size: 0.82rem; color: var(--text-faint); }
.model-raty-static { font-size: 0.88rem; color: var(--text-faint); margin: 0 0 6px; }
.model-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0 20px; }
.model-perks { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.model-perks li { font-size: 0.88rem; color: var(--text-muted); display: flex; gap: 8px; }
.model-perks li b { color: var(--text); font-weight: 600; }

/* "W cenie / Za dopłatą" — two addon-grids side by side (reuses
   .addon-grid/.addon from the pergola page). */
.price-includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .price-includes-grid { grid-template-columns: 1fr; } }
.price-includes-grid h3 { font-size: 1.02rem; color: var(--accent); margin-bottom: 16px; }

/* FAQ accordion — plain <details>/<summary>, no JS required. */
.faq-group { margin-bottom: 44px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group h2, .faq-group h3 { margin-bottom: 18px; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); margin-bottom: 10px; overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 18px 44px 18px 20px; font-weight: 600; color: var(--text);
  list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 1.3rem; line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item summary:hover { color: var(--accent); }
.faq-item-body { padding: 0 20px 20px; color: var(--text-muted); font-size: 0.94rem; }

/* Comparison table (sauny.html) — horizontal scroll in its own container
   on narrow screens instead of squeezing columns or overflowing the page. */
.compare-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
/* AUDYT-19 (persona „niezdecydowany”): na telefonie tabela przewija się w bok —
   podpowiedź nad tabelą, żeby było to widać. */
@media (max-width: 760px) {
  .compare-table-wrap, .model-compare-wrap { position: relative; }
  .compare-table-wrap::before, .model-compare-wrap::before {
    content: "Przewiń tabelę w bok →"; display: block; padding: 8px 12px; font-size: 0.78rem; color: var(--text-faint);
    letter-spacing: 0.04em; text-transform: uppercase; position: sticky; left: 0;
  }
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; font-size: 0.88rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.compare-table th:first-child, .compare-table td:first-child { white-space: normal; }
.compare-table thead th { color: var(--text-faint); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; background: var(--surface); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover { background: rgba(182,231,198,0.04); }
.compare-table td.price { color: var(--accent); font-weight: 600; }

/* Richer product cards on category pages (image + name + param chips +
   price + two-action row). .card is a plain container here (not itself an
   <a> — an <a> can't contain another <a> to a different destination, which
   the "Wycena online" link needs to be). Instead the whole card is made
   clickable with the "stretched link" pattern: .card-stretched-link (on the
   model name) gets an absolutely-positioned ::after covering the entire
   card, so a click anywhere lands on the model page; the secondary
   "Wycena online →" link sits above that overlay (z-index) and keeps its
   own, independent destination. "Zobacz szczegóły" is a plain visual label
   (not a second real link) — the card itself already goes there. */
.card--product { position: relative; }
/* Horizontal card variant (single wide product, e.g. pergole.html Kotoba,
   jacuzzi.html "piec na drewno" addon) — replaces the inline
   style="flex-direction:row;flex-wrap:wrap" that used to sit on these. */
.card--wide { flex-direction: row; flex-wrap: wrap; }
.card--wide .card-media { flex: 1 1 340px; }
.card-body--wide { flex: 1 1 340px; justify-content: center; }
.card-title-lg { font-size: 1.6rem; }
.card-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.card-chip { font-size: 0.72rem; letter-spacing: 0.03em; color: var(--text-faint); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.card-stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* AUDYT-19: sam rząd przepuszcza kliknięcia (pointer-events: none) do „rozciągniętego”
   linku karty pod spodem — wcześniej kliknięcie dokładnie w „Zobacz szczegóły”
   trafiało w ten div (z-index 2) i nic się nie działo. Tylko „Wycena online →”
   łapie klik sam. */
.card-cta-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); pointer-events: none; }
.card-cta-row .btn { flex-shrink: 0; position: relative; z-index: 2; pointer-events: auto; } /* AUDYT-19: prawdziwy link (Tab/Enter), nie tylko napis */
.card-cta-row .config-link { position: relative; z-index: 2; pointer-events: auto; }

/* =========================================================
   Lightbox (js/lightbox.js) — full-screen realization photo viewer.
   ========================================================= */
body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 8, 5, 0.92); }
.lightbox-content { position: relative; z-index: 1; max-width: min(1200px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox-image { max-width: 100%; max-height: 76vh; width: auto; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); display: block; }
.lightbox-meta { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--text-muted); font-size: 0.85rem; text-align: center; }
.lightbox-counter { color: var(--text-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.lightbox-close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(23,17,12,0.7); border: 1px solid var(--line); color: var(--text);
  font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(23,17,12,0.9); color: var(--accent); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(23,17,12,0.7); border: 1px solid var(--line); color: var(--text);
  font-size: 1.8rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover { background: rgba(23,17,12,0.9); color: var(--accent); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
@media (max-width: 700px) {
  .lightbox-nav { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 10px; right: 10px; }
}

.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 130;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 18px;
  max-height: 25vh; overflow-y: auto;
}
.cookie-banner p { margin: 0; flex: 1 1 260px; font-size: 0.9rem; color: var(--text-muted); }
.cookie-banner a { color: var(--accent); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (min-width: 981px) {
  /* Dolny prawy rożek na komputerze, nie środek — żeby nie zasłaniać treści pod nagłówkiem. */
  .cookie-banner { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
}
@media (max-width: 980px) {
  body.has-sticky-actions .cookie-banner,
  body:has(.model-sticky-bar) .cookie-banner,
  body.has-wizard-nav .cookie-banner { bottom: calc(68px + 12px + env(safe-area-inset-bottom)); }
  /* AUDYT-6 pkt 3: w układzie kolumnowym flex-basis 260px z reguły wyżej działało
     na WYSOKOŚĆ akapitu (pusty prostokąt w banerze, 28% ekranu). Zwarty pasek:
     tekst auto, przyciski w jednym rzędzie. */
  .cookie-banner { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; left: 10px; right: 10px; }
  .cookie-banner p { flex: 0 0 auto; font-size: 0.84rem; line-height: 1.4; }
  .cookie-banner-actions { flex-wrap: nowrap; }
  .cookie-banner-actions .btn { flex: 1 1 0; text-align: center; padding-top: 10px; padding-bottom: 10px; }
}

@media print {
  .site-header, .site-footer, .wizard-nav, .wizard-steps, .wizard-step-hint, .skip-link,
  .wizard-hero, .wizard-aside, .wizard-summary-actions, .wizard-summary-restart,
  .wizard-summary-form-wrap, .sticky-actions, .wizard-summary .field-group, .cookie-banner { display: none !important; }
  body { background: #fff; color: #111; }
  .wizard-summary { border: 1px solid #ccc; box-shadow: none; background: #fff; margin-top: 0; }
  .wizard-summary-list li span:last-child, .wizard-summary-price b, .field-group h3,
  .wizard-summary-head h3, .wizard-summary-note, .wizard-summary-list li span:first-child,
  .eyebrow { color: #111 !important; }
  .wizard-summary-list li { border-color: #ddd; }
  .wizard-summary-head { border-color: #ddd; }
  section { padding: 24px 0; }
}

/* =========================================================
   "Pomóż mi wybrać" (Prompt 12) — src/pages/pomoc-w-wyborze.astro,
   silnik w public/js/dobor.js. Reużywa .wizard-shell/.wizard-stage/.btn/
   .opt-tile-price/.pick-card-price z reguły powyżej; poniżej tylko to,
   czego tam jeszcze nie było.
   ========================================================= */
.dobor-progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 32px; }
.dobor-progress-fill { height: 100%; background: var(--accent); border-radius: inherit; transition: width 0.3s var(--ease); }

.dobor-question fieldset { border: 0; margin: 0; padding: 0; }
.dobor-question legend { padding: 0; margin-bottom: 8px; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--text); }
.dobor-question legend:focus { outline: none; }

.dobor-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 28px 0; }
.dobor-option {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 64px; padding: 16px 20px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.dobor-option:hover { border-color: rgba(182,231,198,0.4); transform: translateY(-2px); }
.dobor-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dobor-option.is-selected { border-color: var(--accent); background: rgba(182,231,198,0.1); color: var(--accent); }

.dobor-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.dobor-back { color: var(--text-faint); }
.dobor-back:hover { color: var(--text); }
.dobor-skip { color: var(--text-faint); text-decoration: underline; font-size: 0.88rem; margin-left: auto; }
.dobor-skip:hover { color: var(--text); }

.dobor-fallback-note {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 28px; color: var(--text-muted); font-size: 0.92rem;
}

.dobor-result-main { display: grid; gap: 24px; margin-bottom: 40px; }
@media (min-width: 768px) { .dobor-result-main { grid-template-columns: minmax(0, 42%) 1fr; align-items: start; } }
.dobor-result-media { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt); }
.dobor-result-media img { display: block; width: 100%; height: auto; }
.dobor-result-body .eyebrow { display: block; margin-bottom: 6px; }
.dobor-result-price { color: var(--accent); font-weight: 700; font-size: 1.3rem; font-family: var(--font-display); display: block; margin: 6px 0 14px; }
.dobor-reasons { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.dobor-reasons li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.92rem; color: var(--text-muted); }
.dobor-reasons li::before { content: "✓"; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.dobor-result-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.dobor-alts-title { margin-bottom: 20px; }
.dobor-alts { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 36px; }
.dobor-alt-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.dobor-alt-media { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-alt); }
.dobor-alt-media img { width: 100%; height: 100%; object-fit: cover; }
.dobor-alt-body { padding: 16px 18px 20px; }
.dobor-alt-body h4 { font-size: 1rem; margin-bottom: 6px; }
.dobor-alt-reasons { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 4px; }
.dobor-alt-reasons li { font-size: 0.82rem; color: var(--text-faint); }
.dobor-alt-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

.dobor-lead-form { margin-top: 20px; max-width: 480px; }
.dobor-restart { margin-top: 8px; }

/* =========================================================
   Video.astro — cichy wideo-loop (Prompt 14). Domyślnie zajmuje swój
   kontener (aspect-ratio 16/9); .hero-bg-video zamienia go w pełnoekranową
   nakładkę nad istniejącym, już wymiarowanym zdjęciem hero (zero CLS — nie
   dokłada wysokości, tylko przykrywa to, co już zarezerwowało miejsce).
   ========================================================= */
.we-video { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt); }
.we-video-el { width: 100%; height: 100%; object-fit: cover; display: block; }
.we-video-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23,17,12,0.55); color: var(--text); border: 1px solid rgba(242,239,228,0.35);
  cursor: pointer; backdrop-filter: blur(2px);
}
.we-video-play:hover { background: rgba(23,17,12,0.72); }
.hero-bg-video { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; z-index: 1; }
.hero-bg-video .we-video-play { width: 56px; height: 56px; }
/* Prompt 41: wszystkie nagrania są pionowe, więc wideo hero pokazujemy tylko na
   telefonie (hero-bg-mobile) — nie ma i nie będzie wersji 1080p na desktop. */
@media (min-width: 641px) { .hero-bg-video--mobile { display: none; } }

/* "Zobacz na filmie" (Prompt 14) — fasada YouTube i wideo własne na stronach modeli. */
.yt-facade { position: relative; aspect-ratio: 16/9; max-width: 860px; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: var(--bg-alt); }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.model-video { display: block; width: 100%; max-width: 860px; aspect-ratio: 16/9; border-radius: var(--radius-lg); background: var(--bg-alt); }
/* Prompt 41: filmy produktowe pionowe (telefon nagrywał 9:16) — węższy kontener,
   wysoki tyle, ile sensownie zmieści się bez przewijania (80svh), nie szerszy niż 405px. */
.model-video--pionowe { aspect-ratio: 9 / 16; width: min(100%, 405px, calc(80svh * 9 / 16)); max-width: none; margin-inline: auto; }

/* =========================================================
   Poradnik (Prompt 13) — src/pages/poradnik.astro, poradnik-[slug].astro.
   Reużywa .card/.card--product/.grid-3/.chip-row/.page-hero/.alt-bg.
   ========================================================= */
.poradnik-meta { color: var(--text-faint); font-size: 0.85rem; margin-top: 4px; }

.poradnik-layout { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .poradnik-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
}
.poradnik-toc {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 18px 20px; position: sticky; top: calc(var(--header-h) + 24px);
}
.poradnik-toc-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.poradnik-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.poradnik-toc a { color: var(--text-muted); font-size: 0.88rem; }
.poradnik-toc a:hover { color: var(--accent); }

.poradnik-content { max-width: 760px; line-height: 1.7; }
.poradnik-content h2 { margin-top: 44px; margin-bottom: 14px; font-size: 1.5rem; }
.poradnik-content h3 { margin-top: 28px; margin-bottom: 10px; font-size: 1.15rem; }
.poradnik-content p { margin-bottom: 16px; color: var(--text-muted); }
.poradnik-content ul, .poradnik-content ol { margin: 0 0 16px; padding-left: 22px; color: var(--text-muted); }
.poradnik-content li { margin-bottom: 6px; }
.poradnik-content a { color: var(--accent); }
.poradnik-content strong { color: var(--text); }
.poradnik-content table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 0.9rem; }
.poradnik-content th, .poradnik-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.poradnik-content th { background: var(--surface); color: var(--text); }
.poradnik-content blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--accent); background: var(--surface); color: var(--text-muted); font-style: italic; }

.poradnik-modele-box { margin: 32px 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.poradnik-modele-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; }
.poradnik-modele-box .grid-3 { gap: 16px; }

.poradnik-faq { margin-top: 40px; }
.poradnik-faq-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; background: var(--surface); }
.poradnik-faq-item summary { cursor: pointer; font-weight: 600; color: var(--text); }
.poradnik-faq-item p { margin: 12px 0 0; color: var(--text-muted); }

/* ---------- Model page — nowy wygląd (ModelPage.astro) ---------- */
.model-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; margin-top: 8px; }
.model-top > * { min-width: 0; }
@media (max-width: 860px) { .model-top { grid-template-columns: 1fr; gap: 28px; } }

.model-buy { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 860px) { .model-buy { position: static; } }

.model-gallery-stage { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.gallery-stage-slide { display: none; width: 100%; height: 100%; }
.gallery-stage-slide.is-active { display: block; }
.gallery-stage-slide picture, .gallery-stage-slide img { width: 100%; height: 100%; object-fit: cover; }
.model-gallery-prev, .model-gallery-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(17,12,8,0.55); color: var(--cream); font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.model-gallery-prev { left: 12px; }
.model-gallery-next { right: 12px; }
.model-gallery-prev:hover, .model-gallery-next:hover { background: rgba(17,12,8,0.8); }

.model-gallery-thumbs.realization-photo-grid {
  display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px;
}
.model-gallery-thumbs .realization-photo { flex: 0 0 84px; aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; opacity: 0.55; transition: opacity .2s; }
.model-gallery-thumbs .realization-photo img { width: 100%; height: 100%; object-fit: cover; }
.model-gallery-thumbs .realization-photo.is-active { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }

.model-buy-incl { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.model-buy-incl li { font-size: 0.86rem; color: var(--text-muted); padding-left: 18px; position: relative; }
.model-buy-incl li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }

.perks-bar { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); margin-top: 22px; list-style: none; }
.perks-bar li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: var(--text-muted); }
.perks-bar li svg { flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.perks-bar li b { color: var(--text); font-weight: 600; }

.model-spec-table { width: 100%; border-collapse: collapse; }
.model-spec-table .model-spec-table-head th { text-align: left; padding: 22px 0 10px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.model-spec-table tr:not(.model-spec-table-head) td { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.model-spec-table tr:not(.model-spec-table-head) td:first-child { color: var(--text-muted); }
.model-spec-table tr:not(.model-spec-table-head) td:last-child { color: var(--text); font-weight: 600; text-align: right; }

.addon { display: flex; align-items: flex-start; gap: 12px; }
.addon svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }

.pliki-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plik-karta { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; background: var(--bg-alt); color: var(--text); text-decoration: none; }
.plik-ikona { flex-shrink: 0; width: 36px; height: 28px; border-radius: 4px; background: var(--accent); color: var(--mint-ink); font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.model-sticky-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-alt); border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform .25s var(--ease-io);
}
@media (max-width: 860px) {
  .model-sticky-bar { display: flex; }
  .model-sticky-bar.is-visible { transform: none; }
  body:has(.model-sticky-bar) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}
.model-sticky-bar-price { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); }

/* ---------- Category hero — nowy wygląd (CategoryHero.astro) ---------- */
.category-hero { position: relative; height: 60vh; min-height: 420px; display: flex; align-items: flex-end; }
.category-hero-media { position: absolute; inset: 0; z-index: 0; }
.category-hero-media picture, .category-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.category-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,12,8,0.15), rgba(17,12,8,0.85)); z-index: 1; }
.category-hero-inner { position: relative; z-index: 2; padding-bottom: clamp(40px, 6vw, 72px); }
.category-hero-inner .breadcrumb { color: rgba(244,239,229,0.7); }
.category-hero-inner h1 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); color: var(--cream); max-width: 760px; margin: 0 0 14px; }
.category-hero-inner p { max-width: 620px; font-size: 1.05rem; color: rgba(244,239,229,0.82); margin: 0; }

/* =====================================================================
   Strona główna v4 "sprzedażowa" (Prompt 31) — pasek ogłoszeń, odznaki
   zaufania, karty kategorii z ratą/terminem, "cena bez niespodzianek",
   obietnice, opinie Google (siatka), pakiet, oś "jak kupujesz", FAQ.
   Adaptacja Claude outputs/prototyp-v4-zrodlo-strona-glowna.html na
   istniejące tokeny/komponenty projektu (bez nowych zmiennych/kolorów).
   ===================================================================== */

/* ---------- pasek ogłoszeń ---------- */
.annc { position: relative; z-index: 51; background: #24331f; color: #e6f3e9; font-size: 13.5px; }
.annc .container { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 40px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; text-align: center; }
.annc b { font-weight: 600; color: #fff; }
.annc .sep { opacity: .35; }
.annc a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .annc .hide-m { display: none; } }

/* ---------- odznaki zaufania w hero ---------- */
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 10px; font-size: 14px; color: rgba(244,239,229,.86); }
.trust > span { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 17px; height: 17px; color: var(--mint); flex-shrink: 0; }

/* ---------- karty kategorii: cena, rata, termin ---------- */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pcard { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--char); border: 1px solid var(--line-d); transition: transform .6s var(--ease), border-color .4s; }
.pcard:hover { transform: translateY(-6px); border-color: rgba(182,231,198,.4); }
.pcard .pimg { position: relative; aspect-ratio: 4/4.3; overflow: hidden; }
.pcard .pimg img, .pcard .pimg picture { width: 100%; height: 100%; }
.pcard .pimg img { object-fit: cover; transition: transform 1.2s var(--ease); }
.pcard:hover .pimg img { transform: scale(1.05); }
.pcard .badge { position: absolute; left: 14px; top: 14px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(17,12,8,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--cream); }
.pcard .pbody { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard h3 { font-size: 1.7rem; font-family: var(--font-display); font-weight: 400; }
.pcard .from { font-size: 15px; color: var(--muted); margin-top: 4px; }
.pcard .from b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--cream); }
.pcard .rate { font-size: 14px; color: var(--mint); font-weight: 600; }
.pcard .realizacja { font-size: 13px; color: var(--faint); }
.pcard ul { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-d); display: grid; gap: 7px; font-size: 14px; color: var(--muted); }
.pcard li { display: flex; gap: 8px; }
.pcard li::before { content: "✓"; color: var(--mint); font-weight: 700; }
.pcard .go { margin-top: auto; padding-top: 14px; font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.pcard .go .arr { color: var(--mint); transition: transform .45s var(--ease); }
.pcard:hover .go .arr { transform: translateX(6px); }
@media (max-width: 1100px) { .cards4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards4 { grid-template-columns: 1fr; } .pcard .pimg { aspect-ratio: 16/11; } }

/* ---------- cena bez niespodzianek: tabela porównawcza ---------- */
.compare { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-l); background: #fff; }
.compare table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.compare th, .compare td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-l); }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); background: var(--sand); }
.compare thead th.us { background: #24331f; color: #e6f3e9; }
.compare td:first-child { font-weight: 600; width: 22%; }
.compare td.us { background: #f1f7f2; color: #173a25; }
.compare td.us b { color: #173a25; }
.compare td.them { color: var(--ink-2); }
.compare .ok { color: #2f6b47; font-weight: 700; margin-right: 6px; }
.compare .no { color: #b0542e; font-weight: 700; margin-right: 6px; }
.compare-note { font-size: 13px; color: var(--ink-2); margin-top: 14px; max-width: 80ch; }
@media (max-width: 760px) {
  .compare table, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
  .compare thead { display: none; }
  .compare tr { border-bottom: 1px solid var(--line-l); padding: 6px 0; }
  .compare td { border: 0; padding: 8px 18px; }
  .compare td:first-child { width: 100%; padding-top: 16px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
  .compare td.us::before { content: "WarmEscape: "; font-weight: 600; }
  .compare td.them::before { content: "Często na rynku: "; font-weight: 600; }
}

/* ---------- obietnice ---------- */
.promises { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.promise { position: relative; padding: 30px 28px 28px; border-radius: var(--radius-lg); background: linear-gradient(160deg, #2a2017, #1b140e); border: 1px solid var(--line-d); overflow: hidden; }
.promise .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(182,231,198,.1); color: var(--mint); margin-bottom: 20px; }
.promise .ic svg { width: 22px; height: 22px; }
.promise h3 { font-size: 1.45rem; margin-bottom: 10px; font-family: var(--font-display); font-weight: 400; }
.promise { display: flex; flex-direction: column; }
.promise .promise-link { margin-top: auto; padding-top: 16px; }
.promise .promise-link a { color: var(--mint); }
.promise p { margin: 0; color: var(--muted); font-size: 15.5px; }
.promise.wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.promise.wide img, .promise.wide picture { border-radius: 16px; aspect-ratio: 4/3; width: 100%; }
.promise.wide img { object-fit: cover; }
@media (max-width: 1100px) { .promises { grid-template-columns: 1fr 1fr; } .promise.wide { grid-column: span 2; } }
@media (max-width: 640px) { .promises { grid-template-columns: 1fr; } .promise.wide { grid-column: auto; grid-template-columns: 1fr; } }

/* ---------- opinie Google: siatka zamiast karuzeli cytatów ---------- */
.reviews-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--line-l); margin-bottom: 22px; }
.reviews-head .score { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 400; color: var(--ink); }
.reviews-head .st { color: #d9a12b; font-size: 20px; letter-spacing: 2px; }
.reviews-head small { display: block; color: var(--ink-2); font-size: 14px; }
.reviews-head .btn { margin-left: auto; height: 46px; }
.reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.review { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line-l); display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.review .st { color: #d9a12b; letter-spacing: 2px; }
.review p { margin: 0; color: var(--ink); }
.review .who { margin-top: auto; font-size: 13px; color: var(--ink-2); }
.review-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
@media (max-width: 1100px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .reviews { grid-template-columns: 1fr; } .reviews-head .btn { margin-left: 0; } }

/* ---------- pakiet "Strefa relaksu" ---------- */
.bundle { display: grid; grid-template-columns: 1.1fr .9fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--char); border: 1px solid var(--line-d); }
.bundle-media { position: relative; min-height: 420px; }
.bundle-media img, .bundle-media picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.bundle-media img { object-fit: cover; }
.bundle-body { padding: clamp(28px, 4vw, 56px); }
.bundle-body h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.calc { margin-top: 26px; border-top: 1px solid var(--line-d); }
.calc-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-d); font-size: 15.5px; }
.calc-row span:first-child { color: var(--muted); }
.calc-row.total { font-size: 17px; font-weight: 600; }
.calc-row.total span:last-child { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: var(--cream); }
.calc-row.save span:last-child { color: var(--mint); font-weight: 600; }
.bundle-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.bundle-pick label { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-d); font-size: 14px; cursor: pointer; transition: border-color .3s, background .3s; }
.bundle-pick input { accent-color: var(--mint); }
.bundle-pick label:has(input:checked) { border-color: var(--mint); background: rgba(182,231,198,.08); }
@media (max-width: 900px) { .bundle { grid-template-columns: 1fr; } .bundle-media { min-height: 260px; } }

/* ---------- jak to wygląda: oś czasu ---------- */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: t; }
.tl { position: relative; padding: 22px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line-l); }
.tl::before { counter-increment: t; content: counter(t); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #24331f; color: #e6f3e9; font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.tl b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; margin-bottom: 6px; color: var(--ink); }
.tl span { font-size: 14.5px; color: var(--ink-2); }
.tl .when { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #2f6b47; letter-spacing: .04em; }
@media (max-width: 1100px) { .timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } }

/* ---------- zobacz na żywo: rezerwacja ---------- */
.book { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.book > * { min-width: 0; }
.book-photos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.book-photos > * { display: block; min-width: 0; }
.book-photos img, .book-photos picture { border-radius: 18px; aspect-ratio: 3/4; width: 100%; }
.book-photos img { object-fit: cover; }
.book-photos > *:nth-child(2) { margin-top: 44px; }
@media (max-width: 900px) { .book { grid-template-columns: 1fr; } .book-photos { display: none; } }

/* ---------- pasek CTA pakietu ---------- */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(26px, 4vw, 44px); border-radius: var(--radius-lg); background: linear-gradient(120deg, #22301f, #1a1510); }
.cta-band h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-family: var(--font-display); font-weight: 400; }
.cta-band p { margin: 8px 0 0; color: var(--muted); }

/* ---------- telefon: długie siatki jako poziome karuzele ---------- */
@media (max-width: 760px) {
  .cards4, .reviews, .timeline {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%;
    overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 10px;
    scrollbar-width: none; gap: 12px;
  }
  .cards4::-webkit-scrollbar, .reviews::-webkit-scrollbar, .timeline::-webkit-scrollbar { display: none; }
  .cards4 > *, .reviews > *, .timeline > * { scroll-snap-align: start; }
  .timeline { grid-auto-columns: 72%; }
  .pcard .pimg { aspect-ratio: 4/3.2; }
  .swipe-hint { display: block; }
}
.swipe-hint { display: none; font-size: 12.5px; color: var(--text-faint); margin-top: 6px; text-align: right; }

/* ---------- wymiary diagramu ---------- */
.model-dims { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.model-dims-svg svg { width: 100%; height: auto; }
@media (max-width: 860px) { .model-dims { grid-template-columns: 1fr; } }

/* ---------- kalkulator eksploatacji ---------- */
.model-cost-box { background: var(--bg-alt); border-radius: var(--radius); padding: 28px; max-width: 520px; }
.model-cost-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.model-cost-in label { font-size: 0.82rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.model-cost-in input { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); width: 100%; min-width: 0; box-sizing: border-box; }

/* ---------- tabela gwarancji (model pages) ---------- */
.model-warranty-table { width: 100%; border-collapse: collapse; }
.model-warranty-table th { text-align: left; padding: 10px 12px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--line); }
.model-warranty-table td { padding: 12px; border-bottom: 1px solid var(--line); font-size: 0.92rem; color: var(--text-muted); }
.model-warranty-table td:first-child { color: var(--text); font-weight: 600; }
.model-cost-out { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent); margin: 0 0 8px; }

/* ---------- jak kupujesz: 5-step timeline ---------- */
.model-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.model-timeline-step { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 2px solid var(--line); }
.model-timeline-step b { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); }
.model-timeline-step span { font-size: 0.86rem; color: var(--text-muted); }
.model-timeline-when { color: var(--accent) !important; font-weight: 600; }
@media (max-width: 860px) { .model-timeline { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- pakiet CTA band ---------- */
.model-pakiet-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--bg-alt); border-radius: var(--radius); padding: 28px; margin-top: 30px; }
.model-pakiet-cta h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.3rem; }
.model-pakiet-cta p { margin: 0; color: var(--text-muted); }

/* ---------- porownaj (model comparison table) ---------- */
.model-compare-wrap { overflow-x: auto; }
.model-compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.model-compare-table th { text-align: left; padding: 10px 12px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--line); }
.model-compare-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: 0.92rem; color: var(--text-muted); }
.model-compare-name { display: flex; align-items: center; gap: 12px; color: var(--text) !important; font-weight: 600; }
.model-compare-thumb { width: 52px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; }
.model-compare-table tr.is-current { background: rgba(182, 231, 198, 0.08); }
.model-compare-table .price { color: var(--text) !important; font-weight: 700; }

/* ---------- sticky subnav (model page) ---------- */
.model-subnav { position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); transform: translateY(-100%); transition: transform .2s var(--ease); }
.model-subnav.is-visible { transform: translateY(0); }
/* Nagłówek schowany (motion.js) → podmenu przy samej górze (AUDYT-6 pkt 2). */
.model-subnav.is-top, body:has(.site-header.is-hidden) .model-subnav { top: 0; transition: transform .2s var(--ease), top .2s var(--ease); }
/* Na telefonie w podmenu zostają same linki — cena i "Wyceń" są w pasku na dole (#model-sticky-bar). */
@media (max-width: 640px) {
  /* AUDYT-19: wyższa specyficzność — ogólna reguła .model-subnav-cta niżej w pliku
     nadpisywała to display:none i cena z „Wyceń →” wystawały poza ekran 390 px. */
  .model-subnav .model-subnav-cta { display: none; }
  .model-subnav-inner { gap: 0; }
  .model-subnav-links { gap: 16px; padding-right: 16px; }
  /* AUDYT-19 (persona „mobilny”): linki przewijają się w bok, z cieniem po prawej
     jako podpowiedzią — wcześniej „Wyceń →” i cena wystawały poza 390 px. */
  .model-subnav-links { padding-right: 36px; }
}
.model-subnav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; overflow-x: auto; }
.model-subnav-links { display: flex; gap: 18px; }
.model-subnav-links a { font-size: 0.86rem; color: var(--text-muted); white-space: nowrap; }
.model-subnav-links a.is-active { color: var(--accent); }
.model-subnav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.model-subnav-cta b { font-family: var(--font-display); color: var(--text); }

/* ---------- sticky bar (model page) — price + phone + CTA on mobile ---------- */
.model-sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; align-items: center; gap: 14px; padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line); transform: translateY(100%); transition: transform .2s var(--ease); }
.model-sticky-bar.is-visible { display: flex; transform: translateY(0); }
.model-sticky-bar-price { flex: 1; display: flex; flex-direction: column; }
.model-sticky-bar-price b { font-family: var(--font-display); color: var(--text); }
.model-sticky-bar-price small { color: var(--text-faint); font-size: 0.78rem; }
.model-sticky-bar-tel { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-alt); color: var(--text); flex-shrink: 0; }
.model-sticky-bar-wa { color: #25d366; }
@media (max-width: 400px) { .model-sticky-bar { gap: 10px; padding: 10px 12px; } .model-sticky-bar-price small { display: none; } }
@media (min-width: 861px) { .model-sticky-bar { display: none !important; } }

/* ---------- model buy box additions (prototyp-v4): size buttons, zip widget, gallery video/360 tiles ---------- */
.model-sizes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.model-sizes button { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: transparent; color: var(--text-muted); cursor: pointer; }
.model-sizes button.is-active { border-color: var(--accent); color: var(--accent); }
.model-delivery { padding: 16px 0; border-top: 1px solid var(--line); margin-top: 6px; font-size: 0.88rem; color: var(--text-muted); }
.model-zip { display: flex; gap: 8px; margin: 10px 0; }
.model-zip input { flex: 1; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.model-zip-out { font-size: 0.86rem; color: var(--text-muted); }
.model-gallery-video video { width: 100%; height: 100%; object-fit: cover; }
.model-gallery-tile-label { display: flex; align-items: center; justify-content: center; font-size: 0.78rem; color: var(--text-muted); background: var(--surface); }
.model-price-wrap { display: flex; flex-direction: column; gap: 6px; }

/* Tabela "Ile miejsca potrzebujesz" (Prompt 40 pkt 10) pod rysunkiem wymiarów. */
.model-miejsce { margin-top: 36px; }
.model-miejsce h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; margin-bottom: 14px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.model-miejsce-table { min-width: 520px; }
.model-miejsce-table th { text-align: left; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.model-miejsce-table td { white-space: nowrap; }

/* Przykład reprezentatywny rat 0% (Prompt 40 pkt 15) + odnośnik "*" przy kwocie raty. */
.raty-przyklad { font-size: 0.78rem; line-height: 1.5; color: var(--text-faint); max-width: 90ch; margin: 28px auto 0; padding: 0 0 8px; }
.raty-przyklad-gw { color: var(--accent); margin-right: 2px; }
.raty-przyklad-section { padding: 0 0 36px; }
.raty-przyklad-section .raty-przyklad { margin-top: 0; }
.raty-gw { color: var(--accent); text-decoration: none; font-weight: 600; margin-left: 1px; }
.raty-gw:hover, .raty-gw:focus-visible { text-decoration: underline; }

/* Pod ceną na stronie modelu: osoby + miejsce (Prompt 40 pkt 9–10) i oferta sezonowa (pkt 8). */
.model-fit { margin-top: 6px; font-size: 0.9rem; color: var(--text-muted); }
.model-fit small { color: var(--text-faint); }
.model-sezon { margin-top: 10px; display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(168, 230, 196, 0.12); color: var(--mint); font-size: 0.85rem; font-weight: 600; }
.model-sezon a { color: inherit; text-decoration: none; }
.model-sezon a:hover { text-decoration: underline; }
.sprzedawca-note { margin-top: 20px; max-width: 70ch; margin-inline: auto; }
.annc .only-m { display: none; }
@media (max-width: 700px) { .annc .only-m { display: inline; } }

/* Nota pod opiniami (wymóg informacyjny, Prompt 40 pkt 12). */
.reviews-note { margin-top: 18px; font-size: 0.8rem; line-height: 1.5; color: var(--text-faint); max-width: 70ch; }

/* Nota pod opiniami (wymóg informacyjny, Prompt 40 pkt 12). */
.reviews-note { margin-top: 18px; font-size: 0.8rem; line-height: 1.5; color: var(--text-faint); max-width: 70ch; }

/* Stopka: dwie spółki pod marką WarmEscape (Prompt 40 pkt 13). */
.footer-legal { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.8rem; line-height: 1.55; color: var(--text-faint); }

/* Dane spółek na stronie kontaktu (Prompt 40 pkt 13). */
.contact-firmy { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: 0.9rem; color: var(--text-muted); }
.contact-firmy b { color: var(--text); font-weight: 600; }
.promo-callout .promo-sezon { flex-basis: 100%; margin-top: 4px; }
.model-miejsce-table td, .model-miejsce-table td:last-child { text-align: left; padding-right: 12px; }

/* Strony kategorii (AUDYT-6 pkt 13): karty modeli zaraz pod nagłówkiem,
   ramka "Nie wiesz, który model wybrać?" pod kartami; niższy nagłówek na telefonie. */
section.category-models { padding-top: 48px; }
section.category-promo { padding-top: 0; }
@media (max-width: 700px) {
  .category-hero { height: auto; min-height: 340px; }
  section.category-models { padding-top: 32px; }
}

/* Karta "wszystkie opinie w Google" przy małej liczbie opinii (AUDYT-6 pkt 16). */
.review--cta { text-decoration: none; background: var(--linen); justify-content: center; }
.review--cta b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; }
.review--cta .review-cta-sub { color: var(--ink-2); font-size: 14px; }
.review--cta:hover .who, .review--cta:focus-visible .who { text-decoration: underline; color: var(--ink); }

/* =========================================================
   AUDYT-7 (10.10.2026) — szlif wizualny po przeglądzie 1440/390 px
   ========================================================= */

/* Strona główna: realizacje w równej siatce zamiast masonry — kolumny kończyły
   się na różnych wysokościach i zostawiały dziurę nad opiniami. */
.masonry.teaser-grid.realization-photo-grid { display: grid; columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.teaser-grid .tile { margin: 0; aspect-ratio: 4 / 5; }
.teaser-grid .tile picture, .teaser-grid .tile img { width: 100%; height: 100%; object-fit: cover; }
.teaser-grid .tile figcaption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .masonry.teaser-grid.realization-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .masonry.teaser-grid.realization-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .teaser-grid .tile figcaption { font-size: 11.5px; padding: 26px 10px 9px; }
}

/* Hero: ocena Google i atuty w jednym rzędzie (o ~40 px niżej na laptopie). */
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-bottom: 22px; }
.hero-proof .google-rating-badge { margin: 0; }
.hero-proof .trust { margin: 0; }
.hero p.lede { max-width: 54ch; }
/* Niski ekran laptopa (1366×768, 1440×800): mniejszy nagłówek, ciaśniej. */
@media (min-width: 861px) and (max-height: 820px) {
  .hero h1 { font-size: clamp(2.6rem, min(6vw, 10.2vh), 6rem); }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero-row { margin-top: 18px; }
  .hero-proof { margin-bottom: 16px; }
  .hero-sub { margin-top: 10px; }
}
/* Formularz w "Przyjedź i zobacz" wyrównany do lewej krawędzi tekstu. */
.book .callback-form { margin-left: 0; margin-right: 0; }
/* Formularz "Oddzwonimy": rodzaj kontaktu jako przełącznik segmentowy, tryb
   "teraz / w terminie" jako zwykłe radio — dwa rzędy identycznych pigułek
   wyglądały jak przypadkowe tagi i rozsypywały się na telefonie. */
.rodzaj-kontaktu-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 4px; border: 1px solid var(--line); border-radius: 999px; max-width: 440px; }
.rodzaj-kontaktu-row .chip-radio span { display: block; text-align: center; border: 0; padding: 10px 12px; white-space: nowrap; }
.callback-mode-row { gap: 8px 22px; }
.callback-mode-row .chip-radio span { position: relative; padding: 2px 0 2px 26px; border: 0; border-radius: 0; background: none; font-size: 0.86rem; }
.callback-mode-row .chip-radio span::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 1.5px solid var(--faint); box-sizing: border-box; }
.callback-mode-row .chip-radio:has(input:checked) span { background: none; color: var(--text); font-weight: 500; }
.callback-mode-row .chip-radio:has(input:checked) span::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3.5px, transparent 4.5px); }

/* Nagłówek kategorii: tekst wyrównany do siatki strony (kontener był
   flex-itemem i kurczył się do treści, więc wisiał w środku), fakty i przyciski. */
.category-hero { height: auto; min-height: min(74vh, 660px); padding-top: clamp(56px, 8vw, 110px); }
.category-hero-inner { width: 100%; }
.category-hero-inner p { max-width: 58ch; }
.category-hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.category-hero-facts li { padding: 7px 14px; border-radius: 999px; background: rgba(17,12,8,.55); border: 1px solid rgba(244,239,229,.18); font-size: 0.86rem; color: var(--cream); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.category-hero-facts li:first-child { background: var(--mint); border-color: var(--mint); color: var(--mint-ink); font-weight: 600; }
.category-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.category-hero-inner .google-rating-badge { margin: 0; }
@media (min-width: 861px) {
  .category-hero::after { background: linear-gradient(90deg, rgba(17,12,8,.86) 0%, rgba(17,12,8,.6) 38%, rgba(17,12,8,.12) 68%, rgba(17,12,8,.05) 100%), linear-gradient(180deg, rgba(17,12,8,.25), rgba(17,12,8,.55)); }
}
@media (max-width: 860px) {
  .category-hero { min-height: 0; padding-top: 170px; }
  .category-hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* Karty modeli na stronach kategorii: cena jako najważniejsza liczba + rata. */
.card-price { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; }
.card-price .price { margin: 0; padding: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.65rem; color: var(--cream); line-height: 1.1; }
.card-price .price small { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-faint); margin-right: 2px; }
.card-rata { font-size: 0.86rem; color: var(--accent); font-weight: 600; }
.card-cta-row .config-link { font-size: 0.86rem; color: var(--text-muted); }

/* Ramka "Nie wiesz, który model?": tekst | przyciski w jednym rzędzie, termin świąteczny nad tekstem. */
.promo-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px 16px; }
.promo-callout .promo-sezon { grid-column: 1 / -1; order: -1; justify-self: start; margin: 0; }
@media (max-width: 860px) {
  .promo-callout { grid-template-columns: 1fr; }
  .promo-callout .btn { justify-content: center; }
}

/* Tabele porównania: ostatnia kolumna ("Dla kogo") się zawija — z nowrap była
   ucinana na komputerze. */
.compare-table td:last-child { white-space: normal; min-width: 240px; }
.compare-table td a.link-u { color: var(--text); font-weight: 600; }
.category-hero-inner .breadcrumb { font-size: 0.82rem; margin-bottom: 14px; }
.category-hero-inner .google-rating-badge { font-size: 0.85rem; }
@media (max-width: 860px) {
  .category-hero-facts { gap: 6px; }
  .category-hero-facts li { font-size: 0.8rem; padding: 5px 11px; }
  .category-hero-inner p.category-hero-lede, .category-hero-inner > p:not(.breadcrumb):not(.google-rating-badge) { font-size: 0.98rem; }
}

/* Typografia: Fraunces tylko od ~20 px w górę. Małe nagłówki (etykiety grup w
   konfiguratorze, "W cenie modelu", nazwy dodatków) w Work Sans — w 13–16 px
   ozdobny krój był ściśnięty i słabo czytelny. */
.field-group h3, .price-includes-grid h3 { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-variation-settings: normal; color: var(--accent); margin-bottom: 12px; }
.addon h4 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; font-variation-settings: normal; line-height: 1.35; }
.field-group .field-group-hint { margin-top: -4px; }

/* Rysunek wymiarów (src/lib/wymiary.js). */
.dim-svg { overflow: visible; }
.dim-svg .dim-body { fill: rgba(233, 164, 92, 0.07); stroke: rgba(244, 239, 229, 0.62); stroke-width: 1.6; }
.dim-svg .dim-detail { fill: none; stroke: rgba(244, 239, 229, 0.32); stroke-width: 1.2; }
.dim-svg .dim-faint { stroke: rgba(244, 239, 229, 0.14); stroke-width: 1; }
.dim-svg .dim-post { fill: rgba(244, 239, 229, 0.55); }
.dim-svg .dim-line line { stroke: var(--mint); stroke-width: 1.3; }
.dim-svg .dim-text { fill: var(--cream); font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.dim-svg .dim-title { fill: var(--text-faint); font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.light .dim-svg .dim-body { stroke: rgba(27, 21, 16, 0.6); }
.light .dim-svg .dim-detail { stroke: rgba(27, 21, 16, 0.3); }
.light .dim-svg .dim-text { fill: var(--ink); }

/* Strona modelu: galeria przyklejona, gdy przewijasz długi panel zakupu — pod
   galerią nie zostaje już pół ekranu czarnej pustki. Rozmiary w jednym rzędzie,
   przyciski zaraz pod ceną (wcześniej poza pierwszym ekranem). */
@media (min-width: 861px) {
  .model-buy { position: static; }
  .model-gallery { position: sticky; top: calc(var(--header-h) + 20px); }
}
.model-buy .section-lede { font-size: 0.98rem; }
.model-sizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.model-sizes button { padding: 9px 2px; text-align: center; font-size: 0.92rem; white-space: nowrap; }
.model-raty-link { margin-left: 6px; color: var(--text-faint); text-decoration: underline; text-underline-offset: 3px; font-size: 0.82rem; white-space: nowrap; }
.model-raty-link:hover { color: var(--accent); }
.model-cta-row { margin: 18px 0 6px; }
.model-cta-row .btn { justify-content: center; }
@media (max-width: 480px) { .model-cta-row .btn { flex: 1 1 100%; } }
.model-sezon { margin-top: 12px; }
/* Tabela "Który model dla Ciebie?": cena i rata bez łamania w pół. */
.model-compare-table td:nth-child(2), .model-compare-table td:nth-child(3) { white-space: nowrap; }
.gwarancja-solo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(120deg, rgba(182,231,198,.07), transparent 55%), var(--surface); max-width: 860px; }
.gwarancja-solo-okres { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; color: var(--mint); white-space: nowrap; }
.gwarancja-solo h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; font-variation-settings: normal; margin: 0 0 6px; color: var(--text); }
.gwarancja-solo p { margin: 0; font-size: 0.95rem; }
@media (max-width: 560px) { .gwarancja-solo { grid-template-columns: 1fr; gap: 12px; padding: 22px; } }
/* "Policz koszt eksploatacji": nagłówek obok kalkulatora (kalkulator zajmował
   pół szerokości, druga połowa była pusta). */
@media (min-width: 861px) {
  #koszt .container { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
  #koszt .section-head { margin-bottom: 0; }
  #koszt .model-cost-box { max-width: none; width: 100%; }
}
.model-buy .google-rating-badge { margin: 0 0 16px; }
.model-buy .model-price-block { margin: 4px 0 8px; }
.model-buy .model-raty-static { margin: 0 0 4px; }
.model-buy .model-fit { margin: 2px 0 0; }
.model-cta-row { flex-direction: column; align-items: stretch; gap: 10px; margin: 20px 0 4px; }
.model-cta-row .btn-primary { width: 100%; justify-content: center; padding-top: 17px; padding-bottom: 17px; }
.model-cta-tel { margin: 0; text-align: center; font-size: 0.88rem; color: var(--text-muted); }
.model-cta-tel a { color: var(--text); }
.model-cta-tel span { color: var(--text-faint); margin-left: 4px; }
.model-buy-lede { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
/* Ukryty pasek sekcji modelu prześwitywał przez półprzezroczysty nagłówek
   (blade litery "W … K" na górze ekranu). */
.model-subnav { visibility: hidden; transition: transform .2s var(--ease), visibility 0s linear .2s; }
.model-subnav.is-visible { visibility: visible; transition: transform .2s var(--ease), visibility 0s; }
@media (max-width: 700px) {
  .breadcrumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.model-subnav.is-visible.is-top { transition: transform .2s var(--ease), top .2s var(--ease), visibility 0s; }
/* Opinie: tyle kolumn, ile kart (bez pustej dziury w rzędzie). */
@media (min-width: 761px) { .reviews { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .reviews-head .btn { margin-left: 0; width: 100%; justify-content: center; font-size: 0.76rem; letter-spacing: 0.08em; padding-left: 16px; padding-right: 16px; }
}

/* Kontakt: "Dane firm" — zagnieżdżone <li> dziedziczyły display:flex z listy
   kontaktów i rozbijały się na trzy wąskie kolumny (e-mail łamany w pół). */
.contact-info-list .contact-firmy li { display: block; }
.contact-info-list .ico svg { width: 19px; height: 19px; }
/* O nas: liczby w jednym rzędzie bez łamania ("Cała / Polska"). */
.stats { display: flex; flex-wrap: wrap; gap: 24px 44px; }
.stat b { white-space: nowrap; font-size: clamp(1.7rem, 3vw, 2.3rem); }

/* Nagłówki stron pomocniczych: body ma już padding pod stały nagłówek, więc
   dodatkowe 116–150 px dawało ~200 px pustki nad tytułem (konfigurator
   zaczynał się poniżej pierwszego ekranu laptopa). */
.page-hero { padding: clamp(40px, 5.5vw, 72px) 0 clamp(28px, 3vw, 40px); }
.wizard-hero { padding: clamp(36px, 4.5vw, 56px) 0 28px; }
@media (max-width: 640px) { .wizard-hero { padding: 22px 0 14px; } }
/* Konfigurator, krok 1 (wybór produktu): boczny panel jest pusty — był pustą
   pigułką na 45% szerokości, a karty produktów ściśnięte obok. */
@media (min-width: 1024px) {
  .wizard-layout:has(> .wizard-aside:empty) { grid-template-columns: minmax(0, 1fr); }
  .wizard-aside:empty { display: none; }
}

/* FAQ: lekka lista z liniami zamiast ciemnych płyt (na jasnym tle wyglądały
   jak ciężkie belki). Szerokość ograniczona do wygodnej długości wiersza. */
.faq-group { max-width: 880px; }
.faq-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; margin: 0; }
.faq-group > details.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary { padding: 22px 60px 22px 0; font-size: 1.04rem; font-weight: 500; }
.faq-item summary::after { right: 0; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 1.15rem; transition: background .2s var(--ease), color .2s var(--ease); }
.faq-item[open] summary::after { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.faq-item-body { padding: 0 60px 24px 0; }
.faq-item-body p { margin: 0; }
.light .faq-item, .light .faq-group > details.faq-item:first-of-type { border-color: var(--line-l); }
.light .faq-item summary { color: var(--ink); }
.light .faq-item summary:hover { color: #2f6b47; }
.light .faq-item summary::after { color: #2f6b47; border-color: var(--line-l); }
.light .faq-item[open] summary::after { background: #2f6b47; color: #fff; border-color: #2f6b47; }
.light .faq-item-body, .light .faq-item-body p { color: var(--ink-2); }
@media (max-width: 640px) { .faq-item summary { padding-right: 48px; font-size: 0.98rem; } .faq-item-body { padding-right: 0; } }
/* Logo (pionowy znak + napis): przy 46 px napis "warm escape" miał ~12 px. */
.brand img { height: 58px; }
@media (max-width: 900px) { .brand img { height: 50px; } }
/* Strona główna: pasek ogłoszeń nakłada się na zdjęcie hero zamiast spychać je
   w dół — wcześniej przezroczysty nagłówek był w połowie ciemny (tło strony),
   a w połowie na zdjęciu, z linkami menu na granicy. */
.annc { position: absolute; top: var(--header-h); left: 0; right: 0; background: rgba(36, 51, 31, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-inner { padding-top: calc(var(--header-h) + 80px); }
/* Czytelność menu na jasnych liściach u góry zdjęcia hero. */
.hero::after { background:
  linear-gradient(180deg, rgba(17,12,8,.72) 0%, rgba(17,12,8,.3) 13%, rgba(17,12,8,.12) 28%, rgba(17,12,8,.35) 58%, rgba(17,12,8,.92) 100%); }
@media (min-width: 861px) {
  .hero::after { background:
    linear-gradient(90deg, rgba(17,12,8,.78) 0%, rgba(17,12,8,.55) 32%, rgba(17,12,8,.12) 58%, transparent 72%),
    linear-gradient(180deg, rgba(17,12,8,.7) 0%, rgba(17,12,8,.2) 14%, rgba(17,12,8,.06) 30%, rgba(17,12,8,.2) 60%, rgba(17,12,8,.85) 100%); }
}
@media (max-width: 640px) {
  .hero .eyebrow { font-size: 10.5px; letter-spacing: 0.16em; }
  .hero .eyebrow::before { width: 18px; }
  .hero p.lede { font-size: 1rem; }
  .hero-proof { gap: 8px 16px; }
}
.film-pionowy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.film-pionowy .section-head { margin-bottom: 0; }
.film-pionowy-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.film-pionowy .model-video--pionowe { margin: 0; }
@media (max-width: 760px) {
  .film-pionowy { grid-template-columns: 1fr; gap: 24px; }
  .film-pionowy .model-video--pionowe { margin-inline: auto; }
  .film-pionowy-cta { display: none; }
}
@media (max-width: 640px) {
  /* section:not(.sec):not(.hero):not(.final) ma wyższą specyficzność — stąd :not(.sec) */
  section.page-hero.wizard-hero:not(.sec) { padding: 20px 0 12px; }
}

/* =========================================================
   AUDYT-8 (10.10.2026) — menu, gwiazdka rat, podkreślenia linków
   ========================================================= */

/* Menu na telefonie: pod "O nas" była podwójna linia (border linku + border-top
   wiersza przycisków); otwarte menu — nagłówek nieprzezroczysty nad zdjęciem hero. */
@media (max-width: 900px) {
  .nav-cta-row { border-top: 0; margin-top: 8px; }
  body.nav-open .site-header.header-overlay::before { opacity: 1; }
}

/* Gwiazdka przy racie: mały indeks górny w kolorze tekstu, bez podkreślenia —
   wcześniej miętowa "*" z kreską pod spodem (na zielonym pasku wyglądała jak "*_"). */
.raty-gw, .annc a.raty-gw {
  color: inherit; text-decoration: none; font-weight: 500; font-size: 0.72em;
  vertical-align: super; line-height: 0; margin-left: 1px; opacity: 0.75;
}
.raty-gw:hover, .raty-gw:focus-visible, .annc a.raty-gw:hover { text-decoration: none; opacity: 1; }
.raty-przyklad-gw { color: inherit; }

/* =========================================================
   AUDYT-9 (10.10.2026)
   ========================================================= */
/* Filtr realizacji: cała siatka gaśnie i wraca (realizacje.js). */
[data-realizacje-masonry] { transition: opacity .15s ease; }
[data-realizacje-masonry].is-switching { opacity: 0; }
[data-realizacje-masonry] .tile { transition: none; }
[data-realizacje-masonry] .tile img { transition: transform 1.2s var(--ease); }

/* AUDYT-11: nagłówek kategorii na telefonie — tekst leży na całym zdjęciu
   (także na jasnym niebie), więc przyciemnienie musi być równe od góry. */
@media (max-width: 860px) {
  .category-hero::after { background: linear-gradient(180deg, rgba(17,12,8,.78) 0%, rgba(17,12,8,.62) 45%, rgba(17,12,8,.8) 100%); }
}

/* O nas — "Z naszego warsztatu" (AUDYT-12): kafle 4:3 zamiast 4:5. */
.warsztat-grid .card-media { aspect-ratio: 4 / 3; border-radius: var(--radius); }
/* "Przyjedź i zobacz": atrybut height z <img> wygrywał z aspect-ratio — zdjęcia miały różne wysokości. */
.book-photos img { height: auto; }

/* AUDYT-13: galeria modelu — miniatura przełącza zdjęcie (kursor "wskaż"),
   duże zdjęcie otwiera podgląd (kursor "powiększ"). */
.model-gallery-thumbs .realization-photo { cursor: pointer; }
.model-gallery-thumbs .realization-photo:hover { opacity: 0.85; }
.model-gallery-stage .gallery-stage-slide:not(.model-gallery-video) { cursor: zoom-in; }

/* AUDYT-13: sekcja kontaktu na stronie modelu — formularz i przycisk "Zadzwoń"
   wyśrodkowane, jeden pod drugim, tej samej szerokości. Po wysłaniu formularza
   numer jest już w podziękowaniu, więc przycisk "Zadzwoń" znika. */
.model-kontakt-actions { flex-direction: column; align-items: center; gap: 12px; }
.model-kontakt-actions .callback-form { width: 100%; max-width: 480px; margin: 28px auto 0; }
.model-kontakt-actions .callback-form button[type="submit"],
.model-kontakt-actions .model-kontakt-tel { width: 100%; max-width: 480px; justify-content: center; }
.model-kontakt-actions .model-kontakt-tel { display: flex; }
.model-kontakt-actions:has(.form-thanks) .model-kontakt-tel { display: none; }
.model-kontakt-actions .form-thanks { width: 100%; max-width: 640px; }
/* Przykład reprezentatywny rat w kolumnie zakupu, pod ceną dostawy. */
.model-raty-przyklad .raty-przyklad { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); max-width: none; font-size: 0.74rem; }

/* AUDYT-13: wybór po konfiguracji — „Zadzwońcie” albo „Tylko wycena e-mailem”. */
.wizard-contact-choice { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.wizard-contact-choice legend { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 12px; padding: 0; }
.wizard-contact-choice .opt-tile { align-items: flex-start; }
.wizard-contact-choice .opt-tile input { margin-top: 2px; }
.wizard-contact-choice .opt-tile:has(input:checked) { border-color: var(--accent); background: rgba(182,231,198,0.06); }
.wizard-contact-choice .opt-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wizard-lead-form.is-email-only .only-callback { display: none; }
.wizard-contact-choice .opt-tile-text strong .nowrap { white-space: nowrap; font: inherit; color: inherit; }

/* AUDYT-14: cienkie, zaokrąglone paski przewijania w kolorach strony zamiast
   systemowych (białe tło + szary suwak) — w przewijanych elementach treści.
   Pasek całej strony zostaje systemowy (na Macu sam się chowa). Chrome/Safari:
   ::-webkit-scrollbar, Firefox: scrollbar-color (blok @supports niżej). */
:root { --sb-track: rgba(244,239,229,0.06); --sb-thumb: rgba(244,239,229,0.26); --sb-thumb-hover: rgba(182,231,198,0.7); }
.light { --sb-track: rgba(27,21,16,0.06); --sb-thumb: rgba(27,21,16,0.24); --sb-thumb-hover: rgba(27,21,16,0.45); }
.model-gallery-thumbs::-webkit-scrollbar, .model-subnav-inner::-webkit-scrollbar, .table-scroll::-webkit-scrollbar,
.compare-table-wrap::-webkit-scrollbar, .model-compare-wrap::-webkit-scrollbar, .wizard-aside::-webkit-scrollbar,
.cookie-banner::-webkit-scrollbar, .nav-links::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
.model-gallery-thumbs::-webkit-scrollbar-track, .model-subnav-inner::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track,
.compare-table-wrap::-webkit-scrollbar-track, .model-compare-wrap::-webkit-scrollbar-track, .wizard-aside::-webkit-scrollbar-track,
.cookie-banner::-webkit-scrollbar-track, .nav-links::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 999px; }
.model-gallery-thumbs::-webkit-scrollbar-thumb, .model-subnav-inner::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb,
.compare-table-wrap::-webkit-scrollbar-thumb, .model-compare-wrap::-webkit-scrollbar-thumb, .wizard-aside::-webkit-scrollbar-thumb,
.cookie-banner::-webkit-scrollbar-thumb, .nav-links::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; }
.model-gallery-thumbs::-webkit-scrollbar-thumb:hover, .model-subnav-inner::-webkit-scrollbar-thumb:hover, .table-scroll::-webkit-scrollbar-thumb:hover,
.compare-table-wrap::-webkit-scrollbar-thumb:hover, .model-compare-wrap::-webkit-scrollbar-thumb:hover, .wizard-aside::-webkit-scrollbar-thumb:hover,
.cookie-banner::-webkit-scrollbar-thumb:hover, .nav-links::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }
.model-gallery-thumbs::-webkit-scrollbar-corner, .wizard-aside::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  .model-gallery-thumbs, .model-subnav-inner, .table-scroll, .compare-table-wrap, .model-compare-wrap,
  .wizard-aside, .cookie-banner, .nav-links { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}
/* Miniatury: odstęp, żeby suwak nie przyklejał się do zdjęć, a obwódka
   aktywnej miniatury nie była przycinana; przewijanie płynne, z przyciąganiem. */
.model-gallery-thumbs.realization-photo-grid { padding: 4px 4px 14px; margin-top: 8px; scroll-snap-type: x proximity; scroll-behavior: smooth; }
.model-gallery-thumbs .realization-photo { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .model-gallery-thumbs.realization-photo-grid { scroll-behavior: auto; } }
/* Wygaszenie krawędzi miniatur (fade-l/fade-r z model-gallery.js) — tylko nad
   paskiem przewijania (dolne 14px bez maski, żeby suwak był cały widoczny). */
.model-gallery-thumbs.fade-l, .model-gallery-thumbs.fade-r {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% calc(100% - 14px), 100% 14px; mask-size: 100% calc(100% - 14px), 100% 14px;
  -webkit-mask-position: top, bottom; mask-position: top, bottom;
}
.model-gallery-thumbs.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent), linear-gradient(#000, #000); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent), linear-gradient(#000, #000); }
.model-gallery-thumbs.fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px), linear-gradient(#000, #000); mask-image: linear-gradient(to right, transparent, #000 56px), linear-gradient(#000, #000); }
.model-gallery-thumbs.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent), linear-gradient(#000, #000); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent), linear-gradient(#000, #000); }

/* AUDYT-14: podsumowanie konfiguratora — tytuł w ramce (obie ramki zaczynają
   się na tej samej wysokości), cena tylko w prawej ramce, lista wyborów /
   specyfikacja w lewej kolumnie pod zdjęciem (na komputerze). */
.wizard-summary .wizard-step-title { margin-top: 0; }
.wizard-summary .wizard-step-hint { margin-bottom: 24px; }
.wizard-summary-head { display: block; }
.wizard-summary-head .wizard-summary-price { text-align: left; }
.wizard-summary > .eyebrow { margin-bottom: 14px; }
.wizard-offer-note { font-size: 0.8rem; color: var(--text-faint); margin: -2px 0 12px 28px; }
@media (min-width: 1024px) {
  .wizard-summary-rows { display: none; }
  .wizard-aside.is-summary { position: static; max-height: none; overflow: visible; }
  .wizard-aside.is-summary.is-jacuzzi .wizard-aside-media img { aspect-ratio: 4 / 3; object-fit: cover; }
}
.wizard-aside-heading { font-size: 1.05rem; margin: 4px 0 12px; }
/* Specyfikacja „etykieta nad wartością” w 2 kolumnach (jacuzzi) */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0; }
.spec-grid > div { padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.spec-grid dt { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 2px; }
.spec-grid dd { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 420px) { .spec-grid { gap: 0 14px; } .spec-grid dd { font-size: 0.84rem; } }

/* AUDYT-14: film w galerii modelu (zamiast osobnej sekcji) + małe zdjęcia
   bez rozciągania — w całości, na rozmytym tle z tego samego zdjęcia. */
.gallery-stage-slide.is-small, .model-gallery-video { position: relative; background: var(--bg-alt); }
.gallery-stage-slide.is-small { overflow: hidden; }
.gallery-stage-bg {
  position: absolute; inset: -30px; background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: blur(24px) brightness(0.45); transform: scale(1.05); pointer-events: none;
}
.gallery-stage-slide.is-small picture { position: relative; display: block; width: 100%; height: 100%; }
.gallery-stage-slide.is-small img { object-fit: contain; }
.model-gallery-video video { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.model-gallery-film-thumb { position: relative; }
.model-gallery-film-badge {
  position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px 3px 6px; border-radius: 999px; background: rgba(17,12,8,0.75); color: var(--cream);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.model-gallery-thumbs .model-gallery-film-thumb { opacity: 0.85; }

/* AUDYT-14: specyfikacja w 2 kolumnach na komputerze; wymiary + gwarancja w jednym wierszu. */
@media (min-width: 1024px) {
  .model-spec-cols { columns: 2; column-gap: 64px; }
  .model-spec-cols .model-spec-table { break-inside: avoid; margin-bottom: 8px; }
  .model-spec-cols .model-spec-table:first-child .model-spec-table-head th { padding-top: 0; }
  .model-pair--2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .model-pair--2 .model-dims--osadzony { grid-template-columns: 1fr; gap: 20px; }
  .model-pair--2 .model-dims--osadzony .model-dims-svg { max-width: 460px; }
}
.model-pair:not(.model-pair--2) > .model-pair-col + .model-pair-col { margin-top: 56px; }
@media (max-width: 1023px) { .model-pair--2 > .model-pair-col + .model-pair-col { margin-top: 56px; } }
.model-pair--2 .gwarancja-solo { max-width: none; }
@media (min-width: 1024px) {
  .model-spec-cols .model-spec-table .model-spec-table-head th { padding-top: 0; }
  .model-spec-cols .model-spec-table { margin-bottom: 36px; }
}

/* AUDYT-14: realizacje pergoli na stronie kategorii — małe kafelki zamiast
   jednego zdjęcia na całą szerokość (było rozpikselowane). */
.pergola-realizacje { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .pergola-realizacje { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.pergola-realizacje .realization-photo { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; }
.pergola-realizacje .realization-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.pergola-realizacje .realization-photo:hover img { transform: scale(1.03); }
.pergola-realizacje-more { margin-top: 18px; font-size: 0.9rem; }
.pergola-realizacje-more a { color: var(--accent); }

/* AUDYT-14: 11 opinii o różnej długości — na komputerze układ „murowany”
   (kolumny wyrównują się same), na telefonie bez zmian (karuzela). Nowe linie
   z Google zachowane. */
.review p { white-space: pre-line; }
.reviews-note a { color: inherit; text-decoration: underline; }
@media (min-width: 761px) {
  .reviews.reviews--masonry { display: block; columns: 2; column-gap: 14px; }
  .reviews.reviews--masonry > .review { break-inside: avoid; margin-bottom: 14px; }
}
@media (min-width: 1101px) { .reviews.reviews--masonry { columns: 3; } }
.reviews.reviews--single { max-width: 760px; }

/* AUDYT-16: warsztat w „O nas” (pionowe zdjęcia z podpisami, klik powiększa)
   i dodatki pergoli na zdjęciach z realizacji. */
.warsztat-grid .warsztat-tile { aspect-ratio: auto; margin: 0; overflow: visible; border-radius: 0; background: none; }
.warsztat-tile img, .pergola-opcje .realization-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); cursor: zoom-in; }
.warsztat-tile figcaption, .pergola-opcje figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--text-muted); }
.pergola-opcje { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
@media (min-width: 700px) { .pergola-opcje { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pergola-opcje .realization-photo { margin: 0; }
@media (max-width: 699px) { .pergola-opcje .realization-photo img { aspect-ratio: 4 / 3; } }
.warsztat-grid.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 900px) { .warsztat-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 899px) { .warsztat-tile figcaption { font-size: 0.8rem; margin-top: 6px; } }

/* AUDYT-17: przy cenie „brutto” i konkretna lista „W cenie” (zamiast „kolor w cenie”). */
.pcard .from .brutto { font-size: 13px; color: var(--muted); }
.pcard .pcard-wcenie { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--line-d); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pcard .pcard-wcenie + ul { margin-top: 8px; padding-top: 0; border-top: 0; }
.card-price .price .brutto { font-size: 0.62em; font-weight: 400; color: var(--text-faint); letter-spacing: 0; }

/* AUDYT-17: formularz w „Zostaw numer” (strona główna):
   1) pola wyboru (dzień, pora) wyglądają jak pola tekstowe, a ich etykieta jest
      zawsze u góry — wcześniej „Dzień”/„Pora” nachodziły na wybraną wartość;
   2) wysokość formularza stała przy przełączaniu (.callback-variants), więc
      zdjęcie obok się nie zmienia. */
.final-form .form-field select {
  height: 58px; width: 100%; padding: 22px 42px 8px 18px; border-radius: 14px;
  background-color: rgba(244,239,229,.04); border: 1px solid var(--line-d); color: var(--cream);
  font: inherit; font-size: 15px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b6e7c6' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.final-form .form-field select:focus { border-color: var(--mint); background-color: rgba(244,239,229,.07); outline: none; }
.final-form .form-field select option { color: #1b1510; background: #f4efe5; }
.final-form .form-field:has(select) label { top: 9px; transform: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
/* (AUDYT-17: zdjęcie zostaje jak było — formularz już nie zmienia wysokości.) */

/* AUDYT-17: dolna sekcja „Masz pytania?” na stronach kategorii, dostawy,
   realizacji i poradnika — przycisk, formularz i „Zadzwoń” w jednej
   kolumnie, wyśrodkowane i tej samej szerokości (wcześniej formularz był
   przy lewej krawędzi, a przyciski na środku). */
.cta-actions:has(.callback-form), .cta-actions:has(.form-thanks) { flex-direction: column; align-items: center; flex-wrap: nowrap; }
.cta-actions:has(.callback-form) > .btn, .cta-actions:has(.form-thanks) > .btn,
.cta-actions > .callback-form, .cta-actions > .form-thanks { width: 100%; max-width: 480px; }
.cta-actions > .callback-form { margin: 14px 0 6px; }
.cta-actions > .callback-form button[type="submit"] { width: 100%; justify-content: center; }
.cta-actions:has(.callback-form) > .btn, .cta-actions:has(.form-thanks) > .btn { justify-content: center; text-align: center; }
.callback-teraz-hint { align-self: start; padding-top: 2px; }