/* Kamila Zduńczyk Art Gallery
   Paleta: noc (tło faktur i nagłówka), gesso (podkład płótna), grafit (tekst), płynne złoto (akcent z obrazów).
   Kroje: Poltawski Nowy (antykwa Półtawskiego, tytuły) i Hanken Grotesk (tekst). */
:root {
  --noc: #12161d;
  --noc-2: #1c222c;
  --gesso: #f4f4f1;
  --gesso-2: #e8e7e2;
  --grafit: #23262b;
  --szary: #62615d;
  --szary-jasny: #a9a8a2;
  --linia: #d9d7d0;
  --zloto: #c9a45c;
  --zloto-jasne: #dcbd7c;
  --zloto-ciemne: #85652a;
  /* płatkowe złoto z ukośnymi blikami: przyciski i paski przewijania */
  --zloto-blik: linear-gradient(115deg, #b58f49 0%, #d6b36c 16%, #f2dca0 27%, #d0aa60 38%, #b8914a 54%, #dcbd7c 70%, #eed49a 78%, #c29c55 100%);
  --zielen: #3f7d0e;
  --czerwien: #b3261e;
  --f-szeryf: 'Poltawski Nowy', 'Iowan Old Style', Georgia, serif;
  --f-tekst: 'Hanken Grotesk', system-ui, 'Segoe UI', sans-serif;
  --margines: clamp(1rem, 4vw, 3rem);
  --odstep: clamp(2.25rem, 4.6vw, 4.5rem);
}

@property --sx { syntax: '<percentage>'; inherits: true; initial-value: 18%; }
@property --sy { syntax: '<percentage>'; inherits: true; initial-value: 30%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
/* kliknięcie w pozycję menu płynnie przewija do sekcji */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--gesso); color: var(--grafit); font: 400 1.0625rem/1.65 var(--f-tekst); overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--zloto-ciemne); }
h1, h2, h3 { font-family: var(--f-szeryf); font-weight: 400; line-height: 1.08; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem); letter-spacing: -.012em; }
h2 { font-size: clamp(1.85rem, 1.3rem + 2vw, 3rem); letter-spacing: -.008em; }
h3 { font-size: 1.4rem; font-weight: 500; }
p { margin: 0 0 1em; text-wrap: pretty; }
em { font-style: italic; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--zloto-ciemne); outline-offset: 3px; }
.ciemna :focus-visible { outline-color: var(--zloto-jasne); }
::selection { background: var(--zloto); color: var(--noc); }

.pomin { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--noc); color: var(--gesso); }
.pomin:focus { top: 1rem; }
.waska { width: min(100% - 2 * var(--margines), 44rem); margin-inline: auto; }
.waska-szeroka { width: min(100% - 2 * var(--margines), 92rem); margin-inline: auto; }
.eyebrow { margin: 0 0 1rem; font: 600 .75rem/1.3 var(--f-tekst); letter-spacing: .2em; text-transform: uppercase; color: var(--zloto-ciemne); }
.ciemna .eyebrow { color: var(--zloto); }
.podtytul { max-width: 40rem; font-size: 1.15rem; color: var(--szary); }
.ciemna .podtytul { color: var(--szary-jasny); }
.ciemna { background: var(--noc); color: var(--gesso); }
.ciemna a:hover { color: var(--zloto-jasne); }

/* ---------- przyciski i linki ---------- */
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .8rem 1.6rem; border: 1px solid transparent; border-radius: 0; font: 600 .95rem/1.2 var(--f-tekst); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
/* złoty przycisk: płatkowe złoto z ukośnymi blikami; po najechaniu przelatuje po nim błysk */
.przycisk-glowny { position: relative; isolation: isolate; overflow: hidden; background: var(--zloto-blik) 0 0 / 160% 100%; color: var(--noc); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), inset 0 -1px 0 rgb(90 64 20 / .25); transition: background-position .6s ease, box-shadow .2s; }
.przycisk-glowny::after { content: ""; position: absolute; z-index: -1; inset: -30% auto -30% -45%; width: 35%; background: linear-gradient(90deg, rgb(255 250 230 / 0), rgb(255 250 230 / .85), rgb(255 250 230 / 0)); transform: skewX(-22deg); pointer-events: none; }
/* ciemny tekst także w ciemnych sekcjach i w belce (reguły „a:hover” dają tam złoty tekst na złotym tle) */
.przycisk-glowny:is(:hover, :focus-visible), :is(.ciemna, .naglowek, .stopka) .przycisk-glowny:is(:hover, :focus-visible) { background-position: 100% 0; color: var(--noc); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -1px 0 rgb(90 64 20 / .25), 0 8px 22px rgb(133 101 42 / .3); }
.przycisk-glowny:hover::after, .przycisk-glowny:focus-visible::after { translate: 560% 0; transition: translate .9s cubic-bezier(.3, .6, .3, 1); }
@media (prefers-reduced-motion: reduce) { .przycisk-glowny, .przycisk-glowny:hover::after, .przycisk-glowny:focus-visible::after { transition: none; } .przycisk-glowny::after { display: none; } }
.przycisk-cichy { background: transparent; border-color: currentColor; color: inherit; }
.przycisk-cichy:hover { border-color: var(--zloto-ciemne); color: var(--zloto-ciemne); }
.przycisk:disabled { opacity: .6; cursor: progress; }
.link-dalej { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
.link-dalej::after { content: "→"; transition: translate .2s; }
.link-dalej:hover::after { translate: .25rem 0; }
.akcje-rzad { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- nagłówek ---------- */
/* ciemna belka przyklejona do góry ekranu; na stronach ze zdjęciem u góry przezroczysta do pierwszego przewinięcia (klasa z skrypt.js) */
.naglowek { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: 1.1rem max(var(--margines), (100% - 92rem) / 2); background: var(--belka-tlo, var(--noc)); color: var(--gesso); transition: background-color .3s, box-shadow .3s, padding .3s; }
.naglowek.przewiniete { padding-block: .65rem; }
.naglowek a:hover { color: var(--zloto-jasne); }
.naglowek :focus-visible { outline-color: var(--zloto-jasne); }
.s-index .naglowek, .naglowek:has(+ main > .naglowek-strony) { position: fixed; inset: 0 0 auto; color: var(--gesso); --belka-tlo: transparent; }
.s-index .naglowek.przewiniete, .naglowek.przewiniete:has(+ main > .naglowek-strony) { --belka-tlo: rgb(18 22 29 / .9); backdrop-filter: blur(8px); }
.marka { display: flex; align-items: center; gap: .75rem; margin-right: auto; text-decoration: none; }
.marka:hover { color: inherit; }
.znak { width: 1.6rem; height: 2.15rem; background: currentColor; -webkit-mask: url(img/strona/znak.png) center / contain no-repeat; mask: url(img/strona/znak.png) center / contain no-repeat; }
.marka-tekst { display: grid; line-height: 1; }
.marka-imie { font: 400 1.35rem/1 var(--f-szeryf); letter-spacing: .01em; }
.marka-dopisek { margin-top: .3rem; font: 600 .6rem/1 var(--f-tekst); letter-spacing: .38em; text-transform: uppercase; opacity: .75; }
.menu ul { display: flex; gap: clamp(.7rem, 1.7vw, 2rem); margin: 0; padding: 0; list-style: none; }
.menu a { position: relative; display: block; padding: .5rem 0; font-size: clamp(.82rem, .75vw + .3rem, .95rem); text-decoration: none; white-space: nowrap; }
.menu a[aria-current="page"]::after, .menu a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px; background: var(--zloto); }
.menu-przycisk { display: none; }

@media (max-width: 63.99rem) {
  .menu-przycisk { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .25rem; border: 0; background: none; color: inherit; font: 600 .85rem/1 var(--f-tekst); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
  .menu-kreski, .menu-kreski::before { display: block; width: 1.4rem; height: 1px; background: currentColor; transition: rotate .2s, translate .2s; }
  .menu-kreski { position: relative; translate: 0 -.2rem; }
  .menu-kreski::before { content: ""; position: absolute; top: .4rem; }
  .menu { position: absolute; inset: 100% 0 auto; display: none; padding: .5rem var(--margines) 1.5rem; background: var(--noc); color: var(--gesso); }
  .menu-otwarte .menu { display: block; }
  .menu-otwarte { background: var(--noc); color: var(--gesso); }
  .menu-otwarte .menu-kreski { translate: 0 0; rotate: 45deg; }
  .menu-otwarte .menu-kreski::before { top: 0; rotate: -90deg; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu a { padding: .85rem 0; font: 400 1.5rem/1.2 var(--f-szeryf); border-bottom: 1px solid var(--noc-2); }
}

/* ---------- światło padające z boku (sygnatura strony) ----------
   Jasna plama w trybie „miękkie światło” wyciąga z faktury wypukłości tak, jakby lampę przesuwano z boku obrazu. */
.swiatlo { position: relative; isolation: isolate; }
.swiatlo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(42% 70% at var(--sx) var(--sy), rgb(255 240 212 / .85), rgb(255 240 212 / .25) 45%, rgb(255 240 212 / 0) 72%), linear-gradient(100deg, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .35));
  mix-blend-mode: soft-light; }
.swiatlo-ruch::after, .swiatlo-kursor::after, .karta a:hover .swiatlo::after { opacity: 1; }
@keyframes swiatlo { 0% { --sx: 8%; --sy: 18%; } 50% { --sx: 55%; --sy: 55%; } 100% { --sx: 95%; --sy: 25%; } }
@media (prefers-reduced-motion: no-preference) { .swiatlo-ruch:not(.swiatlo-kursor) { animation: swiatlo 18s ease-in-out infinite alternate; } }

/* ---------- strona główna: faktura na cały ekran ---------- */
.tlo { position: relative; display: grid; align-items: end; min-height: max(36rem, 100svh); overflow: hidden; }
.tlo-link { position: absolute; inset: 0; color: var(--gesso); text-decoration: none; }
.tlo-zdjecie { width: 100%; height: 100%; object-fit: cover; }
.tlo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgb(18 22 29 / .7), rgb(18 22 29 / 0) 22%), linear-gradient(20deg, rgb(18 22 29 / .88) 12%, rgb(18 22 29 / .25) 55%, rgb(18 22 29 / 0) 80%); }
.tlo-podpis { position: absolute; right: var(--margines); bottom: 1.5rem; z-index: 3; max-width: 60%; font-size: .8rem; text-align: right; color: rgb(244 244 241 / .8); }
.tlo-podpis em { font-family: var(--f-szeryf); font-size: 1.05em; }
.tlo-link:hover .tlo-podpis { color: var(--zloto-jasne); }
.tlo-tresc { position: relative; z-index: 3; padding: 8rem var(--margines) clamp(4.5rem, 10vh, 7rem); max-width: 62rem; pointer-events: none; }
.tlo-tresc > * { pointer-events: auto; }
.tlo h1 { margin-bottom: 2rem; font-size: clamp(2.9rem, 1.2rem + 6.5vw, 7.25rem); line-height: .98; }
.tlo-logo { width: clamp(7.5rem, 5rem + 7vw, 11rem); height: auto; margin-bottom: clamp(1.25rem, 3vw, 2rem); filter: drop-shadow(0 12px 30px rgb(0 0 0 / .35)); }
.tlo h1 em { display: block; color: var(--zloto-jasne); }
@media (max-width: 47.99rem) { .tlo-podpis { left: var(--margines); right: auto; bottom: 1rem; text-align: left; max-width: none; } .tlo-tresc { padding-bottom: 4.5rem; } }

.sekcja { padding-block: var(--odstep) calc(var(--odstep) * .55); }
/* jasne tło na całą szerokość okna, żeby sekcja odcinała się przy przewijaniu */
.sekcja-tlo { background: var(--gesso-2); box-shadow: 0 0 0 100vmax var(--gesso-2); clip-path: inset(0 -100vmax); }
.sekcja-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 2.5rem; }
.sekcja-naglowek h2 { margin: 0; }
.sekcja-naglowek p { margin: 0; color: var(--szary); }

/* ---------- siatka obrazów ---------- */
.siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(.75rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 48rem) and (max-width: 79.99rem) { .sekcja .siatka > li:nth-child(4) { display: none; } }
.karta a { display: block; text-decoration: none; color: inherit; }
.karta-foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--gesso-2); }
.karta-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s, scale 1.2s cubic-bezier(.2, .7, .2, 1); }
.karta-faktura { opacity: 0; }
.karta a:hover .karta-faktura, .karta a:focus-visible .karta-faktura { opacity: 1; }
.karta a:hover .karta-foto img { scale: 1.03; }
/* sprzedany, zarezerwowany, niedostępny: napis na zdjęciu (obraz zostaje w galerii) */
.znacznik { position: absolute; left: .6rem; top: .6rem; z-index: 2; display: inline-flex; align-items: center; gap: .45em; padding: .35rem .7rem; background: rgb(18 22 29 / .85); color: var(--gesso); font: 600 .72rem/1 var(--f-tekst); letter-spacing: .14em; text-transform: uppercase; }
.znacznik::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--szary-jasny); }
.karta-tytul { margin: 1rem 0 .3rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); font-weight: 400; }
.karta-dane { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin: 0; font-size: .9rem; color: var(--szary); }
.cena { font-weight: 600; color: var(--grafit); font-variant-numeric: tabular-nums; }
.cena s { font-weight: 400; color: var(--szary); }
.cena[class*="status-"] { display: inline-flex; align-items: center; gap: .45em; font-weight: 500; color: var(--szary); }
.cena[class*="status-"]::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--szary-jasny); }
.status-sprzedany::before { background: var(--czerwien) !important; }
.status-zarezerwowany::before { background: var(--zloto) !important; }

/* ---------- wyróżniony obraz ---------- */
.wyrozniony { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: var(--odstep); }
@media (min-width: 64rem) { .wyrozniony { grid-template-columns: 1fr 1fr; } }
.wyrozniony-foto img { width: 100%; max-height: 88svh; object-fit: cover; }
.wyrozniony-dane { font-size: 1rem; color: var(--szary); }
.wyrozniony-tekst h2 { font-size: clamp(2.2rem, 1.4rem + 2.8vw, 4rem); }
.wyrozniony-tekst p:not([class]) { max-width: 36rem; }
.wyrozniony-tekst .przycisk { margin-top: 1rem; }

/* ---------- cytat ---------- */
.cytat { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-bottom: var(--odstep); }
@media (min-width: 64rem) { .cytat { grid-template-columns: 1fr minmax(0, 34vw); } }
.cytat-tresc { margin: 0; }
.cytat blockquote { margin: 0; }
.cytat blockquote p { margin: 0; font: italic 400 clamp(2rem, 1.1rem + 3.2vw, 4rem)/1.12 var(--f-szeryf); text-wrap: balance; }
.cytat figcaption { margin-top: 1.5rem; font: 600 .75rem/1.3 var(--f-tekst); letter-spacing: .2em; text-transform: uppercase; color: var(--zloto-ciemne); }
.cytat-foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* ---------- pracownia: na tle zbliżenia faktury (Good morning Bess), tekst w jasnym polu, obok zdjęcie pracy pędzlem ---------- */
.pracownia { position: relative; display: grid; gap: 2.5rem; padding: var(--odstep) var(--margines) calc(var(--odstep) + 1rem); overflow: hidden; }
@media (min-width: 64rem) { .pracownia { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: clamp(3rem, 6vw, 7rem); align-items: center; padding-inline: max(var(--margines), (100% - 92rem) / 2); } }
.pracownia-tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pracownia-tekst { position: relative; z-index: 1; max-width: 36rem; padding: clamp(1.5rem, 4vw, 3rem); background: rgb(244 244 241 / .92); backdrop-filter: blur(4px); box-shadow: 0 20px 50px rgb(18 22 29 / .18); }
.pracownia-tekst p { color: var(--szary); font-size: 1.1rem; }
.pracownia-foto { position: relative; z-index: 1; overflow: hidden; box-shadow: 0 30px 60px rgb(0 0 0 / .35); }
.pracownia-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pracownia-podpis { position: absolute; right: var(--margines); bottom: 1rem; z-index: 1; padding: .3rem .6rem; background: rgb(244 244 241 / .85); font-size: .8rem; color: var(--grafit); text-decoration: none; }
.pracownia-podpis em { font-family: var(--f-szeryf); }

/* ---------- przymierzalnia: zaproszenie do wizualizacji obrazu we wnętrzu ---------- */
.przymierzalnia { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: calc(var(--odstep) * .7) calc(var(--odstep) * .6); scroll-margin-top: 1rem; }
@media (min-width: 64rem) { .przymierzalnia { padding-bottom: 0; } }
@media (min-width: 64rem) { .przymierzalnia { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.przymierzalnia-foto { overflow: hidden; box-shadow: 0 30px 60px rgb(18 22 29 / .18); }
.przymierzalnia-foto img { width: 100%; }
.przymierzalnia-tekst .kroki li { color: var(--szary); }
.przymierzalnia-tekst .kroki li::before { color: var(--zloto-ciemne); }
.przymierzalnia-tekst .kroki strong { color: var(--grafit); }
.przymierzalnia-tekst .nz-dopisek { color: var(--szary); }

/* ---------- obraz na zamówienie: zdjęcia dużego obrazu (wnętrze, cały obraz, faktura) i cztery kroki ---------- */
.na-zamowienie { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 5rem); padding: var(--odstep) var(--margines) calc(var(--odstep) + 1rem); overflow: hidden; scroll-margin-top: 1rem; }
/* tło: ciemna faktura ze złotem, przyciemniona pod tekstem */
.nz-tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.4); }
.na-zamowienie::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(18 22 29 / 0) 40%, rgb(18 22 29 / .35)); }
.nz-zdjecia, .nz-tekst { position: relative; z-index: 1; }
.nz-zdjecia { box-shadow: 0 30px 60px rgb(0 0 0 / .45); }
.nz-tlo-podpis { position: absolute; z-index: 1; right: var(--margines); bottom: 1rem; padding: .3rem .6rem; background: rgb(18 22 29 / .6); font-size: .8rem; color: var(--gesso); text-decoration: none; }
.nz-tlo-podpis em { font-family: var(--f-szeryf); }
@media (min-width: 64rem) { .na-zamowienie { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; padding-inline: max(var(--margines), (100% - 92rem) / 2); } }
.nz-zdjecia { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto 1fr; gap: clamp(.5rem, 1.2vw, 1rem); margin: 0; padding: 0; list-style: none; }
.nz-zdjecia a { display: block; height: 100%; }
.nz-zdjecia img { width: 100%; }
.nz-wnetrze { grid-row: span 2; }
.nz-faktura { position: relative; min-height: 6rem; }
.nz-faktura img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.nz-tekst .wstep { color: var(--gesso); }
.kroki { display: grid; gap: 1.1rem; margin: 2rem 0 2.25rem; padding: 0; list-style: none; counter-reset: krok; }
.kroki li { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: .75rem; color: var(--szary-jasny); counter-increment: krok; }
.kroki li::before { content: counter(krok); grid-row: span 2; font: 400 1.9rem/1 var(--f-szeryf); color: var(--zloto); }
.kroki strong { display: block; font: 400 1.2rem/1.3 var(--f-szeryf); color: var(--gesso); }
.nz-dopisek { max-width: 30rem; margin: 1.25rem 0 0; font-size: .9rem; color: var(--szary-jasny); }

/* ---------- sklep: zaproszenie do obrazu na zamówienie ---------- */
.zaproszenie { padding-bottom: var(--odstep); text-align: center; }
.zaproszenie p { color: var(--szary); }

/* ---------- o mnie ---------- */
.o-mnie { display: grid; gap: clamp(2rem, 5vw, 5rem); padding-block: var(--odstep) calc(var(--odstep) * .5); scroll-margin-top: 1rem; }
@media (min-width: 64rem) { .o-mnie { grid-template-columns: 5fr 7fr; align-items: start; } .o-mnie-foto { position: sticky; top: 6rem; } }
.o-mnie-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.o-mnie-tekst { max-width: 40rem; }
.o-mnie-tekst h3 { margin-top: 2.5rem; }
.wstep { font: 400 clamp(1.3rem, 1.1rem + .7vw, 1.65rem)/1.45 var(--f-szeryf); }
.social { display: flex; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.social a, .stopka-social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--linia); border-radius: 50%; }
.social a:hover { border-color: var(--zloto-ciemne); }

/* ---------- opinie kupujących ---------- */
.opinie { padding-top: var(--odstep); }
.opinie-lista { display: flex; gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 1rem var(--margines) 2rem; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margines); }
.opinia-karta { flex: 0 0 clamp(16rem, 24vw, 22rem); scroll-snap-align: start; display: flex; }
.opinia-karta figure { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; margin: 0; padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--gesso-2); box-shadow: 0 6px 18px rgb(18 22 29 / .08), 0 1px 3px rgb(18 22 29 / .05); }
.opinia-karta blockquote, .opinia blockquote { margin: 0; }
/* komputer: sekcja zatrzymuje się na ekranie, a przewijanie strony przesuwa opinie w bok (skrypt.js dodaje klasę i wysokość) */
.opinie-przewijane { padding-top: 0; }
.opinie-przewijane .opinie-scena { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: flex-start; height: 100vh; padding-block: 5.5rem 2.5rem; }
.opinie-przewijane .opinie-lista { flex: 1 1 auto; align-items: stretch; scroll-snap-type: none; }
.opinie-przewijane .opinia-karta { max-height: 100%; }
.opinie-przewijane .opinia-karta figure { justify-content: flex-start; gap: 1.75rem; }
.opinie-przewijane .sekcja-naglowek { margin-bottom: 1rem; }
/* wysokość cytatu jak najdłuższa z krótkich opinii (11 linii); dłuższa przewija się wewnątrz karty */
.opinia-karta blockquote p { max-height: 11lh; margin: 0; padding-right: .4rem; overflow-y: auto; overscroll-behavior: contain; font: italic 400 1.05rem/1.5 var(--f-szeryf); scrollbar-width: thin; scrollbar-color: var(--zloto) transparent; }
.opinia-karta figcaption { display: grid; gap: .8rem; font-size: .9rem; }
.opinia-karta figcaption > span { font-weight: 600; }
.opinia-karta a { display: flex; align-items: center; gap: .75rem; color: var(--szary); text-decoration: none; }
.opinia-karta a:hover { color: var(--zloto-ciemne); }
.opinia-karta em { font-family: var(--f-szeryf); font-size: 1.05em; color: var(--grafit); }
/* obraz w ramie cały (bez przycinania) w kwadracie 7rem, zbliżenie struktury wypełnia kwadrat */
.opinia-miniatura { width: 8.4rem; height: 8.4rem; object-fit: contain; object-position: left center; flex: none; }
.opinia-miniatura:not(.typ-obraz) { object-fit: cover; }
.opinia-miniatura.typ-obraz { width: auto; height: auto; max-width: 8.4rem; max-height: 8.4rem; }
.opinia { padding-block: var(--odstep) 0; }
.opinia blockquote p { margin: 0; font: italic 400 clamp(1.3rem, 1.1rem + .7vw, 1.65rem)/1.45 var(--f-szeryf); }
.opinia figcaption { margin-top: 1rem; font: 600 .75rem/1.3 var(--f-tekst); letter-spacing: .2em; text-transform: uppercase; color: var(--zloto-ciemne); }

/* ---------- katalog Art New York ---------- */
.katalog { padding-block: var(--odstep); overflow-x: clip; background: var(--gesso-2); box-shadow: 0 0 0 100vmax var(--gesso-2); clip-path: inset(0 -100vmax); }
/* czasopismo: rozkładówka dwóch stron; przewracana strona zagina się od narożnika (warstwy ustawia skrypt.js).
   Zamknięte (okładka, koniec) przesuwa się do środka. */
.ksiazka { width: min(100% - 2 * var(--margines), 66rem); margin-inline: auto; }
.ksiazka-scena { position: relative; aspect-ratio: 2446 / 1583; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; transition: translate .9s cubic-bezier(.3, .7, .2, 1); }
.ksiazka-scena:active { cursor: grabbing; }
.ksiazka-scena[data-stan="poczatek"] { translate: -25% 0; }
.ksiazka-scena[data-stan="koniec"] { translate: 25% 0; }
/* jeden cień pod widocznymi stronami */
.ksiazka-scena::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; box-shadow: 0 16px 36px rgb(18 22 29 / .25); transition: left .9s cubic-bezier(.3, .7, .2, 1), right .9s cubic-bezier(.3, .7, .2, 1); }
.ksiazka-scena[data-stan="poczatek"]::before { left: 50%; }
.ksiazka-scena[data-stan="koniec"]::before { right: 50%; }
.ks-strona, .ks-wierzch, .ks-klapa { position: absolute; top: 0; overflow: hidden; background: #f3f0ea; }
.ks-strona { width: 50%; height: 100%; }
.ks-lewa { left: 0; }
.ks-prawa { left: 50%; }
.ks-strona.brak { background: none; }
.ks-strona img, .ks-wierzch img, .ks-klapa img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.ks-wierzch, .ks-klapa { left: 0; transform-origin: 0 0; }
.ks-klapa-oprawa, .ks-cien, .ks-polysk { position: absolute; inset: 0; pointer-events: none; }
.ks-cien, .ks-polysk { overflow: hidden; }
.ks-cien i, .ks-polysk i { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
/* cień zagiętej kartki na stronie pod spodem i połysk papieru przy zgięciu */
.ks-cien i { background: linear-gradient(rgb(18 22 29 / .34), rgb(18 22 29 / .12) 30%, rgb(18 22 29 / 0)); }
.ks-polysk i { background: linear-gradient(rgb(18 22 29 / .16), rgb(255 255 255 / .3) 9%, rgb(255 255 255 / .08) 40%, rgb(255 255 255 / 0) 75%, rgb(18 22 29 / .06)); }
.ks-grzbiet { position: absolute; top: 0; bottom: 0; left: 44%; width: 12%; pointer-events: none; transition: opacity .6s;
  background: linear-gradient(90deg, rgb(18 22 29 / 0), rgb(18 22 29 / .1) 40%, rgb(18 22 29 / .22) 50%, rgb(18 22 29 / .1) 60%, rgb(18 22 29 / 0)); }
.ksiazka-scena:not([data-stan="otwarta"]) .ks-grzbiet { opacity: 0; }
.ksiazka-sterowanie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem; margin-top: 3rem; }
.ksiazka-sterowanie > button:not(.przycisk) { width: 3rem; height: 3rem; border: 1px solid var(--linia); border-radius: 50%; background: transparent; color: var(--grafit); font: 300 1.8rem/1 var(--f-tekst); cursor: pointer; }
.ksiazka-sterowanie > button:not(.przycisk):hover:not(:disabled) { border-color: var(--zloto-ciemne); color: var(--zloto-ciemne); }
.ksiazka-sterowanie > button:disabled { opacity: .35; cursor: default; }
.ks-licznik { min-width: 11rem; text-align: center; font-size: .95rem; color: var(--szary); font-variant-numeric: tabular-nums; }
@media (max-width: 47.99rem) { .ks-licznik { order: -1; flex-basis: 100%; } }

/* ---------- sklep ---------- */
.sklep-naglowek { padding-block: clamp(2rem, 6vw, 5rem) 2.5rem; }
.filtry { display: none; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.js .filtry { display: flex; }
.filtry button { min-height: 2.75rem; padding: .5rem 1.1rem; border: 1px solid var(--linia); border-radius: 2rem; background: transparent; color: var(--grafit); font: 500 .95rem/1 var(--f-tekst); cursor: pointer; }
.filtry button span { margin-left: .3rem; color: var(--szary); font-variant-numeric: tabular-nums; }
.filtry button[aria-pressed="true"] { background: var(--noc); border-color: var(--noc); color: var(--gesso); }
.filtry button[aria-pressed="true"] span { color: var(--zloto); }
.sklep-lista { padding-bottom: var(--odstep); }
.sprzedane-grupa { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 2rem; border-top: 1px solid var(--linia); }
.sprzedane-tytul { margin-bottom: 2rem; }

/* ---------- strona obrazu ---------- */
.okruszki { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1rem 1.5rem; font-size: .85rem; color: var(--szary); }
.okruszki a { text-decoration: none; }
.obraz { display: grid; gap: 2rem; width: min(100% - 2 * var(--margines), 92rem); margin-inline: auto; padding-bottom: var(--odstep); }
.obraz-zdjecia { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.obraz-zdjecia img { width: 100%; background: var(--gesso-2); }
.obraz-zdjecia a { display: block; cursor: zoom-in; }
@media (max-width: 63.99rem) {
  .obraz-zdjecia { display: flex; margin-inline: calc(-1 * var(--margines)); padding-inline: var(--margines); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margines); scrollbar-width: none; }
  .obraz-zdjecia li { flex: 0 0 86%; scroll-snap-align: start; }
  .obraz-zdjecia img { aspect-ratio: 4 / 5; object-fit: cover; }
  .obraz-zdjecia li.typ-obraz img { object-fit: contain; }
}
@media (min-width: 64rem) {
  .obraz { grid-template-columns: minmax(0, 1.5fr) minmax(22rem, 1fr); gap: clamp(2.5rem, 4vw, 5rem); align-items: start; }
  .obraz-zdjecia { grid-template-columns: 1fr 1fr; }
  .obraz-zdjecia li:first-child { grid-column: 1 / -1; }
  .obraz-zdjecia li + li img { aspect-ratio: 4 / 5; object-fit: cover; }
  /* obraz w ramie: cały, bez przycinania, na pełną szerokość galerii */
  .obraz-zdjecia li.typ-obraz { grid-column: 1 / -1; }
  .obraz-zdjecia li.typ-obraz img { aspect-ratio: auto; object-fit: contain; }
  .obraz-info { position: sticky; top: 5.5rem; }
}
.obraz-info h1 { margin-bottom: .35rem; font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.75rem); }
.obraz-wymiary { margin-bottom: 1.5rem; font-size: 1.05rem; color: var(--szary); }
.obraz-cena { margin-bottom: .3rem; font: 400 2rem/1.2 var(--f-szeryf); }
.obraz-cena .cena { font-weight: 400; }
.obraz-cena .cena[class*="status-"] { font: 500 1.1rem/1.2 var(--f-tekst); }
.omnibus { font-size: .85rem; color: var(--szary); }
.technika { margin-block: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linia); color: var(--szary); font-size: 1rem; }
.akcje { display: grid; gap: .6rem; margin-bottom: 2rem; }
.niedostepny { margin: 0 0 .5rem; font-weight: 500; }
.fakty { display: grid; margin: 0; font-size: .95rem; }
.fakty div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding-block: .6rem; border-top: 1px solid var(--linia); }
.fakty dt { color: var(--szary); }
.fakty dd { margin: 0; }

.faktura { padding-block: var(--odstep); background: #1b2029; }
.faktura h2 { margin-bottom: .4rem; }
.faktura-lista { display: flex; gap: clamp(.75rem, 1.5vw, 1.5rem); margin: 2.5rem 0 0; padding: 0 var(--margines) 1rem; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margines); }
.faktura-lista li { flex: 0 0 clamp(17rem, 40vw, 36rem); scroll-snap-align: start; overflow: hidden; }
.faktura-lista a { display: block; cursor: zoom-in; }
.faktura-lista img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.opis { padding-block: var(--odstep) 0; }
.opis p:first-of-type { font: 400 clamp(1.3rem, 1.1rem + .7vw, 1.65rem)/1.45 var(--f-szeryf); }

.skala { padding-block: var(--odstep) 0; }
.skala-svg { width: 100%; max-width: 60rem; max-height: 30rem; margin: 1rem auto; background: linear-gradient(var(--gesso-2), var(--gesso-2)) no-repeat 0 0 / 100% 100%; overflow: visible; }
.s-podloga { stroke: var(--szary-jasny); stroke-width: 1; }
.s-obraz { fill: var(--linia); }
.s-rama { fill: none; stroke: var(--grafit); stroke-width: 1; }
.s-mebel, .s-osoba { fill: none; stroke: var(--szary); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.s-podpis { font: 500 7.5px var(--f-tekst); fill: var(--szary); text-anchor: middle; }
.s-tytul { font: 500 9px var(--f-szeryf); fill: var(--szary); text-anchor: end; }
.podpis { font-size: .9rem; color: var(--szary); text-align: center; }

.pokrewne { padding-block: var(--odstep); }
/* karuzela: przewijanie w bok palcem, kółkiem z Shift, przeciąganiem myszą (skrypt.js) i strzałkami; karta zatrzymuje się przy krawędzi */
.karuzela { --n: 1.7; --odst: clamp(.75rem, 2vw, 2rem); position: relative; display: flex; gap: var(--odst); margin: 0; padding: 0 max(var(--margines), (100% - 92rem) / 2) 1.25rem; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--margines), (100% - 92rem) / 2); overscroll-behavior-x: contain; }
@media (min-width: 48rem) { .karuzela { --n: 3.3; } }
@media (min-width: 80rem) { .karuzela { --n: 4.3; } }
/* listy przewijane w bok: gruby złoty pasek przewijania, łatwy do złapania myszą */
.opinie-lista, .faktura-lista, .karuzela { scrollbar-width: auto; scrollbar-color: var(--zloto) var(--gesso-2); }
@supports selector(::-webkit-scrollbar) {
  .opinie-lista, .faktura-lista, .karuzela { scrollbar-width: unset; scrollbar-color: unset; }
  :is(.opinie-lista, .faktura-lista, .karuzela)::-webkit-scrollbar { height: 14px; }
  :is(.opinie-lista, .faktura-lista, .karuzela)::-webkit-scrollbar-track { margin-inline: var(--margines); border-radius: 7px; background: var(--gesso-2); }
  :is(.opinie-lista, .faktura-lista, .karuzela)::-webkit-scrollbar-thumb { border-radius: 7px; background: var(--zloto-blik); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -1px 0 rgb(90 64 20 / .3); }
  :is(.opinie-lista, .faktura-lista, .karuzela)::-webkit-scrollbar-thumb:hover { background: var(--zloto-blik) 100% 0 / 160% 100%; box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -1px 0 rgb(90 64 20 / .3), 0 0 6px rgb(201 164 92 / .6); }
}
.karuzela > li { flex: 0 0 calc((100% - (var(--n) - 1) * var(--odst)) / var(--n)); scroll-snap-align: start; }
.karuzela.ciagniete { scroll-snap-type: none; cursor: grabbing; }
.karuzela.ciagniete a { pointer-events: none; }
.karuzela-strzalki { display: flex; gap: .5rem; }
@media (max-width: 47.99rem) { .karuzela-strzalki { display: none; } }
.karuzela-strzalki button { width: 3rem; height: 3rem; border: 1px solid var(--linia); border-radius: 50%; background: transparent; color: var(--grafit); font: 300 1.8rem/1 var(--f-tekst); cursor: pointer; }
.karuzela-strzalki button:hover:not(:disabled) { border-color: var(--zloto-ciemne); color: var(--zloto-ciemne); }
.karuzela-strzalki button:disabled { opacity: .3; cursor: default; }

.pasek-kup { position: fixed; inset: auto 0 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem var(--margines) calc(.6rem + env(safe-area-inset-bottom)); background: var(--noc); color: var(--gesso); font-size: .95rem; }
.pasek-kup strong { display: block; font: 400 1.05rem/1.2 var(--f-szeryf); }
.pasek-kup .przycisk { min-height: 2.75rem; }
@media (min-width: 64rem) { .pasek-kup { display: none; } }
@media (max-width: 63.99rem) { .s-obraz:has(.pasek-kup) .stopka { padding-bottom: 5rem; } .s-obraz:has(.pasek-kup) .prywatnosc { bottom: 5rem; } }

/* ---------- okna zamówienia i zapytania o obraz na zamówienie ---------- */
.okno { width: min(100% - 1.5rem, 46rem); max-height: 94dvh; padding: 0; border: 0; background: var(--gesso); color: var(--grafit); overscroll-behavior: contain; }
.okno::backdrop { background: rgb(18 22 29 / .7); backdrop-filter: blur(3px); }
.zamow-form, .zamow-ok { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 4vw, 2.5rem); }
.zamow-naglowek { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.zamow-naglowek h2 { margin: 0; font-size: 1.75rem; }
.zamow-naglowek p { margin: 0; color: var(--szary); }
.zamow-naglowek .eyebrow { margin-bottom: .35rem; }
.zamow-miniatura { width: 4.5rem; height: 5.6rem; object-fit: cover; }
.zamknij { align-self: start; width: 2.75rem; height: 2.75rem; border: 1px solid var(--linia); background: transparent; font: 400 1.6rem/1 var(--f-tekst); cursor: pointer; }
.okno fieldset { display: grid; gap: 1rem; margin: 0; padding: 0; border: 0; }
.okno legend { margin-bottom: 1rem; font: 500 1.15rem/1.2 var(--f-szeryf); }
@media (min-width: 36rem) { .okno fieldset { grid-template-columns: 1fr 1fr; } .okno .cale { grid-column: 1 / -1; } }
.okno label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 500; }
.okno input:not([type=checkbox], [type=radio]), .okno textarea, .okno select { width: 100%; min-height: 3rem; padding: .7rem .8rem; border: 1px solid var(--szary-jasny); border-radius: 0; background: #fff; color: var(--grafit); font: 400 1rem/1.4 var(--f-tekst); }
.okno input:focus-visible, .okno textarea:focus-visible, .okno select:focus-visible { outline: 2px solid var(--zloto-ciemne); outline-offset: 0; border-color: var(--zloto-ciemne); }
.okno textarea { resize: vertical; }
.pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.podsumowanie { margin: 0; padding: 1rem 0; border-block: 1px solid var(--linia); }
.podsumowanie div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .2rem; }
.podsumowanie dd { margin: 0; font-variant-numeric: tabular-nums; }
.podsumowanie .razem { margin-top: .4rem; font: 400 1.35rem/1.3 var(--f-szeryf); }
.drobne { margin: 0; font-size: .85rem; color: var(--szary); }
.okno .zgoda { display: flex; gap: .7rem; align-items: start; font-weight: 400; }
.zgoda input { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .1rem; accent-color: var(--zloto-ciemne); }
.zamow-blad { margin: 0; padding: .8rem 1rem; background: #fbe9e7; color: #8a1c14; font-size: .95rem; }
.zamow-ok h2 { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem); }
.zamow-ok:focus { outline: none; }
.zapytanie .zamow-naglowek { grid-template-columns: 1fr auto; }
.okno .pigulki { display: flex; flex-wrap: wrap; gap: .5rem; }
.okno .pigulka { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--szary-jasny); border-radius: 2rem; background: #fff; font-weight: 500; cursor: pointer; }
.pigulka input { position: absolute; opacity: 0; pointer-events: none; }
.pigulka:hover { border-color: var(--zloto-ciemne); }
.pigulka:has(input:checked) { background: var(--zloto); border-color: var(--zloto); color: var(--noc); font-weight: 700; }
.pigulka:has(input:focus-visible) { outline: 2px solid var(--zloto-ciemne); outline-offset: 2px; }
/* orientacja: mały prostokąt w proporcjach obrazu */
.orient-pion::before, .orient-poziom::before, .orient-kwadrat::before { content: ""; border: 1.5px solid currentColor; }
.orient-pion::before { width: .65rem; height: .95rem; }
.orient-poziom::before { width: .95rem; height: .65rem; }
.orient-kwadrat::before { width: .8rem; height: .8rem; }
.podglad-wielkosci { margin: 0; padding: .75rem .75rem .6rem; background: var(--gesso-2); }
.podglad-wielkosci .skala-svg { display: block; max-height: 15rem; margin: 0 auto; background: none; }
.podglad-wielkosci .s-obraz { fill: var(--zloto); fill-opacity: .45; }
.podglad-wielkosci .s-podpis { font-size: 14px; fill: var(--grafit); }
.podglad-wielkosci .p-obraz { transition: x .3s, y .3s, width .3s, height .3s; }
.podglad-wielkosci figcaption { margin-top: .4rem; font-size: .8rem; color: var(--szary); text-align: center; }
@media (prefers-reduced-motion: reduce) { .podglad-wielkosci .p-obraz { transition: none; } }

/* ---------- podstrony z nagłówkiem na fakturze ---------- */
.naglowek-strony { position: relative; display: grid; align-items: end; min-height: 30rem; padding: 9rem 0 clamp(3rem, 6vw, 5rem); overflow: hidden; }
.naglowek-strony-tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.naglowek-strony-podpis { position: absolute; right: var(--margines); bottom: 1rem; z-index: 3; padding: .3rem .6rem; background: rgb(18 22 29 / .55); font-size: .8rem; color: var(--gesso); text-decoration: none; }
.naglowek-strony-podpis em { font-family: var(--f-szeryf); }
/* cień tylko pod tekstem: z góry pod menu, z lewej (komputer) albo od dołu (telefon); reszta obrazu zostaje w pełnych kolorach */
.naglowek-strony::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgb(18 22 29 / .45), rgb(18 22 29 / 0) 25%), linear-gradient(0deg, rgb(18 22 29 / .82) 0%, rgb(18 22 29 / .55) 45%, rgb(18 22 29 / 0) 75%); }
@media (min-width: 48rem) { .naglowek-strony::before { background: linear-gradient(180deg, rgb(18 22 29 / .45), rgb(18 22 29 / 0) 25%), linear-gradient(90deg, rgb(18 22 29 / .78) 0%, rgb(18 22 29 / .5) 40%, rgb(18 22 29 / 0) 70%); } }
.naglowek-strony .podtytul { color: rgb(244 244 241 / .92); }
.naglowek-strony > div { position: relative; z-index: 3; }
.warsztat { display: grid; gap: 2.5rem clamp(2rem, 5vw, 5rem); padding-block: var(--odstep); }
@media (min-width: 48rem) { .warsztat { grid-template-columns: 1fr 1fr; } }
.warsztat-foto { margin: 0; }
.warsztat-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.warsztat-foto figcaption { margin-top: 1.25rem; font: italic 400 clamp(1.25rem, 1rem + .9vw, 1.7rem)/1.35 var(--f-szeryf); text-wrap: balance; }
.warsztat h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); padding-top: 1.25rem; border-top: 1px solid var(--linia); }
.duza-liczba { font: 400 2.2rem/1.2 var(--f-szeryf); }
.zaproszenie { padding-bottom: var(--odstep); }

/* ---------- kontakt ---------- */
.kontakt { display: grid; gap: 3rem; padding-block: clamp(2rem, 6vw, 5rem) var(--odstep); }
@media (min-width: 64rem) { .kontakt { grid-template-columns: 1fr 1.2fr; align-items: center; } }
.kontakt h2 { font-size: 1.5rem; }
.kontakt-dane { font: 400 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.5 var(--f-szeryf); }
.kontakt-dane a { text-decoration: none; }
.kontakt address { margin-bottom: 1.5rem; font-style: normal; color: var(--szary); }
.kontakt-foto img { width: 100%; }

/* ---------- teksty prawne i 404 ---------- */
.tekst-prawny { padding-block: clamp(2rem, 6vw, 5rem) var(--odstep); }
.tekst-prawny h1 { font-size: clamp(2.3rem, 1.8rem + 2vw, 3.5rem); }
.tekst-prawny h2 { margin-top: 2.5rem; font-size: 1.5rem; scroll-margin-top: 1rem; }
.podpis-listu { margin-top: 3rem; font: 400 1.3rem/1.5 var(--f-szeryf); }
.blad404 { padding-block: clamp(3rem, 10vw, 8rem); }

/* ---------- stopka ---------- */
.stopka { background: var(--noc); color: var(--szary-jasny); padding: clamp(3rem, 7vw, 5.5rem) var(--margines) 2rem; font-size: .95rem; }
.stopka a { color: var(--gesso); text-decoration: none; }
.stopka a:hover { color: var(--zloto-jasne); }
.stopka-siatka { display: grid; gap: 2.5rem; width: min(100%, 92rem); margin-inline: auto; }
@media (min-width: 48rem) { .stopka-siatka { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.stopka-imie { margin: 0; font: 400 1.8rem/1.1 var(--f-szeryf); color: var(--gesso); }
.stopka-dopisek { margin: .4rem 0 1.5rem; font: 600 .65rem/1 var(--f-tekst); letter-spacing: .38em; text-transform: uppercase; color: var(--zloto); }
.stopka-etykieta { margin-bottom: .8rem; font: 600 .72rem/1 var(--f-tekst); letter-spacing: .2em; text-transform: uppercase; color: var(--zloto); }
.stopka-lista { margin: 0; padding: 0; list-style: none; }
.stopka-lista li { padding-block: .2rem; }
.stopka-social { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.stopka-social a { border-color: var(--noc-2); color: var(--gesso); }
.stopka-social a:hover { border-color: var(--zloto); }
.stopka-prawa { width: min(100%, 92rem); margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--noc-2); font-size: .85rem; }

/* ---------- pasek o prywatności ---------- */
.prywatnosc { position: fixed; left: 1rem; bottom: 1rem; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; width: min(100% - 2rem, 34rem); padding: 1rem 1.25rem; background: var(--noc); color: var(--szary-jasny); box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.prywatnosc p { flex: 1 1 16rem; margin: 0; font-size: .88rem; line-height: 1.5; }
.prywatnosc a { color: var(--gesso); }
.prywatnosc button { min-height: 2.75rem; padding: 0 1.25rem; border: 0; background: var(--zloto); color: var(--noc); font: 600 .9rem/1 var(--f-tekst); cursor: pointer; }
.prywatnosc button:hover { background: var(--zloto-jasne); }

/* ---------- powiększenie zdjęć ---------- */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(12 14 19 / .97); color: var(--gesso); }
.lightbox::backdrop { background: rgb(0 0 0 / .6); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 90dvh; width: auto; height: auto; object-fit: contain; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 1px solid rgb(244 244 241 / .25); border-radius: 50%; background: rgb(18 22 29 / .6); color: var(--gesso); font: 300 1.9rem/1 var(--f-tekst); cursor: pointer; }
.lightbox button:hover { border-color: var(--zloto); color: var(--zloto-jasne); }
.lb-zamknij { top: 1rem; right: 1rem; }
.lb-poprz { left: 1rem; top: 50%; translate: 0 -50%; }
.lb-nast { right: 1rem; top: 50%; translate: 0 -50%; }

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