@font-face{font-family:Satoshi;src:url('/assets/fonts/Satoshi-Regular.woff2?v=71a6023c08') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url('/assets/fonts/Satoshi-Medium.woff2?v=cd790237ed') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Sentient;src:url('/assets/fonts/Sentient-Light.woff2?v=2f84cc14e2') format('woff2');font-weight:300;font-display:swap}
/* Kolory zmieniane przez tryb ciemny jako typowane tokeny, żeby mogły przechodzić płynnie (base.css); initial-value jak w trybie jasnym */
@property --color-bg{syntax:'<color>';inherits:true;initial-value:#f1f0ef}
@property --color-ink{syntax:'<color>';inherits:true;initial-value:#170707}
@property --stone-surface{syntax:'<color>';inherits:true;initial-value:#e9e7e5}
@property --stone-active{syntax:'<color>';inherits:true;initial-value:#dedad6}
@property --stone-border{syntax:'<color>';inherits:true;initial-value:#cec5bc}
@property --stone-muted{syntax:'<color>';inherits:true;initial-value:#66615d}
@property --calc-ink{syntax:'<color>';inherits:true;initial-value:#170707}
@property --calc-muted{syntax:'<color>';inherits:true;initial-value:#66615d}
@property --calc-line{syntax:'<color>';inherits:true;initial-value:#cfc9c4}
@property --calc-field{syntax:'<color>';inherits:true;initial-value:#fafafa}
@property --calc-veil{syntax:'<color>';inherits:true;initial-value:rgb(241 240 239 / .7)}
@property --calc-veil-mini{syntax:'<color>';inherits:true;initial-value:rgb(241 240 239 / .45)}

:root {
  /* Wysokość ekranu stała podczas przewijania: skrypt w <head> (szablony/strona.php) wpisuje tu wysokość okna w px
     (przeglądarka Instagrama zmienia ją przy chowaniu paska i elementy skakały); bez skryptu 100svh */
  --ekran: 100svh;
  /* Paleta bazowa z brandingu: prawie czarny, średni szary, jasny. Tekst, linie i tła odwołują się do tych trzech */
  --color-dark: #170707;
  --color-grey: #66615d;
  --color-light: #f1f0ef;
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1440px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --font-body: Satoshi, Arial, sans-serif;
  --font-display: Sentient, Georgia, serif;
  --color-bg: var(--color-light);
  --color-on-dark: var(--color-light);
  --color-ink: var(--color-dark);
  --color-accent: #ff7b1d;
  /* Zaznaczenie tekstu myszą zamiast domyślnego niebieskiego (klient 2026-10-27) */
  --color-selection: #f8b585;
  --color-muted: #c5c1bd;
  --color-nav: rgb(23 7 7 / .8);
  --color-nav-active: #281d1c;
  --color-card-shade: #23130d;
  /* Tło kafli i wyróżnień na ciemnych sekcjach: wiersz etapu, karta opinii (Figma 525:3173) */
  --color-surface-dark: #201414;
  --button-base: var(--color-dark);
  --button-gradient: #2d0909;
  --button-hover: var(--button-gradient);
  --button-hover-scale: .985;
  --sample-lift: -4px;
  --space-edge: 2.5rem;
  --space-text: 1.5rem;
  --space-actions: 2.5rem;
  --ease-ui: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* Przejście trybu ciemnego: kolory całej strony (base.css) i podświetlenie kamieni (modules/swiatlo.js); czas w sekundach */
  --theme-duration: .3s;
  --theme-ease: cubic-bezier(.455, .03, .515, .955);
  --sample-size: 2.24075rem;
  --sample-cell: 3.17rem;
  --sample-overlap: -1.8125rem;
  --stone-surface: #e9e7e5;
  --stone-active: #dedad6;
  --stone-border: #cec5bc;
  --stone-muted: var(--color-grey);
  --stone-glow: #fbd9ad;
  --color-section-dark: var(--color-dark);
  --color-text-soft: #b5b0ab;
  --color-copper: #b18a7c;
  --color-copper-dim: #3b231e;
  --color-label: var(--color-grey);
  --color-quiet: var(--color-grey);
  --color-footer-muted: #b18a7c;
  --color-text-muted: var(--color-grey);
  --color-unit: var(--color-grey);
  --color-danger: #ba2e00;
  /* Dostępność (kamień od ręki, doradca pod telefonem): zielony kwadrat z jasną obwódką, components/status-dot.css */
  --color-available: #6fb820;
  --color-available-ring: #cbe1b4;
  /* Tło pól formularza kontaktowego (components/field.css: sekcja i panel) */
  --color-field: #fafafa;
  --color-waste: #b45325;
  --color-price-lower: #386900;
  --calc-note-link: #171717;
  --color-waste-fill: rgb(255 122 26 / .35);
  --color-waste-line: rgb(255 122 26 / .85);
  --calc-ink: var(--color-dark);
  --calc-muted: var(--color-grey);
  --calc-line: #cfc9c4;
  /* Tło pól kalkulatora jak w Figmie (#fafafa), ten sam kolor co pola formularza kontaktowego */
  --calc-field: var(--color-field);
  --calc-field-error: #9a9188;
  --calc-veil: rgb(241 240 239 / .7);
  --calc-veil-mini: rgb(241 240 239 / .45);
  /* Linie i liczby wymiarów płyty: średni szary 70% */
  --calc-dimension: rgb(102 97 93 / .7);
  /* Obrys płyty, linia pola roboczego i kreskowany margines: średni szary 50% */
  --calc-slab-line: rgb(102 97 93 / .5);
  /* Zasłona strony pod panelami i lightboxem (components/blur-veil.css): jednolite rozmycie i przyciemnienie, wszędzie te same */
  --veil-blur: 6px;
  --veil-tint: rgb(23 7 7 / .7);
}

:root[data-theme=dark],.slab-preview[data-theme=dark]{--color-field:#1d1a16;--color-bg:var(--color-dark);--color-ink:#e8e4df;--stone-surface:#1d1a16;--stone-active:#2c2823;--color-price-lower:#8fc24a;--calc-note-link:#e8e4df;--stone-border:#3a352f;--stone-muted:#b5aea5;--calc-ink:#e8e4df;--calc-muted:#a39c95;--calc-line:#3a352f;--calc-field:#1d1a16;--calc-veil:rgb(23 7 7 / .7);--calc-veil-mini:rgb(23 7 7 / .45)}

/* Sekcja wyłączona z trybu ciemnego (data-theme-lock="light", cechy kamienia z ikonami 3D): te same tokeny ze stałymi wartościami
   jasnymi jak w :root (zmieniać razem), bez przejścia; strona i tak wraca do jasnego po wyjściu z sekcji nastroju (motyw.js) */
[data-theme-lock=light],.slab-preview[data-theme=light]{--color-field:#fafafa;--color-bg:var(--color-light);--color-ink:var(--color-dark);--stone-surface:#e9e7e5;--stone-active:#dedad6;--color-price-lower:#386900;--calc-note-link:#171717;--stone-border:#cec5bc;--stone-muted:var(--color-grey);--calc-ink:var(--color-dark);--calc-muted:var(--color-grey);--calc-line:#cfc9c4;--calc-field:var(--color-field);--calc-veil:rgb(241 240 239 / .7);--calc-veil-mini:rgb(241 240 239 / .45)}

*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--size-font);background:var(--color-bg);color:var(--color-ink)}
body{margin:0;font-family:var(--font-body);font-weight:400;-webkit-font-smoothing:antialiased}
/* Zaznaczony tekst zawsze ciemny, żeby był czytelny także na ciemnych sekcjach */
::selection{background:var(--color-selection);color:var(--color-dark)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{color:inherit}
img{display:block;max-width:100%}
h1,p{margin:0}
button:focus-visible,a:focus-visible{outline:1px solid var(--color-ink);outline-offset:6px}
/* Po dotknięciu palcem bez obwódek fokusu (klasa z main.js, znika po pierwszym klawiszu) */
html.is-touch-input :focus-visible{outline:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:1rem;left:1rem;z-index:200;padding:1rem;background:var(--color-bg);transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}
.is-loading{overflow:hidden}
.heading__line{position:relative;display:block;width:max-content;max-width:100%;clip-path:inset(0);white-space:nowrap;padding-block:.06em;margin-block:-.06em;overflow:hidden}
.heading__mask{position:absolute;inset:0;background:currentColor;transform:translateX(101%);visibility:hidden;pointer-events:none}
/* Zmiana motywu (klasa z modules/motyw.js): przechodzą tokeny kolorów, elementy dziedziczą wartości pośrednie i zachowują własne przejścia */
:root.is-theme-changing{transition:--color-bg var(--theme-duration) var(--theme-ease),--color-ink var(--theme-duration) var(--theme-ease),--stone-surface var(--theme-duration) var(--theme-ease),--stone-active var(--theme-duration) var(--theme-ease),--stone-border var(--theme-duration) var(--theme-ease),--stone-muted var(--theme-duration) var(--theme-ease),--calc-ink var(--theme-duration) var(--theme-ease),--calc-muted var(--theme-duration) var(--theme-ease),--calc-line var(--theme-duration) var(--theme-ease),--calc-field var(--theme-duration) var(--theme-ease),--calc-veil var(--theme-duration) var(--theme-ease),--calc-veil-mini var(--theme-duration) var(--theme-ease)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto;animation-duration:0s;transition-duration:0s}}

:root[data-page-transition]{overflow:hidden}
:root[data-page-transition] .scrollbar{visibility:hidden}
:root[data-page-transition]::after{content:"";position:fixed;inset:0;z-index:1000;background:#dedad6;pointer-events:auto;transform:translateY(0);animation-duration:400ms;animation-timing-function:cubic-bezier(.85,0,.15,1);animation-fill-mode:both}
:root[data-page-transition="covering"]::after{animation-name:page-mask-cover}
:root[data-page-transition="revealing"]::after{animation-name:page-mask-reveal}
@keyframes page-mask-cover{from{transform:translateY(101%)}to{transform:translateY(0)}}
@keyframes page-mask-reveal{from{transform:translateY(0)}to{transform:translateY(-101%)}}
@media(prefers-reduced-motion:reduce){:root[data-page-transition]::after{animation:none}}

/* Zasłona strony (wspólna: panel kontaktu, mega menu i menu na telefonie, panel filtrów na telefonie, lightbox zdjęć): zwykłe,
   jednolite rozmycie tła i przyciemnienie, wszędzie te same (tokeny --veil-blur i --veil-tint w tokens.css). Od 2026-10-09 (klient):
   wcześniejsze rozmycia progresywne (sześć warstw z maskami) lagowały animacje. Element bez własnej przezroczystości (inaczej
   rozmycie w środku nie widziałoby strony): warstwa rozmycia i przyciemnienie gasną osobno */
.blur-veil{position:absolute;inset:0}
.blur-veil__layer{position:absolute;inset:0;-webkit-backdrop-filter:blur(var(--veil-blur));backdrop-filter:blur(var(--veil-blur))}
.blur-veil__tint{position:absolute;inset:0;background:var(--veil-tint)}

/* Karta usługi (Figma 517:10259 i 522:1896): zdjęcie na całą kartę, u dołu progresywne rozmycie i przyciemnienie z tytułem i linkiem.
   Wspólna dla karuzeli usług i mega menu (partials/service-card.php); rozmiary w zmiennych, warianty: --compact (mega menu)
   i --deep (wyższe przyciemnienie pod jasne zdjęcie) */
.service-card{--card-shade:12.5rem;--card-pad:2rem;--card-gap:1rem;--card-title:1.75rem;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:var(--color-light)}
.service-card--deep{--card-shade:15.625rem}
.service-card--compact{--card-shade:7.5rem;--card-pad:1.5rem 1.25rem;--card-gap:.5rem;--card-title:1.25rem}
.service-card:focus-visible{outline-offset:-3px}
.service-card__media,.service-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.service-card__media{z-index:-2;transition:transform .7s var(--ease-out)}
.service-card:is(:hover,:focus-visible) .service-card__media{transform:scale(1.06)}
.service-card__content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--card-gap);min-height:var(--card-shade);padding:var(--card-pad);background:linear-gradient(rgb(35 19 13 / 0),var(--color-card-shade))}
/* Z marką nad tytułem odstęp do linku rośnie do 24 px */
.service-card__content:has(.service-card__brand){gap:1.5rem}
.service-card__top{display:flex;flex-direction:column;gap:1rem}
.service-card__brand{display:flex;align-items:center;gap:.5rem;margin:0;font-size:max(12px,.75rem);font-weight:500;line-height:1rem;letter-spacing:.015rem;text-transform:uppercase;color:#e9e7e5}
.service-card__brand img{width:1.25rem;height:1.25rem}
.service-card__title{margin:0;font-size:var(--card-title);line-height:1.2;font-weight:500;letter-spacing:-.01em}
.service-card__more{display:flex;align-items:center;align-self:flex-start;gap:.125rem;font-size:max(10px,.625rem);line-height:1.6;font-weight:500;text-transform:uppercase;color:#dedad6;transition:color .3s}
.service-card__chevron{width:.75rem;height:.75rem;background:currentColor;mask:url('/assets/img/uslugi/wiecej.svg?v=384fefe06d') center / contain no-repeat}
.service-card:is(:hover,:focus-visible) .service-card__more{color:var(--color-accent)}
/* Progresywne rozmycie: sześć pasów o rosnącej sile, każdy z własną maską (od 0,75 px u góry do 24 px u dołu; od 2026-10-03 1,5 × pierwotnych,
   te same wartości w LEVELS w modules/rozmycie-karty.js) */
.service-card__blur{position:absolute;inset:auto 0 0;height:var(--card-shade);pointer-events:none;z-index:1}
.service-card__blur span{position:absolute;inset:0}
.service-card__blur span:nth-child(1){-webkit-backdrop-filter:blur(.75px);backdrop-filter:blur(.75px);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12.5%,#000 25%,transparent 37.5%);mask-image:linear-gradient(to bottom,transparent 0%,#000 12.5%,#000 25%,transparent 37.5%)}
.service-card__blur span:nth-child(2){-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);-webkit-mask-image:linear-gradient(to bottom,transparent 12.5%,#000 25%,#000 37.5%,transparent 50%);mask-image:linear-gradient(to bottom,transparent 12.5%,#000 25%,#000 37.5%,transparent 50%)}
.service-card__blur span:nth-child(3){-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask-image:linear-gradient(to bottom,transparent 25%,#000 37.5%,#000 50%,transparent 62.5%);mask-image:linear-gradient(to bottom,transparent 25%,#000 37.5%,#000 50%,transparent 62.5%)}
.service-card__blur span:nth-child(4){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(to bottom,transparent 37.5%,#000 50%,#000 62.5%,transparent 75%);mask-image:linear-gradient(to bottom,transparent 37.5%,#000 50%,#000 62.5%,transparent 75%)}
.service-card__blur span:nth-child(5){-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(to bottom,transparent 50%,#000 62.5%,#000 75%,transparent 87.5%);mask-image:linear-gradient(to bottom,transparent 50%,#000 62.5%,#000 75%,transparent 87.5%)}
.service-card__blur span:nth-child(6){-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);-webkit-mask-image:linear-gradient(to bottom,transparent 62.5%,#000 75%,#000 100%);mask-image:linear-gradient(to bottom,transparent 62.5%,#000 75%,#000 100%)}
/* To samo rozmycie policzone raz na płótnie (modules/rozmycie-karty.js, karuzela usług): w ruchu bez przeliczania warstw w każdej klatce */
.service-card__baked{position:absolute;inset:auto 0 0;width:100%;height:var(--card-shade);pointer-events:none}
.service-card.has-baked-blur .service-card__blur{display:none}
@media(prefers-reduced-motion:reduce){.service-card__media,.service-card__more{transition:none}
.service-card:is(:hover,:focus-visible) .service-card__media{transform:none}
}

/* Szklany kursor (efekt Glass): kalkulator i kafelki usług oraz kamieni */
.glass-cursor{position:absolute;left:0;top:0;z-index:3;width:2.5rem;height:2.5rem;pointer-events:none}
.glass-cursor__body{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:rgb(23 7 7 / .5);-webkit-backdrop-filter:blur(.125rem);backdrop-filter:blur(.125rem);scale:0;transition:scale .35s var(--ease-out)}
.glass-cursor.is-visible .glass-cursor__body{scale:1;transition:scale .6s cubic-bezier(.34,1.56,.64,1)}
.glass-cursor__body[data-lens-ready]{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.glass-cursor__body canvas{position:absolute;inset:0;width:100%;height:100%}
.glass-cursor__icon{position:relative;width:1.5rem;height:1.5rem}
.has-glass-cursor{cursor:none}
@media(prefers-reduced-motion:reduce){.glass-cursor__body,.glass-cursor.is-visible .glass-cursor__body{transition:none}}

.site-header{position:fixed;isolation:isolate;color:var(--color-on-dark);top:.75rem;left:var(--space-edge);right:var(--space-edge);height:4rem;display:flex;align-items:center;justify-content:space-between;z-index:50}.site-header__glass::before{content:"";position:absolute;inset:0;background:var(--nav-surface,rgb(23 7 7 / .72));pointer-events:none;z-index:-1}.site-header__refraction{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;z-index:-2}
.site-header__brand{width:14.625rem;padding:1.25rem;flex-shrink:0}
.site-header__brand img{width:5.5rem;height:1.252rem}
.site-nav{display:flex;position:relative;align-items:center;isolation:isolate}
.site-nav__link{display:block;position:relative;padding:.75rem 1.25rem;margin-right:-.25rem;font-size:max(14px,.875rem);font-weight:500;line-height:1.5;white-space:nowrap;cursor:pointer;transition:color .3s}
.site-nav__link[aria-current],.site-nav__link:is(:hover,:focus-visible){color:var(--color-accent)}

.site-nav__indicator{position:absolute;left:0;top:0;z-index:-1;background:var(--color-nav-active);transition:transform .5s var(--ease-ui),width .5s var(--ease-ui),height .5s var(--ease-ui)}
.site-header__secondary{display:flex;align-items:center;gap:2.5rem;padding:0 2rem;font-size:max(14px,.875rem)}
.site-header__language{font-size:max(10px,.625rem);color:var(--color-muted);padding-right:2.5rem;border-right:1px solid rgb(189 185 181 / .55)}
.site-header__contact{font-weight:500;color:inherit;text-decoration:none;transition:color .3s ease;cursor:pointer}
/* Link do podstrony Kontakt: na niej w kolorze akcentu jak bieżąca pozycja menu */
.site-header__contact:is(:hover,:focus-visible,[aria-current]){color:var(--color-accent)}
.site-header__language{cursor:pointer}
.site-header__language-window{display:block;height:1.5em;overflow:hidden}
.site-header__language-line{display:block;line-height:1.5;transition:transform .45s var(--ease-out)}
/* Wersja po najechaniu: pełny akcent; Medium, bo 10 px Regular na ciemnym tle wyglądał na przygaszony (klient 2026-10-25) */
.site-header__language-line--accent{color:var(--color-accent);font-weight:500}
.site-header__language:is(:hover,:focus-visible) .site-header__language-line{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.site-nav__indicator,.site-header__language-line,.site-header__contact{transition:none}}
/* Pozycja z mega menu: kwadrat 6 px obok nazwy w kolorze tekstu pozycji (akcent przy najechaniu i otwartym menu) */
.site-nav__link--menu{display:flex;align-items:center;gap:.375rem}
.site-nav__dot{width:.375rem;height:.375rem;flex-shrink:0;background:currentColor}
.site-nav__link[aria-expanded="true"]{color:var(--color-accent)}
/* Wspólna szklana powierzchnia paska i rozwijanego panelu. */
.site-header__glass{position:absolute;inset:0 0 auto;height:4rem;isolation:isolate;pointer-events:none;z-index:-1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mega-menu{position:fixed;top:4.75rem;left:var(--space-edge);right:var(--space-edge);z-index:50;padding:2rem 1.25rem 1.25rem;background:transparent;color:var(--color-on-dark);visibility:hidden}
.mega-menu[hidden]{display:none}
.mega-menu.is-open{visibility:visible}
.mega-menu__veil{position:fixed;z-index:49;visibility:hidden}
.mega-menu__veil.is-open{visibility:visible}
.mega-menu__title{margin:0 0 .625rem;font-family:var(--font-display);font-weight:300;font-size:1.5rem;line-height:normal;letter-spacing:-2px}
.mega-menu__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.mega-menu__card{height:20rem}
/* Oddalenie zdjęcia karty przy otwarciu (mega-menu.js animuje --menu-zoom): osobna właściwość scale, więc powiększenie przy najechaniu (transform) działa */
.mega-menu__card .service-card__media{scale:var(--menu-zoom,1)}

.site-header.is-menu-open .site-header__refraction{visibility:hidden}
.site-header.is-menu-settled .site-header__glass{-webkit-backdrop-filter:none;backdrop-filter:none}

/* Przycisk i panel menu telefonu oraz tabletu. */
.site-header__menu,.mobile-menu,.site-header__menu-label--tablet{display:none}

/* Wspólne zachowanie menu kompaktowego; telefon zachowuje pasek 52 px i odsunięcie 16 px od góry.
   menu w panelu pod paskiem na tej samej szklanej powierzchni co mega menu (modules/menu-mobilne.js): poziom 1 z pozycjami menu
   i Kontaktem, pozycja ze strzałką otwiera poziom 2 z listą usług, na dole język (wersja klienta z 2026-10-06) */
@media(width < 1100px){
:root[data-mobile] .site-header{top:1rem;height:3.25rem}
:root[data-mobile] .site-header__glass{height:3.25rem}
:root[data-mobile] .site-header__brand{width:auto;padding:1.0625rem 1rem}
:root[data-mobile] .site-header__brand img{width:5rem;height:1.125rem}
:root[data-mobile] :is(.site-nav,.site-header__secondary,.mega-menu){display:none}
:root[data-mobile] .site-header__menu{display:block;padding:.75rem 1rem;border:0;background:none;color:inherit;font-size:max(14px,.875rem);line-height:1.5;cursor:pointer}
:root[data-mobile] .site-header__menu-window{display:block;height:1.5em;overflow:hidden}
:root[data-mobile] .site-header__menu-line{display:block;text-align:right;white-space:nowrap;transition:transform .45s var(--ease-out)}
:root[data-mobile] .site-header__menu[aria-expanded=true] .site-header__menu-line{transform:translateY(-100%)}
:root[data-mobile] .mobile-menu{display:block;position:fixed;top:4.25rem;left:var(--space-edge);right:var(--space-edge);z-index:50;max-height:calc(var(--ekran) - 5.25rem);overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:.75rem;color:var(--color-on-dark);visibility:hidden}
:root[data-mobile] .mobile-menu[hidden]{display:none}
:root[data-mobile] .mobile-menu.is-open{visibility:visible}
:root[data-mobile] .mobile-menu__levels{display:grid}
:root[data-mobile] .mobile-menu__level{grid-area:1 / 1;min-width:0}
:root[data-mobile] .mobile-menu__level[hidden]{display:none}
/* Poziom 1: lista 40 px pod paskiem, pozycje 48 px (tekst 18 px) co 2 px, bieżąca pomarańczowa bez tła; „Usługi” ze strzałką 24 px
   12 px za nazwą */
:root[data-mobile] .mobile-menu__list{display:flex;flex-direction:column;gap:2px;margin:0;padding:2.5rem 0 0;list-style:none}
:root[data-mobile] .mobile-menu__link{display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem 1.25rem;border:0;background:none;color:inherit;font:400 1.125rem/1.1111 var(--font-body);text-align:left;cursor:pointer;transition:color .3s}
:root[data-mobile] .mobile-menu__link[aria-current]{color:var(--color-accent)}
:root[data-mobile] :is(.mobile-menu__link,.mobile-menu__back,.mobile-menu__service):is(:hover,:focus-visible){color:var(--color-accent)}
:root[data-mobile] .mobile-menu__link:focus-visible,:root[data-mobile] .mobile-menu__back:focus-visible{outline-offset:-2px}
:root[data-mobile] .mobile-menu__sub-icon{flex-shrink:0;width:1.375rem;height:1.375rem;margin-block:-.1875rem;background:currentColor;mask:url('/assets/img/menu/podmenu.svg?v=6e31829574') center / contain no-repeat}
/* Poziom 2: powrót „Menu” (ikona 19 × 20, 16 px wersalikami) 8 px pod paskiem, 20 px niżej usługi co 12 px: miniatura 100 × 80,
   20 px odstępu, nazwa 18 px i strzałka 16 px 20 px od prawej krawędzi panelu */
:root[data-mobile] .mobile-menu__back{display:flex;align-items:center;gap:.5rem;width:100%;margin-top:.5rem;padding:.5rem 1.25rem;border:0;background:none;color:inherit;cursor:pointer;transition:color .3s}
:root[data-mobile] .mobile-menu__back-icon{flex-shrink:0;width:1.0625rem;height:1.125rem;background:currentColor;mask:url('/assets/img/menu/powrot.svg?v=46a863e85a') center / contain no-repeat}
:root[data-mobile] .mobile-menu__back-text{font:300 1rem/1.375rem var(--font-body);text-transform:uppercase}
:root[data-mobile] .mobile-menu__services{display:flex;flex-direction:column;gap:.75rem;margin:1.25rem 0 0;padding:0 0 0 1.25rem;list-style:none}
:root[data-mobile] .mobile-menu__service{display:flex;align-items:center;gap:1.25rem;color:inherit;transition:color .3s}
:root[data-mobile] .mobile-menu__service:focus-visible{outline-offset:2px}
:root[data-mobile] .mobile-menu__thumb{flex-shrink:0;width:6.25rem;height:5rem;object-fit:cover;background:var(--color-nav-active)}
:root[data-mobile] .mobile-menu__service-title{flex:1;min-width:0;font:400 1.125rem/1.2 var(--font-body);letter-spacing:-.01em}
:root[data-mobile] .mobile-menu__chevron{flex-shrink:0;width:1rem;height:1rem;margin-right:1.25rem;background:currentColor;mask:url('/assets/img/menu/chevron.svg?v=548743eb0d') center / contain no-repeat}
/* Na dole (tylko poziom 1) język 12 px, 40 px pod listą */
:root[data-mobile] .mobile-menu__foot{margin-top:2.5rem;padding:.75rem 1.25rem}
:root[data-mobile] .mobile-menu:has([data-mobile-level]:not([data-mobile-level=menu]):not([hidden])) .mobile-menu__foot{display:none}
:root[data-mobile] .mobile-menu:has([data-mobile-level]:not([data-mobile-level=menu]):not([hidden])){padding-bottom:1.25rem}
:root[data-mobile] .mobile-menu__language{font-size:.75rem;line-height:1.5;color:var(--color-muted)}
/* Strona pod otwartym menu się nie przewija */
:root[data-mobile].is-mobile-menu-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.site-header__menu-line,.mobile-menu__link{transition:none}}

/* Pasek przewijania strony (modules/przewijanie.js). Natywny pasek ukryty klasą z <head>, więc nie zabiera szerokości treści */
.has-custom-scrollbar{scrollbar-width:none}
.has-custom-scrollbar::-webkit-scrollbar{display:none}
.scrollbar{position:fixed;top:0;right:0;bottom:0;z-index:60;width:.75rem;touch-action:none}
/* Odstęp kreski 4 px od prawej, górnej i dolnej krawędzi okna; JS liczy pozycję względem toru */
.scrollbar__track{position:absolute;top:4px;right:4px;bottom:4px;width:4px}
/* Kolor według tła sekcji pod kreską: ciemna na jasnym tle, jasna (kolor tła strony) na ciemnym */
.scrollbar__thumb{position:absolute;top:0;right:0;width:2px;background:var(--color-dark);transition:width .25s var(--ease-out),background-color .3s var(--ease-out)}
.scrollbar.is-on-dark .scrollbar__thumb{background:var(--color-light)}
.scrollbar:is(:hover,.is-dragging) .scrollbar__thumb{width:4px}

@property --button-glow-x{syntax:'<percentage>';inherits:true;initial-value:100%}
@property --button-glow-y{syntax:'<percentage>';inherits:true;initial-value:50%}
.button{position:relative;isolation:isolate;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;padding:1.125rem 2rem;border:0;flex-shrink:0;font-size:1rem;line-height:1.6;background:linear-gradient(90deg,var(--button-base),var(--button-gradient));transition:transform .35s var(--ease-out),--button-glow-x .28s ease-out,--button-glow-y .28s ease-out;cursor:pointer}
.button__fill{position:absolute;inset:-1px;background:radial-gradient(ellipse 100% 175% at var(--button-glow-x) var(--button-glow-y),var(--button-hover),var(--button-base) 100%);opacity:0;transition:opacity .3s ease-out;z-index:-1;pointer-events:none}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
.button:not(:disabled,[aria-disabled=true]):is(:hover,:focus-visible){transform:scale(var(--button-hover-scale))}
.button:not(:disabled,[aria-disabled=true]):is(:hover,:focus-visible) .button__fill{opacity:1}
}
.button__text{position:relative;z-index:1}
/* Strzałka ↗: przy hover wylatuje w prawy górny róg kontenera, druga wlatuje z lewego dolnego */
.arrow-swap{position:relative;display:block;flex-shrink:0;width:1.5rem;height:1.5rem;overflow:hidden}
.arrow-swap__icon{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s var(--ease-out)}
.arrow-swap__icon--next{transform:translate(-100%,100%)}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
.button:not(:disabled,[aria-disabled=true]):is(:hover,:focus-visible) .arrow-swap__icon{transform:translate(100%,-100%)}
.button:not(:disabled,[aria-disabled=true]):is(:hover,:focus-visible) .arrow-swap__icon--next{transform:translate(0,0)}
}
.card-link-icon{display:block;flex-shrink:0;width:16px;height:16px;background:currentColor;mask:url('/assets/img/menu/podmenu.svg?v=6e31829574') center / contain no-repeat;transition:color .3s}
@media(min-width:1100px){.card-link-icon{width:18px;height:18px}}
:is(.stone-card,.article-card):is(:hover,:focus-visible) .card-link-icon{color:var(--color-accent)}
@media(width < 1100px){:root[data-mobile] :is(.stone-card,.article-card):hover .card-link-icon{color:inherit}}
@media(prefers-reduced-motion:reduce){.button,.button__fill,.arrow-swap__icon,.card-link-icon{transition:none}}

.cookies{color:var(--color-ink);background:var(--color-bg);font:400 14px/1.6 var(--font-body);border:0;padding:32px}
.cookies[hidden]{display:none}
.cookies--banner{position:fixed;z-index:190;right:32px;bottom:32px;width:598px;max-width:calc(100% - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;border:.5px solid var(--calc-line);display:flex;flex-direction:column;gap:20px;opacity:0;transition:opacity .22s ease}
.cookies--banner.is-visible{opacity:1}
.cookies__intro{display:flex;flex-direction:column;gap:8px}
.cookies__title{margin:0;font:300 24px/1.2 var(--font-display);letter-spacing:-.03em}
.cookies__title:focus{outline:none}
.cookies__copy{margin:0;color:var(--color-grey);font-size:14px;line-height:1.6}
.cookies__actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.cookies .cookies__button{height:54px;min-width:0;padding:12px;color:var(--color-on-dark);font-size:14px;line-height:1.6;background:radial-gradient(ellipse 106% 78% at 25% 45%,var(--button-base) 54%,var(--button-gradient) 100%)}
.cookies .cookies__button--light{background:var(--stone-active);color:var(--color-ink)}
/* Preferencje: sam tekst bez tła i podkreślenia, na desktopie od lewej (Figma 814:2220); Zapisz wybrane: jasnoszare tło (Figma 814:2251) */
.cookies .cookies__button--text{background:none;color:var(--color-ink);justify-content:flex-start;padding-inline:0}
.cookies .cookies__button--text:is(:hover,:focus-visible){color:var(--color-accent)}
.cookies .cookies__button--soft{background:var(--stone-surface);color:var(--color-ink)}
.cookies--dialog{position:fixed;inset:0;margin:auto;width:960px;max-width:calc(100% - 64px);height:880px;max-height:calc(100dvh - 48px);overflow:hidden;opacity:0;transition:opacity .22s ease}
.cookies--dialog[open]{display:flex;flex-direction:column;gap:20px}
.cookies--dialog.is-visible{opacity:1}
/* Tło pod oknem: wspólne rozmycie i przyciemnienie zasłon strony (tokeny --veil-blur, --veil-tint; components/blur-veil.css) */
.cookies--dialog::backdrop{background:var(--veil-tint,rgb(23 7 7 / .7));-webkit-backdrop-filter:blur(var(--veil-blur,6px));backdrop-filter:blur(var(--veil-blur,6px));opacity:0;transition:opacity .22s ease}
.cookies--dialog.is-visible::backdrop{opacity:1}
.cookies__header{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-shrink:0}
.cookies__close{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;padding:0;border:0;background:none;color:var(--color-ink);cursor:pointer;transition:transform .45s var(--ease-out)}
.cookies__close:is(:hover,:focus-visible){transform:rotate(90deg)}
.cookies__close-icon{width:28px;height:28px;background:currentColor;mask:url('/assets/img/cookies/zamknij.svg?v=e8c1294bba') center / contain no-repeat}
/* Gradient przewijania jak w panelu kontaktu (contact-form.css): u góry po przewinięciu, na dole dopóki jest dalsza treść */
.cookies__viewport{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
.cookies__viewport::before,.cookies__viewport::after{content:'';position:absolute;left:0;right:8px;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s ease;background:linear-gradient(var(--fade-direction),var(--color-bg) 0%,color-mix(in srgb,var(--color-bg) 92%,transparent) 18%,color-mix(in srgb,var(--color-bg) 64%,transparent) 40%,color-mix(in srgb,var(--color-bg) 28%,transparent) 65%,color-mix(in srgb,var(--color-bg) 6%,transparent) 85%,transparent 100%)}
.cookies__viewport::before{--fade-direction:to bottom;top:0;height:40px}
.cookies__viewport::after{--fade-direction:to top;bottom:0;height:56px;opacity:1}
.cookies__viewport.is-scrolled::before{opacity:1}
.cookies__viewport.is-end::after{opacity:0}
.cookies__scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--stone-border) transparent;padding-right:8px}
.cookies__category{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:112px;padding:16px 0;border-bottom:.5px solid var(--calc-line)}
.cookies__category-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.cookies__category-title{margin:0;font-size:16px;line-height:1.6;font-weight:400}
.cookies__choice{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:0 0 176px}
.cookies__state{font-size:12px;color:var(--color-grey);text-align:right}
.cookies__category[data-cookie-category=niezbedne] .cookies__state{color:var(--color-price-lower)}
.cookies__switch{position:relative;display:flex;align-items:center;flex:0 0 48px;width:48px;height:24px;padding:2px;border:1px solid var(--stone-border);background:var(--stone-active);cursor:pointer}
.cookies__switch::before{content:'';position:absolute;inset:-10px -2px}
.cookies__thumb{display:block;width:18px;height:18px;flex-shrink:0;background:var(--color-light);transform:translateX(0);transition:transform .18s ease,background .18s ease;pointer-events:none}
.cookies__switch[aria-checked=true] .cookies__thumb{transform:translateX(24px);background:var(--color-accent)}
.cookies__switch:disabled{opacity:.45;cursor:default}
.cookies__details{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.cookies__details-title{margin:0;font-size:16px;line-height:1.6;font-weight:400}
.cookies__table{width:100%;table-layout:fixed;border-collapse:collapse;text-align:left;font-size:14px;line-height:1.6}
.cookies__table th,.cookies__table td{font-weight:400;vertical-align:top;padding:12px 16px 12px 0;border-bottom:.5px solid var(--calc-line);overflow-wrap:anywhere}
.cookies__table thead th:first-child{width:29%}
/* Bez kreski pod ostatnim wierszem: dalej jest linia nad przyciskami, dwie obok siebie wyglądały źle (klient 2026-10-23) */
.cookies__table tbody tr:last-child :is(th,td){border-bottom:0}
.cookies__table thead th:nth-child(2){width:36%}
.cookies__table td{color:var(--color-grey)}
.cookies__table thead th{font-size:12px;color:var(--color-grey)}
.cookies__table th span{display:block;color:var(--color-grey)}
.cookies__footer{display:flex;flex-direction:column;gap:12px;flex-shrink:0;padding-top:16px;border-top:.5px solid var(--calc-line)}
.cookies--dialog .cookies__button{height:62px;font-size:16px}
.cookies__noscript{padding:16px 20px;font-size:14px;color:var(--color-ink);background:var(--color-bg)}
.site-footer__small-link[data-cookie-open]{display:inline;border:0;padding:0;background:none;font:inherit;text-align:inherit;cursor:pointer}
html.is-cookies-open{overflow:hidden}
.is-loading .cookies--banner,html[data-page-transition] .cookies--banner,html.is-mobile-menu-open .cookies--banner,html.is-sheet-open .cookies--banner{visibility:hidden}
@media(width < 1100px){
  .cookies{padding:20px}
  .cookies--banner{left:0;right:0;bottom:0;width:100%;max-width:none;max-height:calc(100dvh - 20px);padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .cookies__actions{grid-template-columns:minmax(0,1fr)}
  .cookies--banner{gap:20px}
  .cookies--banner .cookies__title{font-size:20px}
  .cookies--banner .cookies__copy{font-size:12px}
  .cookies--banner .cookies__button{height:52px}
  /* Telefon (Figma 901:1929): Preferencje i Odrzuć obok siebie, Akceptuj pod nimi na całą szerokość; Preferencje wyśrodkowane */
  .cookies--banner .cookies__actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cookies--banner .cookies__button:last-child{grid-column:1 / -1}
  .cookies--banner .cookies__button--text{justify-content:center}
  .cookies--dialog{width:calc(100% - 24px);max-width:none;max-height:calc(100dvh - 24px);gap:12px}
  .cookies--dialog[open]{gap:12px}
  .cookies__header{gap:12px;align-items:flex-start}
  .cookies__title{font-size:22px}
  .cookies__close,.cookies__close-icon{width:24px;height:24px}
  .cookies__viewport::before,.cookies__viewport::after{right:4px}
  .cookies__category{gap:12px;min-height:112px;align-items:flex-start}
  .cookies__choice{flex:0 0 auto;flex-direction:column-reverse;align-items:flex-end;gap:8px;padding-block:4px}
  .cookies__state{white-space:nowrap}
  .cookies__switch{flex-basis:24px}
  .cookies__category-title{font-size:16px}
  .cookies__scroll{padding-right:4px}
  .cookies__table thead{display:none}
  .cookies__table tbody,.cookies__table tr,.cookies__table th,.cookies__table td{display:block;width:100%}
  .cookies__table tr{padding:12px 0;border-bottom:.5px solid var(--calc-line)}
  .cookies__table tbody tr:last-child{border-bottom:0}
  .cookies__table th,.cookies__table td{border:0;padding:0 0 8px}
  .cookies__table td:last-child{padding:0;font-size:12px}
  .cookies__footer{padding-top:12px;gap:8px}
  .cookies--dialog .cookies__button{height:48px;font-size:14px}
}
@media(max-height:600px){
  .cookies--dialog>.cookies__copy{display:none}
  .cookies--dialog{padding:16px;gap:8px}
  .cookies--dialog .cookies__actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cookies--dialog .cookies__button{height:auto;min-height:44px;padding:8px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.cookies,.cookies::backdrop,.cookies__thumb,.cookies__close,.cookies__viewport::before,.cookies__viewport::after{transition:none}}

/* Okno „Our English website is coming soon” (Figma 941:7078, partials/jezyk-okno.php): wygląd okna ciasteczek (components/cookies.css),
   na środku ekranu, zasłona strony pod spodem; ikona globu 60 px w kolorze akcentu, tekst wyśrodkowany */
.language-dialog{position:fixed;inset:0;margin:auto;width:504px;max-width:calc(100% - 40px);height:fit-content;max-height:calc(100dvh - 48px);overflow-y:auto;padding:32px;border:.5px solid var(--calc-line);background:var(--color-bg);color:var(--color-ink);font:400 14px/1.6 var(--font-body);opacity:0;transition:opacity .22s ease}
.language-dialog[open]{display:flex;flex-direction:column;align-items:center;gap:20px}
.language-dialog.is-visible{opacity:1}
.language-dialog::backdrop{background:var(--veil-tint,rgb(23 7 7 / .7));-webkit-backdrop-filter:blur(var(--veil-blur,6px));backdrop-filter:blur(var(--veil-blur,6px));opacity:0;transition:opacity .22s ease}
.language-dialog.is-visible::backdrop{opacity:1}
.language-dialog__icon{display:block;width:60px;height:60px;color:var(--color-accent)}
.language-dialog__icon svg{display:block;width:100%;height:100%}
.language-dialog__copy{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.language-dialog__title{margin:0;font:300 24px/normal var(--font-display);letter-spacing:-.72px}
.language-dialog__title:focus{outline:none}
.language-dialog__text{max-width:432px;margin:0;font-size:14px;line-height:1.6;color:var(--color-grey)}
.language-dialog__email{font-size:16px;line-height:1.6;color:var(--color-ink);text-decoration:none;transition:color .3s}
.language-dialog__email:is(:hover,:focus-visible){color:var(--color-accent)}
/* Zamknięcie jak w oknie preferencji ciasteczek (krzyżyk obraca się przy najechaniu); w Figmie go nie ma, ale bez niego nie da się zamknąć okna na telefonie bez klawiatury */
.language-dialog__close{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;color:var(--color-ink);cursor:pointer;transition:transform .45s var(--ease-out)}
.language-dialog__close:is(:hover,:focus-visible){transform:rotate(90deg)}
.language-dialog__close-icon{width:24px;height:24px;background:currentColor;mask:url('/assets/img/cookies/zamknij.svg?v=e8c1294bba') center / contain no-repeat}
@media(prefers-reduced-motion:reduce){.language-dialog,.language-dialog::backdrop,.language-dialog__close{transition:none}}
@media(width < 768px){.language-dialog{padding:32px 20px}}

/* Pole formularza (Figma 287:427, formularz kontaktowy): jeden komponent dla kontaktu (sekcja i panel z prawej; w kalkulatorze próba cofnięta);
   opis: strona-kamienia/KONTAKT-SPECYFIKACJA.md. Pole 52 px na jasnym tle z linią 0,5 px, fokus w kolorze tekstu */
.field{position:relative;display:flex;flex-direction:column;min-width:0}

/* Pole obowiązkowe (Figma 510:1071, klient: wszędzie): pomarańczowy kwadrat 8 px w prawym górnym rogu pola, sam z atrybutu required */
.field:has(.field__control:required)::after{content:'';position:absolute;right:-2px;top:-2px;z-index:1;width:.5rem;height:.5rem;background:var(--color-accent);pointer-events:none}

.field__control{width:100%;height:3.25rem;padding:.75rem;border:.5px solid var(--calc-line);border-radius:0;background:var(--color-field);font:1rem/1.35 var(--font-body);color:var(--color-ink);transition:border-color .3s}

.field__control::placeholder{color:var(--stone-muted);opacity:1}

.field__control:hover{border-color:color-mix(in srgb,var(--stone-muted) 45%,var(--calc-line))}

.field__control:is(:focus,:focus-within){border-color:var(--color-ink);outline:none}

.field__control:focus-visible{outline:1px solid var(--color-ink);outline-offset:-1px}

/* Błąd (np. puste pole obowiązkowe po „Wyślij”, modules/kontakt.js): komunikat pod polem, ramka w kolorze błędu jak w kalkulatorze */
.field__error{display:block;margin-top:.25rem;font-size:max(12px,.75rem);line-height:normal;color:var(--color-waste)}

.field__error[hidden]{display:none}

.field.is-invalid .field__control{border-color:var(--color-waste)}

/* Liczby bez strzałek przeglądarki */
.field__control[type=number]{-moz-appearance:textfield;appearance:textfield}

.field__control[type=number]::-webkit-inner-spin-button,.field__control[type=number]::-webkit-outer-spin-button{margin:0;appearance:none}

/* Etykieta w polu (--float): puste pole pokazuje ją jak podpowiedź (14 px na środku), przy wpisywaniu i po wpisaniu unosi się na górę pola
   (10 px, 4 px od góry), a wartość stoi pod nią. Pola tekstowe mają placeholder=" ", żeby CSS wiedział, czy są puste; lista i suwak mają etykietę zawsze u góry */
.field--float .field__control{padding:1.25rem .75rem .375rem}

/* Etykieta nad wpisaną wartością 11 px (klient 2026-10-29, wcześniej 10 px) */
.field__label{position:absolute;left:calc(.75rem + .5px);top:calc(.25rem + .5px);max-width:calc(100% - 1.5rem);overflow:hidden;font-size:max(11px,.6875rem);line-height:normal;color:var(--stone-muted);white-space:nowrap;text-overflow:ellipsis;pointer-events:none;transition:top .25s var(--ease-out),translate .25s var(--ease-out),font-size .25s var(--ease-out)}

.field__control:placeholder-shown:not(:focus) + .field__label{top:1.625rem;translate:0 -50%;font-size:max(14px,.875rem)}

/* Jednostka (np. cm) po prawej, na wysokości wartości */
.field--unit .field__control{padding-right:2.5rem}

.field__unit{position:absolute;right:.75rem;top:1.375rem;font-size:max(12px,.75rem);line-height:1.0625rem;color:var(--stone-muted);pointer-events:none}

/* Lista: strzałka po prawej, tekst 14 px */
.field__select{position:relative;display:block}

.field__select::after{content:'';position:absolute;top:50%;right:.75rem;width:1rem;height:1rem;margin-top:-.5rem;background:url('/assets/img/kamien/select-chevron.svg?v=a00603c348') center / contain no-repeat;pointer-events:none}

.field__select .field__control{padding-right:2.5rem;font-size:max(14px,.875rem);appearance:none;cursor:pointer}

.field__select .field__control:invalid{color:var(--color-ink)}

@media(prefers-reduced-motion:reduce){.field__control,.field__label{transition:none}}

/* Kontakt: doradca, formularz i panel z hero (Figma 152:5978, 393:2001); opis: strona-kamienia/KONTAKT-SPECYFIKACJA.md.
   Sekcja kontaktu i panel z prawej to ten sam komponent i ten sam CSS (bez wariantów): zmiana tutaj zmienia oba miejsca */
.contact-advisor{display:flex;align-items:flex-end;gap:1.5rem;color:var(--color-ink)}

.contact-advisor__photo{position:relative;flex-shrink:0;width:13.125rem;height:16.875rem;margin:0;overflow:hidden;background:var(--stone-active)}

.contact-advisor__photo img{position:absolute;left:var(--photo-left);top:var(--photo-top);width:var(--photo-width);max-width:none;height:auto}

/* Imię na zdjęciu: Sentient 16 px na przyciemnionym, rozmytym tle, 231 px od góry zdjęcia jak w Figmie. Padding 4 px góra/dół, 8 px boki
   (klient 2026-10-15: +4 px z boków); korekta .07em wyrównuje napis w tagu: z prawej ujemny odstęp liter po ostatniej literze,
   pod spodem miejsce na zejścia liter (imiona ich nie mają), więc 1 px więcej z prawej i u góry, 1 px mniej u dołu */
.contact-advisor__name{--name-pad-y:.25rem;--name-pad-x:.5rem;position:absolute;left:.75rem;top:14.4375rem;padding:calc(var(--name-pad-y) + .07em) calc(var(--name-pad-x) + .07em) calc(var(--name-pad-y) - .07em) var(--name-pad-x);font:300 1rem/normal var(--font-display);letter-spacing:-.03rem;background:rgb(23 7 7 / .5);backdrop-filter:blur(10px);color:var(--color-light)}

.contact-advisor__details{display:flex;flex-direction:column;gap:1rem}

.contact-advisor__group{display:flex;flex-direction:column;align-items:flex-start;gap:.375rem}

.contact-advisor__meta{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}

.contact-advisor__phone,.contact-advisor__email{font-weight:400;line-height:normal;color:inherit;text-decoration:none;transition:color .3s}

.contact-advisor__phone{font-size:1.875rem}

.contact-advisor__email{font-size:1.375rem}

.contact-advisor__phone:is(:hover,:focus-visible),.contact-advisor__email:is(:hover,:focus-visible){color:var(--color-accent)}

.contact-advisor__hours{margin:0;font-size:max(14px,.875rem);line-height:normal;color:var(--stone-muted)}

/* Status: kwadrat dostępności 8 px ze wspólnego components/status-dot.css */
.contact-advisor__status{--status-dot-size:.5rem;display:flex;align-items:center;gap:.25rem;margin:0;padding:0 .125rem;font-size:max(12px,.75rem);line-height:normal;color:var(--stone-muted)}

.contact-advisor__copy{display:flex;align-items:center;gap:.25rem;padding:0;border:0;background:none;font:inherit;font-size:max(12px,.75rem);line-height:1.0625rem;color:var(--stone-muted);cursor:pointer;transition:color .3s}

.contact-advisor__copy img{width:1rem;height:1rem}

.contact-advisor__copy:is(:hover,:focus-visible),.contact-advisor__copy.is-copied{color:var(--color-ink)}

/* Formularz: padding 32 px, odstępy 16 px między wierszami i 12 px w wierszu; same pola ze wspólnego components/field.css */
.contact-form{display:flex;flex-direction:column;gap:1.5rem;padding:2rem;background:var(--stone-surface);color:var(--color-ink)}

.contact-form__title{margin:0;font-size:max(12px,.75rem);line-height:normal;text-transform:uppercase;color:var(--stone-muted)}

/* Wersja skrócona (etap 2 kalkulatora, Figma 510:1071): padding 20 px, duży nagłówek Sentient 24 px zamiast małego tytułu */
.contact-form--compact{padding:1.25rem}

.contact-form__heading{margin:0;font-family:var(--font-display);font-weight:300;font-size:1.5rem;line-height:normal;letter-spacing:-.045rem;color:var(--color-ink)}

.contact-form__fields{display:flex;flex-direction:column;gap:1rem}
.contact-form__notes{display:flex;flex-direction:column;gap:.5rem;margin:-.25rem 0 0;padding:0;list-style:none;font-size:1rem;line-height:1.375}
.contact-form__notes li{display:flex;align-items:center;gap:.375rem}
.contact-form__notes img{flex:none;width:1.25rem;height:1.25rem}
.contact-form:has(.contact-form__notes) .field__control:focus-visible{outline:none;border:1px solid var(--color-ink)}
.contact-form:has(.contact-form__notes) .contact-form__checkbox{translate:0 1px}

.contact-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}

/* Wiadomość (Figma 363:4040): 131 px, podpowiedź „Twoja wiadomość” 14 px szara jak puste etykiety innych pól, wpisany tekst 16 px */
.field__control.contact-form__message{display:block;height:8.1875rem;padding:.75rem 1rem;resize:none}

.contact-form__message::placeholder{font-size:max(14px,.875rem)}

.contact-form__footer{display:flex;align-items:flex-start;justify-content:space-between;gap:.875rem}

/* Zgoda: tekst 285 px (węższy, gdy obok przycisku jest mniej miejsca, np. w panelu); od 2026-10-03 skaluje się w dół do 10 px
   (klient: na małych rozdzielczościach był za duży), przy 1680 nadal 14 px */
.contact-form__consent{display:flex;align-items:flex-start;gap:.5rem;max-width:19.3125rem;font-size:max(10px,.875rem);line-height:normal;color:var(--stone-muted);cursor:pointer}

.contact-form__checkbox{flex-shrink:0;width:1rem;height:1rem;margin:0;border:.5px solid var(--calc-line);border-radius:0;background:var(--color-field) center / .625rem no-repeat;appearance:none;cursor:pointer;transition:background-color .2s,border-color .2s}

.contact-form__checkbox:checked{border-color:var(--color-dark);background-color:var(--color-dark);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.5l4.5-5' fill='none' stroke='%23f1f0ef' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

.contact-form__checkbox:focus-visible{outline:1px solid var(--color-ink);outline-offset:2px}

/* Brak zgody po „Wyślij”: ramka pola wyboru w kolorze błędu, komunikat (.field__error) pod tekstem zgody */
.contact-form__consent.is-invalid .contact-form__checkbox{border-color:var(--color-waste)}

.contact-form__policy{color:var(--color-ink);text-decoration:none}

.contact-form__policy:is(:hover,:focus-visible){text-decoration:underline}

.contact-form__submit{flex-shrink:0;gap:.5rem;border:0;font-family:var(--font-body);color:var(--color-on-dark)}
.contact-form__submit:disabled{cursor:progress;opacity:.7}
/* Wysyłka (modules/kontakt.js): komunikat pod przyciskiem, błąd w kolorze błędów pól; pole-pułapka na automaty poza ekranem */
.contact-form__status{margin:0;font-size:max(12px,.875rem);line-height:1.3;color:var(--color-ink)}
.contact-form__status.is-error{color:var(--color-waste)}
.contact-form__status[hidden]{display:none}

/* Informacja pod przyciskiem podczas wysyłki (Figma 947:7106, partials/wysylanie-info.php): ikona 20 px w kolorze akcentu, tekst 14/1,5 z odliczaniem;
   wysokość rośnie od zera, a treść pojawia się płynnie, po wysyłce odwrotnie (modules/postep-wysylki.js, klasa is-visible) */
.send-info{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease-out),opacity .35s ease}
.send-info.is-visible{grid-template-rows:1fr;opacity:1}
.send-info__inner{min-height:0;overflow:hidden}
.contact-form__action{display:flex;flex-direction:column;flex-shrink:0}
.materials__send > .send-info{grid-column:3}
.send-info__row{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.5rem .25rem 0;font-size:max(12px,.875rem);line-height:1.5;color:var(--color-ink);transform:translateY(-.375rem);transition:transform .45s var(--ease-out)}
.send-info.is-visible .send-info__row{transform:none}
.send-info__row svg{flex-shrink:0;width:1.25rem;height:1.25rem;color:var(--color-accent)}
@media(prefers-reduced-motion:reduce){.send-info,.send-info__row{transition:none}}
@media(width < 1100px){:root[data-mobile] .materials__send > .send-info{grid-column:auto}}

/* reCAPTCHA v3 (modules/recaptcha.js): znaczek Google ukryty, bez informacji pod formularzem (decyzja klienta 2026-10-29; informacja tylko w polityce prywatności) */
.grecaptcha-badge{visibility:hidden}
.contact-form__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Panel z prawej: <dialog> na cały ekran, własne tło zamiast ::backdrop (animowane w modules/kontakt.js) */
.is-contact-open{overflow:hidden}

.contact-panel{--sheet-width:35.5rem;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:clip;background:none;color:var(--color-ink)}

.contact-panel::backdrop{background:none}

/* Zasłona strony pod panelem: wspólne zwykłe rozmycie i przyciemnienie (components/blur-veil.css); kliknięcie zamyka panel */
.contact-panel__overlay{cursor:pointer}

/* Wjazd panelu animowany przez GSAP. */
.contact-panel__sheet{position:absolute;top:0;right:0;bottom:0;width:var(--sheet-width);max-width:100%;background:var(--color-bg);transform:translate3d(0,0,0)}
.contact-panel[open] .contact-panel__sheet{will-change:transform}

/* Na niskich ekranach treść panelu przewija się; natywny pasek ukryty jak na całej stronie (nie zwęża formularza) */
.contact-panel__inner{display:flex;flex-direction:column;gap:2rem;height:100%;padding:2.5rem 1.5rem;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none}

.contact-panel__inner::-webkit-scrollbar{display:none}
.contact-panel__viewport,.contact-panel__scroll{display:contents}

.contact-panel__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}

.contact-panel__title:focus{outline:0}.contact-panel__title{margin:0;font-size:max(12px,.75rem);font-weight:400;text-transform:uppercase;color:var(--stone-muted)}

.contact-panel__back{display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:0;background:none;cursor:pointer;transition:transform .45s var(--ease-out)}

.contact-panel__back img{width:2rem;height:2rem}

.contact-panel__back:is(:hover,:focus-visible){transform:translateX(-.25rem)}

/* Kurtyna: ciemny pas zjeżdża z panelu w prawo i odsłania treść przy otwieraniu */
.contact-panel__curtain{position:absolute;inset:0;z-index:3;background:var(--color-dark);transform:scaleX(0);transform-origin:right;pointer-events:none}

@media(prefers-reduced-motion:reduce){.contact-advisor__phone,.contact-advisor__email,.contact-advisor__copy,.contact-form__checkbox,.contact-panel__back{transition:none}
}

/* Kompaktowy doradca i formularz w wysuwanym panelu. */
.contact-panel .contact-advisor{gap:1rem}
.contact-panel .contact-advisor__photo{width:9rem;height:auto;aspect-ratio:7 / 9}
.contact-panel .contact-advisor__name{top:auto;bottom:.75rem;font-size:max(14px,calc(1rem - 2px))}
.contact-panel .contact-advisor__phone{font-size:1.625rem}
.contact-panel .contact-advisor__email{font-size:1.25rem}
.contact-panel .contact-form{padding:1.25rem}


/* Kontakt mobile: telefon 24 px, e-mail 20 px. */
@media(width < 1100px){
:root[data-mobile] .contact-panel{--sheet-width:calc(100% - 20px)}
:root[data-mobile] .contact-panel__inner{gap:0;padding:0;overflow:hidden}
:root[data-mobile] .contact-panel__top{flex:none;padding:calc(1.25rem + 8px) 1.5rem calc(1.25rem - 8px);background:var(--color-bg)}
:root[data-mobile] .contact-panel__back img{width:1.875rem;height:1.875rem}
:root[data-mobile] .contact-panel .contact-advisor{flex-wrap:wrap}
:root[data-mobile] .contact-panel .contact-advisor__details{flex:1 1 10rem;min-width:0}
:root[data-mobile] .contact-panel__viewport{position:relative;display:block;flex:1;min-height:0;overflow:hidden}
:root[data-mobile] .contact-panel__scroll{display:flex;flex-direction:column;gap:2rem;height:100%;padding:2.5rem 1.5rem 5.5rem;overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none;scroll-padding-block:4rem}
:root[data-mobile] .contact-panel__scroll::-webkit-scrollbar{display:none}
:root[data-mobile] .contact-panel__scroll>*{flex-shrink:0}
:root[data-mobile] .contact-panel__viewport::before,:root[data-mobile] .contact-panel__viewport::after{content:'';position:absolute;left:0;right:0;z-index:2;pointer-events:none;background:linear-gradient(var(--fade-direction),var(--color-bg) 0%,color-mix(in srgb,var(--color-bg) 92%,transparent) 18%,color-mix(in srgb,var(--color-bg) 64%,transparent) 40%,color-mix(in srgb,var(--color-bg) 28%,transparent) 65%,color-mix(in srgb,var(--color-bg) 6%,transparent) 85%,transparent 100%)}
:root[data-mobile] .contact-panel__viewport::before{--fade-direction:to bottom;top:0;height:2.5rem}
:root[data-mobile] .contact-panel__viewport::after{--fade-direction:to top;bottom:0;height:3.5rem}
:root[data-mobile] .contact-advisor{gap:1rem}
:root[data-mobile] .contact-advisor__photo{width:7.8125rem;height:10.0437rem;aspect-ratio:auto}
:root[data-mobile] .contact-advisor__name{--name-pad-y:.15rem;--name-pad-x:.4rem;top:auto;left:.5625rem;bottom:.5625rem;font-size:.875rem}
:root[data-mobile] .contact-advisor__group{gap:.25rem}
:root[data-mobile] .contact-advisor__phone{font-size:1.5rem;letter-spacing:var(--phone-tracking,normal)}
:root[data-mobile] .contact-advisor__phone[style*="--phone-tracking"]{font-size:calc(1.5rem - var(--phone-smaller,0px));white-space:nowrap}
:root[data-mobile] .contact-advisor__email{font-size:1.25rem}
:root[data-mobile] .contact-advisor__hours{font-size:.75rem}
:root[data-mobile] :is(.contact-advisor__status,.contact-advisor__copy){font-size:.75rem}
:root[data-mobile] .contact-form{gap:1rem;padding:1rem}
:root[data-mobile] .contact-form__notes{line-height:1.3}
:root[data-mobile] .contact-form__notes li{align-items:flex-start}
:root[data-mobile] .contact-form__notes img{margin-top:calc(.65em - .625rem)}
:root[data-mobile] .contact-form__fields,:root[data-mobile] .contact-form__row{gap:.75rem}
:root[data-mobile] .contact-form__row{grid-template-columns:minmax(0,1fr)}
:root[data-mobile] .contact-form__footer{flex-direction:column;align-items:stretch;gap:1.25rem;margin-top:.5rem}
:root[data-mobile] .contact-form__consent{max-width:none;font-size:.875rem}
}

/* Okno z podziękowaniem po wysłaniu formularza (Figma 898:3166, modules/kontakt.js thanks()): wspólna zasłona strony, karta na środku,
   X 20 px nad kartą i 20 px od jej prawej krawędzi (krzyżyk jak w lightboxie zdjęć); zasłona i karta pojawiają się płynnie, ikona rysuje się raz */
html.is-thanks-open{overflow:hidden}
.thanks{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:20px;border:0;background:transparent;color:var(--color-on-dark)}
.thanks[open]{display:grid;place-items:center}
.thanks::backdrop{background:transparent}
.thanks .blur-veil{position:fixed;opacity:0;transition:opacity .45s ease}
.thanks__card{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;width:504px;max-width:100%;padding:32px;border:.5px solid var(--calc-line);background:var(--color-bg);color:var(--color-ink);text-align:center;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s ease,transform .6s var(--ease-out)}
.thanks.is-visible .blur-veil,.thanks.is-visible .thanks__card{opacity:1}
.thanks.is-visible .thanks__card{transform:none;transition-delay:.08s}
.thanks__icon{display:block;width:60px;height:60px;stroke:var(--color-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Rysowanie kreski (tylko raz, bez pętli): najpierw ramka, potem ptaszek */
.thanks__icon path{stroke-dasharray:1;stroke-dashoffset:1}
.thanks.is-visible .thanks__frame{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-out) .25s}
.thanks.is-visible .thanks__tick{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease-out) .9s}
.thanks__copy{display:flex;flex-direction:column;gap:8px;max-width:440px}
.thanks__title{margin:0;font:300 24px/1.2 var(--font-display);letter-spacing:-.03em}
.thanks__text{margin:0;color:var(--color-grey);font-size:14px;line-height:1.6}
/* Przycisk 52 px, krzyżyk 24 px na środku: 14 px marginesu wewnątrz przycisku odjęte od odstępów 20 px */
.thanks__close{position:absolute;bottom:calc(100% + 6px);right:6px;display:grid;place-items:center;width:52px;height:52px;border:0;padding:0;background:transparent;color:var(--color-on-dark);cursor:pointer;opacity:0;transition:opacity .45s ease}
.thanks.is-visible .thanks__close{opacity:1}
.thanks__cross{position:relative;width:24px;height:24px;transition:rotate .5s var(--ease-ui)}
.thanks__cross::before,.thanks__cross::after{content:'';position:absolute;left:50%;top:50%;width:100%;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}
.thanks__cross::after{rotate:-45deg}
.thanks__close:is(:hover,:focus-visible) .thanks__cross{rotate:90deg}
.thanks__close:focus:not(:focus-visible){outline:none}
.thanks__close:focus-visible{outline:2px solid var(--color-on-dark);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .thanks .blur-veil,.thanks__card,.thanks__close,.thanks__cross,.thanks.is-visible :is(.thanks__frame,.thanks__tick){transition:none}
  .thanks__card{transform:none}
}

/* Znacznik dostępności (Figma 434:555 dane techniczne, 393:1981 doradca): zielony kwadrat z jasną obwódką 2 px; rozmiar przez --status-dot-size (domyślnie 10 px) */
.status-dot{box-sizing:border-box;flex-shrink:0;width:var(--status-dot-size,.625rem);height:var(--status-dot-size,.625rem);border:2px solid var(--color-available-ring);background:var(--color-available)}

/* Na żywo („Możesz dzwonić”): co 3,2 s obwódka lekko się rozjaśnia, a od kwadratu odchodzi słaba, wąska zielona fala, która gaśnie (klient: łagodniej niż pierwsza wersja) */
.status-dot--live{animation:status-dot-live 3.2s var(--ease-out) infinite}
/* Poza godzinami pracy (modules/status-dzwonienia.js): pomarańczowy kwadrat z jasną obwódką, bez fali */
.status-dot--closed{border-color:color-mix(in srgb,var(--color-accent) 35%,#fff);background:var(--color-accent)}

@keyframes status-dot-live{
  0%{border-color:var(--color-available-ring);box-shadow:0 0 0 0 color-mix(in srgb,var(--color-available) 22%,transparent)}
  25%{border-color:color-mix(in srgb,var(--color-available-ring) 82%,#fff)}
  70%{border-color:var(--color-available-ring);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--color-available) 0%,transparent)}
  100%{border-color:var(--color-available-ring);box-shadow:0 0 0 0 color-mix(in srgb,var(--color-available) 0%,transparent)}
}

@media(prefers-reduced-motion:reduce){.status-dot--live{animation:none}}

/* Strzałki i pasek pod karuzelą na telefonie (wspólne: galeria realizacji, zespół na O nas; Figma 648:1548):
   strzałki 26 × 20 co 19 px po lewej, pasek postępu 2 px na resztę szerokości (modules/karuzela-mobilna.js) */
.carousel-nav{display:none}

@media(width < 1100px){
:root[data-mobile] .carousel-nav{display:flex;align-items:center;gap:1.4rem}
:root[data-mobile] .carousel-nav__controls{display:flex;gap:1.1875rem}
:root[data-mobile] .carousel-nav__arrow{width:1.65rem;height:1.2375rem;padding:0;border:0;background:var(--color-ink);mask:url('/assets/img/uslugi/strzalka-prawo-v2.svg?v=35fa48a52c') center / contain no-repeat;cursor:pointer;transition:opacity .3s}
:root[data-mobile] .carousel-nav__arrow--previous{mask-image:url('/assets/img/uslugi/strzalka-lewo-v2.svg?v=22f4a4c0c6')}
:root[data-mobile] .carousel-nav__arrow:disabled{opacity:.25;cursor:default}
:root[data-mobile] .carousel-nav__progress{flex:1;min-width:0;height:2px;overflow:hidden;background:var(--stone-border)}
:root[data-mobile] .carousel-nav__thumb{display:block;width:100%;height:100%;background:var(--color-ink);transform-origin:left;will-change:transform}
}

.mood{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:1.5rem}
/* Napis „Zrób klimat” od 2026-10-05 o 15% większy (klient; było 5,875 × 2,5463 rem), róg przy przełączniku bez zmian; tego samego dnia
   odchudzony (klient: subtelnie, od początku pisania): kreska łuku 0,25 i grotu 0,33 zamiast 0,45, litery cieńsze pod maską, która
   zjada ich brzegi (--doodle-thin w jednostkach rysunku, 0,1 z każdej strony); kreska pióra liter zostaje po napisaniu (jej gaśnięcie
   rozjaśniało brzegi i napis chudł jeszcze raz na końcu); ustawienia czyta modules/motyw.js (buildDoodle) */
.mood__doodle{--doodle-line:.25;--doodle-head:.33;--doodle-letter-stroke:1;--doodle-thin:.2;position:absolute;right:3.375rem;bottom:2.5rem;width:6.7563rem;height:2.9282rem;pointer-events:none}
.mood__doodle-art{display:block;width:100%;height:100%}
.mood__doodle-art--mobile{display:none}
.mood__doodle svg{display:block;width:100%;height:100%;overflow:visible}
.mood__doodle path{--fill-0:var(--color-accent);--stroke-0:var(--color-accent);stroke-linecap:round;stroke-linejoin:round}
.mood__doodle [id="Polygon 3"]{fill:none;stroke:var(--color-accent);stroke-width:.3}
.mood__toggle{position:relative;flex-shrink:0;width:4rem;height:2rem;padding:0;border:1px solid var(--stone-border);background:var(--stone-active);cursor:pointer}
.mood__knob{position:absolute;left:3px;top:calc(50% - .75rem);display:grid;place-items:center;width:1.5rem;height:1.5rem;background:var(--color-bg);transition:transform var(--theme-duration) var(--ease-out),background-color var(--theme-duration) var(--theme-ease)}
.mood__knob img{width:1rem;height:1rem}
.mood__toggle[aria-checked=true] .mood__knob{transform:translateX(2rem);background:var(--stone-glow)}
.mood__picker{appearance:none;width:7.5rem;height:2rem;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.mood__picker::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--color-light) 0%,#ffd195 30%,#ffa07a 45%,#ff7a1a 60%,#ff4038 80%,#8ed2ff 100%)}
.mood__picker::-moz-range-track{height:4px;background:linear-gradient(90deg,var(--color-light) 0%,#ffd195 30%,#ffa07a 45%,#ff7a1a 60%,#ff4038 80%,#8ed2ff 100%)}
.mood__picker[data-glow-mode=bialy]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#f1f0ef 0%,#ffdba9 71.4286%,#ffd092 100%)}
.mood__picker[data-glow-mode=bialy]::-moz-range-track{background:linear-gradient(90deg,#f1f0ef 0%,#ffdba9 71.4286%,#ffd092 100%)}
/* Moc podświetlenia (próba na Home): tor od 40% do pełnego koloru światła */
.mood__picker--power::-webkit-slider-runnable-track{background:linear-gradient(90deg,color-mix(in srgb,var(--stone-glow) 40%,transparent) 0%,var(--stone-glow) 100%)}
.mood__picker--power::-moz-range-track{background:linear-gradient(90deg,color-mix(in srgb,var(--stone-glow) 40%,transparent) 0%,var(--stone-glow) 100%)}
.mood__picker::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;margin-top:calc(2px - .5rem);border:1px solid var(--color-light);border-radius:0;background:var(--stone-glow)}
.mood__picker::-moz-range-thumb{width:1rem;height:1rem;box-sizing:border-box;border:1px solid var(--color-light);border-radius:0;background:var(--stone-glow)}
.mood__picker:focus-visible{outline:1px solid var(--color-ink);outline-offset:4px}
/* Suwaki z podpisami ($moodPower: katalog na Home, kalkulator blatów): podpis nad suwakiem, przełącznik równo z dołem suwaków; w trybie jasnym pola ukryte (reguły przeniesione z home-scaling.css) */
.mood--power{align-items:flex-end;min-height:3.8125rem}
.mood__field{display:flex;flex-direction:column;gap:.625rem}
.mood__field:has(input[hidden]){display:none}
.mood__label{font-size:max(10px,.625rem);line-height:1.6;text-transform:uppercase;color:var(--stone-muted)}
.mood__doodle[hidden],.mood__picker[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.mood__knob{transition:none}}

/* Telefon (html[data-mobile], do 767 px; katalog Figma 635:1366 i 679:1221, kalkulator 652:1429): przełącznik 72 × 36 bez ramki,
   napis „Zrób klimat” w wersji z projektu mobile (Figma 663:3845), suwak koloru 100 px, bez suwaka mocy i podpisów (moc 90% z
   modules/motyw.js); położenie napisu i suwaka w CSS sekcji */
@media(width < 1100px){
:root[data-mobile] .mood__toggle{width:4.5rem;height:2.25rem;border:0}
:root[data-mobile] .mood__knob{left:5px;top:calc(50% - .8125rem);width:1.625rem;height:1.625rem}
:root[data-mobile] .mood__knob img{width:1.125rem;height:1.125rem}
:root[data-mobile] .mood__toggle[aria-checked=true] .mood__knob{transform:translateX(2.25rem)}
:root[data-mobile] .mood__doodle{--doodle-line:.45;--doodle-head:.45;--doodle-letter-stroke:1;--doodle-thin:0;bottom:auto;width:4.3056rem;height:2.0237rem}
:root[data-mobile] .mood__doodle-art{display:none}
:root[data-mobile] .mood__doodle-art--mobile{display:block}
:root[data-mobile] .mood__field:has(.mood__picker--power),:root[data-mobile] .mood__label{display:none}
:root[data-mobile] .mood__picker{width:6.25rem}
}

.mood--disabled .mood__toggle{opacity:.35;cursor:not-allowed}
.mood--disabled :is(.mood__doodle,.mood__field,.mood__picker){display:none}
@media(width < 1100px){
:root[data-mobile] :is(.mood__picker,.calc-range__input){height:2.75rem;margin-block:-.375rem;box-shadow:none;filter:none;touch-action:pan-y}
:root[data-mobile] :is(.mood__picker,.calc-range__input)::-webkit-slider-runnable-track{box-shadow:none;filter:none}
:root[data-mobile] :is(.mood__picker,.calc-range__input)::-moz-range-track{box-shadow:none;filter:none}
:root[data-mobile] :is(.mood__picker,.calc-range__input)::-webkit-slider-thumb{width:1.75rem;height:1.75rem;margin-top:calc(2px - .875rem);border:6px solid transparent;background-clip:content-box;box-shadow:none;filter:none}
:root[data-mobile] :is(.mood__picker,.calc-range__input)::-moz-range-thumb{width:1.75rem;height:1.75rem;border:6px solid transparent;background-clip:content-box;box-shadow:none;filter:none}
}
.island-stones__selected{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:.75rem}
.island-stones__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.island-stone{position:relative;display:flex;align-items:center;padding:0;border:0;min-width:0;background:var(--stone-surface);color:var(--calc-ink);cursor:pointer;transition:background .2s}
/* Kafel 58 px (klient 2026-10-13: 4 px wyżej niż w projekcie, żeby znacznik ceny nie zasłaniał nazwy), zdjęcie kwadratowe na całą wysokość */
.island-stone img{width:3.625rem;height:3.625rem;flex-shrink:0;object-fit:cover}
.island-stone span{flex:1;padding:0 .65rem;font-size:max(14px,.875rem);font-weight:500;line-height:1.25rem;text-align:center}
.island-stones__selected .island-stone{width:100%;background:var(--stone-active)}
.island-stone:is(:hover,[aria-pressed=true]){background:var(--stone-active)}
.island-stone[aria-pressed=true]::after,.island-stones__selected .island-stone::after{content:"";position:absolute;right:-2px;top:-2px;width:.5rem;height:.5rem;background:var(--color-accent)}
.island-stones__selected>.calc-link{grid-column:2/-1;justify-self:start}
/* Zmiana ceny przy innym kamieniu (Figma 244:2189): znacznik 11 px w prawym górnym rogu kafla, 4 px poza nim z prawej i u góry; niższa cena
   na zielono (--color-price-lower, #386900); przy wybranym kamieniu go nie ma. Nazwa i rodzaj w niewybranych kaflach listy 2 px niżej */
.island-stone .calc-stone__delta{position:absolute;top:-4px;right:-4px;z-index:1;padding:2px 4px;font-size:max(11px,.6875rem);font-weight:400;line-height:normal;white-space:nowrap;color:var(--calc-ink);background:var(--stone-active);backdrop-filter:blur(10px);pointer-events:none}
.island-stone .calc-stone__delta.is-lower{color:var(--color-price-lower)}
.island-stone .calc-stone__delta[hidden]{display:none}
.island-stones__grid .island-stone:not([aria-pressed=true]) .calc-stone__caption{translate:0 2px}
@media(max-width:480px){.island-stones__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.island-stone{transition:none}}
@media(width < 1100px){
:root[data-mobile] .island-stones :is(.island-stones__selected,.island-stones__grid){--calc-grid-fixed:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
:root[data-mobile] .island-stone{min-height:3.5rem}
:root[data-mobile] .island-stones .island-stone img{width:3.5rem;height:3.5rem}
:root[data-mobile] .island-stones .island-stone span{min-width:0;padding-inline:.25rem;overflow-wrap:anywhere}
:root[data-mobile] .island-stones .island-stone .calc-stone__caption{padding-inline:0}
:root[data-mobile] .island-stones .calc-stone__caption>span:first-child{line-height:1.125rem}
:root[data-mobile] .island-stones .calc-stone__kind{margin-top:-2px}
/* Telefon: lista kafli ze znacznikami cen z odstępem między wierszami 4 px większym (kolumny bez zmian); znacznik jak na desktopie */
:root[data-mobile] .island-stones .island-stones__grid{row-gap:.75rem}
}

.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.section-header__title{margin:0;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.1875rem}

/* Telefon (html[data-mobile], do 767 px; Figma 633:1422 i 646:1429): nagłówek 30 px */
@media(width < 1100px){
:root[data-mobile] .section-header__title{font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
}

/* Lightbox galerii (wspólny komponent: opinie i galeria realizacji na stronie kamienia): zdjęcie leci z miniatury na środek (modules/lightbox.js),
   tło: wspólna zasłona strony (components/blur-veil.css), podpis i strzałki pod zdjęciem; markup w szablony/partials/lightbox.php */
.has-lightbox{overflow:hidden;scrollbar-gutter:stable}
/* --lightbox-side i --lightbox-y: wolne miejsce wokół zdjęcia w rem (bez jednostki, czyta modules/lightbox.js) */
.lightbox{--lightbox-side:8;--lightbox-y:6;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:transparent;color:var(--color-on-dark)}
.lightbox::backdrop{background:transparent}
.lightbox__stage{position:absolute;left:0;top:0}
.lightbox__frame{position:absolute;inset:0;overflow:hidden;background:var(--color-nav-active);transform-origin:0 0}
.lightbox__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.lightbox__bar{position:absolute;left:0;right:0;top:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-top:1.25rem}
.lightbox__caption{display:flex;flex-direction:column;gap:.25rem}
/* Etykieta w kolorze nazwy kamienia pod nią (klient 2026-10-25: szara ginęła na jasnym tle za zasłoną) */
.lightbox__label{font-size:max(10px,.625rem);text-transform:uppercase;color:var(--color-on-dark)}
.lightbox__stone{font-size:1rem;color:var(--color-on-dark)}
.lightbox__arrows{display:flex;gap:.9375rem;margin-right:-.75rem}
.lightbox__close{position:absolute;top:1.5rem;right:var(--space-edge);display:grid;place-items:center;width:3.25rem;height:3.25rem;border:0;padding:0;background:transparent;color:var(--color-on-dark);cursor:pointer}
.lightbox__cross{position:relative;width:1.5rem;height:1.5rem;transition:rotate .5s var(--ease-ui)}
.lightbox__cross::before,.lightbox__cross::after{content:'';position:absolute;left:50%;top:50%;width:100%;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}
.lightbox__cross::after{rotate:-45deg}
.lightbox__close:is(:hover,:focus-visible) .lightbox__cross{rotate:90deg}
.lightbox__close:focus:not(:focus-visible){outline:none}
.lightbox__close:focus-visible{outline:2px solid var(--color-on-dark);outline-offset:2px}
/* Strzałki lightboxa (jak strzałki karuzeli opinii) */
.lightbox__arrow{display:grid;place-items:center;width:3.25rem;height:3.25rem;border:0;padding:0;background:transparent;color:var(--color-copper);cursor:pointer;transition:transform .35s var(--ease-out)}
.lightbox__arrow:is(:hover,:focus-visible){transform:scale(var(--button-hover-scale))}
.lightbox__arrow-icon{width:1.75rem;height:1.1875rem;background:currentColor;mask:url('/assets/img/opinie/strzalka.svg?v=608494ac92') center / contain no-repeat}
.lightbox__arrow--previous .lightbox__arrow-icon{rotate:180deg}
@media(prefers-reduced-motion:reduce){.lightbox__cross,.lightbox__arrow{transition:none}}

/* Telefon (html[data-mobile], do 767 px): zdjęcie na szerokość ekranu z marginesem strony (20 px z boku), w pionie z miejscem
   na przycisk zamknięcia nad zdjęciem (wcześniej marginesy z desktopu zostawiały zdjęcie szerokie na ok. 120 px) */
@media(width < 1100px){
:root[data-mobile] .lightbox{--lightbox-side:1.25;--lightbox-y:9.5}
}

/* Cały kafel prawie kwadratowy, nieco wyższy niż szeroki (polecenie klienta 2026-09-27); zdjęcie zajmuje wysokość, która zostaje po podpisie */
.stone-card{--stone-card-ratio:20 / 21;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.75rem;min-width:0;aspect-ratio:var(--stone-card-ratio);padding:.75rem;border:1px solid transparent;background:var(--stone-surface);transition:border-color .3s}
.stone-card:is(:hover,:focus-visible){border-color:var(--stone-border)}
.stone-card[hidden]{display:none}
/* Warstwy zdjęcia są absolutne, więc zdjęcie nie ma własnej wysokości i wypełnia resztę kafla */
.stone-card__media{position:relative;overflow:hidden;flex:1 1 0;min-height:0;background:var(--stone-active)}
/* Zdjęcie płyty (rezerwa bez WebGL) i canvas z podświetleniem z modules/swiatlo.js w tym samym kadrze */
.stone-card__image,.stone-card__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
.stone-card__canvas{opacity:0}
.stone-card__canvas.is-ready{opacity:1}
/* Pod gotowym canvasem zdjęcie płyty znika po jego pojawieniu się: przeglądarka, szklany kursor i nav nie malują ani nie dekodują dużego pliku */
.stone-card__media:has(.stone-card__canvas.is-ready) .stone-card__image{visibility:hidden;transition:visibility 0s .5s}
.stone-card:is(:hover,:focus-visible) :is(.stone-card__image,.stone-card__canvas){transform:scale(1.03)}
.stone-card__tags{position:absolute;left:.75rem;bottom:.75rem;display:flex;gap:.25rem;z-index:2;max-width:calc(100% - 1.5rem)}
.stone-card__tag{padding:.25rem .5rem;font-size:max(12px,.75rem);line-height:1.6;white-space:nowrap;background:rgb(241 240 239 / .65);backdrop-filter:blur(10px);color:var(--color-dark)}
.stone-card__gallery{position:absolute;inset:0;pointer-events:none;z-index:1}
/* Figma 307:396 (zdjęcie 421,33 × 335, od 2026-09-22 kwadrat 1:1): miniatury 82 × 103 w procentach zdjęcia; odstęp od dołu przeliczony na kwadrat (6,32% × 335 / 421,33), więc miniatury stoją tam, gdzie w Figmie względem szerokości; height:auto znosi atrybut height */
.stone-card__photo{position:absolute;width:19.46%;height:auto;aspect-ratio:82 / 103;object-fit:cover;box-shadow:0 6px 16px rgb(23 7 7 / .25);opacity:0;transition:transform .55s var(--ease-out),opacity .35s var(--ease-out)}
.stone-card__photo--1{right:18.26%;bottom:5.03%;transform:translateY(140%) rotate(-6.27deg)}
.stone-card__photo--2{right:5.75%;bottom:5.02%;transform:translateY(140%) rotate(15deg)}
.stone-card:is(:hover,:focus-visible) .stone-card__photo--1{opacity:1;transform:translateY(0) rotate(-6.27deg)}
.stone-card:is(:hover,:focus-visible) .stone-card__photo--2{opacity:1;transform:translateY(0) rotate(15deg);transition-delay:.12s}
.stone-card__content{display:flex;flex-direction:column}
.stone-card__header,.stone-card__meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.stone-card__name{margin:0;font:300 1.375rem/1 var(--font-display);letter-spacing:-.04125rem}
.stone-card__category{flex-shrink:0;padding:.25rem .5rem;font-size:max(12px,.75rem);line-height:1.6;background:rgb(241 240 239 / .8);color:var(--color-dark)}
.stone-card__price{font-size:max(14px,.875rem);line-height:1.6;white-space:nowrap}
.stone-card__unit{font-size:max(12px,.75rem);color:var(--stone-muted)}
:root[data-theme=dark] .stone-card{background:rgb(29 26 22 / .5);backdrop-filter:blur(14px);box-shadow:0 0 48px -8px color-mix(in srgb,var(--stone-glow) 20%,transparent)}
:root[data-theme=dark] .stone-card__tag{background:rgb(23 7 7 / .65);color:var(--color-ink)}
/* Rodzaj kamienia w trybie ciemnym w kolorach filtrów katalogu (Blaty, Wyspy, Ściany, Schody) */
:root[data-theme=dark] .stone-card__category{background:var(--stone-surface);color:var(--color-ink)}
:root[data-theme=dark] .stone-card__gallery{display:none}
/* Zmiana motywu: wartości ustawiane tylko w trybie ciemnym przechodzą razem z tokenami (base.css), obok własnych przejść karty */
:root.is-theme-changing .stone-card{transition:border-color .3s,background-color var(--theme-duration) var(--theme-ease),box-shadow var(--theme-duration) var(--theme-ease),backdrop-filter var(--theme-duration) var(--theme-ease)}
:root.is-theme-changing :is(.stone-card__tag,.stone-card__category){transition:background-color var(--theme-duration) var(--theme-ease),color var(--theme-duration) var(--theme-ease)}
@media(prefers-reduced-motion:reduce){.stone-card,.stone-card__image,.stone-card__canvas,.stone-card__photo{transition:none}.stone-card:is(:hover,:focus-visible) :is(.stone-card__image,.stone-card__canvas){transform:none}}
/* Informacja dla kamienia bez podświetlenia; wielkość jak tagi zastosowań (Blaty, Wyspy, Schody; klient 2026-10-09) */
.stone-card__badge{position:absolute;right:.75rem;bottom:.75rem;z-index:2;display:none;padding:.25rem .5rem;font-size:max(12px,.75rem);line-height:1.6;white-space:nowrap;color:#f1f0ef;background:rgb(66 56 49 / .7);backdrop-filter:blur(10px)}
:root[data-theme=dark] .stone-card__badge{display:block}

/* Telefon: dwie kolumny, kwadratowe zdjęcie, nazwa 17 px, cena 13 px i strzałka 16 px.
   Rodzaj kamienia 8 px od rogu zdjęcia, bez tagów zastosowań i zdjęć realizacji. */
@media(width < 1100px){
:root[data-mobile] .stone-card{aspect-ratio:auto;gap:.5rem;padding:0;border:0;background:transparent;backdrop-filter:none;box-shadow:none}
:root[data-mobile] .stone-card__media{container-type:inline-size;flex:none;aspect-ratio:1}
:root[data-mobile] :is(.stone-card__tags,.stone-card__gallery){display:none}
/* Stała etykieta ma 23 znaki; ograniczenie ścisku zapobiega nakładaniu liter. */
:root[data-mobile] .stone-card__badge{left:.5rem;top:.5rem;right:auto;bottom:auto;max-width:calc(100% - 1rem);padding:.25rem .5rem;border:0;font-size:.75rem;white-space:normal;letter-spacing:clamp(-.05em,calc((100cqw - 2rem - 10.9em) / 23),0px)}
:root[data-mobile] .stone-card__name{font-size:1.0625rem;line-height:1.25rem;letter-spacing:-.03125rem}
:root[data-mobile] .stone-card__content{gap:.125rem;padding:0 calc(.375rem + 1px) calc(.5rem + 1px) 0}
:root[data-mobile] .stone-card__category{position:absolute;left:.5rem;bottom:.5rem;z-index:2;font-size:.75rem;backdrop-filter:blur(10px)}
:root[data-mobile] .stone-card__meta{gap:.25rem}
:root[data-mobile] .stone-card__price{min-width:0;font-size:.8125rem;line-height:1.2;white-space:normal}
:root[data-mobile] .stone-card__amount{white-space:nowrap}
:root[data-mobile] .stone-card__unit{font-size:.6875rem;white-space:nowrap}
/* Bez efektów najechania (od 2026-10-05, klient; na dotyku zostawały po stuknięciu): bez szklanego kursora ze strzałką, ramki,
   powiększenia zdjęcia i koloru „Więcej” */
:root[data-mobile] .stone-card .glass-cursor{display:none}
:root[data-mobile] .stone-card.has-glass-cursor{cursor:pointer}
:root[data-mobile] .stone-card:hover{border-color:transparent}
:root[data-mobile] .stone-card:hover :is(.stone-card__image,.stone-card__canvas){transform:none}
}
/* Najwęższe telefony (poniżej 360 px): bez dopisku „z VAT”, inaczej „Więcej” nie mieści się w karcie (ceny i tak brutto) */
@media(max-width:359px){
:root[data-mobile] .stone-card__vat{display:none}
}

.furniture-card{--stone-card-ratio:444 / 424}
.furniture-card__samples{display:flex;align-items:center;padding-inline:.375rem;flex-shrink:0}
.furniture-card__samples--overlay{display:none}
.furniture-card__sample{display:block;width:1.125rem;height:1.125rem;transform:rotate(45deg);overflow:hidden;background:var(--stone-active)}
.furniture-card__sample+.furniture-card__sample{margin-left:-.125rem}
.furniture-card__sample img{display:block;width:145%;height:145%;max-width:none;object-fit:cover;transform:translate(-15%,-15%) rotate(-45deg)}
.furniture-card__sample--more{display:grid;place-items:center;color:var(--stone-muted)}
.furniture-card__sample--more span{transform:rotate(-45deg);font-size:1.125rem;line-height:1}

.furniture-card .stone-card__meta{margin-top:2px}

/* Telefon (html[data-mobile], do 767 px): kafelek jak karta kamienia (components/stone-card.css), zdjęcie wyższe (klient) */
@media(width < 1100px){
:root[data-mobile] .furniture-card .stone-card__media{aspect-ratio:167.5 / 180}
:root[data-mobile] .furniture-card__samples{padding-inline:.225rem}
:root[data-mobile] .furniture-card__samples--caption{display:none}
:root[data-mobile] .furniture-card__samples--overlay{position:absolute;right:.5rem;bottom:.5rem;display:flex;padding:calc(.8rem * .20710678)}
:root[data-mobile] .furniture-card__sample{width:.8rem;height:.8rem}
:root[data-mobile] .furniture-card__sample+.furniture-card__sample{margin-left:-.075rem}
:root[data-mobile] .furniture-card__sample--more span{font-size:.75rem}
}

.product{display:flex;align-items:center;gap:4rem;height:var(--ekran);min-height:48rem;background:var(--color-bg);color:var(--color-ink)}
.product__media{position:relative;flex:0 0 50%;align-self:stretch;overflow:hidden;background:var(--stone-surface)}
.product__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease-out)}
.product__photo.is-current{opacity:1}
/* Ramka kamienia w kolorze tła tagów (klient 2026-10-23); nad zdjęciami (z-index), żeby przesuwane zdjęcie jej nie przykryło */
.product__detail{position:absolute;right:2rem;bottom:2rem;z-index:3;width:12.5rem;height:12.5rem;border:2px solid var(--stone-surface);object-fit:cover}
/* Strona usługi: detal kamienia na każde zdjęcie, zmienia się razem ze zdjęciem */
/* Kamień każdego zdjęcia (usługa z kilkoma kamieniami): stała ramka, obrazki w środku przenikają się albo przesuwają za palcem */
.product__detail--stack{display:block;overflow:hidden}
.product__detail-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease-out)}
.product__detail-image.is-current{opacity:1}
.product__dots{position:absolute;left:var(--space-edge);bottom:1.375rem;z-index:3;display:flex;align-items:center;gap:.25rem}
.product__dot{position:relative;width:.84375rem;height:1.125rem;padding:.5rem 0;border:0;background:var(--color-on-dark);background-clip:content-box;cursor:pointer;transition:width .45s var(--ease-out)}
.product__dot[aria-pressed=true]{width:2.1rem}
.product__dot-fill{position:absolute;left:0;right:0;top:.5rem;height:2px;background:var(--color-copper-dim);transform:scaleX(0);transform-origin:left center}
.product__info{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:2.25rem;padding-right:calc(var(--space-edge) + 1.5rem)}
.product__summary{display:flex;flex-direction:column;gap:1.25rem;width:100%}
.product__title-group{display:flex;flex-direction:column;gap:.5rem}
.product__title-row{display:flex;align-items:center;gap:1.5rem}
.product__name{font:300 2.875rem/3.25rem var(--font-display);letter-spacing:-.1875rem;white-space:nowrap}
.product__kind{padding:.5rem .75rem;font-size:max(14px,.875rem);line-height:1.6;background:var(--stone-active)}
/* Mebel (Figma 487:10592): plakietka materiału nad nazwą, 18 px nad tytułem */
.product__kind--top{align-self:flex-start;margin-bottom:.625rem}
.product__price{font-size:1.5rem;line-height:1.6}
.product__unit{font-size:1.25rem;color:var(--color-unit)}
.product__description{max-width:62ch;font-size:1rem;line-height:1.6;color:var(--color-text-muted)}
.product__uses{display:flex;flex-direction:column;gap:.5rem}
.product__label{font-size:max(10px,.625rem);font-weight:500;line-height:1.6;text-transform:uppercase;color:var(--stone-muted)}
.product__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.product__tag{padding:.5rem 1rem;font-size:max(14px,.875rem);font-weight:500;line-height:1.5;background:var(--stone-surface)}
/* Rodzaj kamienia jeszcze niedostępny w usłudze (Figma 479:2665) */
.product__tag--off{opacity:.5}
/* Odstęp przycisków na desktopie 20 px (klient 2026-10-23: o 8 px mniej) */
.product__actions{display:flex;align-items:flex-start;gap:1.25rem}
.product__button{color:var(--color-on-dark)}
.product__contact{display:flex;align-items:center;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;transition:transform .35s var(--ease-out)}
.product__contact:is(:hover,:focus-visible){transform:scale(var(--button-hover-scale))}
.product__avatar{position:relative;flex-shrink:0;width:3.875rem;height:3.875rem;overflow:hidden;background:var(--stone-active)}
/* Zdjęcie doradcy strony (kwadrat 240 × 240 z tresc/kontakt.json) wypełnia kafelek */
.product__avatar-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product__contact-link{display:flex;align-items:center;gap:.5rem;padding:1.125rem 1.25rem;font-size:1rem;line-height:1.6;color:var(--button-base);background:var(--stone-active)}
.product__contact:is(:hover,:focus-visible) .arrow-swap__icon{transform:translate(100%,-100%)}
.product__contact:is(:hover,:focus-visible) .arrow-swap__icon--next{transform:translate(0,0)}
.product__more{display:flex;align-items:center;gap:.125rem;padding-top:.25rem;font-size:max(10px,.625rem);font-weight:500;line-height:1.6;text-transform:uppercase;color:var(--color-text-muted);transition:color .3s}
.product__more img{display:none}
.product__more::after{content:'';flex-shrink:0;width:.75rem;height:.75rem;background:currentColor;mask:url('/assets/img/kamien/hero-wiecej.svg?v=49edbab44c') center / contain no-repeat;transform:rotate(90deg)}
.product__more:is(:hover,:focus-visible){color:var(--color-accent)}
@media(prefers-reduced-motion:reduce){.product__photo,.product__detail-image,.product__dot,.product__contact,.product__more{transition:none}}
/* Strony na skali 1680 (usługa Blaty): zdjęcie jak połowa hero strony głównej, do lewej krawędzi ekranu aż do 4K; tekst kończy się na krawędzi pudełka strony */
html[data-scale] .product{max-width:3840px;margin-inline:auto}
html[data-scale] .product__info{padding-right:calc((100% - var(--page-box)) / 2 + var(--space-edge) + 1.5rem)}

/* Telefon (Figma 646:1430; html[data-mobile], do 767 px): zdjęcie na całą szerokość 375 × 480 pod menu, detal 120 px 20 px od rogu,
   kreski zdjęć 20 px od dołu. Pod zdjęciem nazwa 32 px z plakietką, cena 20 px, opis, zastosowania i przyciski w jednym rzędzie.
   Wysokość i tekst jak przycisk hero Home; bez „Więcej informacji”. */
@media(width < 1100px){
:root[data-mobile] .product__break{display:none}
:root[data-mobile] .product{flex-direction:column;align-items:stretch;gap:2rem;height:auto;min-height:0;padding-bottom:3rem}
/* Zdjęcie o 25% niższe niż w Figmie (375 × 480 → 375 × 360, klient 2026-10-25) */
:root[data-mobile] .product__media{flex:none;aspect-ratio:375 / 360;touch-action:pan-y pinch-zoom}
:root[data-mobile] .product__detail{right:1.25rem;bottom:1.25rem;width:7.5rem;height:7.5rem}
:root[data-mobile] .product__dots{left:1.25rem;bottom:.75rem}
:root[data-mobile] .product__info{gap:2rem;padding:0 var(--space-edge)}
:root[data-mobile] .product__summary{gap:1rem}
:root[data-mobile] .product__title-group{gap:.25rem}
:root[data-mobile] .product__title-row{gap:1rem}
:root[data-mobile] .product__name{font-size:2rem;line-height:2.125rem;letter-spacing:-.125rem;white-space:normal}
:root[data-mobile] .product__kind{flex-shrink:0;font-size:.75rem}
:root[data-mobile] .product__price{font-size:1.25rem}
:root[data-mobile] .product__unit{font-size:1rem}
:root[data-mobile] .product__tag{font-weight:400}
:root[data-mobile] .product__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-self:stretch;align-items:stretch;gap:.5rem}
:root[data-mobile] .product__button{min-width:0;height:3.85rem;padding:0 .5rem;font-size:1rem;text-align:center;white-space:normal}
:root[data-mobile] .product__contact{min-width:0;align-items:stretch}
:root[data-mobile] .product__avatar{width:3.85rem;height:3.85rem}
:root[data-mobile] .product__contact-link{flex:1;min-width:0;justify-content:center;gap:.45rem;height:3.85rem;padding:0 .375rem;font-size:1rem}
:root[data-mobile] .product__contact-link .arrow-swap{width:1.25rem;height:1.25rem}
:root[data-mobile] .product__more{display:none}
}
@media(max-width:359px){:root[data-mobile] .product__avatar{display:none}}

/* Tablet (768-1099 px): zdjęcie jak na telefonie, ale nie wyższe niż ok. 3/4 ekranu (w poziomie proporcje telefonu dawały zdjęcie
   wyższe od ekranu) */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .product__media{aspect-ratio:auto;height:min(67.2vw,calc(var(--ekran) * .378))}
/* Przyciski obok siebie w rozmiarze z desktopu (klient 2026-10-21: zdjęcie o 30% niższe, przyciski bez rozciągania na szerokość) */
:root[data-mobile] .product__actions{display:flex;align-self:flex-start;gap:.75rem}
:root[data-mobile] .product__button{flex:none;padding:0 2rem;white-space:nowrap}
:root[data-mobile] .product__contact{flex:none}
:root[data-mobile] .product__contact-link{flex:none;gap:.5rem;padding:0 1.25rem}
}

.traits{padding:8rem var(--space-edge) 0;background:var(--color-bg);color:var(--color-ink)}
.traits__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:0;padding:0;list-style:none}
/* Kafel (Figma 425:537): tytuł i opis u góry, ikona pod nimi, odstęp 24 px, padding 24 px (u dołu 36 px) */
.traits__tile{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem 1.5rem 2.25rem;overflow:hidden;background:var(--stone-surface)}
.traits__label{font-size:max(14px,.875rem);line-height:normal;color:var(--stone-muted)}
.traits__text{display:flex;flex-direction:column;gap:.25rem}
.traits__title{font-family:var(--font-display);font-weight:300;font-size:1.25rem;line-height:1;letter-spacing:-.0375rem}
.traits__description{font-size:max(14px,.875rem);line-height:1.5;color:var(--stone-muted)}
/* Model 3D zamiast etykiety: pełna szerokość treści kafla (proporcja 1,1 jak ikona w Figmie); bez WebGL zostaje etykieta */
.traits__model{--edge-model-base:var(--stone-active);--edge-model-shade:var(--stone-border);--edge-model-line:var(--color-muted);--edge-model-gloss:var(--color-light);--edge-model-pale:var(--stone-surface);display:none;aspect-ratio:1.1}
.traits__model canvas{display:block;width:100%;height:100%}
.traits__tile.is-model .traits__model{display:block}
.traits__tile.is-model .traits__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* „Więcej informacji” (opis kafla na telefonie) tylko w wersji mobile; opis na desktopie zawsze widoczny */
.traits__more{display:none}

/* Telefon (Figma 647:1429; html[data-mobile], do 767 px): kafle 2 × 2 co 8 px, 20 px od krawędzi ekranu, padding 12 (u dołu 16).
   Tytuł 18 px, pod nim „Więcej informacji” ze strzałką: rozwija opis (sections/cechy_kamienia.js), pod tekstem ikona 3D */
@media(width < 1100px){
:root[data-mobile] .traits{padding:2.5rem var(--space-edge) 0}
:root[data-mobile] .traits__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-mobile] .traits__tile{gap:.75rem;padding:.75rem .75rem 1rem}
:root[data-mobile] .traits__text{gap:.125rem}
:root[data-mobile] .traits__title{font-size:1.125rem;line-height:1.1;letter-spacing:-.03em}
:root[data-mobile] .traits__more{display:flex;align-items:center;gap:.125rem;padding:.25rem 0 0;border:0;background:none;font:500 .625rem/1.6 var(--font-body);text-transform:uppercase;color:var(--stone-muted);cursor:pointer}
:root[data-mobile] .traits__more::after{content:'';flex-shrink:0;width:.75rem;height:.75rem;background:currentColor;mask:url('/assets/img/kamien/hero-wiecej.svg?v=49edbab44c') center / contain no-repeat;rotate:90deg;transition:rotate .45s var(--ease-out)}
:root[data-mobile] .traits__tile.is-open .traits__more::after{rotate:-90deg}
:root[data-mobile] .traits__reveal{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .5s var(--ease-ui)}
:root[data-mobile] .traits__tile.is-open .traits__reveal{grid-template-rows:1fr}
/* Odstęp nad opisem wewnątrz niego (padding zostawał widoczny po zwinięciu) */
:root[data-mobile] .traits__description{min-height:0;overflow:hidden;font-size:.8125rem}
:root[data-mobile] .traits__description::before{content:'';display:block;height:.375rem}
}
@media(width < 1100px) and (prefers-reduced-motion:reduce){:root[data-mobile] .traits__more::after,:root[data-mobile] .traits__reveal{transition:none}}

/* Karuzela kafli tylko na tablecie (klient 2026-10-21): jak galeria realizacji (tor do prawej krawędzi ekranu, przyciąganie, strzałki i pasek
   z components/karuzela-mobilna.css), dwa i pół kafla widoczne; na telefonie siatka 2 × 2 bez strzałek */
@media(width < 768px){:root[data-mobile] .traits .carousel-nav{display:none}}
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .traits{padding:2.5rem 0 0 var(--space-edge)}
:root[data-mobile] .traits__grid{display:flex;gap:.75rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-right:var(--space-edge);scrollbar-width:none}
:root[data-mobile] .traits__grid::-webkit-scrollbar{display:none}
:root[data-mobile] .traits__tile{flex:0 0 calc((100% + var(--space-edge) - 1.5rem) / 2.5);scroll-snap-align:start}
:root[data-mobile] .traits .carousel-nav{margin:1.25rem var(--space-edge) 0 0}
}

/* Dane techniczne (Figma 434:537): kolumna tekstu 640 px i zdjęcie 640 × 627, odstęp 80 px */
.details{display:flex;align-items:center;gap:5rem;padding:8rem var(--space-edge) 0;background:var(--color-bg);color:var(--color-ink)}
.details__content{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:flex-end;gap:1.25rem}
.details__intro{display:flex;flex-direction:column;gap:1rem}
.details__heading{margin:0;font:300 2.875rem/1.2 var(--font-display);letter-spacing:-.1875rem}
.details__description{font-size:1rem;line-height:1.6;color:var(--color-text-muted)}
.details__list{display:flex;flex-direction:column;gap:.5rem;margin:0}
/* Wiersz: nazwa 14 px szara, wartość Sentient 16 px; kropka dostępności ze wspólnego components/status-dot.css */
.details__row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.75rem;background:var(--stone-surface);line-height:normal;white-space:nowrap}
.details__row dt{font-size:max(14px,.875rem);color:var(--stone-muted)}
.details__row dd{margin:0;font-family:var(--font-display);font-weight:300;font-size:1rem;letter-spacing:-.02rem}
.details__available{display:flex;align-items:center;gap:.5rem}
.details__photo{position:relative;flex-shrink:0;width:40rem;height:39.1875rem;margin:0;overflow:hidden;background:var(--stone-active)}
.details__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Telefon (Figma 647:1453; html[data-mobile], do 767 px): nagłówek 30 px, opis, wiersze danych i pod nimi zdjęcie 335 × 328 */
@media(width < 1100px){
:root[data-mobile] .details{flex-direction:column;align-items:stretch;gap:2rem;padding:4.5rem var(--space-edge) 0}
:root[data-mobile] .details__heading{font-size:2rem;line-height:1.2;letter-spacing:-.1225rem}
:root[data-mobile] .details__row{align-items:center}
:root[data-mobile] .details__photo{width:100%;height:auto;aspect-ratio:335 / 328}
}

/* Tablet (klient 2026-10-21): zdjęcie o 30% niższe niż na telefonie (328 × 0,7), jak w sekcjach opisowych */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .details__photo{aspect-ratio:335 / 229.6}
}

/* Kontener szerokości (cqw = szerokość treści sekcji), do pola informacji dodatkowych szerokiego jak wiadomość w sekcji kontaktu */
.calculator{--calc-control-gap:.5rem;container-type:inline-size;padding:8rem var(--space-edge) 0;background:var(--color-bg);color:var(--color-ink)}
.calculator [hidden]{display:none}
.calculator__heading{margin:0 0 3rem;font:300 2.875rem/3.25rem var(--font-display);letter-spacing:-.1875rem}
.calculator__bar{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;margin-bottom:2.25rem}
/* Etapy (Figma 158:62): 3/5 szerokości jak podgląd płyty, równe pola co 20 px na wspólnej linii 1 px (więcej etapów = ciaśniej);
   bieżący etap na tle --stone-surface i w kolorze tekstu, pozostałe szare */
.calculator__steps{position:relative;display:flex;flex:0 0 calc((100% - 2.5rem) * 3 / 5);gap:1.25rem;min-width:0;margin:0;padding:0;border-bottom:1px solid var(--calc-line);list-style:none;white-space:nowrap}
.calculator__step{position:relative;display:flex;flex:1 1 0;flex-direction:column;justify-content:center;min-width:0;height:3.25rem;padding:.5rem .75rem;color:var(--calc-muted)}
.calculator__step.is-current{color:var(--calc-ink)}
/* Prostokąt bieżącego etapu przesuwa się pod spodem z etapu na etap (modules/indykator.js, initStepIndicator), jak wskaźnik w menu;
   bez JS tło ma sam bieżący etap */
.calculator__steps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--step-w,0);background:var(--stone-surface);transform:translateX(var(--step-x,0));pointer-events:none}
.calculator__steps[data-steps-ready]::before{transition:transform .5s var(--ease-ui),width .5s var(--ease-ui)}
.calculator__steps:not([data-steps-ready]) .calculator__step.is-current{background:var(--stone-surface)}
.calculator__step-label{font-size:max(10px,.625rem);line-height:.9375rem;text-transform:uppercase;color:var(--calc-muted)}
.calculator__step-title{overflow:hidden;font-size:1rem;line-height:normal;text-overflow:ellipsis}
.calculator__mood .mood__doodle{right:3.125rem;bottom:2.4537rem}
/* Kontrolki trybu ciemnego jak w katalogu na Home (suwaki koloru i mocy z podpisami): suwaki i przełącznik na środku wysokości paska etapów;
   podpis stoi nad suwakiem poza przepływem, więc przełącznik nie skacze przy zmianie trybu */
.calculator__mood.mood--power{align-items:center;min-height:0}
.calculator__mood .mood__field{position:relative}
.calculator__mood .mood__label{position:absolute;left:0;bottom:calc(100% - .375rem);white-space:nowrap}
.calculator__view-controls{display:contents}
.calculator__rotate{display:none}
.calculator.is-summary .calculator__view-controls{display:none}
/* Obszar roboczy: podgląd 3/5, opcje 2/5, odstęp 40 px; ten sam układ w konfiguratorze wysp (pierwsze i ostatnie dziecko).
   Szerokości wprost z procentów (przy podstawie 0 i proporcjach 3:2 flex doliczał padding podglądu i dzielił 811/509 zamiast 792/528) */
.calculator__work{display:flex;align-items:flex-start;gap:2.5rem}
.calculator__work > :first-child{flex:0 0 calc((100% - 2.5rem) * .6);min-width:0}
.calculator__work > :last-child{flex:0 0 calc((100% - 2.5rem) * .4);min-width:0}

.slab-preview{position:relative;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem 1.5rem;background:var(--stone-surface)}
.slab-preview[data-theme]{transition:--stone-surface var(--theme-duration),--stone-active var(--theme-duration),--stone-border var(--theme-duration),--stone-muted var(--theme-duration),--color-bg var(--theme-duration),--color-ink var(--theme-duration),--calc-ink var(--theme-duration),--calc-muted var(--theme-duration),--calc-line var(--theme-duration),--calc-veil var(--theme-duration),--calc-veil-mini var(--theme-duration)}
.slab-preview[data-theme=dark] .slab-preview__legend-item img{filter:invert(.85)}
@media(prefers-reduced-motion:reduce){.slab-preview[data-theme]{transition:none}}
.slab-preview__header{display:flex;align-items:center;justify-content:space-between;height:1.75rem;white-space:nowrap}
.slab-preview__stone{display:flex;gap:.5rem;width:31.875rem;font-size:max(12px,.75rem);line-height:1.625rem;text-transform:uppercase;color:var(--calc-muted)}
.slab-preview__mirror{padding-inline:.5rem;background:var(--color-bg);color:var(--calc-ink);text-transform:none}
.slab-preview__mirror[hidden]{display:none}
.slab-preview__kind{color:var(--color-ink)}
.slab-preview__meta{font-size:max(10px,.625rem);font-weight:500;line-height:1rem;text-transform:uppercase;color:var(--calc-muted)}
.slab-preview__meta:empty{visibility:hidden}
/* Płyta pod SVG: zdjęcie (rezerwa bez WebGL) i canvas z podświetleniem z modules/swiatlo.js; pole płyty ustawia kalkulator.js */
.slab-preview__board{position:relative}
.slab-preview__viewport{position:relative}
.slab-preview__slab{position:absolute;overflow:hidden}
.slab-preview__image,.slab-preview__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.slab-preview__canvas{opacity:0;transition:opacity .5s}
.slab-preview__canvas.is-ready{opacity:1}
.slab-preview__slab:has(.slab-preview__canvas.is-ready) .slab-preview__image{visibility:hidden;transition:visibility 0s .5s}
.slab-preview__stage{position:relative;display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-body);touch-action:auto;user-select:none}
.slab-preview__footer{display:flex;flex-direction:column;gap:1rem}
.slab-preview__controls{display:flex;align-items:center;justify-content:flex-start}
.slab-preview__legend{display:flex;align-items:center;gap:1.25rem;margin:0;padding:0;list-style:none}
.slab-preview__legend-item{display:flex;align-items:center;gap:.25rem;font-size:max(12px,.75rem);line-height:1.0625rem;color:var(--calc-muted);white-space:nowrap}
.slab-preview__legend-item img{width:1rem;height:1rem}
.slab-preview__legend-item--margin,.slab-preview__legend-item--waste{gap:.375rem}
.slab-preview__legend-item--margin img{width:.8rem;height:.8rem;margin:-.025rem}
.slab-preview__legend-item--waste{color:var(--color-waste)}
.slab-preview__swatch{width:.75rem;height:.75rem;border:.8px dashed var(--color-waste-line);background:var(--color-waste-fill)}
.slab-preview__sheets{display:flex;flex-wrap:wrap;gap:.5rem}
/* Przy miniaturach płyta 12 px pod nimi: znoszenie wewnętrznych 20 px (z 776) nad płytą w SVG */
.slab-preview__sheets:not([hidden]) + .slab-preview__viewport{margin-top:calc(-100% * 20 / 776)}
.slab-preview__sheet{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding:.25rem;border:0;background:var(--stone-active);cursor:pointer;transition:background-color .3s}
.slab-preview__sheet:is(:hover,:focus-visible){background:var(--stone-border)}
.slab-preview__sheet[aria-pressed=true]::after{content:"";position:absolute;right:-2px;top:-2px;width:.5rem;height:.5rem;background:var(--color-accent)}
.slab-preview__sheet-box{position:relative;display:block;height:1.5rem}
.slab-preview__sheet-box svg{position:relative;display:block;width:auto;height:100%}
.slab-preview__sheet-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.slab-preview__sheet-caption{font-size:max(10px,.625rem);line-height:1;text-transform:uppercase;color:var(--calc-muted);white-space:nowrap}
.slab-preview__sheet-veil{fill:var(--calc-veil-mini);fill-rule:evenodd}
.slab-preview__sheet-blats{fill:none;stroke:var(--calc-muted);stroke-width:1;vector-effect:non-scaling-stroke}
.slab-preview__veil{fill:var(--calc-veil);fill-rule:evenodd}
.slab-preview__hatch{fill:none;stroke:var(--color-grey);stroke-width:1}
.slab-preview__margin{fill-rule:evenodd;opacity:.5}
.slab-preview__usable,.slab-preview__outline{fill:none;stroke:var(--calc-muted)}
.slab-preview__usable,.slab-preview__border{fill:none;stroke:var(--calc-slab-line);stroke-width:1}
.slab-preview__waste{fill:var(--color-waste-fill);fill-rule:evenodd;stroke:var(--color-waste-line);stroke-width:.5}
.slab-preview__waste-fill{fill:var(--color-waste-fill)}
.slab-preview__waste-line{fill:none;stroke:var(--color-waste-line);stroke-width:.5;stroke-dasharray:5.83}
/* Rezerwacja 1. slabu (stan magazynowy, klient 2026-10-25): kolor szarych przycisków 50%, paski jak na marginesie 12% (klient: ledwie widoczne), napis na środku */
.slab-preview__reservation{fill:var(--stone-active);fill-opacity:.5;stroke:var(--calc-slab-line);stroke-width:.5}
.slab-preview__reservation-hatch{opacity:.12}
.slab-preview__reservation-label{fill:var(--calc-ink);pointer-events:none}
.slab-preview__hole{fill:var(--color-bg);stroke:var(--calc-muted);stroke-dasharray:4 3}
.slab-preview__hole--tap{stroke-dasharray:2 2}
/* Zlew kamienny: w otworze będzie kamień, więc tylko lekkie wybielenie zamiast pełnego tła */
.slab-preview__hole--stone{fill:var(--calc-veil-mini)}
/* Ociekacz: delikatny obrys przedłużenia zlewu i jeszcze delikatniejsze rowki odpływu */
.slab-preview__drainer{fill:none;stroke:var(--calc-muted);stroke-width:.75;opacity:.7}
.slab-preview__drainer-groove{fill:none;stroke:var(--calc-muted);stroke-width:.75;stroke-linecap:round;opacity:.5}
.slab-preview__hole-label{fill:var(--stone-muted);font-size:12px}
.slab-preview__hit{fill:transparent;cursor:none;touch-action:none}
.slab-preview__hit:focus-visible{outline:0;stroke:var(--color-ink);stroke-width:2}
.slab-preview__stage.is-dragging{cursor:none}
.slab-preview__dimension{fill:none;stroke:var(--calc-dimension);stroke-width:1}
.slab-preview__dimension-label{fill:var(--calc-dimension);font-size:12px}
.slab-preview__outline--inactive{stroke:var(--calc-slab-line)}

.calc-panel{display:flex;flex-direction:column;gap:2.25rem}
.calc-panel__blats{display:flex;flex-direction:column;gap:.75rem}
.calc-panel__add{display:flex;align-items:center;justify-content:center;gap:.25rem;width:100%;height:3.25rem;padding:0;border:0;background:var(--stone-active);color:var(--calc-ink);font-size:max(14px,.875rem);font-weight:500;line-height:1.25rem;cursor:pointer;transition:background-color .3s}
.calc-panel__add img{width:1.25rem;height:1.25rem}
.calc-panel__add:is(:hover,:focus-visible){background:var(--stone-border)}
.calc-blat{display:flex;flex-direction:column;gap:1.25rem}
/* Otwarty blat nad kolejnym: dodatkowe 36 px pod opcjami (20 + 16 px, klient), żeby nie dochodziły do nagłówka następnego blatu */
.calc-blat.is-open:not(:last-child){padding-bottom:2.25rem}
.calc-blat__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--calc-line);white-space:nowrap}
.calc-blat.is-open .calc-blat__head{height:2.25rem;padding-bottom:0;border-bottom:0}
.calc-blat__name{font-size:1.25rem;font-weight:500;line-height:1.8125rem;color:var(--color-ink)}
.calc-blat__number{font-size:max(14px,.875rem);font-weight:400;color:var(--calc-muted)}
.calc-actions{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem}
.calc-link{padding:0;border:0;background:none;font-size:max(12px,.75rem);line-height:1.0625rem;color:var(--calc-muted);white-space:nowrap;cursor:pointer;transition:color .3s}
.calc-link:is(:hover,:focus-visible){color:var(--color-accent)}
/* Usuń blat / element / zlew (Figma 948:7107, klient 2026-10-29): plakietka z ikoną kosza, tło 10% koloru błędu, tekst 12/17 */
.calc-link--danger{display:inline-flex;align-items:center;gap:2px;padding:4px 6px 4px 4px;background:color-mix(in srgb,var(--color-danger) 10%,transparent);color:var(--color-danger);transition:background-color .3s}
.calc-link--danger:is(:hover,:focus-visible){color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 18%,transparent)}
.calc-link--danger[hidden]{display:none}
.calc-link__icon{flex-shrink:0;width:16px;height:16px;background:currentColor;mask:url('/assets/img/kalkulator/usun.svg?v=728e854f8b') center / contain no-repeat}
.calc-blat__body{display:flex;flex-direction:column;gap:1.75rem}
.calc-blat__main{display:flex;flex-direction:column;gap:1rem}
.calc-choice{display:flex;flex-direction:column;gap:var(--calc-control-gap)}
.calc-choice__label{font-size:max(12px,.75rem);line-height:normal;color:var(--calc-muted)}
.calc-choice__options{display:flex;gap:1rem}
/* Blat: przyciski w stałych 3 kolumnach, żeby pojedynczy przycisk (np. otwór przy okrągłym blacie) się nie rozciągał */
.calc-blat .calc-choice__options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Wysokości (klient, 2026-09-29): przyciski wyboru (kształt, podświetlenie, wycięcia) i „Dodaj kolejny blat” 52 px; pola, listy i suwaki 48 px */
.calc-option{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;gap:.5rem;min-width:0;height:3.25rem;padding:0;border:0;background:var(--stone-surface);color:var(--calc-ink);font-size:max(14px,.875rem);font-weight:500;line-height:1.25rem;white-space:nowrap;cursor:pointer;transition:background-color .3s}
.calc-option img{width:1.5rem;height:1.5rem}
.calc-option:is(:hover,:focus-visible,[aria-pressed=true]){background:var(--stone-active)}
.calc-option:is([aria-pressed=true],.is-used)::after{content:"";position:absolute;right:-2px;top:-2px;width:.5rem;height:.5rem;background:var(--color-accent)}
.calc-option--add{line-height:1.1875rem}
.calc-option--add img{width:1.3125rem;height:1.3125rem}
/* Pola w stałych kolumnach (3, wymiary wycięcia 4) na szerokość panelu, odstęp 16 px jak między przyciskami opcji: gdy w rzędzie
   jest mniej pól (np. okrągły blat, cały slab), nie rozciągają się (jak w Figmie). Próba z polem formularza kontaktowego cofnięta 2026-09-29 */
.calc-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:1rem}
.calc-fields--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Suwak w kolumnie 1/4 (umywalka w łazience): zajmuje miejsce obok wartości zamiast stałych 100 px */
.calc-fields--4 .calc-range__input{flex:1 1 auto;width:auto;min-width:0}
.calc-field{display:flex;flex-direction:column;gap:var(--calc-control-gap);min-width:0}
.calc-field__label{font-size:max(12px,.75rem);line-height:normal;color:var(--calc-muted)}
.calc-field__box{display:flex;align-items:center;justify-content:space-between;gap:.25rem;height:3rem;padding:0 .875rem;border:.5px solid var(--calc-line);background:var(--calc-field);transition:border-color .3s}
.calc-field__box:focus-within{outline:1px solid var(--color-ink);outline-offset:2px}
.calc-field.is-invalid .calc-field__box{border-color:var(--calc-field-error)}
.calc-field__input{width:100%;min-width:0;padding:0;border:0;background:none;color:var(--color-ink);font:1rem/1.4375rem var(--font-body);-moz-appearance:textfield;appearance:textfield}
.calc-field__input:focus{outline:0}
.calc-field__input::-webkit-inner-spin-button,.calc-field__input::-webkit-outer-spin-button{margin:0;appearance:none}
.calc-field__unit{flex-shrink:0;font-size:max(12px,.75rem);line-height:1.0625rem;color:var(--calc-muted)}
.calc-field__error{margin-top:-.25rem;font-size:max(10px,.625rem);line-height:normal;color:var(--color-waste)}
.calc-field__error:empty{display:none}
/* Informacja zamiast błędu (np. ociekacz nie mieści się na blacie) */
.calc-field__error.is-note{color:var(--stone-muted)}
.calc-select{position:relative;display:block}
.calc-select select{width:100%;height:3rem;padding:0 2.25rem 0 .875rem;border:.5px solid var(--calc-line);border-radius:0;background:var(--calc-field);color:var(--color-ink);font:max(14px,.875rem)/1.4375rem var(--font-body);appearance:none;cursor:pointer}
.calc-select select:focus-visible{outline:1px solid var(--color-ink);outline-offset:2px}
.calc-select::after{content:"";position:absolute;right:.875rem;top:50%;width:1rem;height:1rem;background:url('/assets/img/kamien/select-chevron.svg?v=a00603c348') center / contain no-repeat;transform:translateY(-50%);pointer-events:none}
.calc-range{display:flex;align-items:center;justify-content:space-between;gap:.5rem;height:3rem}
.calc-range__input{width:6.25rem;height:2rem;margin:0;padding:0;border:0;background:transparent;appearance:none;cursor:pointer}
.calc-range__input::-webkit-slider-runnable-track{height:4px;background:var(--stone-active)}
.calc-range__input::-moz-range-track{height:4px;background:var(--stone-active)}
.calc-range__input::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:calc(2px - .5rem);border:1px solid var(--calc-field);border-radius:0;background:var(--stone-active);appearance:none}
.calc-range__input::-moz-range-thumb{box-sizing:border-box;width:1rem;height:1rem;border:1px solid var(--calc-field);border-radius:0;background:var(--stone-active)}
.calc-range__input:focus-visible{outline:1px solid var(--color-ink);outline-offset:4px}
.calc-range__value{font-size:1rem;line-height:1.4375rem;color:var(--color-ink);white-space:nowrap}
.calc-range__unit{font-size:max(14px,.875rem);color:var(--calc-muted)}
.calc-holes{display:flex;flex-direction:column;gap:1.25rem}
/* Odstęp między otworami 24 px (Figma 165:69) */
.calc-holes__list{display:flex;flex-direction:column;gap:1.5rem}
.calc-holes__list:empty{display:none}
.calc-hole{display:flex;flex-direction:column;gap:1rem;padding-bottom:1.5rem;border-bottom:1px solid var(--calc-line)}
.calc-hole:last-child{padding-bottom:0;border-bottom:0}
.calc-hole__head{display:flex;align-items:center;justify-content:space-between;height:1.5rem}
.calc-hole__name{display:flex;align-items:center;gap:.5rem;font-size:max(14px,.875rem);font-weight:500;line-height:1.25rem;color:var(--calc-ink);white-space:nowrap}
.calc-hole__name img{width:1.3125rem;height:1.3125rem}
.calc-hole__body{display:flex;flex-direction:column;gap:1rem}
/* Rodzaj zlewu (Figma 165:69): etykieta 12 px, pod nią „Zlew kamienny” 16 px i przełącznik 38 × 20 (jasne tło, kwadrat 16 px:
   wyłączony szary z lewej, włączony pomarańczowy z prawej) */
.calc-sink-type{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.calc-sink-type__label{font-size:max(12px,.75rem);line-height:1.1875rem;color:var(--calc-muted)}
.calc-switch{position:relative;display:flex;align-items:center;gap:.75rem;font-size:1rem;line-height:1.1875rem;color:var(--color-ink);cursor:pointer}
.calc-switch__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.calc-switch__track{position:relative;flex-shrink:0;width:2.375rem;height:1.25rem;background:var(--calc-field)}
.calc-switch__track::after{content:"";position:absolute;left:.125rem;top:.125rem;width:1rem;height:1rem;background:var(--calc-muted);transition:translate .3s var(--ease-out),background-color .3s}
.calc-switch__input:checked + .calc-switch__track::after,.calc-switch[aria-checked=true] .calc-switch__track::after{translate:1.125rem 0;background:var(--color-accent)}
.calc-switch__input:focus-visible + .calc-switch__track{outline:1px solid var(--color-ink);outline-offset:2px}

.calc-summary{display:flex;flex-direction:column;justify-content:center;gap:1.5rem;padding:1.25rem;background:var(--stone-surface)}
.calc-summary__top{display:flex;flex-direction:column;gap:1.25rem;white-space:nowrap}
.calc-summary__head{display:flex;align-items:center;justify-content:space-between}
.calc-summary__title{margin:0;font:300 1.5rem/normal var(--font-display);letter-spacing:-.03em;color:var(--color-ink)}
.calc-summary__count{font-size:max(12px,.75rem);line-height:normal;text-transform:uppercase;color:var(--calc-muted)}
.calc-summary__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;margin:0}
.calc-summary__item{display:flex;flex-direction:column;gap:.5rem;line-height:normal;color:var(--calc-muted)}
.calc-summary__item dt{font-size:max(12px,.75rem)}
.calc-summary__item dd{margin:0;font-size:1rem;font-weight:500}
.calc-summary__item--waste dd{color:var(--color-waste)}
.calc-summary__bottom{display:flex;flex-direction:column;gap:.75rem}
.calc-summary__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.calc-summary__total{display:flex;flex-direction:column;gap:.25rem;height:4.1875rem;font-weight:500;white-space:nowrap}
.calc-summary__label{font-size:max(10px,.625rem);line-height:normal;text-transform:uppercase;color:var(--calc-muted)}
.calc-summary__value{display:flex;align-items:flex-end;gap:.5rem}
.calc-summary__amount{font-size:1.875rem;line-height:normal;color:var(--calc-ink)}
.calc-summary__vat{font-size:1rem;line-height:1.875rem;color:var(--calc-muted)}
.calc-summary__button{gap:.5rem;color:var(--color-on-dark)}
/* Cena bez przycisku podsumowania (np. wyspy): pole ceny bez stałej wysokości i uwaga 0,75rem pod nią, jak pod wierszem z przyciskiem (klient 2026-10-23) */
.calc-summary__row--solo .calc-summary__total{height:auto}
.calc-summary__row--solo+.calc-summary__note{margin-top:-.75rem}
.calc-summary__note{font-size:max(12px,.75rem);font-weight:300;line-height:1.5;color:color-mix(in srgb,var(--calc-muted) 88%,var(--color-bg))}
/* „[ rozwiń ]” / „[ zwiń ]” uwagi zwiniętej do dwóch linii (modules/zwijanie-tekstu.js), kolor #171717 (klient 2026-10-13) */
.text-clamp__toggle{padding:0;border:0;background:none;font:inherit;color:var(--calc-note-link);white-space:nowrap;cursor:pointer;transition:color .3s}
.text-clamp__toggle:is(:hover,:focus-visible){color:var(--color-accent)}
/* Wykorzystanie slabu (Figma 771:1256): pole 12 px, pasek 4 px w równych częściach na progi, znaczniki rabatu na granicach części
   (szkło jak tagi kafli), bieżący próg z pomarańczowym kwadratem; ikony maską w kolorze tekstu */
.calc-usage{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;background:var(--stone-active);white-space:normal}
.calc-usage[hidden]{display:none}
.calc-usage__bar{position:relative;height:1.5rem}
.calc-usage__track{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;overflow:hidden;background:var(--color-bg)}
.calc-usage__fill{position:absolute;inset:0;background:var(--color-accent);transform:scaleX(var(--calc-usage-pos,0));transform-origin:left;transition:transform .6s var(--ease-out)}
.calc-usage__tag{position:absolute;top:0;left:var(--calc-usage-at);display:flex;align-items:center;gap:.25rem;padding:.25rem;font-size:max(12px,.75rem);font-weight:500;line-height:1rem;white-space:nowrap;color:var(--calc-ink);background:color-mix(in srgb,var(--stone-surface) 50%,transparent);backdrop-filter:blur(10px);transform:translateX(-50%)}
.calc-usage__tag.is-current::after{content:'';position:absolute;top:-1px;right:-1px;width:6px;height:6px;background:var(--color-accent)}
.calc-usage__icon{flex:none;width:1rem;height:1rem;background:currentColor;mask:url("/assets/img/kalkulator/rabat.svg?v=7d17610741") center / contain no-repeat}
.calc-usage__info{display:flex;flex-direction:column;gap:.25rem}
/* Tekst 15 px i uwaga 13 px (klient 2026-10-13: o 1 px większe niż w projekcie) */
.calc-usage__text{font-size:max(15px,.9375rem);font-weight:500;line-height:normal;color:var(--calc-ink)}
.calc-usage__note{display:flex;align-items:center;gap:.25rem;font-size:max(13px,.8125rem);line-height:1rem;color:var(--calc-muted)}
/* Owalny stolik (Figma 772:1317) 22 px, wyśrodkowany z tekstem i obniżony o 1 px (klient 2026-10-13) */
.calc-usage__icon--furniture{width:1.375rem;height:1.375rem;translate:0 1px;mask-image:url("/assets/img/kalkulator/mebel.svg?v=91d438da2b")}
@media(prefers-reduced-motion:reduce){.calc-usage__fill{transition:none}}
/* Telefon: progi rozsunięte równo od 18% do 82% paska (wartości z kalkulator.php), wypełnienie przeliczone tak samo, żeby dochodziło do progu przy jego osiągnięciu (klient 2026-10-23) */
@media(max-width:767px){
:root[data-mobile] .calc-usage__tag{left:calc(var(--calc-usage-at) * var(--calc-usage-spread,1) + var(--calc-usage-shift,0) * 100%)}
:root[data-mobile] .calc-usage__fill{transform:scaleX(clamp(0,calc(var(--calc-usage-pos,0) * var(--calc-usage-spread,1) + var(--calc-usage-shift,0)),1))}
}
:root[data-theme=dark] :is(.calc-option,.calc-hole__name,.calc-panel__add) img{filter:invert(.92)}
:root.is-theme-changing :is(.calc-option,.calc-hole__name,.calc-panel__add) img{transition:filter var(--theme-duration) var(--theme-ease)}
@media(prefers-reduced-motion:reduce){.slab-preview__canvas,.calculator__steps[data-steps-ready]::before,.calc-panel__add,.calc-link,.calc-option,.calc-field__box,.calc-switch__track::after{transition:none}}
/* Etap 2, podsumowanie i dane (Figma 510:1071; układ 3/5 i 2/5 jak w etapie 1): po lewej „Edytuj projekt” i karty blatów z cechami
   (tylko wybrane opcje, siatka 5 kolumn) oraz kółkiem z fragmentem płyty; po prawej wycena (ta sama karta co w etapie 1, bez przycisku) i formularz */
.calc-config{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}
.calc-config__back{display:flex;align-items:center;gap:.25rem;padding:0;border:0;background:none;font-size:max(12px,.75rem);line-height:normal;text-transform:uppercase;color:var(--calc-muted);cursor:pointer;transition:color .3s}
/* Ikona w kolorze tekstu (maska), więc przy hover cały przycisk jest pomarańczowy */
.calc-config__back-icon{width:1rem;height:1rem;background:currentColor;mask:url("/assets/img/kontakt/wstecz.svg?v=29031319d7") center / contain no-repeat}
.calc-config__back:is(:hover,:focus-visible){color:var(--color-accent)}
.calc-config__list{display:flex;flex-direction:column;gap:1.75rem;width:100%}
/* Informacje dodatkowe (Figma 772:1318): 60 px pod konfiguracją (2rem odstępu kolumny + 1,75rem), etykieta 8 px nad polem wiadomości;
   szerokość jak pole wiadomości w sekcji kontaktu (kontakt_formularz.css: dwie kolumny z odstępem 5rem, formularz z paddingiem 2rem):
   połowa treści sekcji minus 6,5rem (klient 2026-10-13) */
.calc-info{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:calc(50cqw - 6.5rem);margin-top:1.75rem}
.calc-config__blat{display:flex;flex-direction:column;gap:1rem;padding-bottom:1.75rem;border-bottom:1px solid var(--calc-line)}
.calc-config__blat:last-child{padding-bottom:0;border-bottom:0}
.calc-config__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;white-space:nowrap}
.calc-config__body{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.calc-config__facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;width:100%;margin:0}
.calc-config__fact{display:flex;flex-direction:column;gap:.5rem;min-width:0;line-height:normal}
.calc-config__fact dt{font-size:max(12px,.75rem);color:var(--calc-muted)}
.calc-config__fact dd{margin:0;font-size:1rem;color:var(--color-ink);white-space:nowrap}
/* Rysunek blatu w skali 0,1rem na cm (wszystkie blaty w tej samej skali), obrys i linie o stałej grubości niezależnie od skali */
.calc-config__drawing{display:block;max-width:100%;height:auto;overflow:visible}
.calc-config__drawing :is(path,image){vector-effect:non-scaling-stroke}
.calc-config__outline{fill:none;stroke:var(--calc-muted);stroke-width:1}
.calc-send{display:flex;flex-direction:column;gap:.625rem}
.calculator.is-summary .calc-summary__button{display:none}
/* Pasek wykorzystania slabu tylko przy projektowaniu, bez niego w podsumowaniu zamówienia (klient 2026-10-13) */
.calculator.is-summary .calc-usage{display:none}
.calculator.is-summary .calculator__mood{display:none}
/* „Przejdź do podsumowania” nieaktywny, dopóki któryś blat ma błąd albo nie ma czego wycenić */
.calc-summary__button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

.calculator .island-stones{display:grid;gap:.75rem}
.calculator[data-calculator] .island-stones__selected,.calculator[data-calculator] .island-stones__grid{gap:1rem}
.island-stone .calc-stone__caption{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.calc-stone__caption>span{flex:none;padding:0}
.calc-stone__caption .calc-stone__kind{font-size:max(12px,.75rem);font-weight:400;line-height:1.0625rem;color:var(--calc-muted)}
.calc-blat__name:has(.calc-blat__kind){display:flex;align-items:center;gap:.25rem}
/* Tło z tokenu (w trybie jasnym #e9e7e5 jak wcześniej, w ciemnym ciemne): wpisane na sztywno dawało jasny napis na jasnym tle */
.calc-blat__kind{display:inline-block;margin-left:.25rem;padding:.25rem .5rem;font-size:max(12px,.75rem);font-weight:400;line-height:1.0625rem;color:var(--calc-ink);background:var(--stone-surface)}
.calculator__work>.slab-preview{position:sticky;top:6rem}
@media(max-width:900px){.calculator__work>.slab-preview{position:relative;top:auto}}

.calc-panel__add--mirror img{width:1.5rem;height:1.5rem}
.calc-panel__add:disabled{opacity:.5;cursor:not-allowed}

.calc-panel__add--plain{background:transparent;border:1px solid var(--calc-line)}

.calc-panel__blats:has(.calc-blat:last-child.is-open) + .calc-panel__add--plain{margin-top:-1.5rem}

.slab-preview__drag-hint{display:none}
.slab-preview__drag-hints{position:absolute;inset:0;pointer-events:none}
.calc-light-preview{margin-top:.5rem}
.calc-light-preview__controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:.75rem}
.calc-light-preview__toggle{width:100%;min-width:0;min-height:2.75rem;padding:0;border:0;background:none;font-family:var(--font-body);text-align:left}
.calc-light-preview__field{display:flex;flex-direction:column;gap:var(--calc-control-gap);min-width:0}
.calc-light-preview__field:has(input[hidden]){visibility:hidden;pointer-events:none}
.calc-light-preview__field > :is(.calc-choice__label,.mood__label){min-height:1rem;line-height:1rem}
.calc-light-preview .mood__picker{min-width:0;width:100%;height:2.75rem;margin-block:0}

/* Telefon: wymiar płyty w nagłówku, pełna szerokość slabu, bez szklanego kursora. */
@media(width < 1100px){
:root[data-mobile] .calculator{--calc-switch-bg:var(--stone-surface);padding:4.5rem var(--space-edge) 0}
:root[data-mobile] .calculator__heading{margin-bottom:2rem;font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
:root[data-mobile] .calculator__bar{flex-direction:column;align-items:stretch;gap:1rem;margin-bottom:1.5rem}
:root[data-mobile] .calculator__steps{flex:none;gap:0}
:root[data-mobile] .calculator__steps::before{box-shadow:none}
/* Dłuższa nazwa etapu (np. „Wymiary i podświetlenie” na ścianach) w dwóch liniach zamiast wielokropka; oba etapy tej samej wysokości */
:root[data-mobile] .calculator__step{height:auto;min-height:3.25rem;padding-right:.25rem}
:root[data-mobile] .calculator__step-title{font-size:.875rem;white-space:normal;letter-spacing:-.025em}
:root[data-mobile] .calculator__mood{gap:1.25rem;min-height:2.25rem}
:root[data-mobile] .calculator__mood .mood__doodle{right:5.275rem;top:0;bottom:auto}
:root[data-mobile] .calculator__view-controls{display:flex;align-items:center;gap:.5rem}
:root[data-mobile] .calculator.is-summary .calculator__view-controls{display:none}
:root[data-mobile] .calculator__view-controls .calculator__mood{flex:1;min-width:0;gap:.75rem}
:root[data-mobile] .calculator__view-controls .mood__field{flex:0 1 6.25rem;min-width:0}
:root[data-mobile] .calculator__view-controls .mood__picker{width:100%}
:root[data-mobile] .calculator__rotate{display:flex;align-items:center;justify-content:center;flex:0 0 7.625rem;gap:.25rem;height:2.25rem;padding:0 1rem;border:0;background:var(--stone-active);color:var(--color-ink);font:400 .875rem/1.4 var(--font-body);white-space:nowrap;cursor:pointer}
:root[data-mobile] .calculator__rotate img{flex:none;width:14px;height:14px}
:root[data-mobile] .calculator__rotate[aria-pressed=false] img{transform:scaleX(-1)}
:root[data-mobile][data-theme=dark] .calculator__rotate img{filter:invert(.85)}
:root[data-mobile] .calculator__work{flex-direction:column;align-items:stretch;gap:1.5rem}
:root[data-mobile] .calculator__work > :is(:first-child,:last-child){flex:none}
:root[data-mobile] .calculator__work>.slab-preview{position:relative;top:auto;margin-inline:0}
:root[data-mobile] .slab-preview{gap:.75rem;padding:.5rem}
:root[data-mobile] .slab-preview__sheets:not([hidden]) + .slab-preview__viewport{margin-top:0}
:root[data-mobile] .slab-preview__viewport.is-rotated{aspect-ratio:1 / var(--slab-ratio)}
:root[data-mobile] .slab-preview__viewport.is-rotated .slab-preview__board{position:absolute;top:0;left:100%;width:calc(100% * var(--slab-ratio));transform:rotate(90deg);transform-origin:0 0}
:root[data-mobile] .slab-preview .glass-cursor{display:none}
:root[data-mobile] .slab-preview__header{height:auto;gap:.75rem}
:root[data-mobile] [data-calc-sheet]{display:none}
:root[data-mobile] [data-calc-selected]{margin-left:auto}
:root[data-mobile] .slab-preview__stone{flex:1;width:auto;min-width:0;gap:.25rem;font-size:.625rem;line-height:normal}
:root[data-mobile] .calculator[data-calculator] .slab-preview__header{flex-wrap:wrap;row-gap:.25rem}
:root[data-mobile] .calculator[data-calculator] .slab-preview__stone{flex:1 1 auto;flex-wrap:wrap}
:root[data-mobile] .slab-preview__size{text-transform:none;white-space:nowrap}
:root[data-mobile] .slab-preview__hit{cursor:pointer}
:root[data-mobile] .slab-preview__stage :is(path,rect,circle){vector-effect:non-scaling-stroke}
:root[data-mobile] .slab-preview__hole-label{font-size:22px}
:root[data-mobile] .slab-preview__controls{gap:.75rem}
:root[data-mobile] .slab-preview__legend{flex:1;min-width:0;flex-wrap:wrap;gap:.25rem .75rem}
:root[data-mobile] .slab-preview__legend-item{font-size:.75rem}
:root[data-mobile] .slab-preview__legend-item img{width:.75rem;height:.75rem}
:root[data-mobile] .slab-preview__legend-item--margin img{width:.625rem;height:.625rem;margin:0}
:root[data-mobile] .slab-preview__swatch{width:.625rem;height:.625rem}
:root[data-mobile] .slab-preview__drag-hint:not([hidden]){position:absolute;display:grid;place-items:center;width:21px;height:21px;background:#170707;transform:translate(calc(-100% - 8px),calc(-100% - 8px));pointer-events:none}
:root[data-mobile] .slab-preview__drag-hint img{width:16px;height:16px}
/* Mały element (np. ściana zlewu kamiennego): ikona o 30% mniejsza, przy prawym brzegu i w połowie wysokości (położenie w kalkulator.js) */
:root[data-mobile] .slab-preview__drag-hint.is-small:not([hidden]){width:15px;height:15px;transform:translate(calc(-100% - 4px),-50%)}
:root[data-mobile] .slab-preview__drag-hint.is-small img{width:11px;height:11px}
:root[data-mobile] .calc-light-preview__controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding-top:0}
:root[data-mobile] .calc-light-preview .mood__picker{width:100%;margin-block:0}
:root[data-mobile] .calc-light-preview__field--power{display:none}
:root[data-mobile] .calc-blat__name{min-width:0;flex-wrap:wrap;row-gap:0;font-size:1.125rem;white-space:normal}
:root[data-mobile] .calc-blat__number{font-size:1rem;white-space:nowrap}
:root[data-mobile] .calc-blat.is-open .calc-blat__head{height:auto;min-height:2.25rem}
:root[data-mobile] .calc-blat__kind{display:none}
:root[data-mobile] .calc-blat .calc-choice__options{gap:.5rem}
/* Napis może się złamać: wtedy modules/dopasuj-siatke.js zabiera kolumnę i przycisk spada do kolejnego rzędu (klient), więc napisy stoją w jednej linii */
:root[data-mobile] .calc-option{gap:.25rem;height:3.25rem;padding:0 .375rem;font-size:.8125rem;white-space:normal}
:root[data-mobile] .calc-option img{width:1.25rem;height:1.25rem}
:root[data-mobile] :is(.calc-fields,.calc-fields--4){grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .5rem}
:root[data-mobile] .calc-field__box,:root[data-mobile] .calc-select select{height:3.25rem}
:root[data-mobile] .calc-range{justify-content:flex-start;gap:.75rem;height:2.625rem}
:root[data-mobile] .calc-hole__name img{width:1.5rem;height:1.5rem}
:root[data-mobile] .calc-switch{font-size:.875rem}
:root[data-mobile] .calc-switch__track{background:var(--calc-switch-bg)}
:root[data-mobile] .calc-panel__add{height:3.25rem}
/* Karta wyceny na telefonie (klient 2026-10-13): góra i dół 18 px (2 px mniej), boki 16 px (4 px mniej); wspólna dla wszystkich kalkulatorów */
:root[data-mobile] .calc-summary{gap:1.25rem;padding:1.125rem 1rem}
:root[data-mobile] .calc-summary__top{white-space:normal}
:root[data-mobile] .calc-summary__count{display:none}
:root[data-mobile] .calc-summary__grid{gap:.75rem}
:root[data-mobile] :is(.calc-summary__item,.calc-config__fact){gap:.25rem}
:root[data-mobile] :is(.calc-summary__item,.calc-config__fact) dt{font-size:.75rem;color:var(--calc-muted)}
:root[data-mobile] :is(.calc-summary__item,.calc-config__fact) dd{font-size:1rem;font-weight:400;letter-spacing:normal;white-space:normal}
:root[data-mobile] .calc-summary__item:not(.calc-summary__item--waste) dd{color:var(--color-ink)}
:root[data-mobile] .calc-summary__row{flex-direction:column;align-items:stretch;gap:1rem}
:root[data-mobile] .calc-summary__total{height:auto}
:root[data-mobile] .calc-summary__amount{font-size:1.75rem}
:root[data-mobile] .calc-summary__note{line-height:1.3}
:root[data-mobile] .calc-summary__row--solo+.calc-summary__note{margin-top:-.5rem}
/* Telefon: informacje dodatkowe na całą szerokość kolumny, jak pozostałe elementy podsumowania */
:root[data-mobile] .calc-info{max-width:none}
/* Pasek wykorzystania na telefonie: tekst 14 px jak w projekcie z letter spacingiem -0,03em (klient 2026-10-13; w jednej linii mieści się
   od ok. 430 px szerokości, na węższych się zawija), uwaga 13 px z interlinią 120%; stolik 20 px u góry, środkiem rysunku
   (10,2 px od góry ikony) na środku małych liter pierwszej linii (9,3 px od góry linii 15,6 px przy Satoshi 13 px), czyli 1 px wyżej niż linia */
:root[data-mobile] .calc-usage__text{font-size:max(14px,.875rem);letter-spacing:-.03em}
:root[data-mobile] .calc-usage__note{align-items:flex-start;line-height:1.2}
:root[data-mobile] .calc-usage__icon--furniture{width:1.25rem;height:1.25rem;margin-top:-1px;translate:none}
/* Cechy blatu w trzech kolumnach; dłuższe podpisy mogą się zawijać. */
:root[data-mobile] .calc-config__facts{--calc-grid-fixed:1;grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:359px){:root[data-mobile] .calculator__step{padding-inline:.5rem .125rem}:root[data-mobile] .calculator__step-title{letter-spacing:-.045em}}

.gallery{display:flex;flex-direction:column;gap:2.5rem;padding:8rem var(--space-edge);background:var(--color-bg);color:var(--color-ink)}
/* Trzy równe kolumny, odstęp 16 px; ramka w proporcji z Figmy (442,67 × 541) przy każdej szerokości */
.gallery__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
/* Ramka to link do lightboxa; nad nią szklany kursor z plusem (components/glass-cursor.css, kursor myszy ukryty) */
.gallery__frame{position:relative;display:block;aspect-ratio:1328 / 1623;overflow:hidden;background:var(--stone-surface)}
.gallery__frame:focus-visible{outline:1px solid var(--color-ink);outline-offset:3px}
.gallery__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}

/* Telefon (Figma 648:1548; html[data-mobile], do 767 px): nagłówek 30 px, zdjęcia 280 × 342 co 12 px w karuzeli
   do prawej krawędzi ekranu (przewijanie w bok z przyciąganiem), na zdjęciu stały plus 28 px zamiast szklanego kursora; pod karuzelą
   wspólne strzałki i pasek postępu (components/karuzela-mobilna.css) */
@media(width < 1100px){
:root[data-mobile] .gallery{gap:1.5rem;padding:4.5rem 0 4.5rem var(--space-edge)}
:root[data-mobile] .gallery .section-header{padding-right:var(--space-edge)}
:root[data-mobile] .gallery__grid{display:flex;gap:.75rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-right:var(--space-edge);scrollbar-width:none}
:root[data-mobile] .gallery__grid::-webkit-scrollbar{display:none}
:root[data-mobile] .gallery__frame{flex:0 0 17.5rem;aspect-ratio:280 / 342;scroll-snap-align:start}
:root[data-mobile] .gallery .glass-cursor{display:none}
:root[data-mobile] .gallery__frame::after{content:'';position:absolute;top:.8125rem;right:.75rem;width:1.75rem;height:1.75rem;background:linear-gradient(#b0b0b0,#b0b0b0) center / .875rem 1.3px no-repeat,linear-gradient(#b0b0b0,#b0b0b0) center / 1.3px .875rem no-repeat,rgb(23 7 7 / .8);pointer-events:none}
:root[data-mobile] .gallery .carousel-nav{margin-right:var(--space-edge)}
}

.steps{padding:8rem 4rem;background:var(--color-section-dark);color:var(--color-on-dark)}
.steps__heading{margin:0 0 6.25rem;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.1875rem}
.steps__body{position:relative;isolation:isolate}
.steps__indicator{position:absolute;left:0;top:0;z-index:0;width:100%;height:5rem;background:var(--color-surface-dark);pointer-events:none;will-change:transform}
.steps__list{position:relative;z-index:1;display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}
.steps__toggle{display:block;width:100%;padding:1.625rem 1rem;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.steps__toggle:focus-visible{outline-offset:-2px}
.steps__shift{position:relative;display:flex;align-items:center;transition:translate .5s var(--ease-ui)}
.steps__dot{position:absolute;left:-1.25rem;top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;background:var(--color-accent);scale:0;rotate:-45deg;transition:scale .5s var(--ease-ui),rotate .5s var(--ease-ui)}
.steps__number{flex-shrink:0;min-width:1.125rem;margin-right:2.5rem;font-size:max(14px,.875rem);line-height:1.75rem;letter-spacing:-.02625rem;color:var(--color-muted)}
.steps__row{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;width:52.125rem;min-width:0}
.steps__title{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.045rem;white-space:nowrap}
.steps__more{flex-shrink:0;font-size:max(14px,.875rem);letter-spacing:-.02625rem;color:var(--color-muted);opacity:0;transition:opacity .35s var(--ease-out)}
.steps__more-window{display:block;height:1.75rem;overflow:hidden}
.steps__more-line{display:block;line-height:1.75rem;text-align:right;white-space:nowrap;transition:transform .45s var(--ease-out)}
.steps:not([data-ready]) .steps__more{display:none}
.steps__item:is(.is-highlighted,.is-open) .steps__more{opacity:1}
.steps__item.is-open .steps__more-line{transform:translateY(-100%)}
.steps__item.is-highlighted :is(.steps__shift,.steps__description){translate:1.25rem 0}
.steps__item.is-highlighted .steps__dot{scale:1;rotate:0deg}
.steps__panel{overflow:hidden}
.steps__description{max-width:32.875rem;padding:.375rem 0 2.5rem 4.625rem;font-size:1rem;line-height:1.625rem;color:var(--color-text-soft);transition:translate .5s var(--ease-ui)}
.steps__media{position:absolute;right:8rem;top:0;z-index:2;width:12.5rem;height:13.75rem;overflow:hidden;background:var(--color-surface-dark);transform:translate3d(0,-4.375rem,0);pointer-events:none}
.steps__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden;will-change:transform}
.steps__image.is-current{visibility:visible}
@media(prefers-reduced-motion:reduce){.steps__shift,.steps__dot,.steps__more,.steps__more-line,.steps__description{transition:none}}
/* Strony na skali 1680 (skalowanie.css, html[data-scale]): tło na całą szerokość, treść w pudełku strony, większe zdjęcie (wygląd jak na stronie głównej) */
html[data-scale] .steps{padding-inline:calc((100% - var(--page-box)) / 2 + 4rem)}
html[data-scale] .steps__media{width:15.625rem;height:17.1875rem}

/* Telefon: akordeon bez przypinania sekcji i przesuwania treści. */
@media(max-width:767px){
:root[data-mobile] .steps{padding:4.75rem var(--space-edge) 1.5rem}
:root[data-mobile] .steps__stage{position:static}
:root[data-mobile] :is(.steps__dot,.steps__indicator){display:none}
:root[data-mobile] .steps__item.is-highlighted :is(.steps__shift,.steps__description){translate:none}
:root[data-mobile] .steps__item.is-open :is(.steps__toggle,.steps__panel){background:var(--color-surface-dark)}
:root[data-mobile] .steps__item.is-open .steps__number{color:var(--color-accent)}
:root[data-mobile] .steps__heading{margin:0 0 2rem;font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
:root[data-mobile] .steps__body{display:flex;flex-direction:column;gap:2rem}
:root[data-mobile] .steps__media{position:relative;right:auto;top:auto;order:-1;width:100%;height:12.5rem;transform:none}
/* Zdjęcie nad tytułem otwartego etapu (etapy_realizacji.js, data-step-slot): pod nim 2rem jak nad listą, nad nim 2rem od poprzedniej karty */
:root[data-mobile] .steps__slot{overflow:hidden}
:root[data-mobile] .steps__slot .steps__media{margin-bottom:2rem}
:root[data-mobile] .steps__item:not(:first-child) .steps__slot .steps__media{margin-top:1.5rem}
:root[data-mobile] .steps__toggle{padding:1rem}
:root[data-mobile] .steps__number{min-width:.9375rem;margin-right:.75rem;font-size:.75rem;line-height:1.75rem}
:root[data-mobile] .steps__row{flex:1;width:auto;gap:.75rem}
:root[data-mobile] .steps__title{font-size:1.125rem;line-height:1.4375rem;letter-spacing:-.03375rem;white-space:normal}
:root[data-mobile] .steps__more{font-size:.75rem;opacity:1}
:root[data-mobile] .steps__description{padding:.25rem 2.25rem 1.5rem 2.6875rem}
}

/* Tablet (768-1099 px, html[data-mobile]; klient 2026-10-21: reszta strony na układzie telefonu, etapy w układzie desktopu): lista
   z numerami i podświetleniem, zdjęcie przy prawej krawędzi obok listy; rozmiary dobrane do jednostki tabletu (18-20 px, skalowanie.css) */
@media(min-width:768px) and (width < 1100px){
html[data-scale][data-mobile] .steps{padding:5rem var(--space-edge)}
:root[data-mobile] .steps__heading{margin:0 0 3rem;font-size:2rem;line-height:2.25rem;letter-spacing:-.1rem}
:root[data-mobile] .steps__list{margin-right:11rem}
:root[data-mobile] .steps__toggle{padding:1.125rem 1rem}
:root[data-mobile] .steps__dot{left:-1rem}
:root[data-mobile] .steps__number{margin-right:1.5rem;font-size:.75rem;line-height:1.5rem}
:root[data-mobile] .steps__row{flex:1;width:auto;gap:1rem}
:root[data-mobile] .steps__title{font-size:1.125rem;line-height:1.5rem;letter-spacing:-.03rem;white-space:normal}
:root[data-mobile] .steps__more{font-size:.75rem}
:root[data-mobile] .steps__more-window,:root[data-mobile] .steps__more-line{height:1.5rem;line-height:1.5rem}
:root[data-mobile] .steps__description{max-width:none;padding:.25rem 1rem 1.5rem 3.25rem;font-size:.875rem;line-height:1.4}
html[data-scale][data-mobile] .steps__media{right:0;width:10rem;height:11rem;transform:translate3d(0,-2rem,0)}
}

.reviews{display:flex;gap:6.25rem;padding:8rem 0 8rem 4rem;overflow:hidden;background:var(--color-section-dark);color:var(--color-on-dark)}
.reviews__heading{flex-shrink:0;width:35.5rem;margin:0;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.1875rem}
.reviews__carousel{flex:1;min-width:0}
.reviews__track{position:relative;display:flex;align-items:start;gap:1rem;touch-action:pan-y}
.reviews:not([data-ready]) .reviews__track{overflow-x:auto;scrollbar-width:none}
.reviews[data-ready] .reviews__track{display:grid;cursor:grab}
.reviews__track.is-dragging{cursor:grabbing}
.reviews[data-ready] .reviews__card{grid-area:1 / 1}
.reviews__card{position:relative;display:flex;flex-direction:column;gap:2.25rem;flex:0 0 auto;width:31.25rem;padding:1.5rem;background:var(--color-surface-dark)}
.reviews__card::after{content:'';position:absolute;inset:0;z-index:2;background:var(--color-section-dark);opacity:var(--shade,0);pointer-events:none}
.reviews__summary,.reviews__facts,.reviews__body{display:flex;flex-direction:column;gap:1rem;margin:0}
.reviews__media{display:flex;gap:1rem}
.reviews__photo{position:relative;display:block;flex:1 1 0;height:13.75rem;cursor:zoom-in}
.reviews__photo:focus-visible{outline-offset:3px}
.reviews__frame{position:absolute;inset:0;overflow:hidden;background:var(--color-section-dark)}
.reviews__frame img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;transition:transform .8s var(--ease-out)}
.reviews__photo:is(:hover,:focus-visible) .reviews__frame img{transform:scale(1.04)}
.reviews__fact{display:flex;flex-direction:column;gap:.25rem}
.reviews__fact dt{font-size:max(10px,.625rem);text-transform:uppercase;color:var(--color-label)}
.reviews__fact dd{margin:0;font-size:max(14px,.875rem);color:var(--color-text-soft)}
.reviews__meta{display:flex;align-items:center;gap:2rem}
.reviews__rating{display:flex;align-items:center;gap:.75rem}
.reviews__stars{position:relative;display:block;width:6.5rem;height:1.5rem}
.reviews__stars::before{content:'';position:absolute;inset:0;background:var(--color-copper-dim);mask:url('/assets/img/opinie/gwiazdki.svg?v=67702e68c4') center / contain no-repeat}
.reviews__stars img{position:relative;width:100%;height:100%;clip-path:inset(0 calc((1 - var(--rating)) * 100%) 0 0)}
.reviews__score{font-family:var(--font-display);font-weight:300;font-size:1.5rem;line-height:1.5rem}
.reviews__scale{font-size:1.125rem;color:var(--color-quiet)}
.reviews__source{font-size:max(10px,.625rem);line-height:1.5rem;text-transform:uppercase;color:var(--color-quiet)}
.reviews__quote{margin:0;font-size:1.25rem;line-height:1.35}
.reviews__author{display:flex;flex-direction:column;gap:.25rem}
.reviews__name{font-size:max(14px,.875rem)}
.reviews__city{font-size:max(12px,.75rem);color:var(--color-label)}
.reviews__controls{display:flex;align-items:center;justify-content:space-between;margin-top:1.75rem;padding-right:4rem}
.reviews:not([data-ready]) .reviews__controls{visibility:hidden}
.reviews__dots{display:flex;gap:.25rem}
.reviews__dot{width:.8125rem;height:2px;background:var(--color-copper-dim);transition:width .6s var(--ease-ui),background-color .6s var(--ease-ui)}
.reviews__dot.is-active{width:2.125rem;background:var(--color-copper)}
.reviews__arrows{display:flex;gap:.9375rem}
.reviews__arrow{display:grid;place-items:center;width:3.25rem;height:3.25rem;border:0;padding:0;background:transparent;color:var(--color-copper);cursor:pointer;transition:transform .35s var(--ease-out)}
.reviews__arrow:is(:hover,:focus-visible){transform:scale(var(--button-hover-scale))}
.reviews__arrow-icon{width:1.75rem;height:1.1875rem;background:currentColor;mask:url('/assets/img/uslugi/strzalka-prawo-v2.svg?v=35fa48a52c') center / contain no-repeat}
.reviews__arrow--previous .reviews__arrow-icon{mask-image:url('/assets/img/uslugi/strzalka-lewo-v2.svg?v=22f4a4c0c6')}

/* Szklany plus */
.reviews__lens{position:absolute;top:.5rem;right:.5rem;z-index:1;width:2.5rem;height:2.5rem;pointer-events:none}
.reviews__lens-body{position:absolute;inset:0;overflow:hidden;background:rgb(23 7 7 / .5);backdrop-filter:blur(.125rem);-webkit-backdrop-filter:blur(.125rem);scale:.8;transition:scale .7s cubic-bezier(.34,1.56,.64,1)}
.reviews__lens-body[data-lens-ready]{background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.reviews__lens-body canvas{position:absolute;inset:0;width:100%;height:100%}
.reviews__photo:is(:hover,:focus-visible) .reviews__lens-body,.reviews__lens.is-cursor .reviews__lens-body{scale:1}
.reviews__media.has-lens-cursor,.reviews__media.has-lens-cursor .reviews__photo{cursor:none}
.reviews__track.is-dragging .reviews__media,.reviews__track.is-dragging .reviews__photo{cursor:grabbing}
.reviews__plus{position:absolute;inset:0}
.reviews__plus::before,.reviews__plus::after{content:'';position:absolute;left:50%;top:50%;width:1.25rem;height:.1171875rem;border-radius:1px;background:#e0cec8;translate:-50% -50%}
.reviews__plus::after{rotate:90deg}
@media(prefers-reduced-motion:reduce){.reviews__frame img,.reviews__lens-body,.reviews__dot,.reviews__arrow{transition:none}}
/* Strony na skali 1680 (skalowanie.css, html[data-scale]): nagłówek 1/3, karuzela 2/3 do krawędzi pudełka strony, minima drobnego tekstu (wygląd jak na stronie głównej) */
html[data-scale] .reviews{gap:0;padding-left:calc((100% - var(--page-box)) / 2 + 4rem);padding-right:calc((100% - var(--page-box)) / 2)}
html[data-scale] .reviews__heading{width:33.333333%;padding-right:3rem}
html[data-scale] .reviews__carousel{flex:0 0 66.666667%}
html[data-scale] :is(.reviews__fact dt,.reviews__source){font-size:max(10px,.625rem)}
html[data-scale] .reviews__city{font-size:max(12px,.75rem)}

/* Telefon (Figma 637:1394; html[data-mobile], do 767 px): nagłówek nad kartami, karty 300 px do prawej krawędzi ekranu (padding 12,
   zdjęcia 140 px wysokości, cytat 16 px), pod nimi strzałki po lewej i kreski po prawej */
@media(width < 1100px){
:root[data-mobile] .reviews{display:block;padding:4.5rem 0 4.5rem var(--space-edge)}
:root[data-mobile] .reviews__heading{width:auto;margin:0 0 1.5rem;padding-right:var(--space-edge);font-size:2rem;line-height:2.125rem;letter-spacing:-.1225rem}
:root[data-mobile] .reviews__track{gap:.75rem}
:root[data-mobile] .reviews__card{width:18.75rem;gap:1.5rem;padding:.75rem}
:root[data-mobile] .reviews__media{gap:.5rem}
:root[data-mobile] .reviews__photo{height:8.75rem}
:root[data-mobile] .reviews__body{gap:.75rem}
:root[data-mobile] .reviews__meta{justify-content:space-between;gap:1rem}
:root[data-mobile] .reviews__source{white-space:nowrap}
/* Ocena w karcie 276 px (Figma 637:1394): gwiazdki 84 × 20, odstęp 8, wynik 20 / 14 px */
:root[data-mobile] .reviews__rating{gap:.5rem}
:root[data-mobile] .reviews__stars{width:5.25rem;height:1.25rem}
:root[data-mobile] .reviews__score{font-size:1.25rem;line-height:1.25rem}
:root[data-mobile] .reviews__scale{font-size:.875rem}
:root[data-mobile] .reviews__quote{font-size:1rem;line-height:1.6}
:root[data-mobile] .reviews__controls{flex-direction:row-reverse;margin-top:1.75rem;padding-right:var(--space-edge)}
:root[data-mobile] .reviews__arrows{gap:1.25rem}
:root[data-mobile] .reviews__arrow{width:1.75rem;height:1.25rem}
}

/* Porozmawiajmy o Twoim projekcie (Figma 152:5978): nagłówek i doradca po lewej, formularz po prawej; siatka 1/2 + 1/2 z odstępem jak w tekst_zdjecie
   (klient: ten sam podział na wszystkich stronach, zmieniają się tylko treści); opis: strona-kamienia/KONTAKT-SPECYFIKACJA.md */
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5rem;padding:8rem var(--space-edge);background:var(--color-bg);color:var(--color-ink)}

.contact__intro{display:flex;flex-direction:column;justify-content:space-between;gap:3rem;min-width:0}

.contact__heading{margin:0;font-family:var(--font-display);font-weight:300;font-size:2.875rem;line-height:3.25rem;letter-spacing:-.08625rem}

/* Formularz na całą prawą połowę; doradca i formularz ze wspólnego components/contact-form.css (ten sam co w panelu z prawej) */
.contact__form{min-width:0}

/* Telefon (Figma 649:1429; html[data-mobile], do 767 px): nagłówek 30 px, doradca i pod nim formularz (wygląd z components/contact-form.css) */
@media(width < 1100px){
:root[data-mobile] .contact{grid-template-columns:minmax(0,1fr);gap:0;padding:4.5rem var(--space-edge)}
:root[data-mobile] .contact__intro{justify-content:flex-start;gap:2rem;padding-bottom:2.5rem}
:root[data-mobile] .contact__heading{font-size:2rem;line-height:2.125rem;letter-spacing:-.05625rem}
}
/* Kontakt jako pierwsza sekcja strony (podstrona Kontakt, Figma 702:1477): 120 px od góry, pod paskiem nawigacji */
@media(width < 1100px){
:root[data-mobile] main > .contact:first-child{padding-top:7.5rem}
}

/* Siatka 1/2 + 1/2 jak sekcja kontaktu i tekst_zdjecie (klient: ten sam podział na wszystkich stronach) */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:5rem;padding:8rem var(--space-edge) 0;background:var(--color-bg);color:var(--color-ink)}
/* FAQ jako ostatnia sekcja przed stopką (Kontakt, Figma 516:3626): taki sam odstęp pod listą jak nad nagłówkiem */
main > .faq:last-child{padding-bottom:8rem}
.faq__header{min-width:0}
.faq__list{display:flex;flex-direction:column;gap:.5rem;min-width:0;margin:0;padding:0;list-style:none}
.faq__title{margin:0;font:inherit}
.faq__toggle{display:flex;align-items:center;gap:2.5rem;width:100%;height:4.5rem;padding:1rem;border:0;background:var(--stone-surface);color:inherit;text-align:left;cursor:pointer}
.faq__toggle:focus-visible{outline-offset:-2px}
.faq__number{flex-shrink:0;font-size:max(14px,.875rem);line-height:1.75rem;letter-spacing:-.02625rem;color:var(--color-muted);transition:color .3s}
.faq__item.is-open .faq__number{color:var(--color-accent)}
.faq__row{display:flex;flex:1;min-width:0;align-items:center;justify-content:space-between;gap:1rem}
.faq__question{font-size:1.25rem;line-height:1.75rem;letter-spacing:-.0375rem;color:var(--color-ink)}
.faq__more{flex-shrink:0;height:1.0625rem;overflow:hidden;font-size:max(12px,.75rem);line-height:1.0625rem;color:var(--calc-muted);white-space:nowrap;transition:color .3s}
.faq__more-window{display:flex;flex-direction:column;align-items:flex-end;transition:transform .45s var(--ease-out)}
.faq__item.is-open .faq__more-window{transform:translateY(-50%)}
.faq__toggle:is(:hover,:focus-visible) .faq__more{color:var(--color-accent)}
.faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-ui)}
.faq__item.is-open .faq__panel{grid-template-rows:1fr}
.faq__panel-inner{min-height:0;overflow:hidden}
.faq__answer{padding:1rem 3.5rem 1.25rem 4.5rem;font-size:1rem;line-height:1.75rem;letter-spacing:-.03rem;color:var(--color-text-muted)}
@media(prefers-reduced-motion:reduce){.faq__number,.faq__more,.faq__more-window,.faq__panel{transition:none}}

/* Telefon (Figma 649:1499; html[data-mobile], do 767 px): nagłówek 30 px, pod nim lista; pytanie 16 px, numer 14 px,
   odpowiedź od krawędzi pytania. Po kontakcie bez górnego odstępu (kontakt ma swój dolny) */
@media(width < 1100px){
:root[data-mobile] .faq{grid-template-columns:minmax(0,1fr);gap:1.5rem;padding:4.5rem var(--space-edge) 0}
:root[data-mobile] .contact + .faq{padding-top:0}
:root[data-mobile] main > .faq:last-child{padding-bottom:4.5rem}
:root[data-mobile] .faq__toggle{align-items:flex-start;gap:1rem;height:auto;min-height:0}
:root[data-mobile] .faq__number{line-height:1.375rem}
:root[data-mobile] .faq__question{font-size:1rem;line-height:1.375rem;letter-spacing:-.03rem}
:root[data-mobile] .faq__answer{padding:.5rem 1rem 1.25rem 2.875rem;line-height:1.6;letter-spacing:-.03rem}
}

.related{display:flex;flex-direction:column;gap:2.5rem;padding:8rem var(--space-edge);background:var(--color-bg);color:var(--color-ink)}
.related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.related__grid>:nth-child(n+4){display:none}
@media(min-width:1920px){.related__grid:has(.furniture-card){grid-template-columns:repeat(4,minmax(0,1fr))}.related__grid:has(.furniture-card)>:nth-child(4){display:flex}}

/* Telefon (Figma 650:1429; html[data-mobile], do 767 px): nagłówek 30 px, karty jak w katalogu na stronie głównej (klient: ten sam kafelek
   z components/stone-card.css i ten sam układ): dwie kolumny co 8 px, 20 px od krawędzi ekranu */
@media(width < 1100px){
:root[data-mobile] .related{gap:1.5rem;padding:4.5rem 0}
:root[data-mobile] .related .section-header{padding-inline:var(--space-edge)}
:root[data-mobile] .related__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding:0 var(--space-edge)}
/* Zawsze dwie pozycje (klient, 2026-10-06: kamienie, usługi i meble) */
:root[data-mobile] .related__grid>:nth-child(n+3){display:none}
}

/* Tablet (768-1099 px): dwie kolumny jak w katalogu kamieni (klient 2026-10-21) */
@media(min-width:768px) and (width < 1100px){
:root[data-mobile] .related__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem .625rem}
}

.site-footer{position:relative;isolation:isolate;overflow:hidden;background:var(--color-section-dark);color:var(--color-copper)}
.site-footer__wordmark{position:absolute;left:57.44%;top:36.2125rem;z-index:-1;width:117.9%;max-width:none;height:auto;translate:-50% -50%;rotate:-7.74deg;pointer-events:none;user-select:none}
.site-footer__inner{display:flex;flex-direction:column;justify-content:space-between;min-height:38.1875rem;padding:3.75rem 3rem 2.5rem}
.site-footer__top{display:flex;align-items:center;gap:7.5rem}
.site-footer__menu{display:flex;align-items:flex-start;gap:7.5rem}
.site-footer__symbol{flex-shrink:0}
.site-footer__symbol img{width:3.4375rem;height:3.4375rem}
/* Odstęp między kolumnami linków o 8 px większy niż w projekcie (klient 2026-10-22, desktop; telefon i tablet mają własny) */
.site-footer__nav{display:flex;align-items:flex-start;gap:calc(2rem + 8px)}
/* Kolumna co najmniej 120 px jak w projekcie, szersza dla dłuższego linku (np. „Współprace marketingowe”, linki bez łamania przez animację) */
.site-footer__column{display:flex;flex-direction:column;gap:1.25rem;min-width:7.5rem}
.site-footer__title{font-size:max(10px,.625rem);font-weight:500;text-transform:uppercase;white-space:nowrap}
.site-footer__links{display:flex;flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none}
.site-footer__link{display:block;width:max-content;font-size:max(12px,.75rem);white-space:nowrap}
.site-footer__link-window{display:block;height:1.35em;overflow:hidden}
.site-footer__link-line{display:block;line-height:1.35;transition:transform .45s var(--ease-out)}
.site-footer__link-line--accent{color:var(--color-accent)}
.site-footer__link:is(:hover,:focus-visible) .site-footer__link-line{transform:translateY(-100%)}

/* Przekładane zdjęcia */
.site-footer__gallery{position:relative;flex-shrink:0;width:23.25rem;height:20.1625rem;margin-left:auto;margin-right:6.3125rem;touch-action:pan-y;cursor:grab;user-select:none}
.site-footer__gallery.is-dragging{cursor:grabbing}
.site-footer__gallery:focus-visible{outline:1px solid var(--color-ink);outline-offset:.75rem}
.site-footer__stack{position:absolute;inset:0}
.site-footer__photo{position:absolute;left:11.3838rem;top:50%;width:15.6722rem;height:19.6686rem;margin:-9.8343rem 0 0 -7.8361rem;overflow:hidden;background:var(--color-nav-active);will-change:transform}
.site-footer__photo:nth-child(1){z-index:3}
.site-footer__photo:nth-child(2){z-index:2;transform:translateX(3.5194rem) rotate(5.13deg) scale(.9605)}
.site-footer__photo:nth-child(3){z-index:1;transform:translateX(-3.1638rem) rotate(-4.34deg) scale(.9605)}
.site-footer__photo img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.site-footer__dots{position:absolute;left:3.625rem;top:20.9375rem;display:flex;gap:.25rem}
.site-footer__dot{position:relative;overflow:hidden;width:.8125rem;height:2px;background:var(--color-copper-dim);transition:width .6s var(--ease-ui)}
.site-footer__dot.is-active{width:2.125rem}
.site-footer__dot-fill{position:absolute;inset:0;background:var(--color-copper);transform:scaleX(0);transform-origin:left center}

.site-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:2rem;font-size:max(12px,.75rem);font-weight:500;color:var(--color-footer-muted)}
.site-footer__legal{display:flex;align-items:center;gap:5.75rem}
.site-footer__legal-links{display:flex;gap:1.25rem;margin:0;padding:0;list-style:none}
.site-footer__small-link{transition:color .3s ease}
.site-footer__small-link:is(:hover,:focus-visible){color:var(--color-copper)}
@media(prefers-reduced-motion:reduce){.site-footer__link-line,.site-footer__dot,.site-footer__small-link{transition:none}}

/* Telefon (Figma 639:1384, od 2026-10-05 bez zdjęć; html[data-mobile], do 767 px): symbol, 48 px niżej kolumny linków 2 × 2, linki
   prawne jeden pod drugim, na dole prawa i autor; napis BELVIO (ten sam plik co na desktopie) u dołu poziomo, wyśrodkowany, 116,5% szerokości
   (po 8,3% poza krawędzie), widać 60% jego wysokości (Figma 877:1811, klient 2026-10-23; tablet tak samo). Wysokość napisu zależy od szerokości
   ekranu (26,5vw), więc dolny odstęp stopki też: widoczna część napisu (16vw) + 60 px przerwy (3.75rem, przy 375 px razem 120 px jak w projekcie) */
@media(width < 1100px){
:root[data-mobile] .site-footer__inner{justify-content:flex-start;gap:2.5rem;min-height:0;padding:3rem var(--space-edge) calc(16vw + 3.75rem)}
:root[data-mobile] .site-footer__top{flex-direction:column;align-items:flex-start}
:root[data-mobile] .site-footer__gallery{display:none}
:root[data-mobile] .site-footer__menu{flex-direction:column;gap:3rem;width:100%}
:root[data-mobile] .site-footer__nav{flex-wrap:wrap;gap:2.25rem 1.5rem;width:100%}
:root[data-mobile] .site-footer__column{width:calc(50% - .75rem)}
:root[data-mobile] .site-footer__title{font-size:.75rem}
:root[data-mobile] .site-footer__link{font-size:.875rem}
/* Telefon i tablet bez animacji po najechaniu: długi link (np. „Współprace marketingowe”) łamie się w swojej kolumnie */
:root[data-mobile] .site-footer__link{width:auto;white-space:normal}
:root[data-mobile] .site-footer__link-window{height:auto}
:root[data-mobile] .site-footer__link-line--accent{display:none}
:root[data-mobile] .site-footer__bottom{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:2.5rem 2rem;font-size:.875rem}
:root[data-mobile] .site-footer__legal{display:contents}
:root[data-mobile] .site-footer__legal-links{grid-row:1;grid-column:1 / -1;flex-direction:column;gap:.75rem}
:root[data-mobile] .site-footer__copy{grid-row:2}
:root[data-mobile] .site-footer__copy,:root[data-mobile] .site-footer__bottom > .site-footer__small-link{font-size:.75rem}
:root[data-mobile] .site-footer__wordmark{left:50%;top:calc(100% - 16vw);width:116.5%;translate:-50% 0;rotate:none}
}

.calculator--islands{padding-bottom:5rem;scroll-margin-top:6rem}
.island-preview{position:sticky;top:6rem;flex:1 1 51.5rem;min-width:0;padding:1.25rem 1.5rem;background:var(--stone-surface)}
.island-preview .slab-preview__stone{width:auto;flex-wrap:wrap}
.island-preview__stage{position:relative;width:100%;aspect-ratio:1.35;min-height:20rem;isolation:isolate}
.island-preview--stairs .island-preview__stage{aspect-ratio:auto}
.island-preview--stairs .island-preview__stage::before{content:"";display:block;padding-top:calc(100% / 1.35 + 40px)}
.island-preview__canvas,.island-preview__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.island-preview__canvas{display:block;opacity:0;touch-action:pan-y;cursor:grab;transition:opacity .25s}
.island-preview__canvas:active{cursor:grabbing}
.island-preview__canvas:focus-visible{outline:1px solid var(--color-ink);outline-offset:-2px}
.island-preview.is-ready .island-preview__canvas{opacity:1}
.island-preview__poster{display:none}
.island-preview__status{position:absolute;left:0;right:0;bottom:2rem;text-align:center;font-size:max(14px,.875rem);color:var(--calc-muted);padding:.75rem;background:var(--stone-surface)}
.island-preview__status:empty{display:none}
.island-preview__retry{position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%)}
.island-preview__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid var(--calc-line);padding-top:1rem;font-size:max(12px,.75rem);color:var(--calc-muted)}
.island-preview__actions{display:flex;align-items:center;gap:1rem}
.island-preview__actions [data-island-zoom]{min-width:1.75rem;min-height:1.75rem;font-size:1.25rem}
.island-panel{gap:2rem}
.island-panel__configuration{display:flex;flex-direction:column;gap:1.75rem}
.island-panel .calc-select select{height:3.375rem}
.island-panel .calc-choice__options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Pełny wymiar wyspy pod wyborem długości */
.island-panel__size{font-size:max(13px,.8125rem);line-height:1.4;color:var(--calc-muted)}
.island-panel__hint{font-size:max(12px,.75rem);line-height:1.5;color:var(--calc-muted)}
.island-dimensions{display:grid;gap:.625rem}
.island-panel .calc-option:disabled{opacity:.4;cursor:not-allowed}
.island-light{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
.island-light__color,.island-light__power{display:grid;gap:var(--calc-control-gap)}
.island-light .calc-range{gap:1rem}
.island-light .calc-range__input{width:10rem}
@media(max-width:900px){.calculator--islands .calculator__work{flex-direction:column}.island-preview{position:relative;top:auto;flex:auto;width:100%}.island-panel{width:100%;flex:auto}.calculator--islands .calculator__bar{gap:1rem}.calculator--islands .calculator__steps{gap:1rem;flex:1}.calculator--islands .calculator__step{width:auto;flex:1}.calculator--islands .calculator__step-title{white-space:normal}.island-preview__stage{min-height:18rem}.island-stones__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.island-stones__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.island-preview{padding:1rem}.island-preview__footer{gap:.5rem;flex-wrap:wrap}.island-panel .calc-choice__options{gap:.5rem}.island-panel .calc-option{font-size:.8rem}.island-panel .calc-summary__row{flex-wrap:wrap}.island-stones__selected{gap:.75rem}.island-preview .slab-preview__header{height:auto}}
@media(prefers-reduced-motion:reduce){.island-preview__canvas,.island-stone{transition:none}}
.island-preview__loader{position:absolute;inset:0;display:grid;place-items:center;background:var(--stone-surface);opacity:0;visibility:hidden;pointer-events:none;z-index:2;transition:opacity .2s,visibility .2s}
.island-preview[aria-busy=true] .island-preview__loader{opacity:1;visibility:visible}
.island-preview__loader-symbol{position:relative;width:4.25rem;aspect-ratio:1;background:color-mix(in srgb,var(--calc-ink) 18%,transparent);mask:url('/assets/img/stopka/symbol.svg?v=23890eab56') center/contain no-repeat;overflow:hidden}
.island-preview__loader-symbol::after{content:"";position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 35%,#b18a7c 46%,#fff7ee 50%,#b18a7c 54%,transparent 65%);transform:translateX(-75%);animation:island-logo-shimmer 1.25s ease-in-out infinite}
.island-preview[aria-busy=true] .island-preview__status{z-index:3}
@keyframes island-logo-shimmer{to{transform:translateX(75%)}}
@media(prefers-reduced-motion:reduce){.island-preview__loader{transition:none}.island-preview__loader-symbol::after{animation:none;transform:none;opacity:.6}}

.island-costs{grid-template-columns:repeat(3,minmax(0,1fr))}
.island-costs--stairs{grid-template-columns:repeat(4,minmax(0,1fr))}
.island-config__card,.island-config__preview{width:100%}
.island-config__facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.island-config__facts dd{white-space:normal;overflow-wrap:anywhere}
.island-config__preview .island-preview{position:relative;top:auto;width:100%}
.calculator--islands .island-panel>.calc-blat__head{display:none}
.island-preview{transition:background-color .35s,color .35s}
.island-preview.is-dark{--stone-surface:#1d1a16;--calc-ink:#e8e4df;--calc-muted:#a39c95;--calc-line:#3a352f;color:var(--calc-ink)}
.island-preview__stage{aspect-ratio:1.55;min-height:20rem}
.island-preview__actions{justify-content:flex-end;gap:.375rem;margin:0}
.island-preview__actions .calc-link{display:grid;place-items:center;width:1.75rem;height:1.75rem;min-width:1.75rem;min-height:1.75rem;background:color-mix(in srgb,var(--color-light) 35%,transparent);font-size:1.375rem;line-height:1}
.island-preview__actions .calc-link img{width:.875rem;height:.875rem}
.island-preview__footer{border:0;padding:0;align-items:center;justify-content:space-between;flex-wrap:nowrap}
.island-preview__footer>p{display:flex;align-items:center;gap:.375rem;margin:0;white-space:nowrap}
.island-preview__footer>p img{width:1rem;height:1rem;filter:brightness(.45)}
.island-preview.is-dark .island-preview__footer>p img{filter:none}
.island-preview__loader{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;font-size:max(14px,.875rem);color:var(--calc-muted)}
.island-preview__loader-symbol{width:2.75rem;background:var(--calc-muted);mask-size:contain}
.island-preview__progress{display:flex;align-items:center;gap:.75rem;font-size:max(12px,.75rem)}
.island-preview__progress progress{appearance:none;border:0;width:6.5rem;height:2px;background:var(--calc-line)}
.island-preview__progress progress::-webkit-progress-bar{background:var(--calc-line)}
.island-preview__progress progress::-webkit-progress-value{background:var(--color-accent)}
.island-preview__progress progress::-moz-progress-bar{background:var(--color-accent)}
.island-preview[aria-busy=true] .island-preview__status{clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0}
.island-preview__custom{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font-size:max(14px,.875rem);color:var(--calc-muted);pointer-events:none}
.island-preview.is-custom .island-preview__canvas,.island-preview.is-custom .island-preview__poster{opacity:.18;pointer-events:none}
.island-preview .glass-cursor{z-index:4}
.island-panel .calc-option img,.island-cladding__item img{flex-shrink:0;width:auto;height:auto;max-width:24px;max-height:24px}
.island-panel [data-island-custom-fields]{display:flex;flex-direction:column;gap:1.75rem}
.island-panel [data-island-custom-fields][hidden]{display:none}
.island-panel .island-cladding{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
.island-cladding__width{grid-column:2;grid-row:2}
.island-cladding__width[hidden]{display:none}
.island-cladding__item{display:flex;align-items:center;gap:.625rem;font-size:max(14px,.875rem);cursor:pointer}
.island-cladding__item input{appearance:none;position:relative;width:1.875rem;height:1rem;background:var(--calc-field);border:0;margin:0;cursor:pointer}
.island-cladding__item input::after{content:"";position:absolute;inset:0 auto 0 0;width:.875rem;background:var(--calc-muted);transition:transform .2s,background .2s}
.island-cladding__item input:checked::after{transform:translateX(1rem);background:var(--color-accent)}
.island-panel__notes{width:100%;min-height:8rem;resize:vertical;padding:1rem;border:1px solid var(--calc-line);background:var(--calc-field);color:var(--calc-ink);font:inherit;font-size:max(14px,.875rem)}
.island-panel__error{font-size:max(13px,.8125rem);color:#9a3e25}
.island-cladding__item input:focus-visible,.island-panel__notes:focus-visible{outline:1px solid var(--color-ink);outline-offset:3px}
.island-config__facts .calc-config__fact:last-child dd{white-space:pre-wrap}
.island-panel .calc-option{white-space:normal}
@media(prefers-reduced-motion:reduce){.island-preview,.island-cladding__item input::after{transition:none}}

.island-cladding__item{min-height:3rem}
.island-preview__stage.has-glass-cursor .island-preview__canvas{cursor:none}
.island-preview.is-custom .island-preview__stage{cursor:default}

.island-preview.is-dark .slab-preview__stone{color:var(--calc-ink)}
.island-preview.is-dark [data-island-reset] img{filter:invert(.85)}

.island-light__power{grid-column:2;grid-row:1}
.island-light__color{grid-column:1;grid-row:1}
.island-preview.is-dark .slab-preview__kind{color:var(--calc-ink)}
.island-cladding__item{gap:.375rem}
.island-cladding__item input{flex-shrink:0}
.island-light .mood__picker{width:100%;min-width:0}

.island-light__power .mood__picker::-webkit-slider-runnable-track{background:linear-gradient(90deg,transparent,var(--stone-glow))}
.island-light__power .mood__picker::-moz-range-track{background:linear-gradient(90deg,transparent,var(--stone-glow))}

/* Telefon (html[data-mobile], do 767 px; wyspy i schody, bez osobnego projektu, jak kalkulator blatów z Figmy 652:1429): podgląd 20 px
   od krawędzi ekranu z paddingiem 8, bez instrukcji i szklanego kursora (dotyk), w wycenie nazwa modelu pod tytułem */
@media(width < 1100px){
:root[data-mobile] .calculator--islands{padding-bottom:4.5rem}
:root[data-mobile] .calculator--islands .calculator__work>.island-preview{width:auto;margin-inline:0;padding:.5rem}
:root[data-mobile] .island-preview .glass-cursor{display:none}
:root[data-mobile] .island-preview__stage{min-height:0}
:root[data-mobile] .island-preview__footer{gap:.5rem}
:root[data-mobile] .island-preview__footer>p{font-size:.75rem}
:root[data-mobile] .calculator--islands .calc-summary__head{flex-direction:column;align-items:flex-start;gap:.25rem}
:root[data-mobile] [data-island-summary-stone],:root[data-mobile] [data-table-summary-model]{display:none}
:root[data-mobile] .island-costs--stairs{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-mobile] :is([data-island-options=length],[data-island-options=height],[data-island-options=sink]){--calc-grid-fixed:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
:root[data-mobile] .island-panel__error{font-size:.75rem}
:root[data-mobile] .island-panel .island-cladding,:root[data-mobile] .island-light{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-mobile] [data-island-light-options]{--calc-grid-fixed:1;grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-mobile] [data-island-light-options] .calc-option{white-space:normal}
:root[data-mobile] [data-island-light-controls]{display:none}
:root[data-mobile] .island-cladding__item{min-height:3.25rem}
:root[data-mobile] [data-island-light-options] .island-light__color{grid-area:auto;display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;min-height:3.25rem}
:root[data-mobile] [data-island-light-options] .island-light__color[hidden]{display:none}
:root[data-mobile] [data-island-light-options] .island-light__color .calc-choice__label{font-size:.75rem}
:root[data-mobile] [data-island-light-options] .mood__picker{width:100%;min-width:0;height:2.75rem}
}
/* Próbka wykończenia jak zdjęcie na kaflu kamienia: 58 px (telefon 56 px), kafel tej samej wysokości (klient 2026-10-13) */
.island-stone .table-finish{display:block;box-sizing:border-box;width:3.625rem;height:3.625rem;flex:0 0 3.625rem;padding:0;background:linear-gradient(45deg,#858585,#ccc)}
.island-stone .table-finish--szczotkowana{background:repeating-linear-gradient(135deg,#ffffff22 0 .6px,#00000014 .6px 1.2px,transparent 1.2px 2.4px),linear-gradient(45deg,#494949,#aaa)}
.island-stone .table-finish--czarny{background:linear-gradient(45deg,#000,#393939)}
/* Nazwa wykończenia w niewybranych kaflach 2 px niżej, jak nazwy kamieni (miejsce na znacznik zmiany ceny) */
.table-finishes .island-stone:not([aria-pressed=true])>span:not(.table-finish){translate:0 2px}
.calculator--table [data-table-summary]{margin-top:2rem}
.calculator--table.is-summary [data-table-next]{display:none}
@media(width < 1100px){
:root[data-mobile] .table-finishes{--calc-grid-fixed:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem .5rem}
:root[data-mobile] .table-finishes .table-finish{width:3.5rem;height:3.5rem;flex-basis:3.5rem}
:root[data-mobile] .table-finishes .island-stone>span:not(.table-finish){min-width:0;padding-inline:0;overflow-wrap:anywhere}
}

/* Skalowanie według bazy 1680 px (OSMO, opis: 03-design/OSMO.md) dla stron z html[data-scale] (od 2026-10-02 wszystkie strony serwisu).
   Jednostka 16 px przy 1680, poniżej proporcjonalnie do 13,714 px przy 1440; od 1440 do 1152 bez dalszego zmniejszania (od 2026-10-03, klient:
   na małych monitorach treść, przyciski i nav jak przy 1440, a siatki kalkulatorów, w których coś się nie mieści, tracą kolumnę:
   modules/dopasuj-siatke.js); poniżej 1152 (tablet, jeszcze bez projektu) proporcjonalnie od rozmiarów z 1440, bo przy 1024 pasek nav
   by się nie mieścił: min(1440px, 125vw), 1440 / 1152 = 1,25. Powyżej 1680 typografia nie rośnie, pudełko treści 1680 → 1700 (1920) → 1720 px.
   Teksty bazowe 10–14 px zachowują swój rozmiar przy skalowaniu w dół. Reguły tylko strony głównej: sections/home-scaling.css; hero usługi (.product) do 4K: hero_produkt.css */
:root[data-scale]{--size-container-ideal:1680;--size-container-min:min(1440px,125vw);--size-container-max:1680px;--page-box:min(100%,1680px)}
@media(min-width:1680px){
  :root[data-scale]{--page-box:calc(1680px + (100vw - 1680px) / 12)}
}
@media(min-width:1920px){
  :root[data-scale]{--page-box:min(1720px,calc(1700px + (100vw - 1920px) / 96))}
}

/* Treść w pudełku strony; sekcje z tłem lub torem do krawędzi ekranu ustawiają pudełko same (home-scaling.css) */
html[data-scale] main>:is(section,article):not(.hero):not(.product):not(.about-film):not(.services):not(.steps):not(.reviews){width:var(--page-box);margin-inline:auto}
html[data-scale] :is(.site-header,.mega-menu){width:calc(var(--page-box) - 2 * var(--space-edge));left:0;right:0;margin-inline:auto}
html[data-scale] .site-footer__inner{width:var(--page-box);margin-inline:auto}

/* Minima drobnego tekstu we wspólnych elementach (nagłówek, stopka, karty) */
html[data-scale] :is(.site-header__language,.site-footer__title,.service-card__more){font-size:max(10px,.625rem)}
html[data-scale] :is(.site-footer__link,.stone-card__category,.stone-card__tag,.stone-card__badge,.stone-card__unit,.article-card__time,.article-card__category,.service-card__brand){font-size:max(12px,.75rem)}
html[data-scale] :is(.site-nav__link,.site-header__secondary){font-size:max(14px,.875rem)}

/* Minima na podstronach: filtry katalogu artykułów i mebli, data i podpisy wpisu, przycisk albumu i role zespołu (O nas) */
html[data-scale] :is(.blog__group legend,.blog__group>label,.post__date,.post__share-label,.post__share-status,.album__restore){font-size:max(10px,.625rem)}
html[data-scale] :is(.post__time,.team__role){font-size:max(12px,.75rem)}

/* Tekst z projektu mobile poza telefonem ukryty (reguły telefonu niżej) */
.text-mobile{display:none}

/* Telefon i tablet (do 1099 px, klient 2026-10-21: tablet na układzie telefonu, tylko większy) na stronach z projektem mobile
   (html[data-mobile] z flagi "mobile" strony; strona główna: Figma 633:1422 przy 375 px): stała jednostka 16 px zamiast skali 1680,
   margines strony 20 px, pudełko na całą szerokość. Reguły sekcji na końcu ich plików CSS (ten sam próg, poza etapami realizacji,
   które na tablecie zostają w układzie desktopu). Tablet (od 768 px): jednostka 18 px przy 768, 20 px przy 1024, margines 36-41 px,
   więc cały układ telefonu rośnie proporcjonalnie */
@media(width < 1100px){
  :root[data-mobile]{--size-font:16px;--space-edge:1.25rem;--page-box:100%}
  /* Linie nagłówków z danych zawijają się, gdy są dłuższe niż ekran (na desktopie jedna linia bez łamania) */
  :root[data-mobile] .heading__line{width:fit-content;white-space:normal}
  /* Nagłówki płynące jak zwykły tekst (Figma: etapy, CTA z rombami, hero O nas): linie w jednym akapicie, wejście bez masek (modules/heading.js) */
  :root[data-mobile] :is(.steps__heading,.cta-stones__heading,.album__heading) .heading__line{display:inline;overflow:visible;clip-path:none;padding:0;margin:0}
  :root[data-mobile] :is(.steps__heading,.cta-stones__heading,.album__heading) .heading__line+.heading__line::before{content:" "}
  :root[data-mobile] :is(.steps__heading,.cta-stones__heading,.album__heading) .heading__mask{display:none}
  /* Teksty z projektu mobile (klient: celowo krótsze albo pominięte): .text-mobile tylko na telefonie, .text-desktop poza nim */
  :root[data-mobile] .text-mobile{display:inline}
  :root[data-mobile] .text-desktop{display:none}
}
@media(min-width:768px) and (width < 1100px){
  :root[data-mobile]{--size-font:calc(12px + .78125vw);--space-edge:2rem}
}