/* assets/fonts/fonts.css */
/* Fonty self-hosted: Playfair Display + Lato (fontsource 5.3.0, licencja SIL OFL). Zero zapytań do Google. */
/* Podzbiory latin + latin-ext (polskie znaki) z unicode-range, przeglądarka pobiera tylko to, czego używa. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02D7-02DD, U+02E0-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02D7-02DD, U+02E0-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02D7-02DD, U+02E0-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02D7-02DD, U+02E0-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02D7-02DD, U+02E0-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-500-italic.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;src:url(../../assets/fonts/files/playfair-display-latin-ext-500-italic.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02D7-02DD, U+02E0-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url(../../assets/fonts/files/lato-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:300;font-display:swap;src:url(../../assets/fonts/files/lato-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02D7-02DD, U+02E0-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/files/lato-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(../../assets/fonts/files/lato-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02D7-02DD, U+02E0-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(../../assets/fonts/files/lato-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(../../assets/fonts/files/lato-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02D7-02DD, U+02E0-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;src:url(../../assets/fonts/files/lato-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;src:url(../../assets/fonts/files/lato-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02D7-02DD, U+02E0-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* assets/css/tokens.css */
/* ==========================================================================
   Pałac Antyków: tokeny designu
   Jedno źródło prawdy: kolory, typografia, rytm, ruch. Zmiana tutaj = zmiana całej strony.
   Paleta i fonty zgodne z briefem marki (brąz / złoto / krem, Playfair Display + Lato).
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- Kolory marki --- */
  --c-brown-950: #1F1410;
  --c-brown-900: #2C1810;   /* tło ciemne, tekst na kremie */
  --c-brown-800: #3A2419;
  --c-brown-700: #5C3A2E;   /* brąz drugorzędny */
  --c-brown-600: #7A5344;
  --c-gold-400:  #D9BE8C;
  --c-gold-500:  #C9A96E;   /* złoto: linie, etykiety, hover */
  --c-gold-600:  #B08D57;
  --c-gold-700:  #8E6F3F;
  --c-gold-800:  #7D633B;   /* złoto do tekstu na kremie: kontrast 5:1 (WCAG AA), etap 6d */
  --c-cream-50:  #FBF8F3;
  --c-cream-100: #F5F0EA;   /* „papier”: tło sekcji jasnych */
  --c-cream-200: #EDE5DA;
  --c-beige-300: #D4C5B0;   /* passe-partout, ramki */
  --c-beige-400: #BFAE95;
  --c-white:     #FFFFFF;   /* tło zdjęć produktowych */

  /* --- Role (nadpisywane w .surface-dark) --- */
  --bg: var(--c-cream-100);
  --bg-elev: var(--c-cream-50);
  --bg-sunken: var(--c-cream-200);
  --fg: var(--c-brown-950);
  --fg-muted: #6E5E53;
  --accent: var(--c-gold-600);
  --accent-soft: var(--c-gold-500);
  --accent-text: var(--c-gold-800);   /* tekst w kolorze złota (etykiety, aktywne linki); --accent zostaje dla linii i ozdobników */
  --line: rgba(44, 24, 16, .14);
  --line-strong: rgba(44, 24, 16, .32);
  --focus: var(--c-gold-600);

  /* --- Typografia --- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(3rem, 1.6rem + 5.2vw, 7.5rem);
  --fs-h1: clamp(2.4rem, 1.6rem + 3vw, 4.75rem);
  --fs-h2: clamp(1.85rem, 1.35rem + 1.8vw, 3.15rem);
  --fs-h3: clamp(1.3rem, 1.15rem + .6vw, 1.7rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-tiny: .75rem;
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --track-caps: .14em;

  /* --- Rytm --- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1360px;
  --measure: 64ch;
  --header-h: 5.25rem;
  --frame-inset: 1.5rem;
  --radius: 0;

  /* --- Ruch --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 220ms;
  --dur: 480ms;
  --dur-slow: 1000ms;

  --z-header: 50;
  --z-toast: 70;
  --bar-h: 0px;                 /* wysokość paska akcji na telefonie (ustawiana poniżej 900 px) */
}

@media (max-width: 899px) {
  :root { --bar-h: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 720px) {
  :root {
    --header-h: 4.5rem;
    --frame-inset: 1rem;
    --section: 3.75rem;
    --space-8: 3rem;
    --space-9: 4rem;
  }
}

/* Ciemna powierzchnia: te same komponenty, odwrócone role kolorów. */
.surface-dark {
  --bg: var(--c-brown-900);
  --bg-elev: var(--c-brown-800);
  --bg-sunken: var(--c-brown-950);
  --fg: var(--c-cream-100);
  --fg-muted: var(--c-beige-300);
  --accent: var(--c-gold-500);
  --accent-soft: var(--c-gold-400);
  --accent-text: var(--c-gold-500);
  --line: rgba(201, 169, 110, .26);
  --line-strong: rgba(201, 169, 110, .55);
  --focus: var(--c-gold-400);
  background-color: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}

/* assets/css/base.css */
/* ==========================================================================
   Pałac Antyków: baza: reset, typografia, siatka, dostępność
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg);
  background-color: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; } /* atrybut hidden wygrywa z każdym display w klasach */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }
p { margin: 0; text-wrap: pretty; }   /* bez pojedynczego słowa w ostatniej linii (D-26) */
main { display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--c-gold-500); color: var(--c-brown-950); }

/* --- Nagłówki: Playfair 400. Ciężar buduje rozmiar, nie pogrubienie. --- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  text-wrap: balance;
  color: inherit;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.012em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.008em; }
h3 { font-size: var(--fs-h3); }
.display { font-size: var(--fs-display); line-height: .98; letter-spacing: -.018em; font-weight: 400; }

/* Etykieta sekcji: Playfair kursywą, złoto. Zamiast tracked-caps: cichsza, bardziej „pałacowa”. */
.eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--accent-text);
}

.lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 300; max-width: var(--measure); }
@media (max-width: 720px) { .lead { font-weight: 400; } .section-head { margin-bottom: var(--space-6); } }
.muted { color: var(--fg-muted); }
.small { font-size: var(--fs-small); }
.num { font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums; }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.prose a { border-bottom: 1px solid var(--accent); transition: color var(--dur-fast) var(--ease); }
.prose a:hover { color: var(--accent-text); }

/* --- Siatka i rytm --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }
.container--wide { max-width: 1600px; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
/* Styk dwóch sekcji na tej samej powierzchni: pojedynczy odstęp zamiast podwójnego. */
.section--joined { padding-top: calc(var(--section) * .55); }
.section--joined-bottom { padding-bottom: calc(var(--section) * .55); }
.grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr)); }
.flow > * + * { margin-top: var(--flow, 1.25rem); }
.hairline { border-top: 1px solid var(--line); }

.section-head { display: grid; gap: var(--space-4); max-width: var(--measure); margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__note { color: var(--fg-muted); font-size: var(--fs-lead); font-weight: 300; }

/* --- Dostępność --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100%; z-index: 100; padding: .75rem 1rem; background: var(--c-brown-900); color: var(--c-cream-100); font-weight: 700; }
.skip-link:focus { top: 1rem; }

/* Płynne przejście między podstronami (View Transitions, progresywnie) */
@view-transition { navigation: auto; }

/* assets/css/components.css */
/* ==========================================================================
   Pałac Antyków: komponenty
   Motyw przewodni: cienka złota ramka „passe-partout” wewnątrz zdjęć.
   Bez cieni, bez gradientów dekoracyjnych, bez zaokrągleń.
   ========================================================================== */

/* --- Ikony (sprite inline w templates/partials/icons.php) --- */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- Nagłówek strony --- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h); display: flex; align-items: center;
  color: var(--c-cream-100);
  background-color: rgba(44, 24, 16, .97);
  border-bottom: 1px solid rgba(201, 169, 110, .22);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
[data-header="transparent"] .site-header { background-color: transparent; border-color: transparent; }
[data-header="transparent"] .site-header.is-scrolled { background-color: rgba(44, 24, 16, .97); border-color: rgba(201, 169, 110, .22); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }

.brand { display: flex; flex-direction: column; gap: .3rem; line-height: 1; }
.brand__name { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: .01em; color: var(--c-cream-100); }
.brand__sub { font-family: var(--font-display); font-style: italic; font-size: .78rem; color: var(--c-gold-500); }
.site-header__start { --gap: .85rem; display: flex; align-items: center; gap: var(--gap); min-width: 0; }
/* Strzałka „Wróć” (etap 7d): przed nazwą, oddzielona cienką złotą kreską; pole dotyku 44 px, sama strzałka w linii marginesu */
.back { position: relative; flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: -.7rem; color: var(--c-cream-100); transition: color var(--dur-fast) var(--ease); }
.back::after { content: ""; position: absolute; top: 50%; right: calc(var(--gap) / -2); width: 1px; height: 1.75rem; background: rgba(201, 169, 110, .45); transform: translateY(-50%); }
.back:hover { color: var(--c-gold-400); }
.back .icon { width: 1.3rem; height: 1.3rem; }
@media (max-width: 400px) { .brand__sub { display: none; } }
@media (max-width: 380px) { .site-header__start { --gap: .6rem; } .brand__name { font-size: 1.3rem; } .site-header__tools { gap: .75rem; } }
@media (max-width: 340px) { .site-header__inner { gap: .5rem; } .brand__name { font-size: 1.18rem; white-space: nowrap; } }

.nav { display: none; }
.nav__list { display: flex; gap: 2.25rem; list-style: none; margin: 0; padding: 0; }
.nav__list a {
  position: relative; display: inline-block; padding: .5rem 0;
  font-size: .8125rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--c-cream-100);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px;
  background: var(--c-gold-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }

.site-header__tools { display: flex; align-items: center; gap: 1.25rem; }
.tool { display: inline-flex; align-items: center; gap: .55rem; color: var(--c-cream-100); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; transition: color var(--dur-fast) var(--ease); }
.tool:hover { color: var(--c-gold-400); }
.tool .icon { width: 1.35rem; height: 1.35rem; }
.tool--phone { display: none; }
.tool--list { position: relative; min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
.pill { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 0; background: var(--c-gold-500); color: var(--c-brown-950); font-size: .6875rem; font-weight: 700; line-height: 1; }
.tool--list .pill { position: absolute; top: .1rem; right: .1rem; }
.pill[hidden] { display: none; }

.burger { position: relative; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--c-cream-100); }
.burger span { position: absolute; width: 1.5rem; height: 1px; background: currentColor; transition: transform var(--dur) var(--ease-out); }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

@media (min-width: 900px) {
  .nav { display: block; }
  .burger { display: none; }
  .tool--phone { display: inline-flex; }
}

/* --- Menu mobilne: pełny ekran, linki w Playfair --- */
.mobile-nav {
  position: fixed; inset: 0; z-index: calc(var(--z-header) - 1);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + var(--space-6)) var(--gutter) var(--space-7);
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mobile-nav li a { display: block; padding: .7rem 0; font-family: var(--font-display); font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.1; border-bottom: 1px solid var(--line); }
.mobile-nav__contact { display: grid; gap: .6rem; margin-top: var(--space-7); font-size: var(--fs-small); color: var(--fg-muted); }
.mobile-nav__contact a, .mobile-nav__contact p { display: inline-flex; align-items: center; gap: .6rem; color: var(--fg); }
body.nav-open { overflow: hidden; }
body.nav-open .site-header { background-color: var(--c-brown-900); border-color: transparent; animation: none; }

/* --- Stopka --- */
.site-footer { padding-block: var(--space-8) var(--space-6); }
.site-footer__top { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
@media (min-width: 900px) { .site-footer__top { grid-template-columns: 1.2fr 2fr; } }
.site-footer__name { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; margin-bottom: var(--space-3); }
.site-footer__tagline { font-family: var(--font-display); font-style: italic; color: var(--accent-soft); }
.site-footer__cols { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.site-footer__cols .eyebrow { margin-bottom: var(--space-3); }
.site-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.site-footer__cols a { display: inline-flex; align-items: center; min-height: 2.5rem; transition: color var(--dur-fast) var(--ease); }
.site-footer__cols a:hover { color: var(--accent-soft); }
.site-footer__store { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--fg-muted); }
.site-footer__store span { color: var(--fg); }
.site-footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-small); color: var(--fg-muted); }
.site-footer__bottom a:hover { color: var(--accent-soft); }

/* --- Przyciski (role kolorów: to samo CSS działa na kremie i na brązie) --- */
.btn {
  --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-border: var(--fg);
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 1rem 1.75rem; border: 1px solid var(--btn-border); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--accent); --btn-border: var(--accent); --btn-fg: var(--c-brown-950); }
.btn:active { transform: translateY(1px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-border: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-border: var(--fg); }
.btn--gold { --btn-bg: var(--c-gold-600); --btn-fg: var(--c-brown-950); --btn-border: var(--c-gold-600); }
.btn--gold:hover { --btn-bg: var(--c-gold-500); --btn-border: var(--c-gold-500); }
.btn--lg { padding: 1.2rem 2.25rem; font-size: .82rem; }
.btn--sm { padding: .7rem 1.1rem; font-size: .7rem; }
.btn .icon { width: 1rem; height: 1rem; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }
/* długie etykiety („Dodaj cały zestaw do listy zapytań”) na wąskim ekranie łamią się zamiast wychodzić poza ekran */
.btn { max-width: 100%; }
@media (max-width: 560px) { .btn--lg, .product__actions .btn, .sharedlist__actions .btn { white-space: normal; text-align: center; line-height: 1.35; } }

.link-quiet { border-bottom: 1px solid var(--accent); transition: color var(--dur-fast) var(--ease); }
.link-quiet:hover { color: var(--accent-text); }

/* --- Status mebla: kropka + słowo, bez kapitalików --- */
.status { display: inline-flex; align-items: center; gap: .45em; font-size: .75rem; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--fg-muted); }
.status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--c-beige-400); }
.status--dostepny { color: var(--c-gold-800); }
.status--dostepny::before { background: var(--c-gold-600); }
.status--rezerwacja { color: var(--c-brown-700); }
.status--rezerwacja::before { background: var(--c-brown-600); }
.status--wypozyczony { color: var(--fg-muted); }
.status--wypozyczony::before { background: transparent; border: 1px solid currentColor; }
.status--badge { padding: .5em .7em; background: rgba(255, 255, 255, .92); border: 1px solid var(--c-cream-200); }
.surface-dark .status--dostepny { color: var(--c-gold-400); }
.surface-dark .status--rezerwacja { color: var(--c-beige-300); }

/* --- Karta mebla: biały „cokół” 1:1 z wewnętrzną ramką, bez obramowania zewnętrznego --- */
.card { --frame: .75rem; position: relative; display: flex; flex-direction: column; gap: .9rem; color: inherit; }
/* Zdjęcie wypełnia złotą ramkę: biały „cokół”, w nim ramka, a zdjęcie dokładnie w jej świetle (kadr kwadratowy). */
.card__media { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-white); }
.card__photo { position: absolute; inset: var(--frame); overflow: hidden; background: var(--c-cream-50); }
.card__photo img, .card__photo svg { display: block; width: 100%; height: 100%; object-fit: cover; }   /* od 7g-v2 bez powiększania przy najechaniu (C6) */
.card__photo .ph__frame, .pgallery__zoom .ph__frame { display: none; }   /* placeholder w ramce karty, bez drugiej, własnej ramki */
.card__media::after { content: ""; position: absolute; inset: calc(var(--frame) - 1px); z-index: 1; border: 1px solid var(--c-beige-300); pointer-events: none; transition: border-color var(--dur) var(--ease); }
.card:hover .card__media::after, .card:focus-within .card__media::after { border-color: var(--c-gold-600); }
/* Powrót z karty mebla do kolekcji (etap 7d): złota ramka przez chwilę wskazuje ostatnio oglądany mebel */
.card.is-back .card__media::after { border-color: var(--c-gold-600); }
.card__number { position: absolute; left: calc(var(--frame) + .45rem); top: calc(var(--frame) + .45rem); z-index: 2; padding: .32em .45em; background: rgba(255, 255, 255, .92); font-family: var(--font-display); font-variant-numeric: lining-nums; font-size: .85rem; line-height: 1; letter-spacing: .04em; color: var(--c-gold-700); }
.card__status { position: absolute; right: calc(var(--frame) + .45rem); top: calc(var(--frame) + .45rem); z-index: 2; }
.card__body { display: grid; gap: .3rem; align-content: start; }
.card__title { align-self: start; max-height: calc(2em * 1.3); font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* align-self + max-height: w siatce Chrome potrafi rozciągnąć blok z line-clamp i pokazać 3. linię */
.card__era, .card__dims { font-size: var(--fs-small); color: var(--fg-muted); }
.card__state { display: none; margin-bottom: .1rem; }   /* status pod zdjęciem, tylko na telefonie (niżej) */
.card__dims { font-variant-numeric: tabular-nums; }
.cards { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
@media (max-width: 560px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 1rem .75rem; }
  .card { --frame: .5rem; }
  .card__title { font-size: 1rem; }
  .card__number { left: calc(var(--frame) + .3rem); top: calc(var(--frame) + .3rem); font-size: .72rem; }
  /* telefon: plakietka 12 px nie mieści się obok numeru PA, więc status schodzi pod zdjęcie (D-26) */
  .card__status { display: none; }
  .card__state { display: inline-flex; font-size: .75rem; }
}

/* --- Pola formularza: podkreślenie zamiast ramki --- */
.field { display: grid; gap: .5rem; }
.field__label { font-size: var(--fs-small); color: var(--fg-muted); }
.field__input { width: 100%; padding: .75rem 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; font-size: 1rem; transition: border-color var(--dur-fast) var(--ease); }
.field__input::placeholder { color: var(--fg-muted); opacity: .65; }
.field__input:focus { outline: 0; border-bottom-color: var(--accent); }
textarea.field__input { min-height: 8rem; resize: vertical; }
.field__hint { font-size: var(--fs-small); color: var(--fg-muted); }

/* --- Zdjęcia i ramki --- */
.media { position: relative; overflow: hidden; background: var(--bg-sunken); isolation: isolate; }
.media > img, .media > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--16-9 { aspect-ratio: 16 / 9; }
.media--3-2 { aspect-ratio: 3 / 2; }
.media--4-5 { aspect-ratio: 4 / 5; }
.media--1-1 { aspect-ratio: 1 / 1; }
.media--framed::after { content: ""; position: absolute; inset: var(--frame-inset); border: 1px solid rgba(201, 169, 110, .8); pointer-events: none; z-index: 1; }
.ph { display: block; width: 100%; height: 100%; }
.ph__label { font-family: var(--font-display); font-style: italic; }
.ph__sub { font-family: var(--font-body); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }

/* --- Hero: pełny ekran, oś symetrii (jak pałac), złota ramka rysowana na starcie.
   Zdjęcie sięga 12% ponad hero: zostało po paralaksie (usuniętej w 7g), trzyma ten sam kadr co wcześniej. --- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: calc(var(--header-h) + 2rem) var(--gutter) calc(4rem + var(--bar-h)); }
.hero__media { position: absolute; inset: -12% 0 0 0; z-index: 0; }
.hero__media svg, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(31, 20, 16, .42); }
.hero { --frame-top: calc(var(--header-h) + .5rem); }
/* SVG bez viewBoxu: jednostki = piksele, więc kreska ma zawsze 1 px, a pathLength="1" pozwala rysować ramkę od 0 do 1. */
.hero__frame { position: absolute; left: var(--frame-inset); top: var(--frame-top); width: calc(100% - 2 * var(--frame-inset)); height: calc(100% - var(--frame-top) - var(--frame-inset) - var(--bar-h)); z-index: 2; overflow: visible; fill: none; stroke: var(--c-gold-500); stroke-width: 1; pointer-events: none; }
.hero__frame rect { x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero__content { position: relative; z-index: 3; display: grid; justify-items: center; gap: var(--space-5); max-width: 56rem; }
.hero__title { font-size: var(--fs-display); line-height: .98; letter-spacing: -.015em; color: var(--c-cream-100); }
.hero__subtitle { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); color: rgba(245, 240, 234, .88); max-width: 40ch; text-wrap: balance; }
.hero__cta { margin-top: var(--space-3); }
/* Od 7g-v2 bez znacznika „Przewiń” (C3, D-26). Na komputerze hero ma 90% wysokości ekranu: pod ramką widać pas kremowej
   sekcji, który mówi, że strona idzie dalej. Na telefonie pełny ekran nad paskiem akcji, jak dotąd. */
@media (min-width: 900px) { .hero { min-height: 90svh; } }

/* --- Liczby (strona główna, O nas) ---
   Liczby zawsze na jednej linii bazowej, podpisy zaczynają się na jednej wysokości (dwuwierszowy podpis nie podnosi liczby).
   Od 1024 px (strona główna i O nas): jeden rząd od lewej do prawej krawędzi, kolumny szerokie jak ich treść, więc odstępy
   między liczbami i podpisami są równe. Węziej: dwa na dwa. Na O nas pas liczb ma linię także pod spodem (stats--band). */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-4); align-items: start; padding-block: var(--space-6); border-block: 1px solid var(--line); }
.stat { display: grid; gap: .35rem; align-content: start; }
.stat__value { font-family: var(--font-display); font-size: clamp(2.6rem, 1.6rem + 3vw, 4.5rem); line-height: .95; letter-spacing: -.02em; font-variant-numeric: lining-nums; white-space: nowrap; }
.stat__value small { font-size: .5em; color: var(--accent-text); margin-left: .1em; }
.stat__num { display: inline-grid; }
.stat__num::before { content: attr(data-final); visibility: hidden; grid-area: 1 / 1; }
.stat__num > span { grid-area: 1 / 1; text-align: right; }
.stat__label { font-size: var(--fs-small); color: var(--fg-muted); max-width: 22ch; }
.stats--open { border-bottom: 0; }
.stats--band { border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) {
  .stats--open { grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: auto; justify-content: space-between; column-gap: var(--space-6); row-gap: .35rem; align-items: baseline; }
  .stats--open .stat { display: contents; }
  .stats--open .stat__label { align-self: start; max-width: none; text-wrap: balance; }
  .stats--open .stat--lg .stat__value { font-size: clamp(3.5rem, 2rem + 5vw, 7rem); }
}

/* --- Separator „koniec rozdziału”: linia od środka na boki + romb (motyw złotej linii) --- */
.ornament { display: flex; align-items: center; gap: 1.25rem; color: var(--accent); }
.ornament::before, .ornament::after { content: ""; flex: 1 1 0; height: 1px; background: currentColor; opacity: .7; }
.ornament::before { transform-origin: right center; }
.ornament::after { transform-origin: left center; }
.ornament__mark { width: .55rem; height: .55rem; border: 1px solid currentColor; transform: rotate(45deg); flex: none; }

/* --- Pasek akcji na telefonie (strefa kciuka) --- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-header) - 2); display: flex; background: rgba(44, 24, 16, .97); border-top: 1px solid rgba(201, 169, 110, .35); padding-bottom: env(safe-area-inset-bottom, 0); }
.mobile-bar__item { position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.5rem; color: var(--c-cream-100); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.mobile-bar__item + .mobile-bar__item { border-left: 1px solid rgba(201, 169, 110, .18); }
.mobile-bar__item:active { background: rgba(201, 169, 110, .16); }
.mobile-bar__item[aria-current="page"] { color: var(--c-gold-400); }
.mobile-bar__item .icon { width: 1.25rem; height: 1.25rem; }
.mobile-bar__item .pill { margin-left: -.15rem; }
@media (min-width: 900px) { .mobile-bar { display: none; } }
body { padding-bottom: var(--bar-h); }
.toast { bottom: calc(1.5rem + var(--bar-h)); }

/* --- Komunikaty --- */
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: var(--z-toast); transform: translate(-50%, 1rem); max-width: min(90vw, 32rem); padding: .9rem 1.25rem; background: var(--c-brown-900); color: var(--c-cream-100); border: 1px solid rgba(201, 169, 110, .45); font-size: var(--fs-small); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--c-gold-400); margin-left: .6rem; border-bottom: 1px solid currentColor; }
.soon { display: grid; gap: .5rem; padding: var(--space-6); border: 1px dashed var(--line-strong); color: var(--fg-muted); font-size: var(--fs-small); }
.soon strong { color: var(--fg); font-weight: 700; }

/* ==========================================================================
   Etap 3: komponenty: przycisk listy na karcie, pola wyboru, select, chipy, okruszki, lightbox, błędy formularza
   ========================================================================== */

/* --- Przycisk „dodaj do listy” na karcie: w prawym dolnym rogu zdjęcia, poza linkiem (poprawny HTML) --- */
.card { display: grid; grid-template-rows: auto 1fr; }
.card__media { display: block; grid-area: 1 / 1; }
.card__body { grid-area: 2 / 1; }
.card__title a { color: inherit; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* cała karta klikalna */
.card__add { grid-area: 1 / 1; align-self: end; justify-self: end; position: relative; z-index: 2; margin: 0 calc(var(--frame) + .45rem) calc(var(--frame) + .45rem) 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--c-gold-600); background: rgba(255, 255, 255, .95); color: var(--c-gold-700); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.card__add .icon { width: 1.1rem; height: 1.1rem; }
.card__add .icon--check { display: none; }
.card__add:hover { background: var(--c-gold-600); color: var(--c-brown-950); }
.card__add:active { transform: scale(.94); }
.card__add[aria-pressed="true"] { background: var(--c-gold-600); border-color: var(--c-gold-600); color: var(--c-brown-950); }
.card__add[aria-pressed="true"] .icon--plus { display: none; }
.card__add[aria-pressed="true"] .icon--check { display: block; }
@media (max-width: 560px) { .card__add { width: 2.25rem; height: 2.25rem; margin: 0 calc(var(--frame) + .3rem) calc(var(--frame) + .3rem) 0; } }
.product__add .icon--check { display: none; }
.product__add[aria-pressed="true"] .icon--plus { display: none; }
.product__add[aria-pressed="true"] .icon--check { display: block; }
.product__add[aria-pressed="true"] { --btn-bg: var(--fg); --btn-border: var(--fg); --btn-fg: var(--bg); }

/* --- Pole wyboru (checkbox) w stylu strony --- */
.check { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; font-size: var(--fs-small); line-height: 1.5; }
.check__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; border: 1px solid var(--line-strong); background: var(--bg-elev); position: relative; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.check__box::after { content: ""; position: absolute; left: .32rem; top: .1rem; width: .3rem; height: .6rem; border: solid var(--c-brown-950); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.check__input:checked + .check__box { background: var(--c-gold-500); border-color: var(--c-gold-600); }
.check__input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check__input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- Select (sortowanie) --- */
.select { appearance: none; -webkit-appearance: none; padding: .55rem 2rem .55rem .25rem; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E5E53' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .25rem center / 1rem; font-size: var(--fs-small); font-weight: 700; color: var(--fg); cursor: pointer; }
.select:focus { outline: 0; border-bottom-color: var(--accent); }

/* --- Chipy aktywnych filtrów --- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .35rem .7rem; border: 1px solid var(--line-strong); font-size: var(--fs-small); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.chip .icon { width: .9rem; height: .9rem; }
.chip:hover { border-color: var(--accent); color: var(--accent-text); }
.chip--clear { border-color: transparent; color: var(--fg-muted); text-decoration: underline; text-underline-offset: .2em; }

/* --- Okruszki --- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: var(--fs-small); color: var(--fg-muted); }
.crumbs a { transition: color var(--dur-fast) var(--ease); }
.crumbs a:hover { color: var(--accent-text); }
.crumbs span[aria-hidden] { color: var(--line-strong); }

/* --- Pusty stan --- */
.empty { display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-8) 0; }
.empty__title { font-family: var(--font-display); font-size: var(--fs-h3); }

/* --- Błędy formularza --- */
.form-errors { padding: var(--space-4) var(--space-5); border-left: 2px solid var(--c-gold-600); background: var(--bg-elev); font-size: var(--fs-small); }
.form-errors ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.field__error { font-size: var(--fs-small); color: #8E3B2E; }
.field__input[aria-invalid="true"] { border-bottom-color: #8E3B2E; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Lightbox: pełny ekran, zoom scrollem/palcami, przesuwanie --- */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(31, 20, 16, .985); color: var(--c-cream-100); display: grid; grid-template-rows: auto 1fr; }
.lightbox[hidden] { display: none; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; padding: .75rem var(--gutter); }
.lightbox__counter { font-size: var(--fs-small); color: var(--c-gold-400); letter-spacing: .06em; }
.lightbox__caption { flex: 1 1 auto; min-width: 0; margin: 0 1rem; text-align: center; font-size: var(--fs-small); color: var(--c-cream-100); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__caption[hidden] { display: none; }
.lightbox__tools { display: flex; gap: .25rem; }
.lightbox__btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--c-cream-100); font-family: var(--font-display); font-size: 1.5rem; line-height: 1; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.lightbox__btn:hover { color: var(--c-gold-400); }
.lightbox__btn .icon { width: 1.4rem; height: 1.4rem; }
.lightbox__stage { position: relative; overflow: hidden; touch-action: none; cursor: grab; display: grid; place-items: center; padding: 0 0 max(1rem, env(safe-area-inset-bottom)); }
.lightbox__stage.is-dragging { cursor: grabbing; }
.lightbox__img { max-width: min(92vw, 92vh); max-height: 82vh; width: auto; height: auto; background: #fff; box-shadow: 0 0 0 1px rgba(201, 169, 110, .35); transform-origin: center center; will-change: transform; user-select: none; -webkit-user-drag: none; }
.lightbox__img svg { display: block; width: min(92vw, 82vh); height: min(92vw, 82vh); }
.lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 4rem; display: grid; place-items: center; color: var(--c-cream-100); font-family: var(--font-display); font-size: 2.6rem; line-height: 1; opacity: .8; transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.lightbox__arrow:hover { opacity: 1; color: var(--c-gold-400); }
.lightbox__arrow--prev { left: max(.25rem, env(safe-area-inset-left)); }
.lightbox__arrow--next { right: max(.25rem, env(safe-area-inset-right)); }
.lightbox__arrow[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }

/* --- Skróty dla zalogowanej ekipy (przycisk „Edytuj” na karcie mebla) --- */
.staff-bar { position: fixed; top: calc(var(--header-h) + .75rem); right: .75rem; z-index: calc(var(--z-header) + 5); display: flex; gap: .4rem; }
.staff-bar__btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .5rem .95rem; background: var(--c-brown-900); color: var(--c-cream-100); border: 1px solid rgba(201, 169, 110, .6); font-size: .82rem; font-weight: 700; letter-spacing: .04em; box-shadow: 0 6px 20px rgba(31, 20, 16, .25); }
.staff-bar__btn:hover { background: var(--c-brown-800); }
.staff-bar__btn--edit, .staff-bar__btn--rent { background: var(--c-gold-600); color: var(--c-brown-950); border-color: var(--c-gold-600); }
.staff-bar__btn--edit:hover, .staff-bar__btn--rent:hover { background: var(--c-gold-500); }
.staff-bar .icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media print { .staff-bar { display: none; } }

/* assets/css/pages.css */
/* ==========================================================================
   Pałac Antyków: układy podstron (strona główna, O nas, strony błędów)
   ========================================================================== */

/* --- Złota linia sekcji (rysuje się przy przewijaniu, motion.css) --- */
.rule { display: block; width: 100%; height: 1px; background: var(--accent); transform-origin: left center; }
.section-head--rule { gap: var(--space-3); }
.section-head--rule .rule { margin-bottom: var(--space-4); }

/* --- Strona główna: wstęp --- */
.intro { display: grid; gap: var(--space-6); }
.intro__head { display: grid; gap: var(--space-3); }
.intro__lead { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); line-height: 1.45; max-width: 34ch; text-wrap: pretty; }
@media (min-width: 900px) {
  /* obie kolumny od tej samej linii: „Kim jesteśmy” na wysokości pierwszego wiersza „Wynajmujemy…” */
  .intro { grid-template-columns: 5fr 7fr; gap: var(--space-9); align-items: start; }
  .intro__lead { justify-self: end; }
}

/* --- Strona główna: kolekcja (indeks kategorii + wybrane meble) --- */
.collection { display: grid; gap: var(--space-8) var(--gutter); }
@media (min-width: 1000px) { .collection { grid-template-columns: 5fr 7fr; gap: var(--space-8) var(--space-9); align-items: start; } }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); transition: padding-left var(--dur) var(--ease-out), color var(--dur-fast) var(--ease); }
.index__row:hover, .index__row:focus-visible { padding-left: .75rem; color: var(--accent-text); }
.index__name { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.15; }
.index__count { font-size: var(--fs-small); color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.collection__featured { display: grid; gap: var(--space-5); }
.collection__featured .cards { grid-template-columns: repeat(2, 1fr); }
/* „Cała kolekcja”: na środku pod dwoma kartami, większy niż zwykły przycisk (główne przejście do katalogu) */
.collection__more { justify-self: center; margin: var(--space-3) 0 0; }
.collection__more .btn { min-width: min(100%, 17rem); padding: 1.3rem 2.75rem; font-size: .9rem; }
/* liczby pod kolekcją (od 5.11.2026): pas z linią nad i pod, jak na O nas */
.collection__stats { margin-top: var(--space-9); }

/* --- Strona główna: zapowiedź „O nas” (ciemna) --- */
.teaser { display: grid; gap: var(--space-7); align-items: center; }
.teaser__media { max-width: 34rem; }
.teaser__text { display: grid; gap: var(--space-5); max-width: 40rem; }
.teaser__text .eyebrow { margin: 0; }
@media (min-width: 900px) { .teaser { grid-template-columns: 5fr 6fr; gap: var(--space-9); } }

/* --- Zaproszenie do hali --- */
.visit__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-4); max-width: 52rem; margin-inline: auto; }
.visit__inner .rule { margin-bottom: var(--space-5); }
.visit__note { max-width: 46ch; text-align: center; text-wrap: balance; }   /* linia do ok. 50 znaków (D-26) */
.visit__address { font-family: var(--font-display); font-style: italic; font-size: var(--fs-h3); color: var(--accent-text); }
.visit__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: var(--space-3); }

/* --- O nas: zdjęcie na całą szerokość na start, pod pełnym nagłówkiem (od 7g-v2, D-26; wcześniej nagłówek był nad nim przezroczysty) --- */
.banner { position: relative; height: clamp(16rem, 52vh, 40rem); margin-top: var(--header-h); overflow: hidden; background: var(--c-brown-900); }
.banner__media { position: absolute; inset: 0; }
.banner__media > svg, .banner__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner__media::after { content: ""; position: absolute; inset: var(--frame-inset); border: 1px solid rgba(201, 169, 110, .8); pointer-events: none; }
/* przyciemnienie: jedna płaska warstwa na całym kadrze, jak w hero (od 7g bez gradientu, decyzja Jana D-26) */
.banner__scrim { position: absolute; inset: 0; background: rgba(31, 20, 16, .42); pointer-events: none; }
@media (max-width: 720px) { .banner { height: auto; aspect-ratio: 4 / 3; } }

/* --- O nas: wstęp: tekst po lewej (z akapitem o Pałacu Zatory), zdjęcie pałacu z podpisem po prawej; tekst i zdjęcie
   zaczynają się na wysokości złotej etykiety. Kolumny 6 : 5 jak w „Naszej historii”, więc zdjęcie pałacu, zdjęcie przy
   akapitach o kolekcji i zdjęcie historii mają tę samą szerokość i idą na zmianę: prawa, lewa, prawa. Na telefonie zdjęcie
   pod tekstem, który je zapowiada. Dłuższy akapit wydłuża tylko kolumnę tekstu (zdjęcie zostaje u góry). --- */
.page-intro { padding-top: var(--space-8); padding-bottom: var(--space-8); display: grid; gap: var(--space-6); }
.page-intro__text { display: grid; gap: var(--space-5); align-content: start; max-width: 44rem; }
.page-intro__text .eyebrow { margin: 0; }
.page-intro h1 { font-size: clamp(2.4rem, 1.5rem + 2.6vw, 4.25rem); }
.page-intro__more { text-wrap: pretty; } /* ciąg dalszy wstępu: ten sam styl co wstęp (.lead) */
.page-intro__figure { margin: 0; display: grid; gap: var(--space-3); align-content: start; }
.page-intro__caption { font-family: var(--font-display); font-style: italic; font-size: .95rem; line-height: 1.4; color: var(--accent-text); }
@media (min-width: 900px) {
  .page-intro { grid-template-columns: 6fr 5fr; gap: var(--space-9); align-items: start; padding-top: var(--space-9); }
  .page-intro__media { margin-top: .35rem; } /* górna krawędź zdjęcia = linia etykiety */
}

/* --- O nas: liczby w jednym rzędzie na całą szerokość, jak na stronie głównej (components.css, stats--open) --- */
.about-stats { padding-bottom: var(--space-8); }

/* --- O nas: zdjęcie po lewej, akapity o kolekcji po prawej (5 : 6), wstęp i historia w lustrzanym odbiciu.
   Na telefonie zdjęcie nad tekstem. --- */
.about-body { padding-bottom: calc(var(--section) * .55); display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .about-body { grid-template-columns: 5fr 6fr; gap: var(--space-9); align-items: center; } .about-body__prose { max-width: 40rem; } }

/* --- O nas: historia (zdjęcie „przyklejone”, tekst przewija się obok). Od 7c zdjęcie po prawej, na skos do zdjęcia przy
   akapitach o kolekcji; na telefonie jak dotąd zdjęcie nad tekstem (kolejność w kodzie bez zmian). --- */
.history { display: grid; gap: var(--space-7); }
.history__text { display: grid; gap: var(--space-4); max-width: 40rem; }
.history__text .eyebrow { margin: 0; }
.history__text .rule { margin-bottom: var(--space-3); }
@media (min-width: 900px) {
  .history { grid-template-columns: 6fr 5fr; gap: var(--space-9); align-items: start; }
  .history__media { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--space-5)); margin-top: .35rem; } /* jak we wstępie: górna krawędź = linia etykiety */
  .history__text { grid-column: 1; grid-row: 1; }
}

/* --- O nas: proces. Od 7g-v2 bez numerów (C2, D-26): kolejność niesie układ, od lewej do prawej (na telefonie z góry
   na dół). Nad każdym krokiem cienka linia; na komputerze segmenty łączą się w jedną linię przez całą szerokość. --- */
.process { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.step { position: relative; display: grid; gap: var(--space-3); padding-top: var(--space-5); }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); }
.step__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; }
.step__text { color: var(--fg-muted); max-width: 30ch; }
@media (min-width: 900px) {
  .process { grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
  .step::before { right: calc(-1 * var(--gutter)); }
  .step:last-child::before { right: 0; }
}

/* --- O nas: realizacje: układ kolumnowy (masonry): zdjęcia o różnych proporcjach bez dziur --- */
.gallery { columns: 2; column-gap: var(--space-4); }
.gallery .media { --frame-inset: .9rem; break-inside: avoid; margin-bottom: var(--space-4); }
/* Realizacje ze zdjęciami z panelu (etap 5d): kafel = przycisk powiększenia, podpis na przyciemnieniu u dołu */
.gallery__item { display: block; width: 100%; padding: 0; border: 0; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.gallery__item:focus-visible { outline: 2px solid var(--c-gold-800); outline-offset: 3px; }
/* podpis na płaskiej warstwie (od 7g-v2 bez gradientu, C7, D-26) */
.gallery__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: .8rem 1.1rem .9rem; background: rgba(31, 20, 16, .82); color: var(--c-cream-100); font-size: var(--fs-small); line-height: 1.4; letter-spacing: .01em; }
@media (min-width: 800px) { .gallery { columns: 3; column-gap: var(--space-5); } .gallery .media { margin-bottom: var(--space-5); } }

/* --- O nas na telefonie: złota ramka tuż przy krawędzi zdjęcia (wstęp, kolekcja, historia, realizacje). Przy 1 rem wcięcia
   na małych zdjęciach wyglądała jak błąd; reszta strony zostaje z szeroką ramką. --- */
@media (max-width: 720px) {
  .page-intro__media, .about-body__media, .history__media .media, .gallery .media { --frame-inset: .375rem; }
  .page-intro__media::after, .about-body__media::after, .history__media .media::after, .gallery .media::after { border-color: rgba(201, 169, 110, .7); }
}

/* --- O nas: najczęstsze pytania (etap 6c), <details>/<summary>; złoty plus zamienia się w minus.
   Lista na całą szerokość strony, odpowiedź w wygodnej do czytania szerokości. Płynne rozwijanie: app.js (bez JS zwykłe). --- */
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem); line-height: 1.3; transition: color var(--dur-fast) var(--ease); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--accent-text); }
.faq__q:focus-visible { outline: 2px solid var(--c-gold-800); outline-offset: 4px; }
.faq__icon { position: relative; flex: none; width: 1rem; height: 1rem; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--accent); transition: transform var(--dur) var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__item.is-closing .faq__icon::after { transform: rotate(90deg); }
.faq__a { color: var(--fg-muted); }
.faq__a.is-moving { overflow: hidden; }
.faq__a-in { padding: 0 2.25rem 1.35rem 0; max-width: 46rem; }
.faq__a p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq__icon::before, .faq__icon::after { transition: none; } }

/* --- Strony błędów --- */
.page-error { padding-top: calc(var(--header-h) + var(--space-8)); min-height: 60vh; display: grid; gap: var(--space-5); align-content: start; }
.page-error h1 { font-size: var(--fs-h2); }
.page-error .eyebrow { margin: 0; }

/* ==========================================================================
   Etap 3: układy: kolekcja (filtry + siatka), karta mebla, lista zapytań
   ========================================================================== */

/* --- Kolekcja (katalog) --- */
.catalog { padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--section); }
.catalog__head { display: grid; gap: var(--space-3); max-width: var(--measure); margin-bottom: var(--space-6); }
.catalog__head h1 { font-size: var(--fs-h2); }
.catalog__layout { display: grid; gap: var(--space-6); }
.catalog__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.catalog__count { font-family: var(--font-display); font-size: 1.1rem; margin-right: auto; }
.catalog__sort { display: flex; align-items: center; gap: .6rem; }
.catalog__sort-label { font-size: var(--fs-small); color: var(--fg-muted); }
.catalog__filters-btn { display: inline-flex; gap: .5rem; order: 1; }
@media (max-width: 999px) { .catalog__sort { order: 2; margin-left: auto; } .catalog__count { order: 3; flex-basis: 100%; margin: 0; font-size: var(--fs-small); font-family: var(--font-body); color: var(--fg-muted); } }
.cards--catalog { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
@media (max-width: 560px) { .cards--catalog { grid-template-columns: repeat(2, 1fr); } }

/* Filtry: na telefonie arkusz pełnoekranowy, od 1000 px kolumna po lewej */
.filters { position: fixed; inset: 0; z-index: calc(var(--z-header) + 1); display: none; flex-direction: column; background: var(--bg); overflow-y: auto; padding: 0 var(--gutter) calc(var(--space-6) + var(--bar-h)); }
.filters.is-open { display: flex; }
body.filters-open { overflow: hidden; }
.filters__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; margin-bottom: var(--space-4); background: var(--bg); border-bottom: 1px solid var(--line); }
.filters__title { font-family: var(--font-display); font-size: 1.5rem; }
.filters__close { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
.filters__close .icon { width: 1.4rem; height: 1.4rem; }
.filters__form { display: grid; gap: var(--space-6); align-content: start; }
.filters__group { display: grid; gap: var(--space-3); }
.filters__label { font-family: var(--font-display); font-style: italic; color: var(--accent-text); font-size: 1.05rem; }
.filters__search { position: relative; }
.filters__search .field__input { padding-right: 2.5rem; }
.filters__go { position: absolute; right: 0; top: 0; bottom: 0; width: 2.5rem; display: grid; place-items: center; color: var(--fg-muted); }
.filters__go:hover { color: var(--accent-text); }
.filters__list { list-style: none; margin: 0; padding: 0; display: grid; }
.filters__link { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-height: 2.75rem; padding: .5rem 0 .5rem .75rem; border-left: 1px solid transparent; margin-left: -.75rem; font-size: var(--fs-body); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.filters__link small { font-size: var(--fs-tiny); color: var(--fg-muted); margin-left: .35rem; white-space: nowrap; }
.filters__link:hover { color: var(--accent-text); }
.filters__link.is-active { border-left-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.filters__link.is-empty { color: var(--fg-muted); }
.filters__link.is-empty:hover { color: var(--accent-text); }
.filters__count { font-size: var(--fs-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; font-weight: 400; }
.filters__actions { display: grid; gap: var(--space-4); justify-items: start; }
.filters__actions .btn { width: 100%; }
@media (min-width: 1000px) {
  .catalog__layout { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .filters { position: static; inset: auto; display: block; z-index: auto; background: transparent; overflow: visible; padding: 0; }
  .filters__head { display: none; }
  .filters__actions .btn { display: none; }         /* na desktopie filtry działają od razu */
  .catalog__filters-btn { display: none; }
  .filters__link { min-height: 2.25rem; padding-block: .3rem; font-size: var(--fs-small); }
  .filters__actions { justify-items: start; }
}

/* Stronicowanie */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.pagination__pages { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.pagination__page { display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; font-family: var(--font-display); font-size: 1.1rem; transition: color var(--dur-fast) var(--ease); }
.pagination__page:hover { color: var(--accent-text); }
.pagination__page.is-current { color: var(--accent-text); box-shadow: inset 0 -1px 0 var(--accent); }
.pagination__gap { display: grid; place-items: center; min-width: 1.5rem; color: var(--fg-muted); }
.pagination__arrow { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .5rem; font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pagination__arrow.is-disabled { color: var(--fg-muted); opacity: .5; }
@media (max-width: 560px) { .pagination__arrow span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pagination__arrow { font-size: 1.4rem; font-family: var(--font-display); } }

/* --- Karta mebla --- */
.product { padding-top: calc(var(--header-h) + var(--space-6)); padding-bottom: var(--section); }
.product .crumbs { margin-bottom: var(--space-5); }
.product__layout { display: grid; gap: var(--space-6); }
.pgallery { display: grid; gap: var(--space-3); }
/* Biały kwadratowy „cokół”, w nim złota ramka dopasowana do proporcji zdjęcia, zdjęcie wypełnia ramkę w całości. */
.pgallery__main { --frame: 1.1rem; position: relative; margin: 0; aspect-ratio: 1 / 1; background: var(--c-white); container-type: size; }
.pgallery__zoom {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 2 * var(--frame)); height: calc(100% - 2 * var(--frame));   /* starsze przeglądarki: kwadrat */
  display: block; overflow: hidden; background: var(--c-cream-50); cursor: zoom-in;
}
@supports (width: 1cqw) {
  .pgallery__zoom { width: min(calc(100cqw - 2 * var(--frame)), calc((100cqh - 2 * var(--frame)) * var(--ar, 1))); height: auto; aspect-ratio: var(--ar, 1); }
}
.pgallery__zoom::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--c-beige-300); pointer-events: none; transition: border-color var(--dur) var(--ease); }
.pgallery__zoom:hover::after { border-color: var(--c-gold-600); }
.pgallery__zoom img, .pgallery__zoom svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.pgallery__num { position: absolute; left: .6rem; top: .6rem; padding: .32em .45em; background: rgba(255, 255, 255, .92); font-family: var(--font-display); font-variant-numeric: lining-nums; font-size: .85rem; line-height: 1; letter-spacing: .04em; color: var(--c-gold-700); pointer-events: none; }
.pgallery__hint { position: absolute; right: .6rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .6rem; background: rgba(255, 255, 255, .92); border: 1px solid var(--c-cream-200); font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gold-700); pointer-events: none; }
.pgallery__hint .icon { width: .9rem; height: .9rem; }
@media (max-width: 720px) {
  .pgallery__main { --frame: .7rem; }
  .pgallery__num { left: .45rem; top: .45rem; font-size: .75rem; }
  /* na telefonie podpowiedź o 1/3 mniejsza */
  .pgallery__hint { right: .45rem; bottom: .45rem; gap: .27rem; padding: .27rem .4rem; font-size: calc(var(--fs-tiny) * 2 / 3); letter-spacing: .05em; }
  .pgallery__hint .icon { width: .6rem; height: .6rem; }
}
.pgallery__thumbs { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.pgallery__thumb { width: 4.5rem; height: 4.5rem; flex: none; background: var(--c-white); border: 1px solid var(--c-cream-200); padding: .25rem; transition: border-color var(--dur-fast) var(--ease); }
.pgallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pgallery__thumb.is-active, .pgallery__thumb:hover { border-color: var(--c-gold-600); }
.product__info { display: grid; gap: var(--space-5); align-content: start; }
.product__info .eyebrow { margin: 0; }
.product__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.2; }
.product__title--long { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); line-height: 1.28; }   /* nazwy powyżej 80 znaków (import z WordPressa) */
.facts { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr; column-gap: 1rem; margin: 0; border-top: 1px solid var(--line); }
.facts > dt, .facts > dd { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: var(--fs-small); color: var(--fg-muted); align-self: baseline; }
.facts dt small { display: block; font-size: var(--fs-tiny); font-weight: 400; }
.facts dd { margin: 0; }
.tabular { font-variant-numeric: tabular-nums; }
.product__actions { display: grid; gap: .75rem; }
.product__actions .btn { width: 100%; }
.product__note { max-width: 40ch; }
/* „Wyświetl zestaw”: mała karta pod danymi mebla */
.setlink { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-4); align-items: center; padding: var(--space-3); background: var(--c-white); border: 1px solid var(--line); transition: border-color var(--dur-fast) var(--ease); }
.setlink:hover, .setlink:focus-visible { border-color: var(--c-gold-600); }
.setlink__media { --frame: .3rem; width: 4.5rem; }
.setlink__ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--c-white); color: var(--c-gold-600); }
.setlink__ph .icon { width: 1.6rem; height: 1.6rem; }
.setlink__body { display: grid; gap: .15rem; min-width: 0; }
.setlink__label { font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gold-700); }
.setlink__name { align-self: start; max-height: calc(2em * 1.3); font-family: var(--font-display); font-size: 1.1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.setlink__cta { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-small); font-weight: 700; }
.setlink__cta .icon { width: .95rem; height: .95rem; transition: transform var(--dur-fast) var(--ease); }
.setlink:hover .setlink__cta .icon { transform: translate(2px, -2px); }
.setpage__numbers { line-height: 1.7; }
.product__related-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.product__related-head .eyebrow { margin: 0 0 var(--space-2); }
.product__related { margin-top: var(--space-9); display: grid; gap: var(--space-5); }
.product__related .eyebrow { margin: 0; }
.product__related .rule { margin-bottom: var(--space-2); }
@media (min-width: 900px) {
  .product { padding-top: calc(var(--header-h) + var(--space-7)); }
  .product__layout { grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); gap: var(--space-8); align-items: start; }
  .product__info { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
  .product__actions { grid-template-columns: 1fr; }
}
@media (min-width: 1200px) { .product__layout { gap: var(--space-9); } }

/* --- Lista zapytań --- */
.inquiry { padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--section); }
.inquiry__head { display: grid; gap: var(--space-3); max-width: var(--measure); margin-bottom: var(--space-7); }
.inquiry__head h1 { font-size: var(--fs-h2); }
.inquiry__layout { display: grid; gap: var(--space-8); }
.inquiry__list { display: grid; gap: var(--space-4); align-content: start; }
.inquiry__empty { display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-6) 0; }
.inquiry__tools { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: var(--space-3); }
.irow { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.irow__media { --frame: .3rem; width: 5.5rem; aspect-ratio: 1 / 1; }
.irow__ph { display: block; width: 100%; height: 100%; background: var(--c-white); }
.irow__body { display: grid; gap: .3rem; min-width: 0; }
.irow__title { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; }
.irow__title:hover { color: var(--accent-text); }
.irow__meta { font-size: var(--fs-small); color: var(--fg-muted); }
.irow__remove { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--fg-muted); transition: color var(--dur-fast) var(--ease); }
.irow__remove:hover { color: #8E3B2E; }
.irow__remove .icon { width: 1.1rem; height: 1.1rem; }
.inquiry__form { display: grid; gap: var(--space-5); align-content: start; padding: var(--space-6); background: var(--bg-elev); border: 1px solid var(--line); }
.inquiry__form .filters__label { font-size: 1.4rem; }
.inquiry__form .btn { width: 100%; }
@media (min-width: 900px) {
  .inquiry__layout { grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); gap: var(--space-9); align-items: start; }
  .inquiry__form { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
@media (max-width: 560px) { .irow { grid-template-columns: 4rem 1fr auto; gap: var(--space-3); } .irow__media { width: 4rem; } }

/* --- Udostępnianie listy (pod listą zapytań) --- */
.share { display: grid; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-5); background: var(--bg-elev); border: 1px solid var(--line); }
.share__title { font-size: 1.35rem; }
.share__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.share__actions .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .share__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share__actions .btn { width: 100%; padding-inline: .5rem; letter-spacing: .06em; white-space: normal; text-align: center; line-height: 1.3; }
}
.share__link .field__input { font-size: var(--fs-small); }
.share__mail { display: grid; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.share__msg { font-size: var(--fs-small); font-weight: 700; }
.share__msg.is-ok { color: #4E7A4A; }
.share__msg.is-error { color: #8E3B2E; }
.share .field__input[aria-invalid="true"] { border-bottom-color: #8E3B2E; }

/* --- Udostępniona lista (odbiorca): grupy wg sal --- */
.sharedlist__count { font-family: var(--font-body); font-size: .45em; color: var(--fg-muted); white-space: nowrap; vertical-align: middle; }
.sharedlist__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-3); }
.sharedlist__group { max-width: 56rem; margin-bottom: var(--space-7); }
.sharedlist__sala { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-strong); font-size: var(--fs-h3); }
.sharedlist__n { font-family: var(--font-body); font-size: var(--fs-small); color: var(--fg-muted); }
.irow__add { grid-area: auto; align-self: center; justify-self: end; margin: 0; }
.sharedlist__printhead { display: none; }
.sharedlist__missing { max-width: 56rem; margin-bottom: var(--space-6); }
.sharedlist__hall { max-width: 36rem; margin-top: var(--space-5); }

/* --- Druk (lista wg sal i ogólnie: bez nagłówka, stopki i paska) --- */
@media print {
  .site-header, .site-footer, .mobile-bar, .toast, .skip-link, .staff-bar { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: inherit !important; text-decoration: none !important; }
  .page-shared-list .inquiry { padding: 0; }
  .page-shared-list .inquiry__head { margin-bottom: 5mm; }
  .page-shared-list .inquiry__head .section-head__note, .sharedlist__actions, .irow__add, .sharedlist__hall .btn { display: none !important; }
  .sharedlist__printhead { display: block; margin: 0 0 5mm; font-size: 9pt; color: #333; }
  .sharedlist__group { margin-bottom: 6mm; max-width: none; }
  .sharedlist__sala { break-after: avoid; page-break-after: avoid; font-size: 14pt; padding-bottom: 2mm; border-bottom-color: #000; }
  .page-shared-list .irow { break-inside: avoid; page-break-inside: avoid; grid-template-columns: 16mm 1fr; gap: 4mm; padding: 2.5mm 0; border-bottom-color: #bbb; }
  .page-shared-list .irow__media { width: 16mm; }
  .page-shared-list .status::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .sharedlist__hall { background: none !important; border: 1px solid #999; padding: 4mm; break-inside: avoid; }
  .sharedlist__hall, .sharedlist__hall * { color: #000 !important; }
  .sharedlist__hall::after { display: none; }
  /* Podział stron w każdym wydruku (5.11.2026): akapit, ustęp, punkt, wiersz i karta nigdy nie dzielą się między strony,
     nagłówek nie zostaje sam na dole strony. Elementy pojawiające się przy przewijaniu są w druku zawsze widoczne. */
  p, li, dt, dd, tr, figure, blockquote, .irow, .card { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, h4, .eyebrow { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
  /* Regulamin i polityka prywatności: sama treść, jedna kolumna */
  .legal { padding-top: 0; padding-bottom: 0; }
  .legal__toc, .legal__actions { display: none !important; }
  .legal__layout { display: block; }
  .legal__body { max-width: none; }
}

/* --- Kontakt ---
   Telefon: 1 kolumna (telefon/e-mail -> formularz -> hala). Desktop: po lewej kanały i wizytówka hali, po prawej formularz. */
.contact { padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--section); }
.contact__head { display: grid; gap: var(--space-4); max-width: 46rem; margin-bottom: var(--space-8); }
.contact__head .eyebrow { margin: 0; }
.contact__head h1 { font-size: clamp(2.4rem, 1.5rem + 2.6vw, 4.25rem); text-wrap: balance; }
.contact__layout { display: grid; gap: var(--space-7); grid-template-areas: "channels" "form" "hall"; }
.channels { grid-area: channels; }
.contact__form { grid-area: form; }
.hallcard { grid-area: hall; }
@media (min-width: 1000px) {
  .contact__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "channels form" "hall form"; gap: var(--space-7) var(--space-9); align-items: start; }
}

/* Kanały: duże, klikalne: na telefonie jedno dotknięcie = połączenie */
.channels { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.channel { display: grid; gap: .3rem; padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.channel__label { font-size: var(--fs-small); color: var(--fg-muted); }
.channel__value {
  justify-self: start; padding-bottom: .12em;
  font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.6rem); line-height: 1.15; white-space: nowrap;
  font-variant-numeric: lining-nums;   /* cyfry równej wysokości, numer telefonu czyta się jednym spojrzeniem */
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 1px;
  transition: background-size var(--dur) var(--ease-out);
}
.channel__value--email { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); white-space: normal; overflow-wrap: anywhere; }
.channel:hover .channel__value, .channel:focus-visible .channel__value { background-size: 100% 1px; }
.channel__hint { font-size: var(--fs-small); color: var(--fg-muted); }

/* Wizytówka hali: ciemna karta w złotej ramce, ten sam motyw passe-partout co na stronie głównej */
.hallcard { position: relative; display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-7) var(--space-6); }
.hallcard::after { content: ""; position: absolute; inset: .75rem; border: 1px solid rgba(201, 169, 110, .55); pointer-events: none; }
.hallcard .eyebrow { margin: 0; }
.hallcard__address { font-family: var(--font-display); font-style: normal; font-size: var(--fs-h3); line-height: 1.3; font-variant-numeric: lining-nums; }
.hallcard__hours { font-size: var(--fs-small); line-height: 1.6; }
.hallcard__text { color: var(--fg-muted); max-width: 36ch; }
.hallcard__note { margin-top: calc(var(--space-2) * -1); font-size: var(--fs-tiny); color: var(--fg-muted); }
.hallcard .btn { position: relative; z-index: 1; }
/* Magazyn w Wierzbicy (etap 7d): drugie miejsce odbioru mebli, pod adresem głównym */
.hallcard__store { display: grid; gap: var(--space-2); justify-items: start; width: 100%; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid rgba(201, 169, 110, .35); }
.hallcard__store-address { font-style: normal; line-height: 1.5; }
.hallcard__store-route { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--accent-soft); text-decoration: underline; text-underline-offset: .2em; }
.hallcard__store-route .icon { width: 1em; height: 1em; }

/* Formularz */
.contact__form { display: grid; gap: var(--space-5); padding: var(--space-7) var(--space-6); background: var(--bg-elev); border: 1px solid var(--line); }
.contact__form-title { font-size: var(--fs-h3); }
.contact__fields { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .contact__fields { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); } }
.contact__form textarea.field__input { min-height: 9rem; line-height: 1.55; }
.contact__form .btn { width: 100%; }
@media (max-width: 560px) { .contact__form, .hallcard { padding: var(--space-6) var(--space-5); } }
.form-info { font-size: var(--fs-tiny); line-height: 1.55; color: var(--fg-muted); max-width: 62ch; }
.form-info a { color: var(--fg); }

/* Mebel, którego dotyczy wiadomość (z przycisku „Zapytaj o ten mebel”) */
.about-item { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3); background: var(--c-white); border: 1px solid var(--line); }
.about-item__media { --frame: .3rem; width: 4.5rem; }
.about-item__body { display: grid; gap: .2rem; min-width: 0; }
.about-item__label { font-size: var(--fs-small); color: var(--fg-muted); }
.about-item__title { align-self: start; max-height: calc(2em * 1.3); font-family: var(--font-display); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.about-item__title:hover { color: var(--accent-text); }
.about-item__remove { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--fg-muted); transition: color var(--dur-fast) var(--ease); }
.about-item__remove:hover { color: #8E3B2E; }
.about-item__remove .icon { width: 1.1rem; height: 1.1rem; }

/* Dane spółki (art. 206 KSH): ciche, ale kompletne */
.company { display: grid; gap: var(--space-4); padding-bottom: var(--section); }
.company .rule { margin-bottom: var(--space-2); }
.company__title { font-size: var(--fs-h3); }
.company__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .6rem var(--space-6); margin: 0; max-width: 62rem; font-size: var(--fs-small); }
.company__list dt { color: var(--fg-muted); }
.company__list dd { margin: 0; }
@media (max-width: 560px) { .company__list { grid-template-columns: 1fr; gap: .1rem; } .company__list dd { margin-bottom: .7rem; } }

.page-error__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.page-error__note { margin: 0; padding: .8rem 1rem; border-left: 2px solid var(--c-gold-600); background: var(--bg-elev); max-width: 40rem; }
.field--optin { margin-top: .25rem; }
.field--optin .check { color: var(--fg-muted); }

/* --- Polityka prywatności (i przyszłe strony prawne) --- */
.legal { padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--section); }
.legal__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); max-width: 46rem; }
.legal__head .eyebrow { margin: 0; }
.legal__head h1 { font-size: var(--fs-h2); }
.legal__layout { display: grid; gap: var(--space-7); }
.legal__toc { font-size: var(--fs-small); padding: var(--space-5); background: var(--bg-elev); border: 1px solid var(--line); }
.legal__toc-title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--space-3); }
.legal__toc ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .45rem; }
.legal__toc a { color: var(--fg-muted); transition: color var(--dur-fast) var(--ease); }
.legal__toc a:hover, .legal__toc a[aria-current="true"] { color: var(--fg); }
.legal__body h2 { font-size: var(--fs-h3); margin-top: 2.2em; margin-bottom: .6em; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.legal__body .lead { margin-bottom: 1.5em; }
.legal__body ul { padding-left: 1.2rem; display: grid; gap: .6rem; margin: .9em 0; }
.legal__body li::marker { color: var(--accent); }
.legal__body code { font-size: .88em; padding: .05em .35em; background: var(--bg-sunken); }
/* Regulamin (etap 7d): paragrafy, ustępy i punkty z numerem w kolumnie, jak w dokumencie */
.legal__actions { margin-top: var(--space-2); }
.legal__toc--plain ol { list-style: none; padding-left: 0; }
.legal__body h3 { font-size: 1.15rem; line-height: 1.35; margin-top: 1.9em; margin-bottom: .55em; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.legal__body h2 + h3 { margin-top: 1.1em; }
.legal__ust, .legal__pkt { list-style: none; margin: .7em 0; padding: 0; display: grid; gap: .6rem; }
.legal__pkt { margin: .55em 0 .15em; gap: .4rem; }
.legal__ust > li, .legal__pkt > li { position: relative; padding-left: 2rem; }
.legal__n { position: absolute; left: 0; top: 0; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.legal__body p + .legal__pkt { margin-top: .5em; }
.legal__small { font-size: var(--fs-small); color: var(--fg-muted); }
@media (min-width: 1000px) {
  .legal__layout { grid-template-columns: minmax(14rem, 3fr) minmax(0, 8fr); gap: var(--space-9); align-items: start; }
  .legal__toc { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

/* --- Szukanie po zdjęciu (etap 7a) --- */
/* Kolekcja: przycisk z aparatem i „i” z wyjaśnieniem (ciemny dymek jak komunikaty strony) */
/* Wejście do szukania po zdjęciu: odnośnik z ikoną aparatu, widoczny, ale drugiego planu (nie przycisk na pierwszym planie).
   Pole dotyku 44 px wysokości mimo małego tekstu. */
.vs-entry { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: calc(-1 * var(--space-1)); }
.vs-entry__btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; color: var(--fg); font-size: .95rem; line-height: 1.3; transition: color var(--dur-fast) var(--ease); }
.vs-entry__btn span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: rgba(176, 141, 87, .55); transition: text-decoration-color var(--dur-fast) var(--ease); }
.vs-entry__btn .icon { width: 1.15rem; height: 1.15rem; color: var(--accent-text); }
.vs-entry__btn:hover { color: var(--accent-text); }
.vs-entry__btn:hover span { text-decoration-color: currentColor; }
.vs-entry__btn:focus-visible { outline: 2px solid var(--c-gold-800); outline-offset: 3px; }
.vs-entry__info { display: grid; place-items: center; width: 2.5rem; height: 2.75rem; color: var(--fg-muted); transition: color var(--dur-fast) var(--ease); }
.vs-entry__info .icon { width: 1.05rem; height: 1.05rem; }
.vs-entry__info:hover, .vs-entry__info[aria-expanded="true"] { color: var(--accent-text); }
.vs-entry__pop { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 20; width: min(24rem, calc(100vw - 2 * var(--gutter))); margin: 0; padding: .9rem 1.1rem; background: var(--c-brown-900); color: var(--c-cream-100); border: 1px solid rgba(201, 169, 110, .45); font-size: var(--fs-small); line-height: 1.55; }
.vs-entry__pop::before { content: ""; position: absolute; top: -.4rem; left: calc(var(--arrow, 12rem) - .35rem); width: .7rem; height: .7rem; background: inherit; border-left: 1px solid rgba(201, 169, 110, .45); border-top: 1px solid rgba(201, 169, 110, .45); transform: rotate(45deg); }
.vs-entry__pop[hidden] { display: none; }
.empty__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Strona wyszukiwania */
.vs { padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--section); }
.vs__staff { margin: 0 0 var(--space-5); padding: .75rem 1rem; border-left: 2px solid var(--c-gold-600); background: var(--bg-elev); font-size: var(--fs-small); color: var(--fg-muted); max-width: 46rem; }
.vs__app { display: grid; gap: var(--space-7); }

.vs__drop { position: relative; display: grid; justify-items: center; gap: var(--space-3); padding: clamp(2.5rem, 7vw, 4.5rem) var(--space-5); background: var(--c-white); text-align: center; transition: background var(--dur-fast) var(--ease); }
.vs__drop::after { content: ""; position: absolute; inset: .75rem; border: 1px dashed var(--c-beige-400); pointer-events: none; transition: border-color var(--dur-fast) var(--ease), inset var(--dur-fast) var(--ease); }
.vs__drop.is-over { background: var(--c-cream-50); }
.vs__drop.is-over::after { border-color: var(--c-gold-600); border-style: solid; inset: .5rem; }
.vs__drop-icon { width: 2.6rem; height: 2.6rem; color: var(--c-gold-600); stroke-width: 1.2; }
.vs__drop-title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; }
.vs__drop-sub { color: var(--fg-muted); margin-top: -.35rem; }
.vs__drop-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: var(--space-3); }
.vs__drop-actions .btn { position: relative; cursor: pointer; }
.vs__drop-actions .btn:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.vs__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.vs__note { position: relative; z-index: 1; max-width: 44rem; margin-top: var(--space-2); }
.vs__error { position: relative; z-index: 1; margin: 0; color: #8B2A1C; font-size: var(--fs-small); font-weight: 700; }
.vs__error[hidden] { display: none; }
/* telefon (dotyk): „Zrób zdjęcie” i „Wybierz z galerii”; komputer: przeciągnij, wklej, wybierz */
.vs__touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .vs__touch { display: inline-flex; }
  .vs__drop-title .vs__touch { display: inline; }
  .vs__desk { display: none; }
}

.vs__query { display: grid; gap: var(--space-5); align-items: start; }
.vs__query[hidden] { display: none; }
@media (min-width: 800px) { .vs__query { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-7); } }
/* passe-partout jak na kartach; ramka mebla i skanowanie liczone względem samego zdjęcia (.vs__frame) */
.vs__photo { justify-self: start; margin: 0; padding: .6rem; background: var(--c-white); border: 1px solid var(--c-beige-300); line-height: 0; max-width: 100%; }
.vs__frame { position: relative; display: inline-block; max-width: 100%; overflow: hidden; }
.vs__photo img { display: block; width: auto; max-width: min(100%, 26rem); max-height: 24rem; transition: filter var(--dur) var(--ease); }
@media (max-width: 799px) {
  .vs__photo { justify-self: stretch; text-align: center; }
  .vs__photo img { max-width: 100%; max-height: 13rem; }
  /* telefon: po wybraniu zdjęcia wstęp już niepotrzebny, status i wyniki wyżej na ekranie */
  .vs:has(.vs__query:not([hidden])) .vs__head .section-head__note { display: none; }
}
.vs__box { position: absolute; z-index: 2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 9999px rgba(31, 20, 16, .28); border: 2px solid var(--c-gold-500); pointer-events: none; transition: top var(--dur) var(--ease-out), left var(--dur) var(--ease-out), width var(--dur) var(--ease-out), height var(--dur) var(--ease-out); }
.vs__box[hidden] { display: none; }
/* praca w toku: cienka linia u dołu zdjęcia, po której przesuwa się złoty odcinek (od 7g-v2, C8, D-26) */
.vs__scan { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; overflow: hidden; pointer-events: none; opacity: 0; background: rgba(201, 169, 110, .3); }
.vs__scan::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--c-gold-600); transform: translateX(-100%); }
.vs__photo.is-scanning img { filter: saturate(.75) brightness(.97); }
.vs__photo.is-scanning .vs__scan { opacity: 1; }
.vs__photo.is-scanning .vs__scan::after { animation: vs-scan 1.4s var(--ease-in-out) infinite; }
@keyframes vs-scan { from { transform: translateX(-100%); } to { transform: translateX(334%); } }
@media (prefers-reduced-motion: reduce) { .vs__photo.is-scanning .vs__scan::after { animation: none; transform: none; width: 100%; } .vs__box { transition: none; } }

.vs__side { display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.vs__status { min-height: 1.6em; margin: 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; }
.vs__objects { display: grid; gap: .6rem; }
.vs__objects[hidden] { display: none; }
.vs__objlist { display: flex; flex-wrap: wrap; gap: .6rem; }
.vs__obj { display: grid; justify-items: center; gap: .35rem; width: 6.25rem; padding: .35rem .35rem .45rem; background: var(--c-white); border: 1px solid var(--c-beige-300); font-size: var(--fs-tiny); line-height: 1.2; color: var(--fg-muted); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.vs__obj img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.vs__obj span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs__obj:hover:not(:disabled) { border-color: var(--c-gold-600); color: var(--fg); }
.vs__obj[aria-pressed="true"] { border-color: var(--c-gold-600); box-shadow: inset 0 0 0 1px var(--c-gold-600); color: var(--fg); font-weight: 700; }
.vs__obj:disabled { cursor: default; opacity: .7; }

.vs__same { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--bg-elev); border: 1px solid var(--c-gold-600); }
.vs__same[hidden] { display: none; }
.vs__same .eyebrow { margin: 0; font-size: 1.35rem; }
.vs__same .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 17rem)); }
.vs__results { display: grid; gap: var(--space-5); }
.vs__results[hidden] { display: none; }
.vs__results-head { display: grid; gap: .35rem; }
.vs__results-head h2 { font-size: var(--fs-h3); }
.vs__results-head h2:focus { outline: none; }
.vs__more { margin: 0; text-align: center; }
.vs__more .btn[hidden] { display: none; }
.vs__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.vs__cta[hidden] { display: none; }
.vs__cta-title { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .2rem; }
.vs__tips { margin-top: var(--space-6); max-width: 46rem; font-size: var(--fs-small); color: var(--fg-muted); }
.vs__tips summary { cursor: pointer; font-weight: 700; color: var(--fg); }
.vs__tips ul { margin: .8rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.vs__tips li::marker { color: var(--accent); }
/* „Podobne do …”: mebel źródłowy i przycisk własnego zdjęcia */
.vs__likebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-bottom: var(--space-6); }
.vs__source { max-width: 26rem; flex: 1 1 18rem; }
@media (prefers-reduced-motion: no-preference) {
  .vs__grid.is-in > .card, .vs__same.is-in .card { animation: fade-up .7s var(--ease-out) both; }
  .vs__grid.is-in > .card:nth-child(2) { animation-delay: .04s; } .vs__grid.is-in > .card:nth-child(3) { animation-delay: .08s; }
  .vs__grid.is-in > .card:nth-child(4) { animation-delay: .12s; } .vs__grid.is-in > .card:nth-child(5) { animation-delay: .16s; }
  .vs__grid.is-in > .card:nth-child(6) { animation-delay: .2s; } .vs__grid.is-in > .card:nth-child(n+7) { animation-delay: .24s; }
}

/* assets/css/motion.css */
/* ==========================================================================
   Pałac Antyków: ruch
   Zasada (docs/ANTY-AI.md, DESIGN.md §7): ruch odpowiada na działanie klienta albo raz prowadzi wzrok.
   Jedno wejście na starcie (hero), ruch jako odpowiedź na akcję (menu, najechanie, dodanie do listy),
   nagłówek reagujący na przewijanie. Bez paralaksy, smug, pulsowania, odliczania i wjeżdżania sekcji.
   Animujemy transform i opacity. Wszystko wyłączone przy prefers-reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* 1. Hero: ramka rysuje się raz, a gdy jest prawie narysowana, tytuł, podtytuł i przycisk wchodzą razem
        (przezroczystość i 8 px). Tylko z JS (klasa .js), bez JS wszystko widać od razu. */
  .js .hero__frame rect { stroke-dashoffset: 1; animation: hero-frame 1.8s var(--ease-out) .25s forwards; }
  .js .hero__title, .js .hero__subtitle, .js .hero__cta { opacity: 0; animation: enter .4s var(--ease-out) .9s forwards; }
  .back .icon { transition: transform var(--dur-fast) var(--ease); }
  .back:hover .icon { transform: translateX(-3px); }

  /* 2. Nagłówek: przezroczysty nad hero, solidny po przewinięciu. Natywnie przez scroll-driven animations;
        w starszych przeglądarkach app.js dokłada klasę .is-scrolled. */
  @supports (animation-timeline: scroll()) {
    [data-header="transparent"] .site-header {
      animation: header-solidify linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 180px;
      transition: none;
    }
  }

  /* 3. Menu mobilne: pozycje wchodzą po kolei (odpowiedź na kliknięcie burgera). */
  .mobile-nav li { animation: fade-up .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }

  /* 4. Punktowe ujawnianie: tylko tam, gdzie prowadzi wzrok, jeden blok, bez opóźnień kaskadowych.
        Dziś nigdzie nieużywane (etap 7g zdjął je z kart „Ostatnio dodane”). */
  .js .reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  /* 5. Przejścia między podstronami: krótkie przenikanie. */
  ::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .4s var(--ease-out) both; }
}

@keyframes hero-frame { to { stroke-dashoffset: 0; } }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes header-solidify {
  from { background-color: rgba(44, 24, 16, 0); border-color: rgba(201, 169, 110, 0); }
  to   { background-color: rgba(44, 24, 16, .97); border-color: rgba(201, 169, 110, .22); }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}