/* DAI TO SE - moduł „Zestawy” (konfigurator „Złóż swój zapas”), scena 1a „Blat” z Claude Design (4.10.2026).
   Źródło wartości: .wayfinder/cd-export-zestawy-blat/ZlozSwojZapas.dc.html (układ desktop 1440 i mobile 390). Wyjątek od systemu wizualnego:
   własna rama, przełącznik w nagłówku, kafle w kolorze smaku i scena ze stołem; z systemu są przycisk główny, link „cofnij”, kolory, fonty i czasy.
   Znaczniki i geometrię sceny składa assets/zestawy.js. Szerokości pośrednie (721-1439 px) są moje: eksport ma tylko 1440 i 390. */
.zs { padding: 20px; scroll-margin-top: calc(var(--s-4) * -1); }
.zs__rama { display: flex; align-items: center; justify-content: space-between; gap: 46px; padding: 64px 56px; border: 1px dashed rgba(19,19,19,.38); }
.zs__lewa { display: flex; flex-direction: column; gap: 48px; flex: none; width: 680px; max-width: 100%; }
.zs__prawa { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 16px; flex: 0 1 560px; min-width: 0; }

/* nagłówek: „Złóż swój [3 | 6] zapas”, słowo „zapas” konturem */
.zs__glowa { display: flex; flex-direction: column; gap: 12px; }
.zs__glowa h2, .zs__zapas { font-family: var(--f-druk); font-weight: 500; font-size: var(--t-h1); line-height: 1; text-transform: uppercase; }
.zs__zapas { color: transparent; -webkit-text-stroke: 1.3px var(--tusz); }
.zs__wiersz { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.zs__rozmiar { display: grid; grid-template-columns: auto auto; flex: none; border: 2px solid var(--tusz); }
.zs__rozmiar button { display: flex; align-items: center; gap: 12px; height: 64px; margin: 0; padding: 0 16px 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--tusz); text-align: left; cursor: pointer; touch-action: manipulation; }
.zs__rozmiar button + button { border-left: 2px solid var(--tusz); }
.zs__rozmiar button[aria-checked="true"] { background: var(--tusz); color: var(--krem); }
.zs__rozmiar b { font-family: var(--f-druk); font-weight: 500; font-size: 34px; line-height: 1; }
.zs__rozmiar small { font-size: .5em; } .zs__rozmiar b { white-space: nowrap; } /* „3 szt.” / „6 szt.” (prośba usera 18.10): jednostka mniejsza, liczba dalej rządzi */
.zs__rozmiar span { display: flex; flex-direction: column; font-family: var(--f-mono); font-size: 13px; line-height: 1.3; }
@media (hover: hover) { .zs__rozmiar button[aria-checked="false"]:hover { background: var(--piasek); } }
.zs__rozmiar button:active { opacity: .8; }
.zs button:focus-visible { outline: 2px solid var(--tusz); outline-offset: 2px; box-shadow: 0 0 0 2px var(--krem); }

/* produkty: dwa rzędy, kafle w grupie się stykają; szerokości z projektu jako proporcje (136 x 5; 168 x 3 + 152) */
.zs__rzedy { display: flex; flex-direction: column; gap: 32px; }
.zs__rzad { display: grid; gap: 24px; }
.zs__rzad:last-child { grid-template-columns: minmax(0, 504fr) minmax(0, 152fr); }
.zs__grupa { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.zs__k { display: flex; flex-direction: column; gap: 10px; min-width: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* cały kafel dodaje produkt (zestawy.js) */
.zs.is-pelny .zs__k { cursor: not-allowed; }
.zs__nazwa { display: flex; align-items: flex-end; justify-content: center; min-height: 28px; padding: 0 4px; font-family: var(--f-druk); font-weight: 500; font-size: 11px; line-height: 1.2; text-align: center; text-transform: uppercase; text-wrap: balance; }
.zs__kafel { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--tusz); background: var(--zs-smak); }
.zs__k + .zs__k .zs__kafel { border-left-width: 0; }
.zs__okno { position: relative; height: 160px; overflow: hidden; }
.zs__okno i { position: absolute; left: 50%; bottom: 8px; width: var(--zs-cien); height: 12px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(19,19,19,.42), rgba(19,19,19,0)); }
.zs__okno img { position: absolute; left: 50%; bottom: 14px; height: var(--zs-h); width: auto; transform: translateX(-50%); transition: transform var(--czas-szybki) var(--krzywa); }
.zs__k[data-rodzaj="wysoki"] { --zs-h: 118px; } .zs__k[data-rodzaj="niski"] { --zs-h: 100px; } .zs__k[data-rodzaj="torebka"] { --zs-h: 136px; }
.zs__dodaj { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; margin: 0; padding: 0 4px; border: 0; border-top: 1.5px solid var(--tusz); border-radius: 0; background: var(--krem); color: var(--tusz); font-family: var(--f-mono); font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer; touch-action: manipulation; transition: background var(--czas-szybki); }
.zs__kw { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; border: 1.5px solid currentColor; font-family: var(--f-tekst); font-weight: 500; font-size: 17px; line-height: 1; }
.zs__dodaj.is-w .zs__kw { background: var(--tusz); border-color: var(--tusz); color: var(--krem); }
.zs__dodaj[aria-disabled="true"] { color: var(--tusz-2); cursor: not-allowed; }
.zs__dodaj[aria-disabled="true"]:not(.is-w) .zs__kw { border-color: var(--linia); color: var(--linia); }
/* najechanie i fokus: słoik unosi się o 4 px, pasek z ceną odwraca kolory (tylko gdy zestaw ma wolne miejsce) */
@media (hover: hover) {
  .zs__k:hover .zs__dodaj:not([aria-disabled="true"]) { background: var(--tusz); color: var(--krem); }
  .zs__k:hover .zs__dodaj.is-w:not([aria-disabled="true"]) .zs__kw { background: var(--krem); border-color: var(--krem); color: var(--tusz); }
  .zs:not(.is-pelny) .zs__k:hover .zs__okno img { transform: translateX(-50%) translateY(-4px); }
}
.zs__dodaj:not([aria-disabled="true"]):active, .zs__k:active .zs__dodaj:not([aria-disabled="true"]) { background: var(--tusz); color: var(--krem); }

/* scena: stół z przodu, miejsca na blacie. Wymiary w układzie 560 x 440, skrypt mnoży je przez szerokość sceny / 560. */
.zs__scena { position: relative; width: 100%; overflow: hidden; }
.zs.is-szeroki .zs__scena { overflow: visible; }
.zs__stol { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.zs__stol g { fill: var(--krem); stroke: var(--tusz); stroke-width: 1.6; stroke-linejoin: miter; }
.zs__syl { position: absolute; overflow: visible; transform-origin: 50% 100%; z-index: 2; }
.zs__syl path { fill: none; stroke: var(--tusz); stroke-opacity: .7; stroke-width: 1.4; stroke-dasharray: 5 4; }
.zs__syl.is-podglad path { fill: rgba(19,19,19,.05); stroke-opacity: 1; }
/* dodanie produktu (zestawy.js: wybuch): klaks w kolorze smaku za słoikiem i jego kontur. Tylko transform i opacity. */
.zs__klaks { position: absolute; z-index: 3; opacity: 0; pointer-events: none; }
.zs__klaks { overflow: visible; }
.zs__klaks path { stroke: var(--tusz); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* obrys: jasny klaks Smoky XO też odcina się od kremu */
.zs__klaks--echo path { fill: none; }
.zs__sloik { position: absolute; transform-origin: 50% 100%; }
.zs__sloik > div { position: absolute; inset: 0; }
.zs__sloik i { position: absolute; left: 6%; right: 6%; bottom: -8px; height: 16px; background: radial-gradient(closest-side, rgba(19,19,19,.38), rgba(19,19,19,0)); }
.zs__sloik img { position: relative; display: block; width: 100%; height: 100%; }
.zs__x { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 50; touch-action: manipulation; }
.zs__x span { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 30px; height: 30px; border: 1.5px solid var(--krem); background: var(--tusz); color: var(--krem); font-family: var(--f-tekst); font-size: 19px; line-height: 1; }
/* mała scena (telefon, 6 miejsc): widoczny kwadrat 24 px, żeby nie zasłaniał połowy słoika; pole dotyku zostaje 44 px */
.zs.is-maly .zs__x span { width: 24px; height: 24px; font-size: 15px; }
.zs__x:active span { transform: scale(.92); }
@media (hover: hover) { .zs__x:hover span { background: var(--czerwien); } }
/* przycisk główny: na pełnej scenie stoi między nogami stołu (x 100, y 340, szerokość 360), na węższej pod sceną */
.zs.is-szeroki .zs__cta { position: absolute; z-index: 60; } /* położenie i szerokość ustawia skrypt w skali sceny */
.zs__toast { display: flex; align-items: center; justify-content: space-between; gap: 16px; align-self: center; width: 360px; max-width: 100%; min-height: 44px; font-size: 14px; line-height: 1.45; color: var(--tusz-2); }

/* pasek zakupu przy dole okna tylko na telefonie, gdy przycisk pod sceną jest poza ekranem */
.zs .pz-kotwica { height: var(--pasek-zakupu-h); margin: 0 -20px calc(var(--pasek-zakupu-h) * -1); overflow: clip; pointer-events: none; }
.zs .pz:not([aria-hidden="true"]) { pointer-events: auto; }
@media (min-width: 721px) { .zs .pz-kotwica { display: none; } }

@media (max-width: 1399px) { .zs__rama { padding: 56px 32px; gap: 40px; } }
@media (max-width: 1199px) { .zs__rama { flex-direction: column; gap: 46px; } .zs__prawa { flex: none; width: 100%; max-width: 560px; } }
/* telefon (układ „mobile” z projektu, 390 px) */
@media (max-width: 720px) {
  .zs { padding: 10px; }
  .zs__rama { padding: 32px 20px 28px; gap: 32px; align-items: stretch; }
  .zs__lewa { gap: 28px; }
  .zs__glowa { gap: 14px; }
  .zs__zapas { -webkit-text-stroke-width: 1px; }
  .zs__wiersz { flex-direction: column; align-items: stretch; gap: 14px; }
  .zs__rozmiar { order: 2; grid-template-columns: 1fr 1fr; }
  .zs__rozmiar button { flex-direction: column; align-items: flex-start; gap: 4px; height: auto; min-height: 56px; padding: 10px 12px; } /* z „szt.” liczba i opis nie mieszczą się obok siebie: opis pod liczbą */
  .zs__rozmiar b { font-size: 24px; }
  .zs__rozmiar span { font-size: 12px; }
  .zs__rzedy { gap: 20px; }
  .zs__rzad { gap: 14px; }
  .zs__rzad:last-child { grid-template-columns: minmax(0, 252fr) minmax(0, 84fr); }
  .zs__k { gap: 6px; }
  .zs__nazwa { min-height: 29px; font-family: var(--f-tekst); font-size: 12px; text-transform: none; }
  .zs__okno { height: 96px; }
  .zs__okno i { bottom: 4px; }
  .zs__okno img { bottom: 10px; }
  .zs__k[data-rodzaj="wysoki"] { --zs-h: 66px; } .zs__k[data-rodzaj="niski"] { --zs-h: 54px; } .zs__k[data-rodzaj="torebka"] { --zs-h: 78px; }
  .zs__dodaj { gap: 4px; padding: 0 2px; font-size: 12px; } /* kafel ma tu ok. 66 px (w projekcie 70): ciaśniej, żeby cena nie łamała się na dwa wiersze */
  .zs__kw { width: 20px; height: 20px; font-size: 14px; }
  .zs .pz-kotwica { margin-left: -10px; margin-right: -10px; }
}
@media (prefers-reduced-motion: reduce) { .zs__okno img { transition: none; } }