/* KOMPONENTY-ZERO — warstwa komponentów przeniesiona z AK27_ZERO_FROM_SOURCES.
   Dokładka do komponenty.css, nie zamiennik: reguły, których wszystkie klasy już mamy
   (.btn, .karta, .lead, .sekcja, .w-*, .opinia…) są pominięte, żeby header, przyciski
   i karty pozostały nasze. Tokeny pochodzą z tokeny.css — źródło używało tych samych.
   Kolejność: tokeny.css → komponenty.css → komponenty-zero.css → <style> strony (układ).
   Generowane z parowaniem nawiasów, nie regexem: zapytania medialne zawierają zagnieżdżone
   reguły, których wyrażenie regularne nie odróżnia od reguł najwyższego poziomu. */
/* Shared component layer reconstructed from the supplied Design System contract. */
*{box-sizing:border-box}
html{font-family:var(--ui);color:var(--tx);background:var(--biel);scroll-behavior:smooth}
body{margin:0;background:var(--biel);color:var(--tx);font-size:calc(18px * var(--ui-k));line-height:1.55;overflow-x:clip}
button,input,select{font:inherit;color:inherit}
button,a,summary,select{touch-action:manipulation}
img,video{display:block;max-width:100%;height:auto}   /* runda 50: height:auto jest WARUNKIEM dla atrybutów width/height — bez niego obraz zwężony do 100% zachowałby sztywną wysokość i zostałby zgnieciony */
a{color:var(--tx);text-decoration-thickness:1px;text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--grafit);outline-offset:3px}
.podtytul{font-family:var(--display);font-size:clamp(22px,2.6vw,34px);line-height:1.15;font-weight:400;margin:0}
.tytul em,.sekcja em,.podtytul em{color:var(--zloty);font-style:italic;font-weight:inherit}
.meta{font-size:calc(12.5px * var(--ui-k));color:var(--tx-40)}
.karta .foto .cover-mark{width:60%;aspect-ratio:3/4;border:1px solid color-mix(in srgb,var(--grafit) 16%,transparent);border-radius:var(--r-male);display:grid;place-items:center;font-family:var(--display);font-size:clamp(28px,4vw,54px);color:var(--tx-40)}
.pasek-nadrzedny{min-height:34px;display:flex;align-items:center;justify-content:center;padding:6px var(--margines);background:var(--grafit);color:var(--tx-inv);font-size:calc(12.5px * var(--ui-k));letter-spacing:.03em;text-align:center}
.media-slot{position:relative;display:grid;place-items:center;background:var(--biel-ciepla);border:1px solid color-mix(in srgb,var(--grafit) 8%,transparent);overflow:hidden;color:var(--tx-40)}
.media-slot::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,transparent 0 44%,color-mix(in srgb,var(--zloty) 18%,transparent) 45% 55%,transparent 56% 100%)}
.media-slot > span{position:relative;font-size:calc(11px * var(--ui-k));letter-spacing:.12em;text-transform:uppercase}
.otwarcie-roku{min-height:680px;display:grid;place-items:center;text-align:center;padding:96px var(--margines);background:var(--biel)}
.otwarcie-roku .rok{font-family:var(--display);font-size:clamp(104px,20vw,330px);font-weight:300;line-height:.78;letter-spacing:-.08em;margin:18px 0 30px}
.otwarcie-roku .akcje{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.definicja{padding:120px var(--margines);background:var(--piasek)}
.definicja .w-tekst{text-align:center}
.definicja .reassurance{font-family:var(--display);font-size:clamp(24px,3.3vw,46px);line-height:1.15;margin-top:56px}
.media-detal{display:grid;grid-template-columns:1fr 1fr;min-height:620px}
.media-detal .video{aspect-ratio:1/1;align-self:center;margin:64px;max-width:520px;border-radius:var(--r-duze)}
.media-detal .galeria{display:grid;grid-template-rows:1fr auto;min-width:0;background:var(--piasek)}
.media-detal .galeria .media-slot{min-height:540px;border:0}
.kropki{display:flex;justify-content:center;gap:8px;padding:20px}
.kropka.aktywna{background:var(--grafit)}
.statement{padding:128px var(--margines);text-align:center;background:var(--biel)}
.statement .w-tekst{margin-inline:auto}
.benefit-matrix{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid color-mix(in srgb,var(--grafit) 14%,transparent);border-left:1px solid color-mix(in srgb,var(--grafit) 14%,transparent)}
.benefit{min-height:240px;padding:42px 32px;border-right:1px solid color-mix(in srgb,var(--grafit) 14%,transparent);border-bottom:1px solid color-mix(in srgb,var(--grafit) 14%,transparent)}
.benefit .symbol{width:42px;height:42px;border:1px solid color-mix(in srgb,var(--grafit) 28%,transparent);border-radius:999px;margin-bottom:28px}
.benefit h3{font-family:var(--display);font-size:calc(19px * var(--ui-k));font-weight:400;line-height:1.25;margin:0}
.edition-overview{min-height:620px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:80px var(--margines);background:var(--biel)}
.edition-overview .mark{font-family:var(--display);font-size:clamp(180px,30vw,520px);font-weight:300;line-height:.7;color:var(--tx);transform:rotate(calc(-10deg + 20deg * var(--p,0)));transition:transform var(--t-edytorial) var(--e-wej)}
.edition-overview .facts{max-width:460px}
.interior-explorer{display:grid;grid-template-columns:minmax(280px,.7fr) 1.3fr;gap:var(--rynna);padding:96px var(--margines);background:var(--piasek);align-items:center}
.explorer-copy{max-width:420px}
.explorer-index{font-size:calc(12.5px * var(--ui-k));letter-spacing:.12em;color:var(--tx-40);margin-bottom:22px}
.book-stage{position:relative;aspect-ratio:1.45/1;background:var(--biel);border-radius:var(--r-duze);box-shadow:var(--c-karta);perspective:1200px;overflow:hidden}
.book-stage::before,.book-stage::after{content:'';position:absolute;top:7%;bottom:7%;width:43%;background:var(--biel-ciepla);border:1px solid color-mix(in srgb,var(--grafit) 10%,transparent)}
.book-stage::before{left:7%;border-radius:var(--r-male) 0 0 var(--r-male)}
.book-stage::after{right:7%;border-radius:0 var(--r-male) var(--r-male) 0}
.book-page{position:absolute;top:7%;bottom:7%;left:50%;width:43%;transform-origin:left center;transform:rotateY(var(--turn,0deg));background:var(--biel-ciepla);border:1px solid color-mix(in srgb,var(--grafit) 12%,transparent);z-index:2;transition:transform var(--t-edytorial) var(--e-wej)}
.explorer-controls{display:flex;align-items:center;gap:12px;margin-top:24px}
.explorer-controls button,.rail-controls button{width:46px;height:46px;border-radius:999px;border:1px solid color-mix(in srgb,var(--grafit) 22%,transparent);background:var(--biel);cursor:pointer}
.spec-rail{padding:96px 0;background:var(--biel)}
.spec-rail h2{width:var(--szer-tresc);margin:0 auto 32px}
.spec-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-top:1px solid color-mix(in srgb,var(--grafit) 12%,transparent);border-bottom:1px solid color-mix(in srgb,var(--grafit) 12%,transparent);scrollbar-width:none}
.spec-track::-webkit-scrollbar{display:none}
.spec-item{flex:0 0 min(290px,72vw);min-height:220px;padding:32px;border-right:1px solid color-mix(in srgb,var(--grafit) 12%,transparent);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between}
.spec-value{font-family:var(--display);font-size:clamp(40px,6vw,76px);font-weight:300}
.rail-controls{width:var(--szer-tresc);margin:24px auto 0;display:flex;gap:10px}
.collection-selector{display:grid;grid-template-columns:1fr 1fr;background:var(--biel)}
.collection-world{min-height:720px;padding:72px var(--margines);display:grid;grid-template-rows:auto 1fr;gap:48px;overflow:hidden}
.collection-world + .collection-world{border-left:1px solid color-mix(in srgb,var(--grafit) 10%,transparent)}
.collection-mark{font-family:var(--display);font-size:clamp(100px,14vw,220px);font-weight:300;line-height:.8}
.collection-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,150px);gap:10px}
.collection-mosaic .media-slot{border-radius:var(--r-srednie)}
.sticky-grid{display:grid;grid-template-columns:minmax(280px,.72fr) 1.28fr;align-items:start;background:var(--biel)}
.sticky-grid.mirror{grid-template-columns:1.28fr minmax(280px,.72fr)}
.collection-intro{position:sticky;top:0;min-height:100vh;padding:96px var(--margines);display:flex;flex-direction:column;justify-content:center;background:var(--piasek)}
.collection-intro .collection-mark{margin-bottom:30px}
.product-grid{padding:72px var(--margines);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--rynna)}
.bundle-config{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--rynna);padding:96px var(--margines);background:var(--piasek);align-items:center}
.bundle-panel{max-width:460px}
.cover-select{display:grid;gap:14px;margin-top:28px}
.cover-select select{min-height:52px;border:1px solid color-mix(in srgb,var(--grafit) 18%,transparent);border-radius:var(--r-srednie);background:var(--biel);padding:0 16px}
.bundle-preview{min-height:520px;border-radius:var(--r-xl);background:var(--biel);box-shadow:var(--c-karta);display:grid;place-items:center}
.bundle-preview .cover-mark{width:min(260px,52%);aspect-ratio:3/4;border:1px solid color-mix(in srgb,var(--grafit) 16%,transparent);display:grid;place-items:center;font-family:var(--display);font-size:clamp(36px,6vw,72px);transition:transform var(--t-std) var(--e-std)}
.companion-focus{padding:120px var(--margines);background:var(--biel)}
.companion-focus header{text-align:center;margin-bottom:64px}
.companion-items{max-width:980px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rynna)}
.editorial-product-split{display:grid;grid-template-columns:3fr 1fr;min-height:620px;background:var(--biel)}
.editorial-product-split.reverse{grid-template-columns:1fr 3fr}
.editorial-product-split .scene{min-height:620px}
.editorial-product-split .product-module{padding:56px 32px;display:flex;align-items:center;background:var(--piasek)}
.editorial-product-split .product-module .karta{width:100%}
.people-carousel{padding:96px 0;background:var(--biel)}
.people-carousel h2{width:var(--szer-tresc);margin:0 auto 40px}
.people-track{display:flex;gap:16px;overflow-x:auto;padding-inline:var(--margines);scroll-snap-type:x mandatory;scrollbar-width:none}
.people-card{position:relative;flex:0 0 min(310px,70vw);aspect-ratio:9/16;border-radius:var(--r-duze);overflow:hidden;background:var(--biel-ciepla);scroll-snap-align:start;display:flex;align-items:flex-end}
.people-card::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--grafit) 72%,transparent),transparent 52%)}
.people-card .person-copy{position:relative;padding:24px;color:var(--tx-inv)}
.people-card .person-copy b{display:block;font-family:var(--display);font-size:calc(20px * var(--ui-k));font-weight:400}
.gallery-bands{padding:72px 0;background:var(--piasek);display:grid;gap:12px}
.gallery-band{display:flex;height:180px;overflow:hidden}
.gallery-band .media-slot{flex:1 0 220px;border:0;border-right:1px solid var(--piasek)}
.testimonial-rail{padding:96px 0;background:var(--biel)}
.testimonial-track{display:flex;gap:16px;overflow-x:auto;padding-inline:var(--margines);scroll-snap-type:x mandatory;scrollbar-width:none}
.testimonial-track .opinia{scroll-snap-align:start}
.community-statement{min-height:520px;padding:120px var(--margines);display:grid;place-items:center;text-align:center;background:var(--braz);color:var(--tx-inv)}
.community-statement .lead{color:var(--tx-inv-70);margin-inline:auto}
.founder-story{display:grid;grid-template-columns:1fr 1fr;min-height:680px;background:var(--biel)}
.founder-story .founder-media{min-height:680px;border:0}
.founder-copy{padding:80px var(--margines);display:flex;flex-direction:column;justify-content:center}
.proof-dots{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.proof-dot{width:54px;height:54px;border-radius:999px;border:1px solid color-mix(in srgb,var(--grafit) 18%,transparent);display:grid;place-items:center;font-size:calc(11px * var(--ui-k));color:var(--tx-40)}
.guarantee{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:center;padding:96px var(--margines);background:var(--piasek)}
/* Kasia 23.09: „przycisk w tej sekcji nie jest wyśrodkowany do całej sekcji”. Wpadał do siatki jako
   trzeci element, czyli do kolumny z tekstem, i stawał na JEJ środku — 118 px na lewo od środka sekcji.
   Teraz idzie przez obie kolumny, więc środek przycisku = środek sekcji.
   Osobno: maska torów kafelków ma teraz 8 px zapasu zamiast 2 — przy szerokościach, gdzie margines
   wypada na ułamku piksela (np. 1512 px → 75,6 px), lewa krawędź pierwszego kafelka wchodziła w
   gradient i wyglądała na uciętą („ucięta jest lewa linia obrysu pierwszego kafelka”, Kasia 23.09). */
.guarantee .cta-zakup{grid-column:1 / -1;display:flex;justify-content:center}
.guarantee-badge{width:220px;height:220px;border-radius:999px;border:1px solid var(--grafit);display:grid;place-items:center;text-align:center;font-family:var(--display);font-size:clamp(28px,4vw,50px);line-height:1.05}
.payment-strip,.fulfilment-notice{padding:32px var(--margines);border-top:1px solid color-mix(in srgb,var(--grafit) 10%,transparent);background:var(--biel)}
.payment-strip{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.payment-icons{display:flex;gap:10px;flex-wrap:wrap}
.payment-icon{min-width:74px;height:38px;border:1px solid color-mix(in srgb,var(--grafit) 18%,transparent);border-radius:var(--r-male);display:grid;place-items:center;font-size:calc(11px * var(--ui-k));color:var(--tx-60)}
.fulfilment-notice{font-size:calc(14px * var(--ui-k));color:var(--tx-60)}
.calendar-comparison{padding:96px var(--margines);background:var(--biel)}
.compare-frame{display:grid;grid-template-columns:1fr 1fr;border:1px solid color-mix(in srgb,var(--grafit) 16%,transparent);border-radius:var(--r-xl);overflow:hidden;max-width:1120px;margin:42px auto 0}
.compare-panel{padding:40px;min-height:460px;display:grid;grid-template-rows:auto 1fr}
.compare-panel + .compare-panel{border-left:1px solid color-mix(in srgb,var(--grafit) 16%,transparent)}
.compare-panel .media-slot{margin-top:28px;border-radius:var(--r-duze)}
.set-builder{display:grid;grid-template-columns:1fr 1fr;max-width:1180px;margin:auto;border-radius:var(--r-xl);overflow:hidden;background:var(--piasek);box-shadow:var(--c-karta)}
.set-builder-copy{padding:64px}
.set-options{display:grid;gap:14px;margin:28px 0}
.set-option{display:flex;gap:12px;align-items:flex-start}
.set-option input{margin-top:6px}
.set-builder-visual{position:relative;min-height:540px;background:var(--biel)}
.set-sheet{position:absolute;left:50%;top:50%;width:42%;aspect-ratio:3/4;border:1px solid color-mix(in srgb,var(--grafit) 16%,transparent);background:var(--biel-ciepla);transform:translate(-50%,-50%) rotate(var(--rot,0deg));border-radius:var(--r-male);transition:transform var(--t-std) var(--e-std)}
.cart-demo{display:grid;grid-template-columns:1fr minmax(340px,520px);min-height:720px;background:var(--biel-ciepla)}
.cart-context{padding:72px var(--margines);display:flex;align-items:center}
.cart-drawer{background:var(--biel);box-shadow:var(--c-uniesiona);padding:28px;overflow:auto}
.cart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cart-unit{border-top:1px solid color-mix(in srgb,var(--grafit) 12%,transparent);padding:18px 0}
.cart-unit-main{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center}
.cart-thumb{aspect-ratio:4/5;background:var(--biel-ciepla);border-radius:var(--r-male);display:grid;place-items:center;font-size:calc(11px * var(--ui-k));color:var(--tx-40)}
.bundle-upgrade{margin-top:14px;background:var(--piasek);border-radius:var(--r-srednie);padding:16px}
.bundle-upgrade[hidden]{display:none}
.value-delta{font-size:calc(13px * var(--ui-k));color:var(--tx-60);margin:8px 0 14px}
.cart-upsell{border-top:1px solid color-mix(in srgb,var(--grafit) 12%,transparent);padding:20px 0}
.cart-summary{border-top:1px solid color-mix(in srgb,var(--grafit) 16%,transparent);padding-top:18px;display:grid;gap:12px}
.cart-total{display:flex;justify-content:space-between;font-family:var(--display);font-size:calc(22px * var(--ui-k))}
@media(max-width:1024px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editorial-product-split,.editorial-product-split.reverse{grid-template-columns:1.5fr 1fr}
  .cart-demo{grid-template-columns:1fr}
  .cart-context{display:none}
}
@media(max-width:860px){
  .otwarcie-roku{min-height:620px;padding-block:72px}
  .otwarcie-roku .akcje{flex-direction:column;align-items:stretch;width:min(100%,420px);margin-inline:auto}
  .definicja,.statement{padding-block:88px}
  .media-detal,.edition-overview,.interior-explorer,.collection-selector,.sticky-grid,.sticky-grid.mirror,.bundle-config,.editorial-product-split,.editorial-product-split.reverse,.founder-story,.guarantee,.compare-frame,.set-builder{grid-template-columns:1fr}
  .media-detal .video{margin:32px auto;width:calc(100% - 40px)}
  .media-detal .galeria .media-slot{min-height:420px}
  .benefit-matrix{grid-template-columns:repeat(2,1fr)}
  .edition-overview{gap:36px;padding-block:72px}
  .edition-overview .mark{font-size:clamp(150px,48vw,280px)}
  .interior-explorer{padding-block:72px}
  .collection-world{min-height:auto;border-left:0!important;border-top:1px solid color-mix(in srgb,var(--grafit) 10%,transparent)}
  .collection-intro{position:relative;min-height:auto;padding-block:72px;order:-1}
  .sticky-grid.mirror .collection-intro{grid-row:1}
  .product-grid{grid-template-columns:1fr 1fr;padding-block:48px}
  .companion-items{grid-template-columns:1fr}
  .editorial-product-split .scene,.founder-story .founder-media{min-height:440px}
  .editorial-product-split .product-module{padding:36px var(--margines)}
  .guarantee-badge{width:180px;height:180px}
  .compare-panel + .compare-panel{border-left:0;border-top:1px solid color-mix(in srgb,var(--grafit) 16%,transparent)}
  .set-builder-copy{padding:48px var(--margines)}
}
@media(max-width:600px){
  .benefit-matrix{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .community-statement{min-height:440px;padding-block:88px}
  .guarantee{gap:36px}
  .guarantee-badge{justify-self:center}
  .cart-unit-main{grid-template-columns:60px 1fr}
  .cart-unit-main .ilosc{grid-column:2}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:120ms!important;scroll-behavior:auto!important}
  .edition-overview .mark,.book-page,.set-sheet{transform:none!important}
}

/* ——— PRZENIESIENIE → STRONA ——————————————————————————————————————————
   W atlasie każdy komponent siedział w kadrze z własnym przewijaniem, więc poziome szyny
   nigdy nie wychodziły poza stronę. Jako strona wychodzą i ciągną za sobą cały dokument.
   Reguła z wzorca „obiekty w siatce”: szeroka treść przewija się WEWNĄTRZ kontenera. */
.spec-track,.testimonial-track,.people-track,.gallery-band,.set-options,.companion-items,
.collection-mosaic,.payment-icons{overflow-x:auto;overscroll-behavior-x:contain}

@media(max-width:860px){
  /* Ścieżka siatki nie zejdzie poniżej szerokości minimalnej swojego dziecka, więc samo
     grid-template-columns:1fr nie wystarcza — dzieci mają max-width i marginesy spod desktopu. */
  .media-detal > *,.editorial-product-split > *,.collection-selector > *,.sticky-grid > *,
  .bundle-config > *,.compare-frame > *,.founder-story > *,.set-builder > *,
  .interior-explorer > *{min-width:0}
  .media-detal{min-height:0}
  .media-detal .video{margin:clamp(16px,6vw,40px);max-width:100%;width:auto}
  .media-detal .galeria .media-slot{min-height:clamp(240px,62vw,420px)}
  .people-card,.opinia{max-width:min(78vw,320px)}
  .book-stage,.bundle-preview,.set-builder-visual{max-width:100%}
  .gallery-bands,.spec-rail,.testimonial-rail,.people-carousel{max-width:100%;overflow:hidden}
}

/* ═══ KOREKTY v4 PO KRYTYCE · 13.09 ══════════════════════════════════════════
   Wygląd przeniesionych komponentów według uwag Kasi. Blok stoi NA KOŃCU pliku celowo:
   nadpisuje reguły źródła przy tej samej specyficzności. Układ strony (przypięcia,
   szerokości sekcji, siatki) jest w <style> landing-v4.html — tu tylko wygląd. */

/* sterowanie szyn — ten sam kontroler co w v3 („Poznaj go od środka”, historie) */
.strzalki{display:flex;gap:8px;flex:0 0 auto}
.strzalki button{width:44px;height:44px;border-radius:999px;border:1px solid rgba(22,19,18,.26);
  background:var(--biel);color:var(--tx);font-size:calc(18px * var(--ui-k));line-height:1;cursor:pointer;
  transition:border-color var(--t-mikro) var(--e-std)}
.strzalki button:hover:not(:disabled){border-color:var(--grafit)}
.strzalki button:disabled{opacity:.3;cursor:default}

/* matryca korzyści — osiem kafli na całą płaszczyznę, treść na środku kafla */
.benefit-matrix{border:0;gap:1px;background:color-mix(in srgb,var(--grafit) 12%,transparent)}
.benefit{min-height:0;border:0;background:var(--biel-ciepla);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:clamp(28px,3vw,52px)}
.benefit .symbol{width:clamp(44px,3.8vw,64px);height:clamp(44px,3.8vw,64px);margin:0 0 clamp(18px,2vw,30px)}
.benefit h3{font-size:clamp(20px,1.75vw,30px);line-height:1.2;max-width:15ch}
@media(min-width:861px){.benefit-matrix{grid-template-rows:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.benefit{min-height:clamp(180px,44vw,280px)}}

/* edycja 2027 — cyfra w tle, przesuwana samym scrollem. Bez obrotu i bez transition:
   to one dawały „kołysanie” — przejście spóźniało się za przewijaniem. */
.edition-overview{background:var(--biel)}
.edition-overview .mark{font-weight:300;line-height:.78;letter-spacing:-.04em;
  color:color-mix(in srgb,var(--zloty) 28%,var(--biel-ciepla));
  transform:translate(-50%,var(--przesun,0px));transition:none;will-change:transform;
  user-select:none;pointer-events:none}
.edition-overview .facts .sekcja{font-size:clamp(46px,6.2vw,112px);line-height:1}
.edition-overview .facts .lead{margin-top:clamp(14px,1.6vw,22px)}

/* poznaj go od środka — prawdziwa rozkładówka w formacie 18,8 × 25,7 cm (2 × 18,8 / 25,7 = 1,463) */
.interior-explorer{background:var(--piasek)}
.book-stage{aspect-ratio:1.463/1;border-radius:var(--r-srednie);padding:clamp(10px,1.25vw,20px);
  box-sizing:border-box;perspective:none}
.book-stage::before,.book-stage::after{content:none}
.explorer-copy{max-width:420px}
.explorer-copy .podtytul{font-size:clamp(22px,2.2vw,32px);margin:0}
.explorer-copy .meta{color:var(--tx-60);font-size:calc(15px * var(--ui-k));line-height:1.65;margin-top:12px}
.ie-ster{gap:20px}
.ie-ster .kropki{margin:0}
@media(max-width:860px){.interior-explorer .explorer-copy{order:2;max-width:none}}

/* co dostajesz — wysokie, pionowe kafle */
.spec-track{border:0;gap:clamp(12px,1.4vw,20px);padding-inline:var(--margines);
  scroll-padding-inline:var(--margines);scroll-snap-type:x proximity}
.spec-item{flex:0 0 clamp(240px,21vw,330px);aspect-ratio:3/4;min-height:0;border:0;
  border-radius:var(--r-srednie);background:var(--biel-ciepla);padding:clamp(24px,2.4vw,36px)}
.spec-value{font-size:clamp(40px,4.4vw,72px);line-height:1}
.spec-item > span:last-child{font-size:calc(14px * var(--ui-k));color:var(--tx-60)}
.spec-rail .rail-naglowek h2,.people-carousel .rail-naglowek h2{width:auto;margin:0}

/* kolekcja Cº — wysokość według treści, nie ekranu */
.sticky-grid.mirror .collection-intro{position:relative;top:auto;min-height:0}

/* rozszerz perspektywę — produkty uzupełniające idą zaraz pod spodem */
.companion-focus{padding:clamp(72px,8vw,120px) var(--margines) clamp(48px,5vw,72px)}

/* kto korzysta — więcej kafli, szersze proporcje, mniejszy promień */
.people-carousel{padding:clamp(72px,8vw,120px) 0}
.people-track{gap:clamp(10px,1.2vw,16px);scroll-padding-inline:var(--margines);scroll-snap-type:x proximity}
.people-card{flex:0 0 clamp(260px,24vw,400px);aspect-ratio:4/5;border-radius:var(--r-srednie)}

/* zdjęcia od klientek — bez pustego pasa nad i pod */
.gallery-bands{padding:0;gap:8px;background:var(--biel)}
.gallery-band{height:clamp(150px,15vw,240px);gap:8px}
.gallery-band .media-slot{border:0}

/* opinie — więcej powietrza w środku, mniejszy promień, szyna ze strzałkami */
.testimonial-rail{padding:clamp(72px,8vw,120px) 0;background:var(--biel-ciepla)}
.testimonial-track{gap:clamp(12px,1.4vw,20px);scroll-padding-inline:var(--margines);scroll-snap-type:x proximity}
.testimonial-track .opinia{flex:0 0 clamp(300px,31vw,460px);margin:0;border:0;
  padding:clamp(32px,3.4vw,52px);border-radius:var(--r-srednie);background:var(--biel);
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(260px,22vw,340px)}
.testimonial-track .opinia blockquote{margin:0;font-family:var(--display);font-size:clamp(20px,1.7vw,26px);line-height:1.42}
.testimonial-track .opinia footer{font-size:calc(13px * var(--ui-k));color:var(--tx-60);letter-spacing:.02em}

/* społeczność i historia założycielki — pełna wysokość zamiast paska */
.community-statement{min-height:clamp(560px,86svh,900px);padding:clamp(88px,10vw,160px) var(--margines)}
.founder-story{min-height:clamp(680px,96svh,1040px)}
.founder-story .founder-media{min-height:clamp(680px,96svh,1040px)}
.founder-copy{padding:clamp(72px,8vw,140px) var(--margines)}
@media(max-width:860px){.founder-story,.founder-story .founder-media{min-height:clamp(420px,70svh,640px)}}

@media(prefers-reduced-motion:reduce){.edition-overview .mark{transform:translateX(-50%)!important}}

/* ——— korekty v4 · runda 2 ——— */
/* matryca: tytuł zawsze na dwa wiersze wysokości, żeby symbole stały w jednej linii
   niezależnie od długości tytułu */
.benefit h3{min-height:2.4em;display:flex;align-items:flex-start;justify-content:center}
/* kolekcja Cº: panel kolekcji sięga do dołu kart */
.sticky-grid.mirror{align-items:stretch}
.sticky-grid.mirror .collection-intro{justify-content:center}
/* społeczność: lead nie przykleja się do nagłówka */
.community-statement .lead{margin-top:clamp(16px,1.8vw,26px)}

/* ═══ KOREKTY v4 · RUNDA 3 · 14.09 ═══════════════════════════════════════════════
   Uwagi Kasi po drugim przeglądzie. Stoi na końcu pliku, więc nadpisuje wcześniejsze reguły. */

/* ——— Jedna krawędź dla całej strony: ta sama linia, na której stoi logo w nagłówku.
   Runda 4: pasek v3 nie ma kontenera 1320 px (.pasek > .wrap{max-width:none;padding:0 var(--margines)}),
   więc linia logo to margines strony. Wersja z 1320 px zamykała 17 sekcji w pudełku 1224 px. */
:root{--krawedz:var(--margines)}

/* ——— strzałki: ikona w optycznym środku koła; bez przewijania znikają */
.strzalki button{display:grid;place-items:center;padding:0}
.strzalki button svg{display:block}
.strzalki[hidden]{display:none}

/* ——— kroki zamiast kulek. Kulki były zwykłymi <button> z przeglądarkową ramką 3D
   i naszą kropką statusu w środku — stąd wygląd z lat 90. */
.kroki{display:flex;align-items:center;justify-content:center;gap:6px;padding:0;margin:0}
.krok{appearance:none;-webkit-appearance:none;border:0;border-radius:0;margin:0;padding:0;
  width:22px;height:24px;background:transparent;cursor:pointer;position:relative;
  transition:width var(--t-std) var(--e-std)}
.krok::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:color-mix(in srgb,var(--grafit) 22%,transparent);transition:background var(--t-std) var(--e-std)}
.krok:hover::before{background:color-mix(in srgb,var(--grafit) 45%,transparent)}
.krok.aktywna{width:44px}
.krok.aktywna::before{background:var(--grafit)}
.krok:focus-visible{outline:2px solid var(--zloty);outline-offset:3px}
.ie-ster .kroki{justify-content:flex-end}

/* ——— szyny zaczynają się na krawędzi logo */
.spec-track,.testimonial-track,.people-track{scroll-padding-inline:var(--krawedz)}

/* ——— film i detal: film na środku lewej połowy, detal wypełnia całą prawą, kroki na dole */
.media-detal{min-height:clamp(620px,86svh,920px);grid-template-columns:1fr 1fr;background:var(--biel)}
.media-detal .video{justify-self:center;align-self:center;margin:clamp(40px,5vw,96px) 0;
  width:min(78%,600px);max-width:none}
.detal-galeria{position:relative;min-width:0;background:var(--piasek)}
.detal-galeria > .media-slot{position:absolute;inset:0;border:0;min-height:0}
.detal-galeria > .kroki{position:absolute;left:0;right:0;bottom:clamp(20px,2.4vw,36px)}
@media(max-width:860px){
  .media-detal{grid-template-columns:1fr;min-height:0}
  .media-detal .video{width:calc(100% - 2 * var(--krawedz));margin:clamp(28px,6vw,48px) 0}
  .detal-galeria{min-height:clamp(320px,90vw,520px)}
}

/* ——— manifest — oddech, nie pasek */
.statement{min-height:clamp(640px,96svh,1100px);display:grid;place-items:center;
  padding:clamp(96px,12vw,200px) var(--krawedz)}
.statement .eyebrow{margin-bottom:clamp(16px,1.6vw,26px)}
.statement .lead{margin-top:clamp(20px,2vw,32px)}

/* ——— rozszerz perspektywę — mniejsze produkty, dalej od siebie, ten sam kontener */
.companion-items{grid-template-columns:repeat(2,minmax(0,var(--szer-karta-mala)));justify-content:center;
  column-gap:clamp(56px,9vw,160px);row-gap:clamp(40px,5vw,72px)}
@media(max-width:860px){.companion-items{grid-template-columns:minmax(0,var(--szer-karta-mala))}}

/* ——— produkt uzupełniający — mniejsza karta, jej środek na 1/3 wysokości sekcji.
   Rzędy 2fr / 1fr: karta wyśrodkowana w górnych dwóch trzecich stoi dokładnie na jednej trzeciej. */
.editorial-product-split{min-height:clamp(720px,92svh,980px)}
.editorial-product-split .scene{min-height:0}
.editorial-product-split .product-module{display:grid;grid-template-rows:minmax(0,2fr) minmax(0,1fr);
  align-items:center;justify-content:center;padding:clamp(24px,3vw,48px)}
.editorial-product-split .product-module .karta{grid-row:1}   /* wielkość daje .karta.mala (runda 5) */
@media(max-width:860px){
  .editorial-product-split{min-height:0}
  .editorial-product-split .scene{min-height:clamp(320px,80vw,480px)}
  .editorial-product-split .product-module{grid-template-rows:auto}
}

/* ——— zdjęcia od klientek — mozaika trzech proporcji: pion, poziom, kwadrat.
   Rozmieszczenie jawne na siatce 12 × 3 kwadratowych pól, bez dziur. */
.mozaika{--u:calc((100vw - 11 * 8px) / 12);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(3,var(--u));gap:8px}
.mozaika > .kadr-mozaiki{border:0;min-height:0}
.mozaika > :nth-child(1){grid-column:1 / 3;grid-row:1 / 4}
.mozaika > :nth-child(2){grid-column:3 / 6;grid-row:1 / 3}
.mozaika > :nth-child(3){grid-column:3 / 5;grid-row:3 / 4}
.mozaika > :nth-child(4){grid-column:5 / 6;grid-row:3 / 4}
.mozaika > :nth-child(5){grid-column:6 / 8;grid-row:1 / 3}
.mozaika > :nth-child(6){grid-column:6 / 8;grid-row:3 / 4}
.mozaika > :nth-child(7){grid-column:8 / 9;grid-row:1 / 3}
.mozaika > :nth-child(8){grid-column:8 / 9;grid-row:3 / 4}
.mozaika > :nth-child(9){grid-column:9 / 12;grid-row:1 / 3}
.mozaika > :nth-child(10){grid-column:9 / 10;grid-row:3 / 4}
.mozaika > :nth-child(11){grid-column:10 / 12;grid-row:3 / 4}
.mozaika > :nth-child(12){grid-column:12 / 13;grid-row:1 / 3}
.mozaika > :nth-child(13){grid-column:12 / 13;grid-row:3 / 4}
@media(max-width:860px){
  .mozaika{--u:calc((100vw - 3 * 6px) / 4);grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(6,var(--u));gap:6px}
  .mozaika > :nth-child(1){grid-column:1 / 3;grid-row:1 / 4}
  .mozaika > :nth-child(2){grid-column:3 / 5;grid-row:1 / 3}
  .mozaika > :nth-child(3){grid-column:3 / 5;grid-row:3 / 4}
  .mozaika > :nth-child(4){grid-column:1 / 2;grid-row:4 / 5}
  .mozaika > :nth-child(5){grid-column:2 / 5;grid-row:4 / 6}
  .mozaika > :nth-child(6){grid-column:1 / 2;grid-row:5 / 7}
  .mozaika > :nth-child(7){grid-column:2 / 4;grid-row:6 / 7}
  .mozaika > :nth-child(8){grid-column:4 / 5;grid-row:6 / 7}
  .mozaika > :nth-child(n+9){display:none}
}

/* ——— sekcje z treścią przy krawędzi — ta sama linia co logo */
.sekcja-naglowek{padding:clamp(64px,7vw,104px) var(--krawedz) clamp(28px,3vw,44px)}
.collection-world:first-child{padding-left:var(--krawedz)}
.collection-world:last-child{padding-right:var(--krawedz)}
.sticky-grid .collection-intro{padding-left:var(--krawedz)}
.sticky-grid:not(.mirror) .product-grid{padding-right:var(--krawedz)}
.sticky-grid.mirror .product-grid{padding-left:var(--krawedz)}
.sticky-grid.mirror .collection-intro{padding-left:var(--margines);padding-right:var(--krawedz)}
.bundle-config,.guarantee,.calendar-comparison,.payment-strip,.fulfilment-notice,
.companion-focus,.definicja,.community-statement{padding-left:var(--krawedz);padding-right:var(--krawedz)}
.cart-context{padding-left:var(--krawedz)}
.founder-copy{padding-right:var(--krawedz)}
.faq-sekcja{padding:clamp(72px,8vw,120px) var(--krawedz)}
.faq-sekcja .w-tekst{max-width:none;margin:0}
.faq-sekcja .faq{max-width:900px}
.set-builder-sekcja{padding:clamp(72px,8vw,120px) var(--krawedz)}
.set-builder-sekcja .set-builder{max-width:none}
@media(max-width:860px){
  .collection-world:first-child,.collection-world:last-child,
  .sticky-grid .collection-intro,.sticky-grid .product-grid,
  .sticky-grid.mirror .collection-intro,.sticky-grid.mirror .product-grid{padding-left:var(--krawedz);padding-right:var(--krawedz)}
  .founder-copy{padding-left:var(--krawedz)}
}
/* produkt uzupełniający: ukrycie licznika przeszło do wariantu .karta.mala w komponenty.css (runda 5) */

/* ═══ KOREKTY v4 · RUNDA 4 · 14.09 ═══════════════════════════════════════════════
   Uwagi Kasi po trzecim przeglądzie: edycja i manifest za wysokie, planer odstaje,
   „Poznaj go od środka” i „Co dostajesz” mają być pełnym ekranem, sekcje wróciły do pudełka. */

/* ——— dwie rodziny wysokości.
   --oddech: sekcje deklaracji (planer, manifest, edycja 2027, społeczność) — jedna wysokość,
   zawsze mieści się pod przyklejonym paskiem (73 px), więc widać ją w całości.
   --ekran: sekcje treściowe na pełny ekran — dokładnie widoczne okno pod paskiem. */
:root{--oddech:clamp(600px,80svh,880px);--pasek-h:73px;--ekran:max(600px,calc(100svh - var(--pasek-h)))}
@media(max-width:860px){:root{--oddech:clamp(480px,70svh,620px)}}

.definicja,.statement,.community-statement{min-height:var(--oddech);display:grid;place-items:center;
  padding-block:clamp(72px,8vw,120px)}
.definicja .w-tekst,.statement .w-tekst,.community-statement .w-tekst{width:100%}
@media(max-width:860px){.definicja,.statement,.community-statement{padding-block:56px}}
/* ten sam rytm eyebrow / nagłówek / lead w całej rodzinie (wartości manifestu z rundy 3) */
.definicja .eyebrow,.statement .eyebrow,.edition-overview .facts .eyebrow{margin-bottom:clamp(16px,1.6vw,26px)}
.definicja .lead,.statement .lead,.community-statement .lead,.edition-overview .facts .lead{margin-top:clamp(20px,2vw,32px)}
.definicja .reassurance{margin-top:clamp(32px,3.2vw,56px)}

/* ——— poznaj go od środka: książka z v3 — dwie połowy, kartka obracana wokół grzbietu.
   Wewnętrzne .strony trzymają format 1,463 (2 × 18,8 / 25,7), margines papieru daje padding sceny. */
.book-stage .strony{position:relative;width:100%;aspect-ratio:1.463;perspective:2400px}
.strony .polowa{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:var(--biel);box-shadow:var(--c-uniesiona)}
.strony .lewo{left:0;border-radius:var(--r-male) 0 0 var(--r-male)}
.strony .prawo{right:0;border-radius:0 var(--r-male) var(--r-male) 0}
.book-stage .strony img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover}
.strony .lewo img,.kartka-lot .tyl img{left:0}
.strony .prawo img,.kartka-lot .przod img{right:0}
/* kartka w locie widoczna tylko podczas obrotu — inaczej leżałaby białym prostokątem na rozkładówce */
.kartka-lot{position:absolute;top:0;right:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left center;
  transition:transform var(--t-edytorial,900ms) var(--e-std);z-index:5;pointer-events:none;display:none}
.kartka-lot.leci{transform:rotateY(-180deg)}
.kartka-lot.wstecz{transform:rotateY(-180deg);transition:none}
.kartka-lot.wstecz.leci{transform:rotateY(0deg);transition:transform var(--t-edytorial,900ms) var(--e-std)}
.kartka-lot .strona-k{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;background:var(--biel);box-shadow:var(--c-uniesiona)}
.kartka-lot .przod{border-radius:0 var(--r-male) var(--r-male) 0}
.kartka-lot .tyl{transform:rotateY(180deg);border-radius:var(--r-male) 0 0 var(--r-male)}
.book-stage .strony .grzbiet{position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;z-index:6;pointer-events:none;
  background:linear-gradient(to right,rgba(22,19,18,.16),rgba(22,19,18,.04));
  box-shadow:-10px 0 26px -8px rgba(22,19,18,.20),10px 0 26px -8px rgba(22,19,18,.12)}
@media(max-width:860px){
  /* telefon: cała rozkładówka naraz na prawej połowie rozciągniętej do pełnej szerokości */
  .strony .lewo,.book-stage .strony .grzbiet{display:none}
  .strony .prawo{width:100%;border-radius:var(--r-male)}
  .strony .prawo img,.kartka-lot .strona-k img{width:100%;left:0;right:auto}
  .kartka-lot{width:100%;transform-origin:center center}
}

/* ——— co dostajesz: wartość skaluje się z szerokością kafla, nie okna.
   container-type wyłącza rozpychanie kafla przez min-content („OPRAWA” było szersze od kafla). */
#spec-track .spec-item{container-type:inline-size}
#spec-track .spec-value{font-size:clamp(40px,4.4vw,72px);font-size:min(20cqi,112px)}
#spec-track .spec-item > span:last-child{font-size:clamp(14px,4cqi,20px)}

/* ——— wybierz spośród: nota pod kolekcjami na linii krawędzi, nie w wyśrodkowanym bloku 760 px */
.kolekcje-nota{max-width:none;margin:0;padding:38px var(--krawedz)}

/* ═══ KOREKTY v4 · RUNDA 5 · 14.09 ═══════════════════════════════════════════════
   Uwagi Kasi po czwartym przeglądzie + usterki potwierdzone w weryfikacji rundy 4. */

/* ——— FAQ: dwie kolumny jak w v3, ale od linii do linii — lista nie jest już pudełkiem 900 px */
.faq-uklad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,120px);align-items:start}
.faq-sekcja .faq{max-width:none;margin:0}
.faq-sekcja h2{text-wrap:balance}
@media(max-width:860px){.faq-uklad{grid-template-columns:1fr;row-gap:32px}}

/* ——— porównanie (27): ramka od linii do linii, promień systemu, kreski kroków zamiast kulek */
.calendar-comparison h2.sekcja{margin-top:42px}
.compare-frame{max-width:none;margin:42px 0 0;border-radius:var(--r-srednie)}
.calendar-comparison .kroki{padding:20px 0 0}

/* ——— poznaj go od środka: kartki i papier pod spodem bez zaokrągleń — to arkusze druku, nie karty interfejsu */
.book-stage,.strony .polowa,.strony .lewo,.strony .prawo,
.kartka-lot .strona-k,.kartka-lot .przod,.kartka-lot .tyl{border-radius:0}

/* ——— produkt uzupełniający: pełnospadowa scena bez włoskowej ramki — na styku sekcji wyglądała jak brzeg pudełka */
.editorial-product-split .scene.media-slot{border:0}

/* ——— poznaj go od środka: KAŻDA STRONA Z OSOBNEGO PLIKU (wnetrze_strony.json, 18,8 × 25,7 cm = 0,7315).
   Plik ma tę samą proporcję co kartka, więc obraz wypełnia kartkę 1:1: grzbiet obrazu = .grzbiet,
   lewy margines lewej strony widać w całości. Wcześniej jedna rozkładówka 1,45 z grzbietem na 47–50 %. */
.book-stage .strony img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media(max-width:860px){
  /* telefon: dwie strony obok siebie jak na desktopie — jedna strona pokazywałaby pół rozkładówki */
  .strony .lewo,.book-stage .strony .grzbiet{display:block}
  .strony .prawo{width:50%;border-radius:0}
  .strony .prawo img,.kartka-lot .strona-k img{width:100%;left:0;right:0}
  .kartka-lot{width:50%;transform-origin:left center}
}

/* ——— wybierz spośród dwóch kolekcji: M° i C° mają różne układy (szkic IMG_6291, transkrypt l.63–65) */
.collection-selector{border-block:1px solid color-mix(in srgb,var(--grafit) 10%,transparent)}
.collection-world{min-height:0;gap:clamp(32px,3.6vw,64px);padding-block:clamp(56px,6vw,112px)}
.cw-opis .podtytul{margin:0}
.cw-opis .lead{margin:clamp(8px,.8vw,14px) 0 0;max-width:34ch}
.cw-opis .tag{margin-top:clamp(16px,1.6vw,28px);align-self:flex-start}
.collection-mosaic{gap:clamp(8px,.8vw,14px)}
.collection-mosaic .media-slot{min-height:0}
/* M° — litera, obok nazwa, opis i odznaka; mozaika 3 × 2 bierze resztę wysokości świata */
.swiat-m{grid-template-rows:auto minmax(0,1fr)}
.swiat-m .cw-glowa{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(24px,2.6vw,48px);align-items:end}
.swiat-m .cw-opis{display:flex;flex-direction:column;padding-bottom:.4em}
.swiat-m .collection-mosaic{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
  min-height:clamp(300px,28vw,720px)}
/* C° — inny układ: treść w kolumnie z lewej, media pionowo z prawej na całą wysokość świata */
.swiat-c{grid-template-columns:minmax(0,1fr) clamp(140px,12vw,320px);grid-template-rows:minmax(0,1fr);
  column-gap:clamp(32px,4vw,80px)}
.swiat-c .cw-opis{align-self:start}
.swiat-c .cw-opis .collection-mark{margin-bottom:clamp(20px,2vw,36px)}
.swiat-c .collection-mosaic{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr))}
@media(max-width:860px){
  .swiat-m .cw-glowa{grid-template-columns:1fr;row-gap:12px}
  .swiat-m .collection-mosaic,.swiat-c .collection-mosaic{grid-template-rows:none;min-height:0}
  .swiat-c{grid-template-columns:1fr;grid-template-rows:auto auto;row-gap:clamp(24px,6vw,40px)}
  .swiat-c .collection-mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
  .collection-mosaic .media-slot{aspect-ratio:4/5}
}

/* ——— siatki M° / C° i pakiety: litera U GÓRY kolumny, nie na środku.
   Kolumna z tłem sięga całej sekcji; przypięta jest tylko treść. Odstęp od góry = odstęp przypięcia,
   więc treść nie podskakuje w chwili przyklejenia. */
.sticky-grid{--sg-pad:clamp(72px,8vw,120px);align-items:stretch}
.sticky-grid .collection-intro,.sticky-grid.mirror .collection-intro{position:relative;top:auto;min-height:0;display:block;
  padding-top:var(--sg-pad);padding-bottom:var(--sg-pad)}
.sticky-grid .product-grid{padding-top:var(--sg-pad);padding-bottom:var(--sg-pad)}
.intro-przypiete{position:sticky;top:calc(var(--pasek-h) + var(--sg-pad))}
.intro-przypiete .collection-mark{margin-bottom:clamp(24px,2.4vw,40px)}
.intro-przypiete .podtytul{margin:0}
.intro-przypiete .lead{margin-top:clamp(10px,1vw,16px)}
@media(max-width:860px){.intro-przypiete{position:static}}

/* ——— pakiety: litera P° jak M° i C°, trzy karty produktu z komponenty.css (promień 14 px) */
.pakiety-nota{margin-top:clamp(16px,1.6vw,24px);color:var(--tx-60);font-size:calc(14px * var(--ui-k))}
.okladka-pakietu{display:grid;gap:6px;margin-top:16px}
.okladka-pakietu .pole-txt{min-height:46px;padding:10px 12px;font-size:calc(13.5px * var(--ui-k));cursor:pointer}
@media(max-width:860px){.pakiety-siatka .product-grid{grid-template-columns:minmax(0,1fr)}}

/* ——— produkt uzupełniający: karta w skali „mała”. Reguła źródła .product-module .karta{width:100%}
   (specyficzność 0,3,0) przebijała wariant i w kolumnie „auto” zapadała kartę do 51 px */
.editorial-product-split .product-module .karta.mala{width:var(--szer-karta-mala);max-width:100%}

/* ——— co dostajesz: kafel 1/3 dawnej wysokości; treść skalowana szerokością kafla (cqi) */
#spec-track .spec-item{padding:clamp(14px,1.9svh,30px)}
#spec-track .spec-value{font-size:min(21cqi,72px)}
/* runda 6: osiem kafli w rzędzie — kafel węższy (≈152 px przy 1512), wartość do 7 znaków („188×257”) musi się zmieścić */
#spec-track .spec-value{font-size:min(26cqi,72px);white-space:nowrap}
/* weryfikacja rundy 6: przy 16cqi wartość (12–19 px) była mniejsza niż etykieta — 26cqi to największy rozmiar,
   w którym „188×257” (3,69 px szerokości na px pisma) mieści się w treści kafla 118 px przy 1512 */
#spec-track .spec-item > span:last-child{font-size:clamp(13px,8cqi,17px);line-height:1.3}

/* ——— szyny: ostatnia karta dojeżdża do prawej linii krawędzi */
.spec-track > :last-child,.people-track > :last-child,.testimonial-track > :last-child{scroll-snap-align:end}

/* ——— opinie: karty dzielą pole między liniami krawędzi na pełne karty (--na-raz),
   więc krok strzałki i koniec szyny zawsze stoją na obu liniach */
.testimonial-track{--tor-gap:clamp(12px,1.4vw,20px);--na-raz:3;gap:var(--tor-gap)}
@media(min-width:861px) and (max-width:1279px){.testimonial-track{--na-raz:2}}
@media(min-width:1800px){.testimonial-track{--na-raz:4}}
@media(min-width:2400px){.testimonial-track{--na-raz:5}}
.testimonial-track .opinia{flex:0 0 calc((100% - (var(--na-raz) - 1) * var(--tor-gap)) / var(--na-raz));
  position:relative;isolation:isolate;overflow:hidden;justify-content:center;gap:clamp(14px,1.4vw,22px);
  padding:clamp(28px,2.8vw,44px) clamp(28px,2.8vw,48px) clamp(28px,2.8vw,44px) clamp(64px,6.4vw,112px)}
/* duży cudzysłów w tle, z lewej na środku karty: krój Europa ma cudzysłowy proste (dwie belki),
   a marka nie ma ikony cytatu — więc kształt SVG w masce, kolor z tokenu (zmiana --zloty zmienia ikonę) */
:root{--ikona-cytat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 40'%3E%3Cpath d='M0 40V24C0 10 7 2 20 0l2 5C14 7 10 12 10 19h10v21zm28 0V24C28 10 35 2 48 0l2 5c-8 2-12 7-12 14h10v21z'/%3E%3C/svg%3E")}
.testimonial-track .opinia::before{content:'';position:absolute;z-index:-1;left:clamp(12px,1.3vw,24px);top:50%;
  width:clamp(88px,7.5vw,136px);aspect-ratio:5/4;transform:translateY(-50%);pointer-events:none;
  background:color-mix(in srgb,var(--zloty) 16%,transparent);
  -webkit-mask:var(--ikona-cytat) center/contain no-repeat;mask:var(--ikona-cytat) center/contain no-repeat}
.testimonial-track .opinia blockquote{font-size:clamp(17px,1.3vw,22px);line-height:1.5}
@media(max-width:860px){.testimonial-track .opinia{flex:0 0 min(78vw,320px)}}
/* desktop: pole marginesu należy do strzałek — skrawek przewiniętej karty nie wystaje pod „wstecz” */
@media(min-width:861px){
  .testimonial-rail .testimonial-track{
    -webkit-mask-image:linear-gradient(to right,transparent calc(var(--krawedz) - var(--tor-gap) + 1px),#000 calc(var(--krawedz) - 8px),#000 calc(100% - var(--krawedz) + 8px),transparent calc(100% - var(--krawedz) + var(--tor-gap) - 1px));
    mask-image:linear-gradient(to right,transparent calc(var(--krawedz) - var(--tor-gap) + 1px),#000 calc(var(--krawedz) - 8px),#000 calc(100% - var(--krawedz) + 8px),transparent calc(100% - var(--krawedz) + var(--tor-gap) - 1px))}
}

/* ——— strzałki boczne: kontekstowe — na początku nie ma „wstecz”, na końcu „dalej” */
.strzalki-boczne button{box-shadow:var(--c-karta);
  transition:opacity var(--t-std) var(--e-std),visibility var(--t-std) linear,border-color var(--t-mikro) var(--e-std)}
.strzalki-boczne button:disabled{opacity:0;visibility:hidden}

/* ═══ KOREKTY v4 · RUNDA 5 · po weryfikacji (wf_ac59963b-71a) ═══════════════════════ */

/* ——— C° w selektorze: treść na całą wysokość świata — litera u góry, nazwa i opis przy dole;
   kolumna mediów ≈ 38 % świata, zamiast pustej plamy pod opisem (378–845 px) i wąskiego pasa */
.swiat-c{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.swiat-c .cw-opis{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start}
/* litera u góry, nazwa i opis RAZEM przy dole — space-between rozrzucał trzy elementy (nazwa w połowie) */
.swiat-c .cw-opis .collection-mark{margin-bottom:auto}
.kolekcje-link{color:inherit;text-decoration:none;border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent);
  transition:border-color var(--t-mikro) var(--e-std)}
.kolekcje-link:hover{border-bottom-color:currentColor}
@media(max-width:860px){
  /* telefon: C° zachowuje swój układ — tekst obok pionowego stosu kadrów */
  .swiat-c{grid-template-columns:minmax(0,1fr) 36%;grid-template-rows:auto;column-gap:16px}
  .swiat-c .collection-mosaic{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
}

/* ——— porównanie (27): bez pudełka — kolumny rozdziela sama kreska, media bez obwódki */
.compare-frame{border:0;border-radius:0;overflow:visible}
.compare-panel .media-slot{border:0;border-radius:var(--r-srednie)}

/* ——— rozszerz perspektywę: cień kart nie ucięty brzegiem kontenera; lead w rytmie deklaracji */
@media(min-width:861px){.companion-items{overflow:visible}}
.companion-focus header .lead{margin-top:clamp(12px,1.4vw,24px)}

/* ——— opinie: 4 karty dopiero od 2100 px — przy 1920 kolumna tekstu była najwęższa ze wszystkich desktopów */
@media(min-width:1800px){.testimonial-track{--na-raz:3}}
@media(min-width:2100px){.testimonial-track{--na-raz:4}}
@media(min-width:2400px){.testimonial-track{--na-raz:5}}
@media(max-width:860px){.strzalki-boczne button{width:36px;height:36px}}

/* ——— poznaj go od środka: głębsza perspektywa — kartka w locie nie wystaje nad scenę i nie zasłania strzałek */
.book-stage .strony{perspective:3400px}

/* ——— pakiety: line-up nie przycięty; skład pakietu jako miniatury z danych — pakiety różnią się już na zdjęciu */
.karta.pakiet .foto{position:relative}
.karta.pakiet .foto > img{object-fit:contain}
/* jeden rząd miniatur także przy pięciu składnikach (All Inclusive) — miniatury kurczą się, zamiast zawijać na zdjęcie */
.pakiet-sklad{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:nowrap;gap:6px;margin:0;padding:0;list-style:none}
.pakiet-sklad li{flex:0 1 clamp(34px,3vw,48px);min-width:0;aspect-ratio:1;border-radius:var(--r-male);overflow:hidden;
  background:var(--biel);box-shadow:var(--c-karta);border:1px solid rgba(22,19,18,.08)}
.karta.pakiet .foto .pakiet-sklad img{width:100%;height:100%;object-fit:cover}

/* ═══ KOREKTY v4 · RUNDA 7 · 14.09 ═══════════════════════════════════════════════ */

/* ——— opinie: duży cudzysłów w LEWYM GÓRNYM ROGU, lekko skadrowany brzegiem karty; treść dalej wyśrodkowana w pionie */
/* kierunek: był kształt „66” (angielski cudzysłów otwierający “). W polskiej typografii cudzysłów ma kształt „99”
   (otwierający „ i zamykający ”), więc znak jest obrócony o 180° */
/* po obrocie główki znaku są u góry — kadr tylko lekki (−6…−10 px), inaczej brzeg karty ścinał główki */
.testimonial-track .opinia::before{left:clamp(-12px,-.7vw,-6px);top:clamp(-10px,-.6vw,-6px);transform:rotate(180deg);
  width:clamp(104px,8.5vw,156px)}
/* górny odstęp = dół tuszu cudzysłowu + ok. 16 px — dłuższa opinia nie wejdzie na ogonki znaku (weryfikacja rundy 7) */
.testimonial-track .opinia{padding:clamp(92px,8vw,132px) clamp(28px,2.8vw,48px) clamp(36px,3.2vw,52px) clamp(40px,4vw,64px)}

/* ——— elementy wnętrza: box z dwóch sekcji — wizual NAD nagłówkiem i opisem; bez tła, delikatny obrys.
   Weryfikacja rundy 7: przy „wizual | tekst” wycinek zabierał 40 % boxu, tekst miał 121–146 px (7–11 wierszy),
   nagłówki łamały się z sierotami, a ukryta 5. kolumna urywała cykl Księżyca. Sekcje jedna nad drugą dają tekstowi
   całą szerokość boxu i pozwalają zmieścić 5 kolumn już przy 1440 px. Dwa rzędy, siatka płynie kolumnami. */
.ie-elementy{margin-top:clamp(56px,6vw,104px)}
.ie-elementy-naglowek{margin:0 0 clamp(20px,2.4vw,36px)}
.elementy-tor{--tor-gap:clamp(12px,1.4vw,20px);--na-raz:4;display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(2,auto);grid-auto-columns:calc((100% - (var(--na-raz) - 1) * var(--tor-gap)) / var(--na-raz));
  gap:var(--tor-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.elementy-tor::-webkit-scrollbar{display:none}
@media(min-width:1440px){.elementy-tor{--na-raz:5}}
@media(min-width:1024px) and (max-width:1279px){.elementy-tor{--na-raz:3}}
@media(min-width:861px) and (max-width:1023px){.elementy-tor{--na-raz:2}}
@media(max-width:860px){.elementy-tor{grid-auto-columns:min(80vw,340px)}}
@media(min-width:861px){
  .elementy-tor{-webkit-mask-image:linear-gradient(to right,transparent calc(var(--krawedz) - var(--tor-gap) + 1px),#000 calc(var(--krawedz) - 8px),#000 calc(100% - var(--krawedz) + 8px),transparent calc(100% - var(--krawedz) + var(--tor-gap) - 1px));
    mask-image:linear-gradient(to right,transparent calc(var(--krawedz) - var(--tor-gap) + 1px),#000 calc(var(--krawedz) - 8px),#000 calc(100% - var(--krawedz) + 8px),transparent calc(100% - var(--krawedz) + var(--tor-gap) - 1px))}
}
/* Kasia 23.09: „finalizuj na pełni — pełnia jest przycięta”. Rysunek fazy Księżyca dotyka krawędzi
   swojej ramki SVG, a ta domyślnie przycina to, co wystaje — przy 28 px skrajny piksel obrysu znikał
   i koło wyglądało na ścięte z lewej. Ramka przestaje przycinać; rysunek nie wychodzi poza swoje pole. */
.element-wnetrza{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px);
  padding:clamp(16px,1.6vw,24px);border:1px solid color-mix(in srgb,var(--grafit) 14%,transparent);
  border-radius:var(--r-srednie);background:transparent;scroll-snap-align:start}
/* sekcja 1: wizual — jedna wysokość w każdym boxie, więc nagłówki w rzędzie startują na tej samej linii */
.ew-wizual{position:relative;height:clamp(84px,6.6vw,112px);display:flex;align-items:center;justify-content:flex-start}
/* ikony faz: jedna wysokość 28 px — w znakach fazy (↗○, ●↘) koło zajmuje prawie całą wysokość rysunku,
   więc przy tej samej wysokości koła wszystkich czterech ikon są równe; znak fazy jest tylko szerszy o strzałkę */
.ew-svg{display:block;width:auto;overflow:visible !important;fill:var(--grafit);color:var(--grafit)}
/* !important, bo motyw przycina każdy <svg> na stronie — przy 28 px skrajny piksel obrysu znikał
   i koło pełni wyglądało na ścięte z lewej („pełnia jest przycięta”, Kasia 23.09) */
.ew-kolo,.ew-faza{height:28px}
/* pełnia w sprite ma włoskowaty obrys (0,63 px przy 26 px) — wzmocnienie linią niezależną od skali */
.ew-kolo path,.ew-kolo circle{stroke:var(--grafit);stroke-width:1.2px;vector-effect:non-scaling-stroke}
/* wycinek z druku: kawałek kartki na całą szerokość boxu, kadr od lewego górnego rogu; „+” zapowiada powiększenie */
.ew-lupa{appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;background:none;cursor:zoom-in;
  display:block;position:relative;width:100%;height:100%}
.ew-lupa:focus-visible{outline:2px solid var(--zloty);outline-offset:3px}
/* runda 8 (Kasia): „fragmenty, które się nie mieszczą — zmniejsz tak, żeby całe się zmieściły, nie dawaj plusika” —
   obraz w naturalnej proporcji wpisany w pole wizualu; kliknięcie nadal otwiera powiększenie, bez znaku na miniaturze */
.ew-wycinek .ew-lupa{display:flex;align-items:center;justify-content:flex-start}
.ew-wycinek img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  border-radius:var(--r-male);box-shadow:var(--c-karta);background:var(--biel)}
.ew-podglad{margin:auto;border:0;padding:0;background:transparent;max-width:min(92vw,1400px);max-height:92svh;overflow:visible}
.ew-podglad::backdrop{background:color-mix(in srgb,var(--grafit) 80%,transparent)}
.ew-podglad img{display:block;width:auto;height:auto;max-width:min(92vw,1400px);max-height:86svh;border-radius:var(--r-male);background:var(--biel)}
.ew-podglad .zamknij{position:absolute;top:-50px;right:0;width:44px;height:44px;color:var(--biel);font-size:34px}
@media(max-width:860px){
  /* telefon: wycinek w naturalnej szerokości z przewijaniem w bok — w 92vw tekst miał 4–6 px */
  .ew-podglad{max-width:100vw;max-height:100svh;width:100vw;overflow:auto;border-radius:0}
  .ew-podglad img{max-width:none;width:min(900px,240vw);max-height:none;border-radius:0}
  .ew-podglad .zamknij{position:fixed;top:12px;right:12px;background:var(--grafit);border-radius:50%}
}
.ew-naglowek{font-family:var(--display);font-size:calc(17px * var(--ui-k));font-weight:400;line-height:1.25;margin:0 0 6px}
.ew-opis{font-size:calc(13.5px * var(--ui-k));color:var(--tx-60);line-height:1.55;margin:0}


/* ═══ KOREKTY v4 · RUNDA 8 · 14.09 ═══════════════════════════════════════════════ */

/* ——— kreator zestawu: w przepływie (przed „Kto korzysta”) nie może być kartą z cieniem i promieniem — jak inne sekcje:
   od krawędzi do krawędzi okna, panel treści na linii krawędzi, wizualizacja do prawego brzegu */
.set-builder-sekcja{padding-inline:0}
.set-builder-sekcja .set-builder{border-radius:0;box-shadow:none;margin-top:0 !important}
.set-builder-sekcja .set-builder > :first-child{padding-left:var(--krawedz)}

/* ——— gwarancja satysfakcji: pieczęć. Zewnętrzny włoskowy pierścień w grafice, wewnętrzny w złocie,
   między nimi napis po okręgu (powoli obraca się, 90 s na obrót); w środku „14” w kroju display i „dni” wersalikami;
   pod pieczęcią „na zwrot” — tak, jak prosiła Kasia: „14 dni w kółku, na zwrot pod spodem” */
.pieczec{margin:0;display:grid;justify-items:center;gap:clamp(14px,1.4vw,22px)}
.pieczec-tarcza{position:relative;width:clamp(208px,17vw,320px);aspect-ratio:1}
.pieczec-kolo{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pk-obrys{fill:none;stroke:var(--grafit);stroke-width:1;vector-effect:non-scaling-stroke}
.pk-wewn{fill:color-mix(in srgb,var(--biel) 55%,transparent);stroke:var(--zloty);stroke-width:1;vector-effect:non-scaling-stroke}
.pk-napis{font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;fill:var(--grafit)}
.pk-obrot{transform-box:view-box;transform-origin:50% 50%;animation:pieczec-obrot 90s linear infinite}
@keyframes pieczec-obrot{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pk-obrot{animation:none}}
.pieczec-srodek{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;line-height:1}
.pk-liczba{font-family:var(--display);font-size:clamp(58px,5vw,88px);font-weight:300;letter-spacing:-.03em;color:var(--grafit)}
.pk-dni{margin-top:clamp(2px,.3vw,6px);font-family:var(--ui);font-size:calc(12px * var(--ui-k));font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--tx-60)}   /* nie --zloto-ciemne: token tylko na tła i wypełnienia */
.pieczec-podpis{font-family:var(--ui);font-size:calc(13px * var(--ui-k));font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--grafit)}

/* ——— po weryfikacji rundy 8 (wf_ba9b30bb-fb1) ——— */

/* maska szyn oparta o odstęp między kartami: krycie 0 tam, gdzie kończy się sąsiad (linia − odstęp), krycie 1 tuż przed
   obrysem widocznej karty — przy stałych 12/24 px obrys sąsiada z połową narożnika prześwitywał w marginesie (861–1279 px) */
/* telefon: odstęp w elementach = margines, więc poprzedni box kończy się dokładnie na brzegu ekranu (bez 8 px resztki) */
@media(max-width:860px){#ak27-interior-explorer .elementy-tor{--tor-gap:var(--krawedz)}}

/* kreator zestawu: beż panelu na pełną wysokość sekcji, rytm w środku panelu — bez „płyty w białym polu” */
.set-builder-sekcja{padding-block:0}
.set-builder-sekcja .set-builder-copy{padding-block:clamp(72px,8vw,120px)}

/* pieczęć: grupa „14 DNI” na optycznym środku koła; wersaliki z rozstrzeleniem kompensują końcowy letter-spacing */
.pieczec-srodek{translate:0 -3%}
.pk-dni{margin-right:-.28em}
.pieczec-podpis{margin-right:-.26em}

/* porównanie (27): tytuły kolumn i media na liniach krawędzi, kreska środkowa zostaje */
@media(min-width:861px){.compare-panel:first-child{padding-left:0}.compare-panel:last-child{padding-right:0}}
@media(max-width:860px){.compare-panel{padding-inline:0}}

/* manifest → „Co wybrać?”: dwie białe sekcje obok siebie — bez podwójnego oddechu (było ok. 380 px pustej bieli) */
.statement + .calendar-comparison{padding-top:0}
.statement + .calendar-comparison h2.sekcja{margin-top:0}

/* ——— KOREKTY v4 · RUNDA 9 · 13 rozkładówek w „Poznaj go od środka” ——— */
/* kreski przeglądarki: przy 13 pozycjach rząd miał 356 px i na telefonie wypychał stronę w bok (scrollWidth 406 przy 390);
   teraz kreski dzielą dostępne miejsce — 22/44 px, gdy się mieszczą, węższe na wąskich ekranach */
#ak27-interior-explorer .ie-ster .kroki{flex:1 1 auto;min-width:0}
#ak27-interior-explorer .ie-ster .krok{flex:0 1 22px;width:auto;min-width:6px;transition:flex-basis var(--t-std) var(--e-std)}
#ak27-interior-explorer .ie-ster .krok.aktywna{flex-basis:44px;min-width:18px}

/* ——— KOREKTY v4 · RUNDA 10 ——— */

/* gwarancja (Kasia: „daj jednak na zwrot w środku”): 14 · DNI · złota kreska · NA ZWROT — cała grupa w wewnętrznym kole */
.pieczec-srodek{translate:0 0}
.pk-kreska{display:block;width:clamp(18px,1.5vw,26px);height:1px;background:var(--zloty);margin:clamp(8px,.7vw,12px) 0 clamp(7px,.6vw,10px)}
.pk-zwrot{font-family:var(--ui);font-size:calc(11px * var(--ui-k));font-weight:500;letter-spacing:.26em;margin-right:-.26em;
  text-transform:uppercase;color:var(--tx-60)}

/* co jest w środku (Kasia: „kolor sekcji spójny z kolorem tła w astrokalendarzu — popraw na tej jednej sekcji”):
   tło = papier z pliku do druku (--biel, zmierzone 255/255/255 na stronach i wycinkach), od krawędzi do krawędzi.
   Wycinki bez białej karty i cienia, mieszanie „multiply” — na każdym tle druk leży na papierze, a nie w ramce */
#ak27-interior-explorer .ie-elementy{background:var(--biel);margin:clamp(56px,6vw,104px) calc(-1 * var(--krawedz)) 0;
  padding:clamp(56px,6vw,104px) var(--krawedz) var(--ie-dol)}
.ew-wycinek img{mix-blend-mode:multiply;box-shadow:none;background:transparent;border-radius:0}

/* rozszerz perspektywę (Kasia: „za małe te kafelki z produktami, daj większe”): karta standardowa w skali siatek M°/C°
   (393 px przy 1512, 461 px przy 2560), zamiast „małej” 224 px */
.companion-items{--szer-duet:clamp(300px,24vw,460px);grid-template-columns:repeat(2,minmax(0,var(--szer-duet)))}
@media(max-width:860px){.companion-items{grid-template-columns:minmax(0,min(350px,100%))}}

/* stopka v4 (Kasia: „logo przyklejone do dolnej krawędzi, rozpychać stronę — lekko większe niż szerokość”;
   „dostawa, zwroty itd. — jakoś lata”): kolumny na linii krawędzi jak wiersz linków pod nimi (były wcięte o 75 px
   przez .w-tresc), logo 104 % szerokości przycięte bokami stopki i stojące na jej dolnej krawędzi */
footer.stopka{padding-bottom:0}
footer.stopka .kolumny.w-tresc{max-width:none;margin-inline:0}
footer.stopka .drobne .podpis-studia{margin-left:auto;color:var(--tx-inv-70);letter-spacing:.02em;transition:color var(--t-std) var(--e-std)}
footer.stopka .drobne .podpis-studia:hover{color:var(--zloty)}
footer.stopka .zamkniecie{padding:clamp(56px,7vw,110px) 0 0;overflow:hidden;line-height:0}
footer.stopka .zamkniecie img{width:104%;max-width:none;margin:0 0 -.11% -2%}

/* ——— co dostajesz · runda 10: 9 mini-projektów w jednym systemie ———
   Kasia: „musisz zrobić mini projekty do każdego kafelka, ale żeby były spójne. gramy tu designem i typografią”.
   System: ciepły papier, jeden promień, wszystko wyśrodkowane. Porządek nad (wersaliki) · wartość (display 300) · pod · opis.
   Wielkość wartości z długości napisu (sk-dl1…5) i z kafla (jednostki kontenera), więc „9” i „twarda” mają ten sam oddech.
   Siatka 5 × 2 od 1280 px — uszlachetnienia na 2 pola; 4 kolumny do 1279 px; 2 na telefonie. */
#ak27-specification-rail .spec-siatka{--sk-gap:clamp(12px,1.4vw,20px);display:grid;gap:var(--sk-gap);padding:0 var(--krawedz);
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-auto-rows:clamp(240px,calc((var(--ekran) - clamp(72px,8vw,120px) - clamp(40px,4.5vw,72px) - clamp(56px,4.6vw,88px) - clamp(24px,3.2svh,44px) - var(--sk-gap)) / 2),440px)}
.spec-kafel{position:relative;min-width:0;container-type:size;overflow:hidden;display:grid;place-items:center;text-align:center;
  padding:clamp(14px,1.6vw,26px);border-radius:var(--r-srednie);background:var(--biel-ciepla)}
.sk-szer-2{grid-column:span 2}
.sk-grupa{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:100%}
.sk-nad{font-family:var(--ui);font-size:clamp(10px,5cqi,13px);font-weight:500;letter-spacing:.2em;margin-right:-.2em;
  text-transform:uppercase;color:var(--tx-60);margin-bottom:clamp(6px,3cqh,14px)}
.sk-wartosc{font-family:var(--display);font-weight:300;line-height:.92;letter-spacing:-.035em;color:var(--grafit);white-space:nowrap;
  font-variant-numeric:lining-nums}
.sk-dl1{font-size:min(80cqi,58cqh)}
.sk-dl2{font-size:min(60cqi,50cqh)}
.sk-dl3{font-size:min(44cqi,42cqh)}
.sk-dl4{font-size:min(32cqi,34cqh)}
.sk-dl5{font-size:min(23cqi,26cqh);letter-spacing:-.02em}
/* jednostka w indeksie górnym — „100” gra liczbą, „g” jej nie zagłusza */
.sk-jednostka{font-size:.34em;letter-spacing:0;margin-left:.1em;vertical-align:1.05em}
.sk-pod{font-family:var(--display);font-weight:400;font-size:clamp(14px,8cqi,24px);line-height:1.2;margin-top:clamp(8px,4cqh,18px);color:var(--grafit)}
.sk-opis{font-family:var(--ui);font-size:clamp(11px,5.2cqi,14px);line-height:1.45;color:var(--tx-60);margin-top:clamp(6px,2.6cqh,12px);
  max-width:24ch;text-wrap:balance}
/* format: okładka w skali 188 : 257 z liniami wymiarowymi — rysunek techniczny zamiast liczby */
.spec-format{grid-template-rows:auto minmax(0,1fr);place-items:stretch}
.spec-format .sk-nad{justify-self:center;margin-bottom:0}
.sk-rysunek{margin:0;min-height:0;display:flex;align-items:center;justify-content:center}
.sk-rysunek svg{display:block;height:100%;width:100%;overflow:visible}
.skf-okladka{fill:var(--okladka-zlota,var(--zloty));filter:drop-shadow(0 4px 8px color-mix(in srgb,var(--grafit) 16%,transparent))}
.skf-zawias{stroke:color-mix(in srgb,var(--grafit) 16%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.skf-wymiar{fill:none;stroke:var(--grafit);stroke-width:1;vector-effect:non-scaling-stroke}
.skf-opis{font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.06em;fill:var(--tx-60)}
/* zdjęcie na całe tło, napisy na obrazie — ciemniejący ku dołowi welon trzyma kontrast bieli */
.spec-zdjecie{color:var(--biel);background:var(--zloto-glebokie)}
.spec-zdjecie .sk-tlo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.spec-zdjecie::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--grafit) 12%,transparent),color-mix(in srgb,var(--grafit) 58%,transparent))}
.spec-zdjecie .sk-nad,.spec-zdjecie .sk-opis{color:color-mix(in srgb,var(--biel) 84%,transparent)}
.spec-zdjecie .sk-pod{color:var(--biel)}
.sk-haslo{font-family:var(--display);font-weight:300;font-size:min(15cqi,20cqh);line-height:1.02;letter-spacing:-.02em;color:var(--biel);
  max-width:12ch;text-wrap:balance}
.sk-szer-2 .sk-haslo{font-size:min(9cqi,20cqh)}
.bez-zdjecia{background:linear-gradient(135deg,var(--zloto-palone),var(--zloto-glebokie))}
@media(min-width:861px) and (max-width:1279px){
  #ak27-specification-rail .spec-siatka{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(220px,26vw,320px)}
  .spec-kafel[data-kod="tygodnie"],.spec-kafel[data-kod="nowie"]{grid-column:span 2}
}
@media(max-width:860px){
  #ak27-specification-rail .spec-siatka{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:calc((100vw - 2 * var(--krawedz) - var(--sk-gap)) / 2 * 1.2)}
}

/* ——— poznaj go od środka · runda 10: grubość książki i okładka pod kartkami ———
   Kasia: „zrób takie wrażenie grubości — że pod spodem jest tych kartek więcej, delikatnie, żeby nie wydawało się płaskie;
   pod spodem prostokąt, tak jakby to była okładka, w kolorze astrokalendarza złotego, minimalnie zaokrąglony”.
   Okładka = scena książki (margines --papier to wystająca okładka), promień 4 px; kartki: trzy krawędzie stosu
   schodzące na zewnątrz i w dół (lewa strona w lewo, prawa w prawo), naprzemiennie papier i cień krawędzi.
   Kolor okładki: --okladka-zlota (tokeny); do czasu pomiaru okładki — złoto sygnatury. */
#ak27-interior-explorer .book-stage{--krawedz-kartki:color-mix(in srgb,var(--grafit) 14%,var(--biel));
  background:var(--okladka-zlota,var(--zloty));border-radius:4px;
  box-shadow:0 1px 2px color-mix(in srgb,var(--grafit) 10%,transparent),0 18px 44px color-mix(in srgb,var(--grafit) 16%,transparent)}
#ak27-interior-explorer .strony .lewo{box-shadow:-1px 1px 0 var(--biel),-2px 2px 0 var(--krawedz-kartki),-3px 3px 0 var(--biel),
  -4px 4px 0 var(--krawedz-kartki),-5px 5px 0 var(--biel),-6px 6px 0 var(--krawedz-kartki),-4px 8px 16px color-mix(in srgb,var(--grafit) 14%,transparent)}
#ak27-interior-explorer .strony .prawo{box-shadow:1px 1px 0 var(--biel),2px 2px 0 var(--krawedz-kartki),3px 3px 0 var(--biel),
  4px 4px 0 var(--krawedz-kartki),5px 5px 0 var(--biel),6px 6px 0 var(--krawedz-kartki),4px 8px 16px color-mix(in srgb,var(--grafit) 14%,transparent)}
/* stosy kartek rozchodzą się od grzbietu w lewo i w prawo — pod grzbietem zostawał złoty trójkąt; wypełnia go krawędź kartek */
#ak27-interior-explorer .strony::before{content:'';position:absolute;left:calc(50% - 7px);width:14px;bottom:-6px;height:6px;
  background:repeating-linear-gradient(to bottom,var(--biel) 0 1px,var(--krawedz-kartki) 1px 2px)}
/* telefon v4 pokazuje obie połowy (zrzut 390 px), więc wypełnienie pod grzbietem zostaje też tam */
/* kafel formatu: podpisy wymiarów czytelne w skali kafla (12 px w rysunku dawało ok. 7 px na ekranie) */
.skf-opis{font-size:16px;letter-spacing:.04em}

/* ——— płatności · runda 10: prawdziwe logotypy w jednakowych polach + faktury VAT; ta sama linia krawędzi co wysyłka pod spodem */
.platnosci{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px clamp(32px,5vw,96px);
  padding:clamp(28px,3vw,44px) var(--krawedz)}
.platnosci .eyebrow{margin:0 0 12px}
.pl-metody{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pl-metoda{height:46px;min-width:76px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid color-mix(in srgb,var(--grafit) 12%,transparent);border-radius:var(--r-male);background:var(--biel)}
.pl-logo{display:block;height:22px;width:auto;max-width:104px}
.pl-bez-logo{font-size:calc(13px * var(--ui-k));color:var(--tx-60)}
.pl-tekst{margin:0;font-family:var(--display);font-size:calc(17px * var(--ui-k));color:var(--grafit)}
.fulfilment-notice{padding-inline:var(--krawedz)}
/* kafle zdjęciowe: napisy przy dolnej krawędzi, żeby nie zasłaniały detalu (złocony logotyp w środku kadru) */
.spec-zdjecie{place-items:end center}
.spec-zdjecie .sk-grupa{padding-bottom:clamp(4px,2cqh,14px)}
.spec-zdjecie::after{background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--grafit) 30%,transparent) 58%,color-mix(in srgb,var(--grafit) 72%,transparent))}
.spec-kafel[data-kod="uszlachetnienia"] .sk-tlo{object-position:50% 34%}
.sk-szer-2 .sk-haslo{font-size:min(7.5cqi,17cqh);max-width:none}
/* kafel ilustracji (tasiemka): rysunek nad napisami, ten sam papier i porządek co pozostałe */
.spec-ilustracja{grid-template-rows:minmax(0,1fr) auto;place-items:stretch}
.spec-ilustracja .sk-rysunek svg{height:100%;width:100%}
.spec-ilustracja .sk-nad{margin-bottom:clamp(4px,1.6cqh,8px)}
.spec-ilustracja .sk-pod{margin-top:0;font-size:clamp(15px,9cqi,26px)}
.skt-a{stop-color:var(--zloto-mocne)}
.skt-b{stop-color:var(--okladka-zlota)}
.skt-blok{fill:var(--biel);stroke:color-mix(in srgb,var(--grafit) 14%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.skt-kartki{fill:none;stroke:color-mix(in srgb,var(--grafit) 10%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.skt-tasiemka{filter:drop-shadow(0 3px 5px color-mix(in srgb,var(--grafit) 18%,transparent))}
.skt-szew{fill:none;stroke:color-mix(in srgb,var(--biel) 45%,transparent);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
/* uszlachetnienia: napisy na pasie tłoczenia u góry kadru, złocone „Astro” pod nimi zostaje czyste */
.spec-kafel[data-kod="uszlachetnienia"]{place-items:start center}
.spec-kafel[data-kod="uszlachetnienia"] .sk-tlo{object-position:50% 100%}
.spec-kafel[data-kod="uszlachetnienia"]::after{background:linear-gradient(0deg,transparent 42%,color-mix(in srgb,var(--grafit) 34%,transparent) 66%,color-mix(in srgb,var(--grafit) 70%,transparent))}
.spec-kafel[data-kod="uszlachetnienia"] .sk-grupa{padding:clamp(4px,2cqh,14px) 0 0}
.spec-ilustracja .sk-rysunek{padding-bottom:clamp(8px,3.5cqh,16px)}
/* logotypy płatności bez własnych pól: znak Apple Pay ma wbudowaną ramkę (wytyczne Apple — bez przeróbek i nie mniejszy
   od pozostałych znaków), więc wszystkie znaki stoją luzem na jednej wysokości; metoda bez logo zostaje nazwą w kapsułce */
.pl-metody{gap:clamp(18px,2vw,32px)}
.pl-metoda{height:auto;min-width:0;padding:0;border:0;background:none}
.pl-logo{height:clamp(26px,2vw,32px);max-width:none}
.pl-bez-logo{height:34px;padding:0 14px;border:1px solid color-mix(in srgb,var(--grafit) 12%,transparent);border-radius:var(--r-male)}
/* optyczne wyrównanie znaków płatności: pliki mają różne marginesy wewnętrzne (Visa przycięta do liter, P24 z łukiem nad
   napisem, Apple Pay w ramce), więc równa wysokość pliku dawała ogromną Visę i najmniejsze Apple Pay — wytyczne Apple:
   znak nie mniejszy od pozostałych. Wysokości dobrane tak, żeby napisy i ramka stały na zbliżonej wysokości optycznej */
.pl-logo[src$="PLAT-przelewy24.svg"]{height:clamp(30px,2.3vw,36px)}
.pl-logo[src$="PLAT-visa.png"]{height:clamp(17px,1.3vw,20px)}
.pl-logo[src$="PLAT-mastercard.png"]{height:clamp(24px,1.8vw,28px)}
.pl-logo[src$="PLAT-paypal.svg"]{height:clamp(21px,1.6vw,25px)}
.pl-logo[src$="PLAT-apple-pay.svg"]{height:clamp(28px,2.1vw,33px)}
.pl-metoda[data-kod="karta"]{gap:clamp(10px,1vw,14px)}

/* ——— KOREKTY v4 · RUNDA 11 ——— */
/* gwarancja (Kasia: „14 dni na zwrot — usuń tą kręcącą animację — nie chcemy aż tak zwracać uwagi”): napis po okręgu stoi */
.pk-obrot{animation:none}

/* stopka: logo jako wektor w dokumencie — każda litera (ścieżka) wyjeżdża spod dolnej krawędzi logo falą od lewej.
   --p (0…1) = jaka część logo jest odsłonięta przewijaniem, wygładzana w JS; --i = numer ścieżki (17 ścieżek).
   Litera i rusza przy p = i × 0,0234 i staje przy p ≈ 0,625 + i × 0,0234, ostatnia dokładnie przy p = 1.
   Bez JS i przy prefers-reduced-motion --p = 1, czyli logo po prostu stoi. SVG przycina litery poniżej viewBox. */
footer.stopka .zamkniecie svg.logo-duze{display:block;width:104%;height:auto;max-width:none;margin:0 0 -.11% -2%;overflow:hidden}
/* przesunięcie liter ustawia skrypt atrybutem SVG transform — CSS transform na ścieżkach w SVG z overflow:hidden Chrome
   liczył, ale nie rysował (pomiar: 0 złotych pikseli przy połowie odsłonięcia); CSS nie może też nadpisywać atrybutu */

/* płatności · runda 11: trzy równe kolumny na całą szerokość — metody · wysyłka · faktury; włosowe linie między nimi */
.platnosci{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:0;padding:clamp(36px,4vw,64px) var(--krawedz)}
.platnosci .pl-grupa{min-width:0}
.platnosci .pl-grupa + .pl-grupa{border-left:1px solid color-mix(in srgb,var(--grafit) 10%,transparent);padding-left:clamp(24px,3vw,56px);margin-left:clamp(24px,3vw,56px)}
.platnosci .eyebrow{margin:0 0 clamp(14px,1.4vw,20px)}
.platnosci .pl-tekst{font-family:var(--ui);font-size:calc(15px * var(--ui-k));line-height:1.55;color:var(--tx-60);max-width:46ch}
.platnosci .pl-tekst + .pl-tekst{margin-top:.6em}
.platnosci .pl-faktura .pl-tekst{font-family:var(--display);font-size:calc(17px * var(--ui-k));color:var(--grafit)}
@media(max-width:1023px){
  .platnosci{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,6vw,40px)}
  .platnosci .pl-grupa + .pl-grupa{border-left:0;padding-left:0;margin-left:0;border-top:1px solid color-mix(in srgb,var(--grafit) 10%,transparent);padding-top:clamp(24px,5vw,36px)}
}

/* ——— KOREKTY v4 · RUNDA 12 ——— */
/* gwarancja: jedno złote koło (bez zewnętrznego obrysu i napisu po okręgu) — mniejsza tarcza, treść bez zmian */
.pieczec-tarcza{width:clamp(156px,12vw,224px)}
.pk-wewn{stroke-width:1}
/* płatności: pionowe linie przy wysyłce i fakturach na pełną wysokość paska (kolumny rozciągnięte do najwyższej) */
.platnosci{align-items:stretch}
/* wysyłka: pod każdym zdaniem rząd znaków przewoźników — mniejszy niż znaki płatności, żeby nie konkurował z tekstem */
.pl-przewoznicy{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,1.4vw,22px)}
.pl-przewoznicy + .pl-tekst{margin-top:clamp(16px,1.6vw,22px)}
.pl-logo.pl-przewoznik{height:clamp(20px,1.5vw,24px);width:auto;max-width:none;display:block}
/* znaki przewoźników wyrównane optycznie (pliki bez zmian):
   InPost 2024 ma w pliku pusty margines (znak 325×150 w polu 443×266) — większa wysokość i ujemny margines oddają znakowi ok. 25 px;
   plakietka „InPost Paczkomat 24/7” wypełnia cały plik i jest ciężka — 17 px (minimum InPost 116×12 px zachowane);
   DPD i GLS z marginesem ochronnym z pliku (GLS: średnica kropki) — 30 px */
.pl-logo.pl-przewoznik[src$="WYS-inpost.svg"]{height:44px;margin:-10px -10px}
.pl-logo.pl-przewoznik[src$="WYS-paczkomaty.svg"]{height:17px}
.pl-logo.pl-przewoznik[src$="WYS-dpd.svg"]{height:30px}
.pl-logo.pl-przewoznik[src$="WYS-gls.svg"]{height:30px}
.pl-przewoznicy{gap:clamp(18px,1.8vw,28px);margin-top:12px}

/* ——— KOREKTY v4 · RUNDA 14: wizualizacje Astroplanera i kalendarza na ścianę ———
   scena w podziale media/produkt: zdjęcie na całe pole, kadr poziomy ~1,4 (pole ma 1,22–1,47), punkt ciężkości nieco powyżej środka */
.editorial-product-split .scene.scena-foto{position:relative;overflow:hidden;background:var(--biel-ciepla)}
.editorial-product-split .scene.scena-foto > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}

/* ——— KOREKTY v4 · RUNDA 16: galeria ujęć w scenie produktu ——— */
.editorial-product-split .scena-galeria > img{opacity:0;transition:opacity var(--t-edytorial,900ms) var(--e-std)}
.editorial-product-split .scena-galeria > img.aktywna{opacity:1}
.editorial-product-split .scena-galeria > .kroki{position:absolute;left:0;right:0;bottom:clamp(16px,2.2vw,32px);z-index:2}
.editorial-product-split .scena-galeria .krok::before{background:color-mix(in srgb,var(--biel) 55%,transparent);box-shadow:0 0 0 .5px color-mix(in srgb,var(--grafit) 25%,transparent)}
.editorial-product-split .scena-galeria .krok.aktywna::before{background:var(--biel)}
@media(prefers-reduced-motion:reduce){.editorial-product-split .scena-galeria > img{transition:none}}
/* kreski galerii leżały na białym papierze kalendarza i znikały — dostają półprzezroczystą kapsułę pod spodem */
.editorial-product-split .scena-galeria > .kroki{left:50%;right:auto;translate:-50% 0;width:max-content;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--grafit) 38%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.editorial-product-split .scena-galeria .krok::before{box-shadow:none}

/* ——— KOREKTY v4 · RUNDA 19: strzałki po bokach galerii scen (Kasia: „znaczniki pod zdjęciem są ledwo widoczne”) ———
   te same okrągłe przyciski co w opiniach i „Co jest w środku”, białe z cieniem — czytelne na jasnej ścianie i na zdjęciu */
.editorial-product-split .scena-galeria > .strzalki-galerii{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;padding:0 clamp(12px,1.6vw,24px);pointer-events:none}
.strzalki-galerii button{pointer-events:auto;background:var(--biel);border-color:transparent;box-shadow:var(--c-uniesiona);color:var(--grafit)}
.strzalki-galerii button:hover{border-color:var(--grafit)}
.strzalki-galerii button:focus-visible{outline:2px solid var(--zloty);outline-offset:3px}
@media(max-width:860px){.strzalki-galerii button{width:40px;height:40px}}

/* ——— KOREKTY v4 · RUNDA 20 ——— */
/* strzałki galerii bez obrysu (Kasia: „strzałki bez linii w obrysie”) — sam biały krąg z cieniem, hover mocniejszy cień */
.strzalki-galerii button,.strzalki-galerii button:hover{border:0}
.strzalki-galerii button:hover{box-shadow:0 4px 10px rgba(22,19,18,.10),0 22px 48px rgba(22,19,18,.14)}

/* mega menu (Kasia: „kolumny daj koło siebie do lewej, nie rozstrzelone”): kolumny na szerokość treści, stały odstęp,
   wyróżniona kolumna ze zdjęciem zaraz za nimi — cały układ od linii krawędzi w lewo zamiast 1fr na całą szerokość */
.mega .wrap{grid-template-columns:repeat(var(--kol,3),minmax(150px,max-content)) clamp(220px,17vw,300px);
  justify-content:start;column-gap:clamp(40px,4.4vw,88px)}
@media(max-width:1240px){.mega .wrap{grid-template-columns:repeat(auto-fill,minmax(170px,max-content));justify-content:start}}

/* mega menu (Kasia: „przy przejeżdżaniu na inną zakładkę mryga menu — niech płynnie przełącza się na kolejną”):
   gdy menu jest już otwarte (#mega.przelacza, nawigacja.js), panel zmienia się od razu, a treść nowej zakładki wchodzi przenikaniem */
#mega.przelacza .mega{transition:none;transform:none}
#mega.przelacza .mega.otwarte .wrap{animation:mega-tresc 220ms var(--e-std) both}
@keyframes mega-tresc{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#mega.przelacza .mega.otwarte .wrap{animation:none}}
/* mega menu v4: treść od linii krawędzi strony, górny i dolny margines z komponenty.css (40 / 44 px) zostają */
.mega .wrap{max-width:none;padding-inline:var(--margines)}

/* ——— KOREKTY v4 · RUNDA 21 ——— */
/* poznaj go od środka (Kasia: „daj jeszcze więcej kartek pod spodem, chcemy osiągnąć efekt grubości”):
   stos 12 krawędzi kartek (co 1 px naprzemiennie papier i krawędź) zamiast 6; --stos steruje górnym marginesem okładki,
   żeby złota krawędź nadal była równa z każdej strony. Na telefonie 6 krawędzi. */
#ak27-interior-explorer .book-stage{--stos:12px}
#ak27-interior-explorer .strony .lewo{box-shadow:
  -1px 1px 0 var(--biel),-2px 2px 0 var(--krawedz-kartki),-3px 3px 0 var(--biel),-4px 4px 0 var(--krawedz-kartki),
  -5px 5px 0 var(--biel),-6px 6px 0 var(--krawedz-kartki),-7px 7px 0 var(--biel),-8px 8px 0 var(--krawedz-kartki),
  -9px 9px 0 var(--biel),-10px 10px 0 var(--krawedz-kartki),-11px 11px 0 var(--biel),-12px 12px 0 var(--krawedz-kartki),
  -6px 12px 22px color-mix(in srgb,var(--grafit) 16%,transparent)}
#ak27-interior-explorer .strony .prawo{box-shadow:
  1px 1px 0 var(--biel),2px 2px 0 var(--krawedz-kartki),3px 3px 0 var(--biel),4px 4px 0 var(--krawedz-kartki),
  5px 5px 0 var(--biel),6px 6px 0 var(--krawedz-kartki),7px 7px 0 var(--biel),8px 8px 0 var(--krawedz-kartki),
  9px 9px 0 var(--biel),10px 10px 0 var(--krawedz-kartki),11px 11px 0 var(--biel),12px 12px 0 var(--krawedz-kartki),
  6px 12px 22px color-mix(in srgb,var(--grafit) 16%,transparent)}
#ak27-interior-explorer .strony::before{left:calc(50% - 13px);width:26px;bottom:-12px;height:12px}
@media(max-width:860px){
  #ak27-interior-explorer .book-stage{--stos:6px}
  #ak27-interior-explorer .strony .lewo{box-shadow:-1px 1px 0 var(--biel),-2px 2px 0 var(--krawedz-kartki),-3px 3px 0 var(--biel),
    -4px 4px 0 var(--krawedz-kartki),-5px 5px 0 var(--biel),-6px 6px 0 var(--krawedz-kartki),-4px 8px 16px color-mix(in srgb,var(--grafit) 14%,transparent)}
  #ak27-interior-explorer .strony .prawo{box-shadow:1px 1px 0 var(--biel),2px 2px 0 var(--krawedz-kartki),3px 3px 0 var(--biel),
    4px 4px 0 var(--krawedz-kartki),5px 5px 0 var(--biel),6px 6px 0 var(--krawedz-kartki),4px 8px 16px color-mix(in srgb,var(--grafit) 14%,transparent)}
  #ak27-interior-explorer .strony::before{left:calc(50% - 7px);width:14px;bottom:-6px;height:6px}
}

/* wysyłka (Kasia: „logotyp InPost i Paczkomaty trochę powiększ, inne logotypy wydają się większe”) */
.pl-logo.pl-przewoznik[src$="WYS-inpost.svg"]{height:56px;margin:-13px -13px}
.pl-logo.pl-przewoznik[src$="WYS-paczkomaty.svg"]{height:22px}

/* stopka: „by Kasia Synal” przy nagłówku kolumny — zwykłe litery, ciszej niż wersaliki nagłówka */
footer.stopka h4 .stopka-autorka{text-transform:none;letter-spacing:.02em;font-weight:400;color:var(--tx-inv-70);margin-left:.35em}

/* logo stopki wjeżdża całe (transform na <svg>, przycina je .zamkniecie) */
footer.stopka .zamkniecie svg.logo-duze{will-change:transform}

/* koszyk v4 (runda 21, Kasia: „koszyk ma wysuwać się z boku po kliknięciu dodaj”): szuflada z prawej i zasłona — wzór z landing-v3 */
.zaslona{position:fixed;inset:0;background:rgba(22,19,18,.4);opacity:0;pointer-events:none;transition:opacity var(--t-spokojnie) var(--e-std);z-index:80}
.zaslona.on{opacity:1;pointer-events:auto}
.szuflada{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--biel);z-index:90;transform:translateX(100%);
  transition:transform var(--t-spokojnie) var(--e-std);display:flex;flex-direction:column;box-shadow:-18px 0 48px rgba(22,19,18,.12)}
.szuflada.on{transform:none}
.szuflada header{padding:22px 26px;border-bottom:1px solid rgba(22,19,18,.1);display:flex;justify-content:space-between;align-items:center}
.szuflada header b{font-family:var(--display);font-size:calc(21px * var(--ui-k));font-weight:400}
.szuflada .lista-poz{flex:1;overflow:auto;padding:18px 26px}
.szuflada .kosz-pusty{padding:20px 0}
.szuflada .poz{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(22,19,18,.08)}
.szuflada .poz .mini{width:52px;height:65px;border-radius:var(--r-male);background:var(--biel-ciepla);overflow:hidden;flex:none}
.szuflada .poz .mini img{width:100%;height:100%;object-fit:cover}
.szuflada .poz .op{flex:1;min-width:0;font-size:calc(13px * var(--ui-k))}
.szuflada .poz .op > b{display:block;font-weight:500;margin-bottom:3px}
.szuflada .poz .op small{display:block;color:var(--tx-40);font-size:calc(12px * var(--ui-k));margin-bottom:4px}
.szuflada .poz .op .rabat{color:var(--zloto-ciemne);font-weight:500}
.szuflada .poz .ster{display:flex;align-items:center;gap:10px;margin-top:8px}
.szuflada .poz .ster b{font-weight:600}
.szuflada .poz .ster .ilosc button{width:28px;height:30px;font-size:calc(14px * var(--ui-k))}
.szuflada .poz .ster .ilosc span{width:26px;font-size:calc(12.5px * var(--ui-k))}
.szuflada .poz .usun{background:none;border:0;cursor:pointer;color:var(--tx-40);line-height:1;font-size:calc(18px * var(--ui-k));align-self:flex-start;padding:0 2px}
.szuflada .poz .usun:hover{color:var(--czerwien)}
.szuflada .wybor-okladki{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px;margin-top:8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.szuflada .wybor-okladki button{flex:0 0 58px;scroll-snap-align:start;border:1px solid rgba(22,19,18,.14);border-radius:6px;padding:0;background:var(--biel);cursor:pointer;overflow:hidden;font-family:var(--ui)}
.szuflada .wybor-okladki button img{width:100%;aspect-ratio:4/5;object-fit:cover}
.szuflada .wybor-okladki button small{display:block;font-size:calc(10px * var(--ui-k));letter-spacing:.08em;padding:4px 0;color:var(--tx-60)}
.szuflada .wybor-okladki button:hover{border-color:var(--zloty)}
.szuflada .wybor-okladki button:disabled{opacity:.35;cursor:not-allowed}
.szuflada footer{padding:22px 26px;border-top:1px solid rgba(22,19,18,.1)}
.szuflada .kosz-komunikat{margin-bottom:14px}
.szuflada .kosz-komunikat i{font-style:normal;color:var(--zloty)}
.szuflada .komunikat.ok i{color:var(--zielen-ciemna)}
.szuflada .suma{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.szuflada .suma b{font-size:calc(21px * var(--ui-k));font-weight:600}
.szuflada .kosz-platnosc{width:100%}
@media(prefers-reduced-motion:reduce){.szuflada,.zaslona{transition:none}}
.szuflada:focus{outline:none}
/* runda 21: nowe znaki — BLIK i Klarna w metodach płatności, DHL i FedEx przy wysyłce zagranicznej (pliki bez zmian).
   DHL na żółtym polu marki (wytyczne: min. 84 px szerokości) i badge Klarny mają własne tło, więc stoją niżej optycznie */
.pl-logo[src$="PLAT-blik.svg"]{height:clamp(24px,1.8vw,28px)}
.pl-logo[src$="PLAT-klarna.svg"]{height:clamp(22px,1.7vw,26px)}
.pl-logo.pl-przewoznik[src$="WYS-dhl.svg"]{height:28px}
.pl-logo.pl-przewoznik[src$="WYS-fedex.svg"]{height:34px;margin-block:-4px}
/* cztery znaki przewoźników zagranicznych (DPD, GLS, DHL, FedEx) w jednym rzędzie kolumny przy 1280–1512 px — ciaśniejszy odstęp */
.pl-przewoznicy{gap:clamp(12px,1.3vw,22px)}
/* 861–1439 px: kolumna wysyłki jest węższa — DPD, GLS i FedEx nieco mniejsze, DHL zostaje (wytyczne DHL: min. 84 px szerokości) */
@media(min-width:861px) and (max-width:1439px){
  .pl-przewoznicy{gap:12px}
  .pl-logo.pl-przewoznik[src$="WYS-dpd.svg"],.pl-logo.pl-przewoznik[src$="WYS-gls.svg"]{height:26px}
  .pl-logo.pl-przewoznik[src$="WYS-fedex.svg"]{height:30px;margin-block:-3px}
}

/* ——— KOREKTY v4 · RUNDA 22 ——— */
/* ikony w nagłówku (Kasia: „mało czytelne — powiększ je trochę”): pole 44 px, rysunek 24 px, linia 1,6 */
.pasek .narzedzia .ikona{width:44px;height:44px;display:inline-grid;place-items:center}
.pasek .narzedzia .ikona svg{width:24px;height:24px;stroke-width:1.6}
.pasek .narzedzia .ikona b{top:3px;right:2px}

/* konto: panel pod ikoną — logowanie / rejestracja / przypomnienie hasła */
.konto{position:relative;display:inline-flex}
.konto-panel{position:absolute;top:calc(100% + 12px);right:-8px;z-index:70;width:min(340px,calc(100vw - 32px));padding:24px 24px 20px;
  background:var(--biel);border:1px solid rgba(22,19,18,.08);border-radius:var(--r-srednie);box-shadow:var(--c-uniesiona)}
.konto-panel::before{content:'';position:absolute;top:-6px;right:23px;width:12px;height:12px;background:var(--biel);
  border-left:1px solid rgba(22,19,18,.08);border-top:1px solid rgba(22,19,18,.08);transform:rotate(45deg)}
.konto-widok{display:grid;gap:12px}
.konto-tytul{margin:0 0 4px;font-family:var(--display);font-size:calc(21px * var(--ui-k));color:var(--grafit)}
.konto-opis{margin:0;font-size:calc(13.5px * var(--ui-k));line-height:1.5;color:var(--tx-60)}
.konto-pole{display:grid;gap:6px}
.konto-pole span{font-size:calc(12px * var(--ui-k));letter-spacing:.04em;color:var(--tx-60)}
.konto-pole input{font:inherit;font-size:calc(15px * var(--ui-k));padding:11px 12px;border:1px solid rgba(22,19,18,.2);border-radius:var(--r-male);background:var(--biel);color:var(--grafit)}
.konto-pole input:focus{outline:2px solid var(--zloty);outline-offset:1px;border-color:transparent}
.konto-zgoda{display:flex;gap:8px;align-items:flex-start;font-size:calc(12.5px * var(--ui-k));line-height:1.45;color:var(--tx-60)}
.konto-akcja{width:100%;margin-top:4px}
.konto-link{justify-self:start;background:none;border:0;padding:0;font:inherit;font-size:calc(13px * var(--ui-k));color:var(--grafit);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.konto-link:hover{color:var(--zloty)}
.konto-dol{margin:6px 0 0;padding-top:14px;border-top:1px solid rgba(22,19,18,.08);font-size:calc(13px * var(--ui-k));color:var(--tx-60)}
.konto-komunikat{margin:14px 0 0;padding:10px 12px;border-radius:var(--r-male);background:var(--biel-ciepla);font-size:calc(12.5px * var(--ui-k));line-height:1.45;color:var(--grafit)}

/* koszyk (Kasia: „zrób więcej przestrzeni — szerszy, czcionki trochę większe”) */
.szuflada{width:min(540px,100%)}
.szuflada header{padding:26px 34px}
.szuflada header b{font-size:calc(25px * var(--ui-k))}
.szuflada .lista-poz{padding:22px 34px}
.szuflada footer{padding:26px 34px}
.szuflada .poz{gap:18px;padding:20px 0}
.szuflada .poz .mini{width:72px;height:90px}
.szuflada .poz .op{font-size:calc(15px * var(--ui-k));line-height:1.45}
.szuflada .poz .op > b{font-size:calc(16px * var(--ui-k));margin-bottom:4px}
.szuflada .poz .op small{font-size:calc(13.5px * var(--ui-k))}
.szuflada .poz .ster{gap:14px;margin-top:10px}
.szuflada .poz .ster .ilosc button{width:34px;height:36px;font-size:calc(16px * var(--ui-k))}
.szuflada .poz .ster .ilosc span{width:30px;font-size:calc(14px * var(--ui-k))}
.szuflada .poz .usun{font-size:calc(22px * var(--ui-k))}
.szuflada .wybor-okladki button{flex-basis:66px}
.szuflada .suma{margin-bottom:18px}
.szuflada .suma span{font-size:calc(16px * var(--ui-k))}
.szuflada .suma b{font-size:calc(25px * var(--ui-k))}
.szuflada .kosz-komunikat{font-size:calc(14px * var(--ui-k))}
@media(max-width:860px){.szuflada header,.szuflada .lista-poz,.szuflada footer{padding-inline:20px}}
/* widoki panelu konta: display:grid przykrywał atrybut hidden — rejestracja pokazywała się pod logowaniem */
.konto-widok[hidden],.konto-panel[hidden]{display:none}
/* otwarty koszyk: ołówek panelu roboczego nie zasłania przycisku płatności */
body:has(.szuflada.on) #pr-pin{visibility:hidden}

/* ═══ KOREKTY v4 · RUNDA 23 · 15.09 ═══════════════════════════════════════════════ */
/* ——— treść większa (Kasia: „czcionki treści są za małe — zwiększ ich wielkość”).
   Tylko v4: komponenty.css i landing-v3 bez zmian. Progi max() podniesione, żeby małe karty (skala „mała”) też urosły. */
.lead{font-size:clamp(22px,1.65vw,27px)}
.meta{font-size:calc(14px * var(--ui-k))}
.karta .nr{font-size:max(calc(12px * var(--ui-k) * var(--karta-k)), calc(11px * var(--ui-k)))}
.karta h4{font-size:max(calc(21px * var(--ui-k) * var(--karta-k)), calc(16px * var(--ui-k)))}
.karta p{font-size:max(calc(15.5px * var(--ui-k) * var(--karta-k)), calc(14.5px * var(--ui-k)))}
.karta .cena{font-size:max(calc(17px * var(--ui-k) * var(--karta-k)), calc(14.5px * var(--ui-k)))}
.karta .cena s{font-size:max(calc(14.5px * var(--ui-k) * var(--karta-k)), calc(12.5px * var(--ui-k)))}
.karta.tekst p{font-size:calc(16px * var(--ui-k))}
.explorer-copy .meta{font-size:calc(16.5px * var(--ui-k))}
.ew-naglowek{font-size:calc(19px * var(--ui-k))}
.ew-opis{font-size:calc(15.5px * var(--ui-k))}
.faq p{font-size:calc(16px * var(--ui-k))}
.sk-opis{font-size:clamp(13px,5.8cqi,16px)}
.platnosci .pl-tekst{font-size:calc(16.5px * var(--ui-k))}
.platnosci .pl-faktura .pl-tekst{font-size:calc(18.5px * var(--ui-k))}
.testimonial-track .opinia footer{font-size:calc(14.5px * var(--ui-k))}
footer.stopka p,footer.stopka li{font-size:calc(15px * var(--ui-k))}

/* ——— pakiety i produkty dodatkowe: własna lista okładek z miniaturami.
   Karta ma overflow:hidden (promień), więc karta pakietu przycina tylko zdjęcie, a lista może wyjść poza kartę.
   Otwarta karta idzie nad sąsiadów (każda .tresc to osobny kontekst warstw przez container). */
.karta.pakiet{overflow:visible}
.karta.pakiet .foto{overflow:hidden;border-radius:calc(var(--r-srednie) * var(--karta-k) - 1px) calc(var(--r-srednie) * var(--karta-k) - 1px) 0 0}
.karta.pakiet.wo-otwarta{position:relative;z-index:6}
.wybor-okladki-pakietu{position:relative;display:grid;gap:8px;margin-top:18px}
.wo-pole{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:7px 14px 7px 8px;
  border:1px solid rgba(22,19,18,.18);border-radius:var(--r-male);background:var(--biel);color:var(--grafit);
  font:inherit;font-size:calc(14.5px * var(--ui-k));line-height:1.3;text-align:left;cursor:pointer;
  transition:border-color var(--t-mikro) var(--e-std),box-shadow var(--t-mikro) var(--e-std)}
.wo-pole:hover{border-color:rgba(22,19,18,.42)}
.wo-pole[aria-expanded="true"]{border-color:var(--grafit);box-shadow:0 0 0 3px color-mix(in srgb,var(--okladka-zlota) 30%,transparent)}
.wo-mini{flex:none;width:36px;aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:var(--biel-ciepla);display:grid;place-items:center}
.wo-mini img{width:100%;height:100%;object-fit:cover;display:block}
.wo-mini-pusta{background:transparent;border:1px dashed rgba(22,19,18,.3)}
.wo-wartosc{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wo-pole:not(.wo-wybrana) .wo-wartosc{color:var(--tx-60)}
.wo-strzalka{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform var(--t-mikro) var(--e-std)}
.wo-pole[aria-expanded="true"] .wo-strzalka{transform:rotate(180deg)}
.wo-lista{position:absolute;z-index:2;left:0;right:0;top:calc(100% + 6px);max-height:min(400px,62vh);overflow:auto;overscroll-behavior:contain;
  margin:0;padding:6px;list-style:none;background:var(--biel);border:1px solid rgba(22,19,18,.12);border-radius:var(--r-srednie);
  box-shadow:0 18px 48px rgba(22,19,18,.18)}
.wo-w-gore .wo-lista{top:auto;bottom:calc(100% + 6px)}
.wo-lista:focus{outline:none}
.wo-lista:focus-visible .wo-aktywna{box-shadow:inset 0 0 0 1.5px var(--grafit)}
.wo-grupa{padding:12px 10px 6px;font-size:calc(11px * var(--ui-k));letter-spacing:.18em;text-transform:uppercase;color:var(--tx-40)}
.wo-opcja{display:flex;align-items:center;gap:12px;padding:6px 10px 6px 6px;border-radius:var(--r-male);cursor:pointer}
.wo-opcja .wo-mini{width:46px}
.wo-opcja.wo-aktywna{background:var(--biel-ciepla)}
.wo-opcja[aria-selected="true"] .wo-opis b::after{content:" ✓";color:var(--okladka-zlota)}
.wo-opcja[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.wo-opis{display:grid;gap:2px;min-width:0;font-size:calc(14px * var(--ui-k));line-height:1.3;color:var(--grafit)}
.wo-opis b{font-weight:500}
.wo-opis small{font-size:calc(12.5px * var(--ui-k));color:var(--tx-60)}

/* ——— skład pakietu: „+” między miniaturami; karty bez zdjęcia głównego pokazują skład na środku, większy */
.pakiet-sklad{align-items:center}
.pakiet-sklad li.ps-plus{flex:none;width:20px;height:20px;aspect-ratio:auto;border:0;border-radius:999px;overflow:visible;
  display:grid;place-items:center;background:var(--biel);box-shadow:var(--c-karta);
  font-family:var(--display);font-size:16px;line-height:1;color:var(--grafit)}
.karta.pakiet .foto.bez-zdjecia{display:grid;place-items:center;background:var(--piasek)}
.foto.bez-zdjecia .pakiet-sklad{position:static;flex-wrap:wrap;justify-content:center;row-gap:12px;column-gap:8px;padding:0 clamp(14px,9%,30px)}
.foto.bez-zdjecia .pakiet-sklad li:not(.ps-plus){flex:0 0 clamp(52px,24%,78px)}
.karta .cena .do-uzupelnienia{font-weight:400;color:var(--tx-60);font-size:.82em}
.karta .tresc > p.pakiet-osobno{flex:none;margin:6px 0 0;font-size:calc(13.5px * var(--ui-k));color:var(--tx-40)}
/* pole nie może rozpychać karty długą etykietą (pomiar 1512: „Wybierzesz w koszyku” wychodziło poza kartę) */
.wybor-okladki-pakietu{grid-template-columns:minmax(0,1fr)}
.karta .akcja .btn[disabled]{opacity:.42;cursor:not-allowed}
/* ——— zdjęcia główne Duetu i Golda (wizualizacje 2026, kadr 4:5) wypełniają kadr; line-up zostaje w całości */
.karta.pakiet .foto > img{object-fit:cover}
.karta.pakiet .foto > img[src$="PROD-LINEUP.webp"]{object-fit:contain}
/* pole okładki w wąskiej karcie (252 px przy 1512): bez pustej ramki miniatury, dopóki nic nie wybrano — etykieta mieści się w całości */
.wo-pole:not(.wo-wybrana) .wo-mini{display:none}
.wo-pole{padding-left:14px}
.wo-pole.wo-wybrana{padding-left:8px}
.wo-mini img[hidden]{display:none}
/* lista okładek szersza niż karta 252 px — nazwy okładek w jednym–dwóch wierszach zamiast czterech */
.wo-lista{right:auto;width:max(100%,320px);max-width:calc(100vw - 32px)}
.wo-do-prawej .wo-lista{left:auto;right:0}

/* ═══ KOREKTY v4 · RUNDA 25 · 15.09 ═══════════════════════════════════════════════ */
/* ——— szuflada koszyka (Kasia: „przejdź do płatności dużymi literami; do darmowej dostawy — zrób pod Twój koszyk i jakimś paseczkiem;
   w nazwie produktu nie dajemy ceny ani pod nazwą; cena niepogrubiona, z lewej cena, z prawej buttony; zamiast × ikonka w tej samej
   linii co cena; ciut większy obrazek; na dole — razem i pod spodem kwota, kwota z lewej; przejdź do płatności ze strzałeczką w prawo”) */
.szuflada .kosz-prog{padding:16px 34px 18px;border-bottom:1px solid rgba(22,19,18,.1);background:var(--biel-ciepla)}
.szuflada .kosz-prog:empty{display:none}
.szuflada .prog-tekst{margin:0 0 10px;font-size:calc(14px * var(--ui-k));line-height:1.4;color:var(--tx)}
.szuflada .prog-tekst b{font-weight:600}
.szuflada .prog-pasek{height:6px;border-radius:999px;background:rgba(22,19,18,.1);overflow:hidden}
.szuflada .prog-pasek > span{display:block;height:100%;width:var(--prog,0%);border-radius:inherit;background:var(--okladka-zlota);transition:width var(--t-std) var(--e-std)}
.szuflada .poz{align-items:stretch}
.szuflada .poz .mini{width:88px;height:110px}
.szuflada .poz .op{display:flex;flex-direction:column}
.szuflada .poz .ster{justify-content:space-between;margin-top:auto;padding-top:12px}
.szuflada .poz .poz-cena{font-size:calc(16px * var(--ui-k));font-weight:400;color:var(--tx);white-space:nowrap}
.szuflada .poz .poz-akcje{display:flex;align-items:center;gap:6px}
.szuflada .poz .usun{display:grid;place-items:center;width:38px;height:38px;padding:0;align-self:center;border-radius:var(--r-male);color:var(--tx-60)}
.szuflada .poz .usun svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.szuflada .poz .usun:hover{color:var(--czerwien);background:var(--biel-ciepla)}
.szuflada footer{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.szuflada .suma{display:grid;justify-items:start;gap:2px;margin:0}
.szuflada .suma span{font-size:calc(14px * var(--ui-k));color:var(--tx-60)}
.szuflada .kosz-platnosc{width:auto;flex:1 1 240px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.szuflada .kosz-platnosc svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.szuflada .kosz-platnosc.bez-strzalki svg{display:none}
@media(max-width:860px){.szuflada .kosz-prog{padding-inline:20px}}
/* ——— runda 25 · poprawki po niezależnej weryfikacji (wf_67d14117-10b) */
/* wyłączony przycisk płatności wygląda na wyłączony (pusty koszyk, pakiet bez okładki) */
.szuflada .kosz-platnosc:disabled{opacity:.42;cursor:not-allowed}
.szuflada .kosz-platnosc:disabled:hover{background:var(--grafit)}
/* napis w jednym wierszu; na telefonie przycisk zawsze pod kwotą, na całą szerokość — układ nie zależy od długości kwoty */
.szuflada .kp-napis{white-space:nowrap}
@media(max-width:480px){.szuflada .kosz-platnosc{flex-basis:100%}}
/* pasek: złoto do wypełnień (kontrast 3,9:1 do toru) zamiast koloru produktu */
.szuflada .prog-pasek > span{background:var(--zloto-ciemne)}
/* wszystkie 9 okładek widoczne w szufladzie, bez ukrytego przewijania */
.szuflada .wybor-okladki{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));overflow:visible;scroll-snap-type:none}
/* krzyżyk z polem 44 × 44 px, bez przesunięcia nagłówka */
#kosz-zamknij{min-width:44px;min-height:44px;display:grid;place-items:center;margin:-10px -12px -10px 0}
/* strona pod otwartą szufladą się nie przewija */
html.szuflada-otwarta{overflow:hidden}
/* siatka pakietów: etykieta nad nazwą ma stałą wysokość, więc tytuły w jednym rzędzie stoją na tej samej linii
   („osobista prognoza astrologiczna” łamie się na 2 wiersze przy 1512 i na 3 przy 1280) */
@media(min-width:861px){#ak27-bundle-cover-configurator .product-grid .karta .tresc > .nr{display:flex;align-items:flex-end;min-height:calc(2 * 1.5em)}}
@media(min-width:861px) and (max-width:1280px){#ak27-bundle-cover-configurator .product-grid .karta .tresc > .nr{min-height:calc(3 * 1.5em)}}
/* stała interlinia etykiety w siatce pakietów — min-height w em liczy się dokładnie (przy 1280 trzy wiersze wychodziły 2 px wyżej) */
@media(min-width:861px){#ak27-bundle-cover-configurator .product-grid .karta .tresc > .nr{line-height:1.5}}

/* ═══ KOREKTY v4 · RUNDA 27 · 15.09 ═══════════════════════════════════════════════ */
/* ——— tył okładki po najechaniu (Kasia: „mam już wszystkie okładki z tyłu — zrób na stronie po najechaniu jako hovery —
   tył okładki do wszystkich edycji — okładek kolorowych i classic”). Tył leży nad przodem w tym samym kadrze 4:5
   i wchodzi przenikaniem. Tylko urządzenia ze wskaźnikiem (na dotyku nie ma „przyklejonego” tyłu). Przy ograniczonym ruchu
   obowiązuje reguła globalna tego pliku (przejścia 120 ms, bez animacji) — samo przenikanie krycia nie jest ruchem. */
.karta .foto.dwustronna{position:relative}
/* parametry po kontroli tyłów (wf_53925f73-c88): tył jest lustrzanym ujęciem, więc w połowie przenikania książka się podwaja —
   krzywa symetryczna skraca ten moment o ok. 1/3 wobec --e-std; 60 ms opóźnienia na wejściu, żeby przejazd kursorem po siatce nie błyskał.
   Bez skalowania: „bez ruchu na najechaniu” (komponenty.css, karta). */
.karta .foto.dwustronna > .foto-tyl{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--t-szybko) cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.karta:hover .foto.dwustronna > .foto-tyl{opacity:1;transition-duration:240ms;transition-delay:60ms}}

/* ═══ KOREKTY v4 · RUNDA 28 · 15.09 ═══════════════════════════════════════════════ */
/* ——— otwarcie z line-upem 9 okładek w tle (Kasia: „ok mamy już line up wszystkich okładek — daj jako tło pierwszej sekcji”).
   Komputer: sekcja ma proporcję zdjęcia; trzy rzędy siatki odpowiadają pasom zdjęcia zmierzonym przez lineup_hero.py —
   ściana (nadtytuł i rok), książki (pusto), blat (lead i przyciski). Rok maleje tak, żeby zmieścić się na ścianie nad książkami.
   Telefon: tekst na kolorze ściany, zdjęcie w całości (górna krawędź wtopiona), przyciski na kolorze kamienia. */
.otwarcie-roku.z-lineupem{position:relative;isolation:isolate;display:grid;min-height:0;padding:0;place-items:stretch;
  aspect-ratio:var(--hero-proporcja);grid-template-rows:var(--hero-gora) 1fr var(--hero-dol);background:var(--hero-kamien)}
.z-lineupem .otwarcie-tlo{position:absolute;inset:0;z-index:-1}
.z-lineupem .otwarcie-tlo img{width:100%;height:100%;object-fit:cover;max-width:none}
.z-lineupem .otwarcie-gora,.z-lineupem .otwarcie-dol{display:grid;justify-items:center;align-content:center;padding-inline:var(--margines);min-height:0}
.z-lineupem .otwarcie-gora{grid-row:1}
/* lead i przyciski przy górnej krawędzi blatu, nie na środku pasa — przy 1920×1080 i 1536×864 zostają w pierwszym oknie */
.z-lineupem .otwarcie-dol{grid-row:3;align-content:start;padding-top:clamp(10px,1vw,18px)}
.z-lineupem .rok{font-size:clamp(88px,calc(21vw - 104px),330px);margin:clamp(6px,.8vw,14px) 0 0}
/* na zdjęciu ściany szary tekst systemu miałby za mały kontrast — nadtytuł i lead pełnym grafitem */
.z-lineupem .eyebrow,.z-lineupem .lead{color:var(--tx)}
.z-lineupem .lead{margin:0}
.z-lineupem .akcje{margin-top:clamp(8px,.8vw,14px)}
@media(max-width:860px){
  .otwarcie-roku.z-lineupem{aspect-ratio:auto;grid-template-rows:auto auto auto;background:var(--hero-sciana);padding:0}
  /* obie krawędzie zdjęcia wtopione: pod górną prześwituje kolor ściany, pod dolną kolor kamienia (tło <picture> dzielone w połowie) */
  .z-lineupem .otwarcie-tlo{position:relative;inset:auto;z-index:0;grid-row:2;display:block;
    background:linear-gradient(to bottom,var(--hero-sciana) 50%,var(--hero-kamien) 50%)}
  .z-lineupem .otwarcie-tlo img{display:block;height:auto;aspect-ratio:var(--hero-proporcja);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 86%,transparent 100%)}
  .z-lineupem .otwarcie-gora{padding-block:56px 0}
  .z-lineupem .otwarcie-dol{padding-block:18px 48px;background:var(--hero-kamien)}
  .z-lineupem .rok{font-size:clamp(88px,26vw,160px)}
}
/* ——— nagłówek 1081–1365 px (znane od rundy 21, pomiar rundy 28): logo, sześć pozycji menu i trzy ikony 44 px (runda 22)
   nie mieściły się w pasku — strona przewijała się w bok o 23 px przy 1280 i o 108 px przy 1180.
   1241–1365: ciaśniejsze menu (odstęp 14 px, rozstrzelenie liter .06em); 1081–1240: menu pod hamburgerem, jak poniżej 1080. */
@media(min-width:1081px) and (max-width:1365px){.menu{gap:14px}.menu>li>a{letter-spacing:.06em}}
@media(max-width:1240px){.menu{display:none}.pasek .hamburger{display:flex}}
/* biały przycisk na zdjęciu: obramowanie grafitem — domyślne rgba(22,19,18,.26) na kamieniu dawało 1,1:1 (kontrola line-upu, wf_864034ca-99a) */
.z-lineupem .btn-2{border-color:var(--grafit)}

/* ═══ KOREKTY v4 · RUNDA 29 · 15.09 ═══════════════════════════════════════════════ */
/* ——— otwarcie: zdanie o przedsprzedaży i przyciski trochę niżej na blacie (Kasia: „trwa przedsprzedaż w pierwszej sekcji — opuść trochę niżej”);
   przy 1280×800, 1512×945 i 1920×1080 przyciski zostają w pierwszym ekranie */
.z-lineupem .otwarcie-dol{padding-top:clamp(22px,2.3vw,44px)}
/* pusty lead w siatce kolekcji (Kasia usunęła „sześć autorskich ilustracji”) nie zostawia odstępu */
.intro-przypiete .lead:empty{display:none}

/* ═══ KOREKTY v4 · RUNDA 30 · 15.09 ═══════════════════════════════════════════════ */
/* ——— „Dla kogo to jest” (Kasia: „pod spodem treść… i 5 zdjęć tak jak w sekcji co mówicie o…”): układ „Co mówicie o Astrokalendarzu”;
   treść pod nagłówkiem od tej samej krawędzi, nagłówek bliżej treści niż kart */
.dla-kogo .rail-naglowek{margin-bottom:clamp(14px,1.4vw,22px)}
/* wcięcie marginesem, nie paddingiem: ramka ołówka i pole kliknięcia zaczynają się przy tekście (weryfikacja) */
.dla-kogo .dla-kogo-lead{max-width:62ch;margin:0 var(--krawedz) clamp(28px,3vw,44px);padding:0}
/* zdjęcie w karcie (gdy dojdzie): wypełnia kartę 4:5, bez ciemnego przejścia pod podpis */
.people-card.z-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.people-card.z-foto::before{content:none}
/* ——— RUNDA 30 · WERYFIKACJA (workflow wf_89242bc1-9ce) */
/* podpis zaślepki (biały) miał 2,9–3,1:1 na jasnej części przejścia — na kartach bez zdjęcia przejście ciemniejsze i wyższe */
.people-card:not(.z-foto)::before{background:linear-gradient(to top,color-mix(in srgb,var(--grafit) 88%,transparent) 0%,color-mix(in srgb,var(--grafit) 78%,transparent) 30%,transparent 58%)}
/* fokus na przewijanym torze: obwódka do środka — sekcja ma overflow:hidden, obwódka na zewnątrz zostawiała dwie kreski */
#people-tor:focus-visible,#dla-kogo-tor:focus-visible{outline-offset:-2px;border-radius:var(--r-srednie)}

/* ═══ KOREKTY v4 · RUNDA 29 · OPINIE (15.09) ═══════════════════════════════════════ */
/* prawdziwe opinie (26–2746 znaków): karta do 9 wierszy, koniec ucięty miękko; pełny tekst w oknie „Czytaj całość” */
.testimonial-track .opinia blockquote{max-height:9lh;overflow:hidden}
.testimonial-track .opinia blockquote p,.opinia-podglad blockquote p{margin:0}
.testimonial-track .opinia blockquote p + p{margin-top:.6em}
.testimonial-track .opinia.ucieta blockquote{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2lh),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 2lh),transparent)}
.opinia-wiecej{align-self:flex-start;min-height:44px;margin:-8px 0;padding:0;border:0;background:none;font:inherit;
  font-size:calc(14px * var(--ui-k));letter-spacing:.02em;color:var(--zloto-ciemne);text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.opinia-podglad{margin:auto;border:0;border-radius:var(--r-srednie);padding:clamp(32px,4vw,56px);width:min(92vw,720px);max-height:86svh;
  overflow:auto;background:var(--biel-ciepla);color:var(--tx)}
.opinia-podglad::backdrop{background:color-mix(in srgb,var(--grafit) 80%,transparent)}
.opinia-podglad blockquote{margin:0;font-family:var(--display);font-size:clamp(17px,1.4vw,21px);line-height:1.55}
.opinia-podglad blockquote p + p{margin-top:.8em}
.opinia-podglad footer{margin-top:20px;font-size:calc(13px * var(--ui-k));color:var(--tx-60);letter-spacing:.02em}
.opinia-podglad .zamknij{position:sticky;top:0;float:right;margin:-20px -20px 0 12px;width:44px;height:44px;border:0;background:none;
  font-size:30px;line-height:1;color:var(--tx);cursor:pointer}

/* ═══ KOREKTY v4 · RUNDA 31 · 15.09 ═══════════════════════════════════════════════ */
/* ——— opinie (Kasia: „przy nagłówku opinie daj liczbę opinii w nawiasie — i w ogóle daj ten napis dużymi”; „za dużo przestrzeni nad i pod — zmniejsz”) */
/* h2.sekcja.opinie-tytul, nie samo .opinie-tytul — ogólne h2.sekcja (66 px) wygrywało i nagłówek zawyżał sekcję */
h2.sekcja.opinie-tytul{text-transform:uppercase;letter-spacing:.05em;font-size:clamp(28px,3.2vw,48px)}
.opinie-tytul .opinie-liczba{color:var(--tx-40)}
#ak27-testimonial-rail{padding-top:clamp(48px,5vw,84px);padding-bottom:clamp(48px,5vw,84px)}
/* mniejszy cudzysłów = mniejszy górny margines karty; odstęp liczony od rozmiaru znaku, więc tekst nadal nie wchodzi na ogonki */
.testimonial-track{--cytat-w:clamp(60px,5vw,92px)}
.testimonial-track .opinia::before{width:var(--cytat-w)}
.testimonial-track .opinia{padding-top:calc(var(--cytat-w) * .8 + 14px);padding-bottom:clamp(24px,2.4vw,40px)}
/* wysokość szyny wyznacza najdłuższa widoczna karta — 7 wierszy zamiast 9; reszta w oknie „Czytaj całość” (przycisk liczy skrypt) */
.testimonial-track .opinia blockquote{max-height:7lh}
/* ——— „Cześć, jestem Kasia” (Kasia: „daj więcej miejsca pod tym nagłówkiem, nad tekstem”) */
.founder-copy h2.sekcja + .lead{margin-top:clamp(32px,3.4vw,60px)}
/* ——— etykiety produktów w lewym górnym rogu zdjęcia (BESTSELLER / NOWOŚĆ / LIMITED EDITION) — nad tyłem okładki pokazywanym po najechaniu */
.karta .foto{position:relative}
.etykieta-produktu{position:absolute;z-index:3;top:clamp(10px,1vw,16px);left:clamp(10px,1vw,16px);padding:.6em .9em .55em;
  font-size:calc(10.5px * var(--ui-k));line-height:1;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border-radius:var(--r-male);background:var(--biel);color:var(--grafit);pointer-events:none}
.etykieta-produktu[data-etykieta="bestseller"]{background:var(--zloto-ciemne);color:var(--biel)}
.etykieta-produktu[data-etykieta="nowosc"]{background:var(--grafit);color:var(--biel)}
.etykieta-produktu[data-etykieta="limited"]{background:var(--biel);color:var(--grafit);box-shadow:0 0 0 1px color-mix(in srgb,var(--grafit) 14%,transparent)}

/* ═══ KOREKTY v4 · RUNDA 32 · OPINIE (15.09) ═══════════════════════════════════════ */
/* równa wysokość (7 wierszy, karty rozciągnięte w szynie), szerokość według treści (skrypt), „Czytaj całość” rozwija kartę w dół */
/* 32b: wspólna wysokość z --h-opinii (skrypt), karty wyrównane do góry — rozwinięta rośnie sama, bez rozciągania sąsiadów */
.testimonial-track{align-items:flex-start}
.testimonial-track .opinia{min-height:var(--h-opinii,auto)}
@media(max-width:860px){.testimonial-track .opinia.szersza{max-width:none}}
.testimonial-track .opinia blockquote{transition:max-height var(--t-std) var(--e-std)}
.testimonial-track .opinia.rozwinieta blockquote{-webkit-mask-image:none;mask-image:none}

/* ═══ KOREKTY v4 · RUNDA 32 · FILM (15.09) ═════════════════════════════════════════ */
/* film w kwadratowym polu po lewej, kadr wyśrodkowany; przycisk pauzy w rogu */
.media-detal .video.wideo-detal{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--piasek)}
.media-detal .video.wideo-detal video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.wideo-pauza{position:absolute;left:clamp(10px,1.2vw,16px);bottom:clamp(10px,1.2vw,16px);width:44px;height:44px;border:0;border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--grafit) 55%,transparent);color:var(--biel);cursor:pointer;
  opacity:.72;transition:opacity var(--t-szybko) var(--e-std)}
.wideo-pauza:hover,.wideo-pauza:focus-visible{opacity:1}
.wideo-pauza .ikona-graj,.wideo-pauza.stoi .ikona-pauza{display:none}
.wideo-pauza.stoi .ikona-graj{display:inline}

/* ═══ KOREKTY v4 · RUNDA 33 · ETYKIETY I NUMERACJA (15.09) ════════════════════════ */
/* fiolet kolekcji limitowanej — kolor wskazany przez Kasię (#611175), spoza palety tokenów marki, tylko do tej etykiety */
:root{--fiolet-limited:#611175}
/* etykiety w kształcie pigułki jak na wzorze Kasi */
.etykieta-produktu{border-radius:999px;padding:.62em 1.05em .56em;letter-spacing:.08em}
/* BESTSELLER i NAJKORZYSTNIEJSZY: jaśniejsze złoto (kolor okładki Classic GOLD) z grafitowym tekstem — kontrast ok. 8:1 */
.etykieta-produktu[data-etykieta="bestseller"],
.etykieta-produktu[data-etykieta="najkorzystniejszy"]{background:var(--okladka-zlota);color:var(--grafit)}
.etykieta-produktu[data-etykieta="limited"]{background:var(--fiolet-limited);color:var(--biel);box-shadow:none}
/* kółko z numerem okładki — prawy górny róg zdjęcia, na tej samej wysokości co etykieta */
.znak-okladki{position:absolute;z-index:3;top:clamp(10px,1vw,16px);right:clamp(10px,1vw,16px);width:clamp(42px,3.6vw,56px);aspect-ratio:1;
  border-radius:50%;background:var(--biel);color:var(--zloto-mocne);display:grid;place-items:center;
  font-family:var(--display);font-size:calc(16px * var(--ui-k));line-height:1;letter-spacing:.01em;pointer-events:none}
/* numeracja pod zdjęciem: większa, złota, wyrównana do lewej (min. 24 px — złoto na bieli ma kontrast dużego tekstu) */
.karta .nr.nr-okladki{font-family:var(--display);font-size:max(calc(24px * var(--ui-k) * var(--karta-k)), 24px);line-height:1.1;
  letter-spacing:.02em;text-transform:none;color:var(--zloto-mocne);text-align:left}
/* tytuły produktów wielkimi literami */
.karta h4{text-transform:uppercase;letter-spacing:.03em}

/* ═══ KOREKTY v4 · RUNDA 35 · CZEŚĆ, JESTEM KASIA (15.09) ══════════════════════════ */
/* zdjęcie wypełnia połowę sekcji (na telefonie pas nad tekstem); kadr ustawiony na twarz przez object-position z danych */
.founder-story .founder-media.founder-foto{position:relative;overflow:hidden;background:var(--piasek);padding:0}
.founder-foto picture{position:absolute;inset:0;display:block}
.founder-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ═══ KOREKTY v4 · RUNDA 34 · OPINIE (15.09) ═══════════════════════════════════════ */
/* skrót długiej opinii: te same akapity co pełny tekst; wielokropek łączący zdania zostaje w treści skrótu */
.opinia-skrot p + p,.opinia-calosc p + p{margin-top:.6em}
.opinia-skrot[hidden],.opinia-calosc[hidden]{display:none}

/* ═══ KOREKTY v4 · RUNDA 36 · KARTY, NAGŁÓWKI, KORZYŚCI, POZNAJ GO OD ŚRODKA (15.09) ═══════════════ */
/* Kasia: „ikonka L i E — za duże na karcie produkty — zmniejsz trochę”: kółko z numerem 54 → 42 px przy 1512 */
.znak-okladki{width:clamp(34px,2.8vw,44px);font-size:calc(14px * var(--ui-k))}
/* „tak samo w nagłówku — zmniejsz o połowę”: litera kolekcji L°/E°/P° (wybór kolekcji i nagłówki siatek) 212 → 106 px przy 1512 */
.collection-mark{font-size:clamp(50px,7vw,110px)}
/* „zmniejsz wielkość nagłówków — nazw produktów, zrobiły się odrobinę za duże”: 23,6 → 20,8 px przy 1512 */
.karta h4{font-size:max(calc(18.5px * var(--ui-k) * var(--karta-k)), calc(15px * var(--ui-k)))}

/* matryca korzyści: opis pod nagłówkiem (treść do uzupełnienia, edycja ołówkiem) */
.benefit .benefit-opis{margin:clamp(8px,.9vw,14px) 0 0;max-width:30ch;font-size:calc(15px * var(--ui-k));line-height:1.5;color:var(--tx-60)}

/* „poznaj go od środka — pod kalendarzem bardzo dużo wolnej przestrzeni, nad nagłówkiem trochę za mało” (pomiar 1512 × 945):
   nad nagłówkiem 38 → 66 px; beżowy pas pod strzałkami 103 → ok. 35 px; biały oddech nad „Co jest w środku” 91 → 67 px.
   Ekran książki odejmuje górny oddech i dolny pas zamiast dwóch górnych, więc książka traci tylko ok. 13 px wysokości.
   Telefon bez zmian (tam sekcja nie jest pełnym ekranem). Selektor section#… — generator ma własne reguły #ak27-interior-explorer */
@media(min-width:861px){
  section#ak27-interior-explorer{--ie-pad:clamp(40px,7svh,80px);--ie-pod:clamp(20px,2.4svh,32px)}
  section#ak27-interior-explorer .ie-ekran{min-height:calc(var(--ekran) - var(--ie-pad) - var(--ie-pod))}
  section#ak27-interior-explorer .ie-elementy{margin-top:var(--ie-pod);padding-top:clamp(48px,4.4vw,80px)}
}

/* ═══ KOREKTY v4 · RUNDA 37 · MATERIALNOŚĆ, PEŁNE SPEKTRUM, MODUŁY W ZAPASIE (15.09) ═══════════════ */
/* „Detale, które mają znaczenie” w układzie z brandbooka (#materialnosc .bb-mater): jeden pas cienkich kafli, 5 × 2 (telefon 2 × 5) */
#ak27-materialnosc{padding:clamp(72px,8vw,120px) 0 clamp(56px,6vw,96px)}
#ak27-materialnosc .rail-naglowek{margin-bottom:clamp(24px,3vw,44px)}
.mater-pas{margin:0 var(--krawedz);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:color-mix(in srgb,var(--grafit) 12%,transparent);border:1px solid color-mix(in srgb,var(--grafit) 12%,transparent);
  border-radius:var(--r-duze);overflow:hidden}
.mt-kafel{background:var(--biel);padding:clamp(22px,2.2vw,36px) clamp(16px,1.8vw,30px);display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.mt-wartosc{font-family:var(--display);font-weight:300;font-size:clamp(36px,3.4vw,60px);line-height:1;letter-spacing:-.01em;color:var(--grafit);overflow-wrap:anywhere}
.mt-wartosc.mt-sredni{font-size:clamp(24px,2.3vw,40px);line-height:1.05}
.mt-wartosc.mt-dlugi{font-size:clamp(19px,1.7vw,28px);line-height:1.15;overflow-wrap:normal}
.mt-etykieta{margin-top:clamp(10px,1vw,14px);font-size:calc(11px * var(--ui-k));letter-spacing:.14em;text-transform:uppercase;color:var(--tx-60)}
.mt-opis{margin-top:clamp(8px,.9vw,12px);font-size:calc(13px * var(--ui-k));line-height:1.45;color:var(--tx-60);max-width:30ch}
@media(max-width:860px){.mater-pas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* „Pełne spektrum” pod „Edycja 2027” — jak brandbook #okladki, z aktualnymi zdjęciami okładek i paletą z tych zdjęć */
#ak27-pelne-spektrum{padding:clamp(56px,6vw,96px) 0 clamp(72px,8vw,120px)}
#ak27-pelne-spektrum .rail-naglowek{margin-bottom:clamp(20px,2.4vw,36px)}
.spk-etykieta{margin:0 var(--krawedz) 12px;font-size:calc(11px * var(--ui-k));letter-spacing:.16em;text-transform:uppercase;color:var(--tx-60)}
.spk-pasek{list-style:none;margin:0 var(--krawedz) clamp(32px,3.4vw,56px);padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.spk-pasek a{display:block;aspect-ratio:4/5;border-radius:var(--r-male);overflow:hidden;background:var(--biel-ciepla)}
.spk-pasek img,.spk-kadr img{width:100%;height:100%;object-fit:cover;display:block}
.spk-pasek img{transition:transform var(--t-std) var(--e-std)}
@media(hover:hover){.spk-pasek a:hover img{transform:scale(1.05)}}
.spk-pasek a:focus-visible{outline:2px solid var(--grafit);outline-offset:2px}
.spk-siatka{margin:0 var(--krawedz);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,2.6vw,44px) clamp(16px,1.6vw,28px)}
.spk-okladka{margin:0;min-width:0}
.spk-kadr{aspect-ratio:4/5;border-radius:var(--r-duze);overflow:hidden;background:var(--biel-ciepla)}
.spk-okladka figcaption{margin-top:clamp(10px,1vw,14px)}
.spk-okladka b{display:block;font-family:var(--ui);font-weight:500;font-size:calc(14px * var(--ui-k));line-height:1.35}
.spk-paleta{display:flex;gap:3px;height:12px;margin-top:10px}
.spk-paleta i{display:block;min-width:10px;border-radius:2px}
@media(prefers-reduced-motion:reduce){.spk-pasek img{transition:none}}
@media(max-width:860px){
  .spk-pasek{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:38%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:0;padding:0 var(--krawedz);scroll-padding-inline:var(--krawedz);scrollbar-width:none}
  .spk-pasek li{scroll-snap-align:start}
  .spk-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* strona modułów w zapasie (moduly-zapas-v4.html) */
.zapas-wstep{padding:clamp(72px,8vw,120px) var(--krawedz) clamp(24px,3vw,48px)}
.zapas-wstep .lead{max-width:64ch;margin-top:16px}

/* ═══ KOREKTY v4 · RUNDA 36 · DETALE I GALERIE PLANERÓW (15.09) ═══════════════ */
/* galeria detali obok filmu: zdjęcia nałożone, przenikanie; podpis w pigułce u góry, strzałki po bokach, kreski w pigułce na dole */
.detal-galeria{overflow:hidden}
.detal-galeria > .detal-zdjecie{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t-edytorial,900ms) var(--e-std)}
.detal-galeria > .detal-zdjecie.aktywna{opacity:1}
.detal-podpis{position:absolute;z-index:2;left:clamp(16px,2.4vw,40px);top:clamp(16px,2.4vw,40px);margin:0;display:flex;align-items:baseline;gap:10px;
  max-width:calc(100% - 2 * clamp(16px,2.4vw,40px));padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--biel) 90%,transparent);
  font-size:calc(13px * var(--ui-k));color:var(--grafit)}
.detal-podpis span{font-size:calc(11px * var(--ui-k));letter-spacing:.12em;color:var(--tx-60);white-space:nowrap}
.detal-podpis b{font-weight:500}
.detal-strzalki{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(12px,1.6vw,24px);pointer-events:none}
.detal-strzalki button{pointer-events:auto}
.detal-galeria > .kroki{z-index:2;left:50%;right:auto;translate:-50% 0;width:max-content;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--grafit) 32%,transparent)}
.detal-galeria .krok::before{background:color-mix(in srgb,var(--biel) 55%,transparent)}
.detal-galeria .krok.aktywna::before{background:var(--biel)}

/* galeria na karcie planera ściennego: zdjęcie 1 w przepływie (trzyma 4:5), pozostałe nad nim; strzałki po najechaniu (dotyk: zawsze) */
.karta .foto.galeria-karty{overflow:hidden}
.galeria-karty > img{grid-area:1 / 1;transition:opacity 380ms var(--e-std)}
.galeria-karty > img:not(:first-of-type){position:absolute;inset:0}
.galeria-karty > img:not(.aktywna){opacity:0}
.gk-strzalki{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 8px;pointer-events:none}
.gk-strzalki button{pointer-events:auto;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:color-mix(in srgb,var(--biel) 90%,transparent);color:var(--grafit);box-shadow:0 1px 6px color-mix(in srgb,var(--grafit) 14%,transparent);
  opacity:0;transition:opacity 200ms var(--e-std)}
.karta:hover .gk-strzalki button,.gk-strzalki button:focus-visible{opacity:1}
.gk-strzalki button:focus-visible{outline:2px solid var(--grafit);outline-offset:2px}
@media(hover:none){.gk-strzalki button{opacity:1}}
.gk-kropki{position:absolute;z-index:2;left:50%;bottom:12px;translate:-50% 0;display:flex;gap:6px;padding:5px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--grafit) 32%,transparent)}
.gk-kropki i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--biel) 55%,transparent)}
.gk-kropki i.aktywna{background:var(--biel)}
.karta.mala .gk-strzalki button{width:36px;height:36px}
@media(prefers-reduced-motion:reduce){.detal-galeria > .detal-zdjecie,.galeria-karty > img,.gk-strzalki button{transition:none}}

/* ═══ KOREKTY v4 · RUNDA 37 · MOZAIKA I ŚWIATY KOLEKCJI (15.09) ═══════════════ */
/* zdjęcie wypełnia pole (układ pól bez zmian: mozaika — nth-child, światy — .media-slot); zaślepkowy pas i ramka znikają */
.kadr-foto{position:relative;overflow:hidden;background:var(--biel-ciepla);min-height:0}
.media-slot.kadr-foto{display:block;border:0}
.media-slot.kadr-foto::before{content:none}
.kadr-foto picture{display:contents}
.kadr-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ═══ KOREKTY v4 · RUNDA 37 · PORÓWNANIE (15.09) ═══════════════ */
/* „Co wyróżnia Astrokalendarz?”: w każdym panelu 5 kadrów nałożonych w jednym polu (proporcja dawnej zaślepki: 2,045 : 1, telefon 1,07 : 1),
   widoczna para z aktywnej kreski; podpis pod kadrem */
.porownanie-kadry{margin-top:28px;display:grid;min-width:0}
.pk-krok{grid-area:1 / 1;margin:0;min-width:0;opacity:0;visibility:hidden;transition:opacity 450ms var(--e-std),visibility 0s linear 450ms}
.pk-krok.aktywny{opacity:1;visibility:visible;transition:opacity 450ms var(--e-std)}
.pk-obraz{aspect-ratio:2.045 / 1;border-radius:var(--r-duze);overflow:hidden;background:var(--biel-ciepla);border:1px solid color-mix(in srgb,var(--grafit) 8%,transparent)}
.pk-obraz picture{display:contents}
.pk-obraz img{width:100%;height:100%;object-fit:cover;display:block}
.pk-krok figcaption{margin-top:12px;font-size:calc(13px * var(--ui-k));line-height:1.45;color:var(--tx-60)}
.calendar-comparison .kroki .krok{cursor:pointer}
@media(max-width:860px){.pk-obraz{aspect-ratio:1.07 / 1}}
@media(prefers-reduced-motion:reduce){.pk-krok,.pk-krok.aktywny{transition:none}}

/* ═══ KOREKTY v4 · RUNDA 37 · KARTY OSÓB (15.09) ═══════════════ */
/* film albo zdjęcie na całą kartę 4:5; imię i cytat na przyciemnieniu od dołu; pauza filmu w prawym górnym rogu */
.people-card.z-medium > img,.people-card.z-medium > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.people-card.z-medium::before{content:none;z-index:1}
.people-card.z-medium.z-podpisem::before{content:'';background:linear-gradient(to top,color-mix(in srgb,var(--grafit) 82%,transparent) 0%,color-mix(in srgb,var(--grafit) 50%,transparent) 30%,transparent 58%)}
.people-card.z-medium .person-copy{z-index:2}
.people-card .person-copy span{display:block;margin-top:6px;font-size:calc(14px * var(--ui-k));line-height:1.45}
.wideo-pauza.osoba-pauza{z-index:3;left:auto;right:clamp(10px,1.2vw,16px);top:clamp(10px,1.2vw,16px);bottom:auto}

/* ═══ KOREKTY v4 · RUNDA 37 · PASEK MANDAL (15.09) ═══════════════ */
/* pod „Co jest w środku”: tor przesuwa się od prawej do lewej (jeden zestaw na ok. 3,5 min), każda mandala obraca się wokół środka
   (80–96 s na obrót, co druga w przeciwną stronę). Brzegi wygaszone maską, na całą szerokość bloku. */
.pasek-mandal{position:relative;margin:clamp(40px,4.4vw,72px) calc(-1 * var(--krawedz)) 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.pm-tor{display:flex;width:max-content;animation:pm-przesuw 210s linear infinite;will-change:transform}
.pm-zestaw{display:flex;align-items:center;gap:clamp(36px,4vw,72px);padding:6px clamp(36px,4vw,72px) 6px 0}
.pm-zestaw img{display:block;width:clamp(84px,8vw,150px);height:auto;opacity:.85;animation:pm-obrot 80s linear infinite}
.pm-zestaw img:nth-child(even){animation-direction:reverse;animation-duration:96s}
@keyframes pm-przesuw{to{transform:translateX(-50%)}}
@keyframes pm-obrot{to{transform:rotate(360deg)}}
.pasek-mandal.stoi .pm-tor,.pasek-mandal.stoi .pm-zestaw img{animation-play-state:paused}
.pm-pauza{position:absolute;z-index:2;right:max(12px,calc(var(--krawedz) / 2));top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--grafit) 22%,transparent);background:var(--biel);color:var(--grafit);display:grid;place-items:center;cursor:pointer;padding:0}
.pm-pauza:focus-visible{outline:2px solid var(--grafit);outline-offset:2px}
.pm-pauza .ikona-graj,.pasek-mandal.stoi .pm-pauza .ikona-pauza{display:none}
.pasek-mandal.stoi .pm-pauza .ikona-graj{display:block}
@media(prefers-reduced-motion:reduce){.pm-tor,.pm-zestaw img{animation:none}.pm-pauza{display:none}}

/* ═══ KOREKTY v4 · RUNDA 37 · NOWIE I PEŁNIE (15.09) ═══════════════ */
/* pod „Co jest w środku”: nagłówek, pasek mandal (część C), galeria ilustracji pełni przewijana strzałkami szyny */
.np-naglowek{margin-top:clamp(56px,6vw,96px)}
.nowie-pelnie .pasek-mandal{margin-top:clamp(12px,1.6vw,24px)}
.ip-ramka{margin-top:clamp(28px,3vw,48px)}
.ip-tor{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 var(--krawedz);scroll-padding-inline:var(--krawedz);overscroll-behavior-x:contain}
.ip-tor::-webkit-scrollbar{display:none}
.ip-karta{flex:0 0 clamp(200px,16vw,280px);margin:0;scroll-snap-align:start}
.ip-karta img{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--r-srednie);background:var(--biel-ciepla)}
.ip-karta figcaption{margin-top:10px;font-size:calc(13px * var(--ui-k));line-height:1.4;color:var(--tx-60)}
@media(max-width:860px){.ip-karta{flex-basis:min(62vw,260px)}}

/* ═══ KOREKTY v4 · RUNDA 38 (16.09) ═══════════════════════════════════════════════ */
/* „Poznaj go od środka”: po dołożeniu paska mandal i galerii pełni dolny oddech sekcji (120 px) sumował się z oddechem
   następnej sekcji (120 px) — razem prawie 250 px. Teraz biały blok kończy się wcześniej (Kasia: „na dole za duży margines”). */
@media(min-width:861px){section#ak27-interior-explorer{--ie-dol:clamp(40px,4vw,64px)}}

/* mandale turlają się po stronie: wszystkie obracają się w lewo, zgodnie z kierunkiem przesuwu paska */
@keyframes pm-obrot{to{transform:rotate(-360deg)}}
.pm-zestaw img:nth-child(even){animation-direction:normal;animation-duration:88s}

/* „Detale”: 6 kafli, każdy z opisem — na komputerze 3 × 2 */
@media(min-width:861px){.mater-pas{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* „Pełne spektrum”: sam rząd 9 miniatur, po najechaniu tył okładki (jak na kartach produktów) */
#ak27-pelne-spektrum{padding:clamp(40px,4.4vw,72px) 0 clamp(56px,6vw,96px)}
.spk-pasek{margin-bottom:0}
.spk-kafel{position:relative}
.spk-tyl{position:absolute;inset:0;opacity:0;transition:opacity 240ms cubic-bezier(.65,0,.35,1)}
@media(hover:hover){.spk-kafel.dwustronna:hover .spk-tyl,.spk-kafel.dwustronna:focus-visible .spk-tyl{opacity:1}}
@media(hover:none){.spk-tyl{display:none}}
@media(prefers-reduced-motion:reduce){.spk-tyl{transition:none}}

/* opinie: mniej przestrzeni w boksie, więcej nad nagłówkiem i pod sekcją (Kasia: „za dużo w boxach przestrzeni nad i pod opinią”) */
.testimonial-track .opinia{padding:clamp(20px,2vw,32px) clamp(22px,2.2vw,34px);gap:clamp(12px,1.2vw,18px);min-height:var(--h-opinii,0)}
#ak27-testimonial-rail{padding-top:clamp(72px,8vw,132px);padding-bottom:clamp(72px,8vw,132px)}

/* kolekcje rozbite na dwie sekcje: po lewej opis, po prawej mozaika kadrów; siatka okładek na całą szerokość */
.kolekcja-swiat{background:var(--biel);padding:clamp(56px,6vw,96px) var(--krawedz) clamp(32px,3.4vw,56px);
  border-top:1px solid color-mix(in srgb,var(--grafit) 10%,transparent)}
.kolekcja-swiat .sekcja-naglowek{padding:0 0 clamp(28px,3vw,48px)}
.ks-uklad{display:grid;grid-template-columns:minmax(260px,.44fr) minmax(0,1fr);gap:clamp(28px,3.6vw,72px);align-items:center}
.ks-opis{display:flex;flex-direction:column;align-items:flex-start}
.ks-opis .collection-mark{margin-bottom:clamp(14px,1.6vw,26px)}
.ks-opis .podtytul{margin:0}
.ks-opis .lead{margin:clamp(8px,.8vw,14px) 0 0;max-width:36ch}
.ks-opis .tag{margin-top:clamp(16px,1.6vw,28px)}
.ks-mozaika{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:clamp(8px,.9vw,16px);min-height:0}
.ks-mozaika > *{aspect-ratio:4 / 5;border-radius:var(--r-srednie);min-height:0}
.kolekcja-swiat .kolekcje-nota{margin:clamp(28px,3vw,48px) 0 0}
@media(max-width:860px){
  .ks-uklad{grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,40px)}
  .ks-mozaika{overflow:visible}
}
.siatka-pelna{background:var(--biel);padding:clamp(40px,4.4vw,72px) var(--krawedz) clamp(64px,7vw,112px)}
.siatka-pelna .product-grid{padding:0;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.siatka-pelna .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.siatka-pelna .product-grid{grid-template-columns:minmax(0,1fr)}}

/* ═══ KOREKTY v4 · RUNDA 38 · POPRAWKA SIATEK (16.09) ═════════════════════════════ */
/* Reguła z czasów kolumny z literą (861–1869 px → 2 kolumny) wygrywała identyfikatorem nad .siatka-pelna.
   Siatka jest teraz na całą szerokość, więc od 1101 px wracają trzy kolumny (Kasia: „rozszerzamy 3 kolumny z okładkami na całą szerokość”). */
@media(min-width:1101px){
  #ak27-collection-product-grid-left-intro.siatka-pelna .product-grid,
  #ak27-collection-product-grid-right-intro.siatka-pelna .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* przy dwóch kolumnach trzecia okładka E stawała na środku (grid-column:2) — przy trzech kolumnach wraca na swoje miejsce */
@media(min-width:1101px){
  #ak27-collection-product-grid-right-intro.siatka-pelna .product-grid > .karta:last-child:nth-child(odd){grid-column:auto}
}

/* ═══ KOREKTY v4 · RUNDA 40 (16.09) ═══════════════════════════════════════════════ */
/* „Detale” jako pas pod kalendarzem w „Poznaj go od środka”: jeden rząd sześciu kafli na całą szerokość,
   mniejsza wartość i opis (Kasia: „zmieściło się w całości pod widokiem kalendarza […] trzeba zmniejszyć i dać w jednej linii”).
   Ekran sekcji ma teraz trzy rzędy: nagłówek, książka (elastyczna) i pas kafli — książka oddaje pasowi tyle, ile trzeba. */
/* runda 41: kafle detali wyszły z ekranu książki — ekran znów ma tylko nagłówek i kalendarz */
.ie-detale{margin:0}
.ie-detale .rail-naglowek{padding:0;margin:0 0 clamp(8px,1vh,14px)}
.ie-detale .rail-naglowek h2.sekcja{font-size:calc(12px * var(--ui-k));letter-spacing:.16em;text-transform:uppercase;color:var(--tx-60);margin:0}
.ie-detale .rail-naglowek h2.sekcja em{font-style:normal;color:var(--tx-60)}
.ie-detale .mater-pas{margin:0;grid-template-columns:repeat(6,minmax(0,1fr))}
.ie-detale .mt-kafel{padding:clamp(10px,1.2svh,18px) clamp(10px,1vw,18px)}
.ie-detale .mt-wartosc{font-size:clamp(20px,2vw,32px)}
.ie-detale .mt-wartosc.mt-sredni{font-size:clamp(15px,1.4vw,22px)}
.ie-detale .mt-wartosc.mt-dlugi{font-size:clamp(13px,1.1vw,17px)}
.ie-detale .mt-etykieta{margin-top:clamp(4px,.6vh,8px);font-size:calc(9.5px * var(--ui-k));letter-spacing:.1em}
.ie-detale .mt-opis{margin-top:clamp(4px,.6vh,8px);font-size:calc(11.5px * var(--ui-k));line-height:1.35;max-width:none}
@media(max-width:860px){
  .ie-detale{margin-top:clamp(28px,6vw,44px)}
  .ie-detale .mater-pas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ie-detale .mt-wartosc{font-size:clamp(22px,7vw,34px)}
  .ie-detale .mt-opis{font-size:calc(12px * var(--ui-k))}
}

/* mozaika domykająca: pod nią tyle samo przestrzeni co nad nią (nad = dolny oddech sekcji opinii) */
/* pod mozaiką tyle samo co nad nią (Kasia: „pod mozaiką — daj tak samo przestrzeń jak nad nią”).
   Nad mozaiką jest dolny oddech sekcji opinii (121 px przy 1512, 72 px na telefonie). Pod spodem „Dołączasz do społeczności”
   ma własny oddech i wysokość na pół ekranu z treścią na środku, przez co odstęp do pierwszego zdania rósł do 272 px —
   dlatego tej jednej sekcji skracamy górny oddech i zdejmujemy wyśrodkowanie w pionie. */
#ak27-customer-gallery-bands{padding-bottom:0}
/* sekcja „Dołączasz do społeczności” zachowuje swoją wysokość i wyśrodkowanie; skracamy tylko jej górny oddech,
   bo odstęp nad mozaiką (dolny oddech sekcji opinii) i tak go dubluje */
#ak27-community-statement{padding-top:clamp(72px,8vw,132px);align-content:start}
/* sekcja ma dalej swoją wysokość, ale treść stoi od góry — inaczej wyśrodkowanie dokładało pod mozaiką ~124 px */

/* ═══ KOREKTY v4 · RUNDA 41 (16.09) ═══════════════════════════════════════════════ */
/* kafle detali pod opisem i przeglądaniem kalendarza, bez tła: wartości stoją wprost na piasku sekcji,
   rozdzielone cienką linią (Kasia: „usuń tło i daj ją pod opisami i przeglądaniem kalendarza”) */
.ie-detale{margin:clamp(28px,3.4svh,52px) 0 0}
.ie-detale .mater-pas{background:none;border:0;border-radius:0;gap:0;
  border-top:1px solid color-mix(in srgb,var(--grafit) 12%,transparent)}
.ie-detale .mt-kafel{background:none;border-left:1px solid color-mix(in srgb,var(--grafit) 12%,transparent);
  padding:clamp(14px,1.6svh,22px) clamp(12px,1.2vw,20px)}
.ie-detale .mt-kafel:first-child{border-left:0;padding-left:0}
.ie-detale .mt-kafel:last-child{padding-right:0}
@media(max-width:860px){
  .ie-detale .mt-kafel:nth-child(odd){border-left:0;padding-left:0}
  .ie-detale .mt-kafel{border-top:1px solid color-mix(in srgb,var(--grafit) 10%,transparent)}
  .ie-detale .mt-kafel:nth-child(-n+2){border-top:0}
}

/* litery kolekcji w opisach L i E — o połowę mniejsze (Kasia: „W opisach produktów — L, E — daj 2x mniejsze”) */
.ks-opis .collection-mark{font-size:clamp(25px,3.5vw,55px)}

/* „Co mówicie” i „Dla kogo”: pięć kart na raz, reszta przewijana strzałkami w bok
   (Kasia: „5 sekcji ze strzałkami prawo lewo… więcej miałyśmy opinii ze zdjęciami”) */
/* szyna „Co mówicie” i „Dla kogo” mieszka w inline <style> strony (SZABLON generatora) — stamtąd nią sterujemy,
   bo arkusz stoi w kaskadzie przed nim i nadpisanie stąd nie miało szans. */

/* biały oddech pod mozaiką, żeby ciemna sekcja nie zaczynała się tuż pod kadrami
   (Kasia: „miałeś dać pod mozaiką przestrzeń white space, teraz zlewa się z kolejną sekcją”) */
#ak27-customer-gallery-bands{background:var(--biel);padding-bottom:clamp(72px,8vw,132px)}
/* ciemna sekcja wraca do swojego oddechu — biały pas pod mozaiką daje już sama mozaika, inaczej odstęp się dublował */
#ak27-community-statement{align-content:start}

/* ═══ KOREKTY v4 · RUNDA 42 (16.09) ═══════════════════════════════════════════════ */
/* Etykieta „LIMITED EDITION” była wypełniona fioletem z białym napisem i krzyczała mocniej niż okładka pod spodem.
   Teraz kapsułka na bieli: obrys fioletowy — ten sam #611175, który wskazałaś w rundzie 33 — i złoty napis
   (Kasia: „limited edition jest za mocne — zmień na tag z fioletowym obrysem, tekst złoty”). */
.etykieta-produktu[data-etykieta="limited"]{background:var(--biel);color:var(--zloty);
  box-shadow:0 0 0 1px var(--fiolet-limited)}

/* ═══ KOREKTY v4 · RUNDA 43 (16.09) ═══════════════════════════════════════════════ */
/* 1. „L°4” nad tytułem produktu — Kasia prosiła 3 razy o zmniejszenie o połowę. Do tej pory
   zmniejszałam .collection-mark (literę w nagłówku sekcji kolekcji) zamiast .nr-okladki
   (etykietę na karcie produktu) — dwa różne elementy, ten sam kształt napisu. 24px → 12px. */
.karta .nr.nr-okladki{font-size:max(calc(12px * var(--ui-k) * var(--karta-k)), 12px)}

/* 2. Opinie: „dalej za dużo przestrzeni nad i pod w boxach” — pionowy padding jeszcze raz o połowę
   (było 20–32px, teraz 10–16px); poziomy zostaje, bo o niego nikt nie prosił. */
.testimonial-track .opinia{padding-top:clamp(10px,1vw,16px);padding-bottom:clamp(10px,1vw,16px)}

/* 3. „Dołączasz do społeczności” — align-content:start (runda 40/41) psuło wyśrodkowanie w pionie:
   treść stawała tuż pod paddingiem, a reszta wysokiej sekcji zostawała pustym polem pod spodem.
   Biały pas pod mozaiką (runda 41: #ak27-customer-gallery-bands ma teraz padding-bottom) już daje
   wymagany odstęp, więc ta sekcja nie potrzebuje własnego górnego paddingu ani zdjętego centrowania. */
#ak27-community-statement{padding-top:0;padding-bottom:0;align-content:center}

/* 4. Tag „LIMITED EDITION” — obrys box-shadow na pigułce (border-radius:999px) renderował się krzywo.
   Prawdziwy border nie ma tej wady; box-sizing:border-box jest globalny, więc box się nie przesuwa. */
.etykieta-produktu[data-etykieta="limited"]{box-shadow:none;border:1px solid var(--fiolet-limited)}

/* Runda 50: „Szukaj" w stopce był odnośnikiem z href="#" — czytnik ekranu zapowiadał go jako
   link, a to jest przycisk uruchamiający wyszukiwanie. Zmieniony na <button>; ta reguła
   sprawia, że wygląda dokładnie tak samo jak sąsiednie odnośniki. */
.jak-link {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.mobilne .grupa .jak-link { display: block; padding: 9px 0; text-decoration: none; color: var(--tx); }

/* ——— Runda 54 · jeden koszyk, jedno konto, prawdziwa stopka (decyzje Kasi 18.09) ——————————————— */
/* stopka: odnośniki prawne zamiast zwykłego tekstu — ten sam kolor co dotychczasowe napisy, złoto na najechaniu */
footer.stopka .drobne a{color:var(--tx-inv-70);text-decoration:none;transition:color var(--t-std) var(--e-std)}
footer.stopka .drobne a:hover{color:var(--zloty)}
footer.stopka .drobne a:focus-visible{outline:1px solid var(--zloty);outline-offset:3px}
/* zapis do newslettera: pułapka na automaty poza ekranem (nie display:none — część automatów omija ukryte pola) */
.zapis .zapis-pulapka{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.zapis button:disabled{opacity:.6;cursor:progress}
footer.stopka .zapis-zgoda{margin-top:10px;max-width:420px;font-size:calc(11.5px * var(--ui-k));line-height:1.5;color:var(--tx-inv-70)}
footer.stopka .zapis-komunikat{margin-top:10px;max-width:420px;font-size:calc(13px * var(--ui-k));color:var(--tx-inv)}
footer.stopka .zapis-komunikat.blad{color:var(--czerwien)}   /* #D64343 na czerni: 4,8:1 */
/* szuflada: okładka domyślna pakietu i zmiana okładki w koszyku */
.szuflada .okladka-domyslna{color:var(--tx-60)}
.szuflada .kosz-zmien{background:none;border:0;padding:0;margin-left:6px;font:inherit;font-size:calc(12px * var(--ui-k));
  color:var(--grafit);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;cursor:pointer}
.szuflada .kosz-zmien:hover{color:var(--zloty)}
.szuflada .wybor-okladki button[aria-pressed="true"]{border-color:var(--zloty);box-shadow:0 0 0 1px var(--zloty)}
/* błąd zmiany koszyka: tekst grafitowy, sygnał czerwonym paskiem (czerwień na bieli ma 4,43:1 — za mało na drobny tekst) */
.szuflada .kosz-blad{color:var(--grafit);border-left:3px solid var(--czerwien);padding-left:10px}

/* ——— Runda 55 · układ (19.09): pełne RWD i relacje między obiektami — przyczyny, nie wystąpienia.
   Źródło: brama układu _scripts/audyt_ukladu.cjs (13 szerokości × stany strony i kasy), raport V4_KOREKTY_RUNDA55.md.
   Kontrakt: DESIGN.md §3 (skala pisma), §4.1, §8 (R-1…R-5, progi 860/1200, cele dotykowe ≥ 44 px). */

/* U-06 · znak w SVG nigdy nie jest zniekształcony. Gdy pudełko ma inne proporcje niż plik (wysokość z CSS,
   szerokość ścięta przez max-width albo flex), rysunek mieści się w pudełku zamiast się rozciągać.
   Zero szczegółowości: każda świadoma reguła object-fit dalej wygrywa. */
:where(img[src$=".svg"]){object-fit:contain}

/* U-07 · najmniejszy stopień skali to Eyebrow — calc(11px × --ui-k) (DESIGN.md §3). Te elementy schodziły
   poniżej skali (10,5 · 10 · 9,5 px × k albo surowe 10 px bez --ui-k). */
.tag,.mega h5,.mobilne .grupa h5,.etykieta-produktu,.szuflada .wybor-okladki button small,
.ie-detale .mt-etykieta,.ikona b{font-size:calc(11px * var(--ui-k))}

/* U-04 · tytuł karty nigdy nie wychodzi poza kartę. W siatce pakietów przy 1200 px treść karty ma 176 px, a jedno słowo
   wersalikami („ASTROKALENDARZ”) było szersze — ucinała je krawędź karty. Tytuł skaluje się z kartą (10cqi kontenera
   karta-tresc), nie schodzi poniżej minimum skali karty; w szerszych kartach wygrywa dotychczasowy rozmiar (bez zmian).
   Ostatnia deska: łamanie wyrazu tylko wtedy, gdy się nie mieści (break-word nie zmienia szerokości minimalnej). */
.karta h4{font-size:max(min(calc(18.5px * var(--ui-k) * var(--karta-k)), 10cqi), calc(15px * var(--ui-k)));overflow-wrap:break-word}

/* U-02 · pasek na 320 px: logo (193 px) + koszyk + menu (82 px) potrzebowały 287 px przy 280 px między marginesami —
   pasek wchodził w prawy margines, a menu stało 1 px od krawędzi ekranu. Logo może się zwęzić (proporcje trzyma
   object-fit), więc pasek zostaje w marginesach strony na każdej szerokości. */
.pasek .logo{flex:0 1 auto;min-width:0}
.pasek .logo img{max-width:100%}

/* U-02 · panel konta na telefonie: poniżej 600 px ikona konta schodzi do menu (DESIGN.md §8.2), więc panel nie miał się
   do czego przypiąć i wychodził 44 px za lewą krawędź ekranu (390 px). Przypięty do marginesów strony pod paskiem. */
@media (max-width:599px){
  .konto-panel{position:fixed;top:72px;left:var(--margines);right:var(--margines);width:auto}
  .konto-panel::before{display:none}
}

/* U-05 · cele dotykowe ≥ 44 px na szerokościach dotykowych (DESIGN.md §8.2). Dwa wzory:
   A) tam, gdzie rysunek jest świadomie mniejszy (strzałki 36/40 px), rośnie tylko OBSZAR TRAFIENIA — ::after,
      wygląd bez zmian;
   B) listy odnośników dostają rytm 44 px — odstęp zamienia się w pole trafienia, zamiast go dokładać. */
@media (max-width:859px){
  .pasek .logo,.mobilne .gora .logo{min-height:44px}
  .pasek .hamburger{position:relative}
  .zamknij{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
  .strzalki button{position:relative}
  /* pole trafienia dokładnie 44 × 44, wyśrodkowane na rysunku — mieści się w marginesie strony (bez przewijania w bok) */
  .strzalki button::after,.pasek .hamburger::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;translate:-50% -50%;border-radius:999px}
  .szuflada .poz .ster .ilosc button{width:44px;height:44px}
  .szuflada .poz .usun{width:44px;height:44px}
  .btn-mal{min-height:44px}
  .kolekcje-link{padding-block:8px}
  .konto-link,.konto-zgoda{position:relative}
  .konto-link::after,.konto-zgoda::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;translate:0 -50%}
  .mobilne .grupa a{padding:10px 0}
  footer.stopka ul{gap:0}
  footer.stopka ul a,footer.stopka .drobne a,footer.stopka p > a:only-child{display:inline-block;padding:12px 0}
  footer.stopka .drobne a{min-width:44px}
  /* kropki kroków: wysokość trafienia 44 px; kreska (::before) zostaje 2 px — wygląd bez zmian */
  .krok{height:44px}
}

/* rozszerz perspektywę, runda 56 (Kasia 21.09: „możesz tę sekcję zwęzić poprzez zwężenie kolumny
   z astrokalendarzem na ścianę — zwęź do szerokości zdjęcia w galerii, utrzymując proporcje, wtedy całą sekcję
   wyśrodkuj” + „zdjęcia teraz nie wypełniają w pełni tego obszaru”): kolumny idą za proporcją swoich zdjęć —
   Astroplaner poziomo 3:2, kalendarz z fazami pionowo 4:5 — więc mają tę samą wysokość, a sekcja zwęża się
   do sumy zdjęć i stoi na środku. Zdjęcia wypełniają kafel (cover), bo cała galeria jest w jednej proporcji. */
.companion-items{--wys-duet:clamp(240px,23vw,380px);
  grid-template-columns:calc(var(--wys-duet) * 1.5) calc(var(--wys-duet) * 0.8);justify-content:center;align-items:start}
.companion-items > .karta[data-sku="AK27-ASTROPLANER"] > .foto{aspect-ratio:3/2}
.companion-items > .karta[data-sku="AK27-WISZACY"] > .foto{aspect-ratio:4/5}
.companion-items > .karta > .foto > img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){
  .companion-items{--wys-duet:min(300px,68vw);grid-template-columns:minmax(0,min(350px,100%))}
  .companion-items > .karta[data-sku="AK27-ASTROPLANER"] > .foto{aspect-ratio:3/2}
}

/* upselle w szufladzie koszyka, runda 56 (Kasia 21.09: „zapomnieliśmy o upsellach w samym koszyku!
   były wcześniej zaprojektowane, gdzieś zginęły po drodze”): pasek „Dobierz do zamówienia” pod pozycjami,
   nad stopką szuflady — trzy najbliższe produkty spoza koszyka, przy progu jako pierwszy ten, który go domyka */
.kosz-upsell{margin-top:18px;padding-top:16px;border-top:1px solid rgba(22,19,18,.1)}
.kosz-upsell:empty{display:none}
.kosz-upsell .up-pakiet{margin:0 0 14px;padding:10px 12px;border-radius:var(--r-male);background:rgba(186,141,106,.12);
  font-size:calc(13px * var(--ui-k));line-height:1.45;color:var(--tx)}
.kosz-upsell .up-tytul{margin:0 0 10px;font-size:calc(12px * var(--ui-k));letter-spacing:.09em;text-transform:uppercase;color:var(--tx-60)}
.kosz-upsell .up-brak{text-transform:none;letter-spacing:0;color:var(--zloto-mocne)}
.kosz-upsell .up-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kosz-upsell .up-lista .up-poz{padding:12px 0}
.kosz-upsell .up-lista .up-poz:last-child{border-bottom:0}
.kosz-upsell .up-poz .poz-cena s{color:var(--tx-40);font-size:calc(11.5px * var(--ui-k));margin-right:4px}
/* Kasia 22.09: „plusik — daj większy przycisk dodaj” */
.kosz-upsell .up-dodaj{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--zloty);
  border-radius:999px;background:var(--zloty);color:var(--biel);font-size:calc(22px * var(--ui-k));line-height:1;
  cursor:pointer;transition:background var(--t-szybko) var(--e-std),border-color var(--t-szybko) var(--e-std)}
.kosz-upsell .up-dodaj:hover{background:var(--zloty);border-color:var(--zloty);color:var(--biel)}

/* Kasia 23.09: „plusik z dodawaniem produktu dodatkowego — upsell — wyśrodkuj w pionie przycisk »+«”.
   Przycisk stał pod ceną, czyli przy dolnej krawędzi wiersza. Teraz treść wiersza (nazwa, cena) idzie
   w jednej kolumnie, a przycisk stoi obok niej na całej wysokości i jest wyśrodkowany. */
.kosz-upsell .up-poz{align-items:center}
.kosz-upsell .up-poz .op{display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:10px;align-items:center}
.kosz-upsell .up-poz .ster{display:contents}
.kosz-upsell .up-poz .poz-nazwa{grid-column:1;grid-row:1}
.kosz-upsell .up-poz .poz-cena{grid-column:1;grid-row:2}
.kosz-upsell .up-poz .poz-akcje{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;align-self:center}

/* „Zamów w pakiecie …” pod pozycją, której to dotyczy (Kasia 22.09: „pod każdym produktem solo,
   który dostępny jest też w pakietach”) — zdanie klikalne, dopisek do pozycji, nie osobna karta */
.szuflada .poz-pakiet{display:block;width:100%;margin-top:8px;padding:8px 10px;border:0;border-radius:var(--r-male);
  background:rgba(186,141,106,.12);color:var(--tx);font:inherit;font-size:calc(12.5px * var(--ui-k));line-height:1.4;
  text-align:left;cursor:pointer;transition:background var(--t-szybko) var(--e-std)}
.szuflada .poz-pakiet:hover{background:rgba(186,141,106,.22)}
.szuflada .poz-pakiet b{font-weight:600}

/* dodatkowe przyciski zakupu w treści strony, runda 57 (Kasia 22.09: „w treści strony miałeś dodać
   też dodatkowe przyciski kierujące do zakupu”): jeden gest na końcu sekcji, zawsze do wyboru okładki */
.cta-zakup{display:flex;justify-content:center;padding:clamp(28px,3.5vw,52px) var(--krawedz) 0}
.cta-zakup.cta-z-etykieta{flex-direction:column;align-items:center;gap:10px}
.cta-etykieta{margin:0;font-size:calc(12px * var(--ui-k));letter-spacing:.14em;text-transform:uppercase;color:var(--tx-60)}
/* „sam przycisk, bez tła” (Kasia 22.09) — obrys zamiast wypełnienia, kolor marki */
.btn.btn-pusty{background:none;color:var(--zloty);border:1px solid currentColor}
.btn.btn-pusty:hover{background:var(--zloty);color:var(--biel);border-color:var(--zloty)}
/* 22.09: przycisk miał min-width 86vw, a stoi w bloku z własnym marginesem --krawedz po obu stronach
   i w sekcji, która ma swój margines. Na telefonie 390 px dawało to 335 + 40 = 375 px przy 350 px miejsca,
   czyli 5 px przewijania w bok na całej stronie (higiena H-17). Teraz przycisk nigdy nie przekracza
   szerokości swojego bloku. */
.cta-zakup .btn{min-width:min(360px,100%);max-width:100%;justify-content:center}
@media(max-width:860px){.cta-zakup{padding-top:clamp(24px,6vw,40px)}}

/* przekreślona cena w szufladzie i w upsellach — własna linia, wyrównana do lewej (Kasia 22.09) */
.szuflada .poz-cena s{display:block;margin:0;text-align:left;color:var(--tx-40);font-size:calc(11.5px * var(--ui-k))}

/* Kasia 22.09: „zobacz, w koszyku jest krzywo — wyrównaj treści do lewej, teraz wszystko lata”.
   Zmierzone: nazwa, podpis i cena startowały na 1040 px, ale przekreślona kwota na 1052–1055
   (kolumna cen miała align-items: flex-end, więc krótszy wiersz uciekał w prawo), a „Zmień okładkę”
   na 1046 (własny margines 6 px). Teraz wszystko w pozycji startuje w jednej linii. */
.szuflada .poz-cena{align-items:flex-start;text-align:left}
.szuflada .kosz-zmien{margin-left:0}
.kosz-upsell .up-poz .poz-cena{align-items:flex-start;text-align:left}

/* Kasia 22.09 (R22-171): „w koszyku brzydko się dodają produkty — trzeba tam dopracować animacje”.
   Jeden gest, ten sam co na stronie (docs/09 modułu 22): rozjaśnienie + niewielkie zejście z góry, krzywa
   hamująca. Pozycja wchodzi 320 ms, wychodzi zwinięciem 220 ms — i tylko wtedy, gdy szuflada jest otwarta;
   przy zamkniętej wszystko ma stać gotowe, zanim klientka ją zobaczy. */
@keyframes koszPozycjaWchodzi{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.szuflada .poz-wchodzi{animation:koszPozycjaWchodzi 320ms cubic-bezier(.2,.6,.2,1)}
.szuflada .poz-wychodzi{overflow:hidden;opacity:0;padding-top:0;padding-bottom:0;border-bottom-color:transparent;pointer-events:none;
  transition:height 220ms cubic-bezier(.2,.6,.2,1),opacity 160ms linear,padding 220ms cubic-bezier(.2,.6,.2,1)}
@media (prefers-reduced-motion:reduce){
  .szuflada .poz-wchodzi{animation:none}
  .szuflada .poz-wychodzi{transition:none}
}

/* ——— Okno z dokumentem prawnym (Kasia 23.09: „jako otwierające się okna do zamknięcia”).
   Treść przychodzi z WordPressa, więc styl dotyczy tylko ramy okna — typografia dokumentu zostaje. */
.okno-prawne{position:fixed;inset:0;z-index:120;background:rgba(22,19,18,.55);display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);overflow:auto}
.okno-prawne[hidden]{display:none}
.okno-prawne .op-karta{position:relative;width:min(760px,100%);max-height:86vh;overflow:auto;background:var(--biel);
  border-radius:var(--r-duze,18px);padding:clamp(28px,4vw,48px);box-shadow:0 30px 80px rgba(22,19,18,.28)}
.okno-prawne .op-zamknij{position:absolute;top:14px;right:14px;width:40px;height:40px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--tx-60);border-radius:999px}
.okno-prawne .op-zamknij:hover{color:var(--tx);background:rgba(22,19,18,.06)}
.okno-prawne .op-tytul{font-family:var(--display);font-weight:400;font-size:calc(26px * var(--ui-k));margin:0 0 18px}
.okno-prawne .op-tresc{font-size:calc(15px * var(--ui-k));line-height:1.65;color:var(--tx-80,var(--tx))}
.okno-prawne .op-tresc h2,.okno-prawne .op-tresc h3{font-family:var(--display);font-weight:400;margin:22px 0 8px}
.okno-prawne .op-tresc p{margin:0 0 12px}
.okno-prawne .op-tresc a{color:inherit}
html.okno-otwarte{overflow:hidden}

/* Kasia 23.09: „ikonkę lupki ukryj na razie z menu” — wyszukiwarka nie ma jeszcze silnika (R22-43),
   więc ikona nie ma czego szukać. Znacznik zostaje w kodzie, wraca po zdjęciu tej reguły. */
.pasek .narzedzia button[aria-label="Szukaj"]{display:none}

/* Kasia 23.09: „Dołączasz do — powinno być białym”. Sekcja stoi na ciemnym tle, więc pierwsza część
   nagłówka ginęła; wyróżnienie (społeczności) zostaje w swoim kolorze. */
#ak27-community-statement .sekcja{color:var(--biel)}

/* Kasia 23.09: „opinie mają z lewej strony jakiś złoty pasek — usuń go”. To znak cytatu w tle karty
   (maska SVG w złocie 16 %); przy wąskiej karcie wystawał zza tekstu i czytał się jak pasek. */
.testimonial-track .opinia::before{display:none}

/* Kasia 23.09: „Wybierz spośród dwóch kolekcji — zmniejsz odstęp nad tym nagłówkiem, wyrównaj, żeby był
   taki sam jak pod nagłówkiem”. Było 115 px nad i 49 px pod. */
#ak27-collection-selector .sekcja-naglowek{padding-top:clamp(36px,4vw,49px)}

/* ——— Poprawki Kasi z 23.09 po obejrzeniu strony na serwerze ——————————————————————————————— */

/* „na głównym banerze — 2027 daj większe i trochę niżej, ale nie nakładaj na okładki”.
   Rok rośnie o ok. jedną piątą i schodzi niżej; dolny margines pilnuje, żeby nie dotknął line-upu. */
.z-lineupem .rok{font-size:clamp(104px,calc(23.5vw - 112px),356px);margin:clamp(20px,2.6vw,48px) 0 clamp(8px,1vw,18px)}

/* „nie widać tego tekstu … może daj mu tło, ale tylko pod tekstem, w naszym kolorze złotym”.
   Tło idzie pod same wiersze (box-decoration-break), więc obejmuje tekst, a nie całą szerokość kolumny. */
.otwarcie-dol .lead{display:inline;background:var(--zloty);color:var(--biel);
  padding:.22em .5em;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:2px}
.otwarcie-dol{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,22px)}

/* „Konkretne wskazówki, które będą Cię prowadzić — nie dawaj lupki po najechaniu na zdjęcie
   ani efektu hover”: przycisk powiększenia znika, obrazek zostaje zwykłym obrazkiem. */
#ak27-interior-explorer .ew-lupa{cursor:default;pointer-events:none}
#ak27-interior-explorer .ew-lupa::after,#ak27-interior-explorer .ew-lupa::before{display:none}
#ak27-interior-explorer .ew-wizual:hover img,#ak27-interior-explorer .ew-lupa:hover img{transform:none;filter:none;opacity:1}

/* „nad sekcją »Co wyróżnia Astrokalendarz?« też jest za dużo przestrzeni — zmniejsz trochę” */
.calendar-comparison h2.sekcja{margin-top:18px}
.calendar-comparison{padding-top:clamp(56px,6vw,76px)}

/* „w wersji mobilnej możesz dać trochę większe nagłówki” */
@media(max-width:760px){
  h2.sekcja{font-size:clamp(30px,8.4vw,46px)}
  .podtytul,h3.podtytul{font-size:clamp(21px,5.6vw,28px)}
  .lead{font-size:clamp(16px,4.3vw,19px)}
}

/* Kasia 23.09: stopka schodzi do jednej kolumny — tytuł, odnośniki, dane kontaktowe pod nimi,
   a niżej tylko regulamin, polityka, podpis studia i duże logo. */
.stopka .kolumny{grid-template-columns:minmax(0,1fr);gap:clamp(18px,2vw,28px)}
.stopka .stopka-kontakt{margin-top:clamp(18px,2vw,26px);font-size:calc(13.5px * var(--ui-k));color:var(--tx-60)}
.stopka .stopka-kontakt p{margin:0 0 6px}