/* Sklep v2 — makieta układu. Tokeny: marka CGH (BRAND.md) + kadr sklepu (SPEC §4.1, §5).
   [D] jasny, chłodny świat hali z hero v1; granat = akcje, żółć = jeden akcent (aktywna okazja, licznik koszyka). */
:root {
  --papier: #FFFFFF;
  --kadr: #EFEFF2;          /* [SPEC §4.1] tło kadru produktu */
  --kadr-odziez: #E2E2E7;   /* [SPEC §4.1] odzież */
  --marka10: #E8E7E9;       /* [SPEC §3.2] kolor główny marki 10% — kafel kategorii */
  --tusz: #16171F;
  --tusz2: #55566A;         /* 7,2:1 na bieli */
  --linia: #DCDCE3;
  --linia2: #C5C5D0;
  --granat: #15131F;        /* [BRAND] Blue, biały tekst 10,4:1 */
  --granat2: #100E18;
  --zolc: #FBAD18;          /* [BRAND] Yellow — tylko akcent, nigdy tekst na bieli */
  --ok: #1F6B3A;
  --r: 6px;
  --pole: 40px;
  --font: 'Poppins', 'system-ui', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tusz); font: 400 16px/1.5 var(--font); }
/* [D] bez cyfr tabelarycznych: w Schibsted tnum rozsuwa też przecinek w cenie („25 , 00”) */
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--granat); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--pole); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; }
.h2 { font-size: 28px; line-height: 1.15; }
.lnk { font-weight: 600; color: var(--granat); white-space: nowrap; }
.lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.mini { font-size: 14px; color: var(--tusz2); }

/* ---------- przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: var(--r); background: var(--granat); color: #fff; font-weight: 600; transition: background .15s ease-out; }
.btn:hover { background: var(--granat2); }
.btn2 { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--r);
  border: 1px solid var(--linia2); background: #fff; font-weight: 600; transition: border-color .15s ease-out; }
.btn2:hover { border-color: var(--tusz); }
.btn.pelny, .btn2.pelny { width: 100%; }

/* ---------- pasek ogłoszeń + nagłówek */
.ogl { background: var(--tusz); color: #fff; font-size: 14px; text-align: center; padding: 9px 16px; }
.nag { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--linia); }
.nag-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo img { height: 34px; width: auto; }
.nav { display: flex; gap: 4px; height: 100%; }
.nav > a, .nav > button { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 100%; font-weight: 500; position: relative; }
.nav > a::after, .nav > button::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: transparent; }
.nav > a:hover::after, .nav > button[aria-expanded="true"]::after, .nav > .on::after { background: var(--zolc); }
.nav svg { width: 12px; height: 12px; }
.nag-p { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ikb { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: var(--r); position: relative; gap: 6px; padding: 0 8px; }
.ikb:hover { background: var(--kadr); }
.ikb svg { width: 22px; height: 22px; }
.jez { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.jez b { color: var(--tusz); } .jez span { color: var(--tusz2); font-weight: 500; }
/* [19.10, Jerzy: „przerobić na flagę i dropdown”] język = flaga + skrót, pod spodem lista języków jak menu Okazje; lista równana do prawej krawędzi paska */
.jez-dd { height: 44px; }
.jez-dd > .jez { gap: 6px; padding: 0 8px 0 10px; height: 44px; min-width: 0; border-radius: var(--r); font-size: 14px; }
.jez-dd > .jez::after { display: none; }
.jez-dd > .jez:hover, .jez-dd.otw > .jez { background: var(--kadr); }
.jez-dd > .jez svg:last-child { width: 12px; height: 12px; transition: transform .25s var(--p2o); }
.fl { width: 20px; height: 14px; border-radius: 2px; overflow: hidden; flex: none; display: block; outline: 1px solid var(--linia); outline-offset: -1px; }   /* kolory flag = barwy flag, nie palety [D] */
.jez-dd .dd-p { left: auto; right: 0; min-width: 176px; top: calc(100% + 4px); border-top: 1px solid var(--linia); border-radius: var(--r); padding: 6px; }
.jez-dd .dd-p a { justify-content: flex-start; gap: 10px; font-size: 15px; }
.jez-dd .dd-p a[aria-current="true"] { color: var(--tusz); font-weight: 600; }
.jez-dd .dd-p a[aria-current="true"]::after { content: ''; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--zolc); }
.licz { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--zolc); color: var(--tusz);
  font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.licz[hidden] { display: none; }
.burger { display: none; }

/* mega-menu w kolumnach osi [SPEC §3.1, research W6] */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--linia); display: none; }
.mega.otw { display: block; }
.mega-in { display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 40px; padding: 32px var(--pole) 40px; max-width: 1440px; margin: 0 auto; }
.mega h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tusz2); font-weight: 600; margin-bottom: 12px; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-weight: 500; }
.mega li a:hover { color: var(--granat); }
.mega li a i { font-style: normal; color: var(--tusz2); font-size: 14px; font-weight: 400; }
.mega .wsz { margin-top: 10px; display: inline-block; }
.mega-z { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mega-z a { display: block; font-size: 14px; font-weight: 500; }
.mega-z img { aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: var(--kadr); margin-bottom: 8px; }
.mega-z span { display: block; color: var(--tusz2); font-weight: 400; }

/* menu telefonu [SPEC §3.1] */
.szuf { position: fixed; inset: 0; z-index: 80; display: none; }
.szuf.otw { display: block; }
.szuf-tlo { position: absolute; inset: 0; background: rgba(22,23,31,.38); }
.szuf-p { position: absolute; top: 0; bottom: 0; background: #fff; width: min(440px, 100%); overflow-y: auto; display: flex; flex-direction: column; }
.szuf-p.l { left: 0; } .szuf-p.r { right: 0; }
.szuf-g { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--linia); position: sticky; top: 0; background: #fff; z-index: 2; }
.szuf-g b { font-size: 18px; }
.szuf-t { padding: 16px; flex: 1; }
.mm-szukaj { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid var(--linia2); border-radius: var(--r); margin-bottom: 8px; }
.mm-szukaj input { border: 0; outline: 0; flex: 1; min-width: 0; background: none; font-size: 16px; }
.mm-szukaj svg { width: 20px; height: 20px; color: var(--tusz2); }
.mm-sek { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tusz2); font-weight: 600; margin: 22px 0 4px; }
.mm-w { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--linia); font-weight: 500; }
.mm-w img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
.mm-w i { margin-left: auto; font-style: normal; color: var(--tusz2); font-size: 14px; font-weight: 400; }

/* ---------- hero [SPEC §3.2.1: 0,6 ekranu, ruch tylko tu] */
.hero { position: relative; height: 60vh; min-height: 440px; max-height: 640px; overflow: hidden; background: #f3f4f6; }
.hero video, .hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-t { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero-tx { max-width: 540px; }
.eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--tusz2); margin-bottom: 14px; }
.hero h1 { font-size: 52px; line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; }
.hero p { font-size: 18px; color: #2c2d3a; margin: 18px 0 28px; max-width: 520px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* pasek obietnic [SPEC §3.2.2] — doklejony do hero, jedna sekcja wejścia */
.obiet { border-bottom: 1px solid var(--linia); }
.obiet ul { list-style: none; margin: 0 auto; padding: 0 var(--pole); max-width: 1440px; display: grid; grid-template-columns: repeat(3, 1fr); }   /* [Yuri 21.10] 3 obietnice: bez „Projekt do akceptacji” */
.obiet li { padding: 20px 24px 20px 0; display: flex; gap: 12px; align-items: flex-start; }
.obiet li + li { padding-left: 24px; border-left: 1px solid var(--linia); }
.obiet svg { width: 22px; height: 22px; flex: none; color: var(--granat); margin-top: 2px; }
.obiet b { display: block; font-weight: 600; }
.obiet span { font-size: 14px; color: var(--tusz2); }

/* ---------- sekcje */
.sek { padding-top: 64px; }
.sek-g { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 24px; }
.siatka { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; }
.pas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
/* [Yuri 12.10] lista zestawów: mozaika to kilka produktów w jednym kadrze — 3 w rzędzie (szeroki ekran 4), nie 5 */
.siatka.siatka-z { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
@media (min-width: 1700px) { .siatka.siatka-z { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .siatka.siatka-z { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .siatka.siatka-z { grid-template-columns: 1fr; } }
.siatka-z > .kom-nm { aspect-ratio: 1; align-self: start; }   /* kafel „Szukasz innego zestawu?” = wysokość mozaiki, nie całej karty */
.pas.z4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* kafel produktu [SPEC §5] */
.kaf { display: flex; flex-direction: column; min-width: 0; }
.kaf-f { position: relative; aspect-ratio: 1; background: var(--kadr); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.kaf-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .55s var(--p1o); }   /* [19.10, Jerzy: „drugie zdjęcie wjeżdża za ostro, za szybko”] przenikanie 0,55 s power1.out, wcześniej 0,2 s */
.kaf-f .kaf-2 { opacity: 0; }
@media (hover: hover) { .kaf:hover .kaf-f .kaf-2 { opacity: 1; } }
.kaf-n { font-weight: 500; line-height: 1.35; }
.kaf:hover .kaf-n { text-decoration: underline; text-underline-offset: 3px; }
.kaf-c { font-weight: 700; margin-top: 4px; }
.kaf-o { font-size: 14px; color: var(--tusz2); }
.kaf-k { display: flex; gap: 6px; margin-top: 8px; }
.kaf-k i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
/* [Yuri 13.10, wzór Monday] sklep hurtowy: nazwa mówi najgłośniej, cena „od” cicho pod nią, minimum małe na kadrze */
.kaf.hurt .kaf-n { font-weight: 650; font-size: 17px; line-height: 1.3; }
.kaf.hurt .kaf-c { font-weight: 400; color: var(--tusz2); margin-top: 2px; }
.kaf.hurt .kaf-c .mini { font-size: inherit; }
.kaf-min { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-size: 13px; line-height: 1; color: var(--tusz2); pointer-events: none; }
@media (max-width: 600px) { .kaf.hurt .kaf-n { font-size: 15px; } .kaf-min { left: 10px; bottom: 9px; font-size: 12px; } }
.plak { position: absolute; left: 10px; top: 10px; z-index: 2; background: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
/* kafel zestawu [SPEC §5] */
.kaf.zes .kaf-f { background: var(--kadr); }
/* kafel kategorii [SPEC §5] */
.kat .kaf-f { background: var(--marka10); }
.kat .kaf-n { font-weight: 600; }
.kat .kaf-o { margin-top: 2px; }
/* kafel komunikatu [SPEC §3.4, §5] */
/* kafel okazji sezonowej [SPEC §5] */
.sez { position: relative; border-radius: var(--r); overflow: hidden; background: #eef0f3; display: block; min-height: 100%; }
.sez img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.sez div { position: relative; padding: 22px; max-width: 70%; }
.sez b { display: block; font-size: 22px; line-height: 1.2; margin: 6px 0 12px; }

/* okazje / dla kogo z produktami [SPEC §3.2.4–5] — sygnatura: typograficzne zakładki */
.zak { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 28px; border-bottom: 1px solid var(--linia); }
.zak button { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--tusz2); padding: 4px 0 14px; position: relative; min-height: 44px; }
.zak button:hover { color: var(--tusz); }
.zak button[aria-selected="true"] { color: var(--tusz); }
.zak button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--zolc); }
/* [Yuri 12.10] wariant zestawu (Basic / Premium) pod zakładkami rodzajów: cichy przełącznik z ceną, zaznaczenie atramentem */
.zak-w { display: inline-flex; gap: 4px; padding: 4px; margin: -12px 0 24px; border-radius: 999px; background: var(--kadr); }
.zak-w[hidden] { display: none; }
.zak-w button { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--tusz2); transition: background .2s var(--p2o), color .2s var(--p2o); }
.zak-w button span { font-weight: 400; margin-left: 6px; }
.zak-w button[aria-selected="true"] { background: #fff; color: var(--tusz); box-shadow: 0 1px 2px rgba(20,20,30,.08); }
.zak-w button:focus-visible { outline: 2px solid var(--granat); outline-offset: 2px; }
.zak button i { font-style: normal; font-size: 14px; font-weight: 500; color: var(--tusz2); margin-left: 6px; }
.zak-op { color: var(--tusz2); margin: -12px 0 24px; font-size: 15px; }

/* zakończenie [SPEC §3.2.7] */
.koniec { margin-top: 80px; background: var(--kadr); }
.koniec .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.koniec h2 { font-size: 32px; }
.koniec p { margin: 6px 0 0; color: var(--tusz2); font-size: 18px; }

/* ---------- okruszki + nagłówek listy */
.okr { font-size: 14px; color: var(--tusz2); padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.okr a:hover { color: var(--tusz); text-decoration: underline; }
.okr b { color: var(--tusz); font-weight: 500; }
.lista-g { padding: 18px 0 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.lista-g h1 { font-size: 40px; line-height: 1.08; letter-spacing: -0.025em; }
.lista-g p { margin: 8px 0 0; color: var(--tusz2); max-width: 640px; }
.chipy { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--linia2); border-radius: 999px; font-size: 15px; font-weight: 500; background: #fff; white-space: nowrap; }
.chip:hover { border-color: var(--tusz); }
.chip i { font-style: normal; color: var(--tusz2); font-size: 13px; }
.chip[aria-pressed="true"] { background: var(--tusz); border-color: var(--tusz); color: #fff; }
.chip[aria-pressed="true"] i { color: #c9cad6; }
.chip:disabled { opacity: .4; cursor: default; }

/* pasek filtrów — panel cech + druga oś, liczniki przeliczane [SPEC §3.3, research W2] */
.filtry { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); margin-bottom: 28px; position: relative; }
.f-dd { position: relative; }
.f-dd > button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r); font-weight: 500; border: 1px solid transparent; }
.f-dd > button:hover, .f-dd > button[aria-expanded="true"] { border-color: var(--linia2); }
.f-dd > button b { background: var(--tusz); color: #fff; font-size: 12px; min-width: 20px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; padding: 0 5px; }
.f-dd svg { width: 12px; height: 12px; }
.f-pan { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 260px; background: #fff; border: 1px solid var(--linia2); border-radius: var(--r); padding: 8px; display: none; }
.f-pan.otw { display: block; }
.f-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: 4px; cursor: pointer; }
.f-opt:hover { background: var(--kadr); }
.f-opt input { width: 18px; height: 18px; accent-color: var(--granat); margin: 0; }
.f-opt span { flex: 1; } .f-opt i { font-style: normal; color: var(--tusz2); font-size: 14px; }
.f-opt.zero { color: #9a9bab; cursor: default; }
.f-p { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.f-p .ile { color: var(--tusz2); font-size: 14px; }
.f-p select { min-height: 40px; border: 1px solid var(--linia2); border-radius: var(--r); padding: 0 34px 0 12px; background: #fff; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2316171F' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; }
.aktywne { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 24px; }
.aktywne button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; background: var(--kadr); border-radius: 999px; font-size: 14px; }
.aktywne button svg { width: 10px; height: 10px; }
.aktywne .wyczysc { background: none; text-decoration: underline; }
.f-mob { display: none; }
.pusto { padding: 48px 0; text-align: center; color: var(--tusz2); }
.pusto b { display: block; color: var(--tusz); font-size: 20px; margin-bottom: 8px; }

/* FAQ */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linia); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; font-weight: 600; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--tusz2); }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 20px; color: #33343f; max-width: 720px; }

/* ---------- produkt [SPEC §3.5] */
.karta { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; padding-top: 20px; align-items: start; }
.gal { position: sticky; top: 88px; display: grid; grid-template-columns: 76px 1fr; gap: 14px; }
.gal-min { display: flex; flex-direction: column; gap: 10px; }
.gal-min button { aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--kadr); border: 1px solid transparent; }
.gal-min button[aria-current="true"] { border-color: var(--tusz); }
.gal-min img { width: 100%; height: 100%; object-fit: cover; }
.gal-d { position: relative; aspect-ratio: 1; background: var(--kadr); border-radius: var(--r); overflow: hidden; cursor: zoom-in; }
/* [Yuri 12.10 po teście: „okno główne produktu nie mieści się w kadrze” — zasada z benchmarków] zdjęcie główne karty
   (produkt i zestaw) zawsze w całości na pierwszym ekranie: bok kwadratu ≤ wysokość okna minus nagłówek i miniatury */
@media (min-width: 761px) { .gal-d { width: min(100%, calc(100dvh - 150px)); }
  /* [Yuri 12.10 „nie widzę pozostałych zdjęć bez scrolla”] zestaw jak produkt: miniatury kolumną po lewej, całość na pierwszym ekranie */
  .zgal { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; width: min(100%, calc(100dvh - 60px)); }
  .zgal .zgal-m { order: -1; grid-template-columns: 1fr; grid-auto-rows: 76px; margin-top: 0; }
  .zgal .gal-pe { right: 26px; bottom: 26px; } }
@media (max-width: 760px) { .zgal .gal-pe { display: none; } }
.gal-d img { width: 100%; height: 100%; object-fit: cover; }
.gal-d .gal-str { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s ease-out; }
.gal-d:hover .gal-str, .gal-str:focus-visible { opacity: 1; }
.gal-str.l { left: 14px; } .gal-str.p { right: 14px; }
.gal-str svg { width: 16px; height: 16px; }
.gal-pe { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.gal-pe svg { width: 18px; height: 18px; }
.miejsce { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 18px; color: var(--tusz2); font-size: 13px; line-height: 1.35;
  background: repeating-linear-gradient(135deg, var(--kadr) 0 12px, #e8e8ed 12px 24px); }
.miejsce b { display: block; color: var(--tusz); font-size: 15px; }
.gal-min .miejsce { font-size: 9px; padding: 4px; } .gal-min .miejsce b { font-size: 9px; }
.kropki { display: none; }

.kup h1 { font-size: 32px; line-height: 1.12; letter-spacing: -0.02em; }
.kup .kod { font-size: 14px; color: var(--tusz2); margin-top: 6px; }
.cena { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 18px 0 4px; }
.cena b { font-size: 28px; font-weight: 700; white-space: nowrap; }
.cena span { color: var(--tusz2); font-size: 15px; }
.progi { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linia); border-radius: var(--r); margin: 18px 0 8px; overflow: hidden; }
.progi div { padding: 10px 12px; font-size: 14px; }
.progi div + div { border-left: 1px solid var(--linia); }
.progi b { display: block; font-size: 15px; }
.progi span { color: var(--tusz2); }
.progi .on { background: var(--marka10); box-shadow: inset 0 -3px 0 var(--granat); }
.pole { margin-top: 24px; }
.pole-g { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.etk { font-weight: 600; }
.etk b { font-weight: 400; color: var(--tusz2); }
.wlink { color: var(--granat); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.kolory { display: flex; gap: 10px; }
.kolory button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px solid transparent; }
.kolory button[aria-checked="true"] { border-color: var(--tusz); }
.kolory i { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); }
.tryb { display: inline-flex; background: var(--kadr); border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.tryb button { min-height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tusz2); }
.tryb button[aria-selected="true"] { background: #fff; color: var(--tusz); }
.rozm { border: 1px solid var(--linia); border-radius: var(--r); }
.rozm-w { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 6px 8px 6px 14px; min-height: 52px; }
.rozm-w + .rozm-w { border-top: 1px solid var(--linia); }
.rozm-w b { font-weight: 600; }
.rozm-w .st { font-size: 13px; color: var(--tusz2); }
.rozm-w .st .malo { color: #8a4b00; font-weight: 600; }
.rozm-w.brak { color: #9a9bab; }
.rozm-suma { display: flex; justify-content: space-between; padding: 12px 14px; background: var(--kadr); border-top: 1px solid var(--linia); font-size: 15px; }
.rozm-zeruj { appearance: none; background: none; border: 0; padding: 0 0 0 10px; font: inherit; font-size: 13px; color: var(--tusz2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }   /* [21.10, Yuri] małe, nie trzeci przycisk */
.rozm-zeruj:hover { color: var(--tusz); }
.rozm-zeruj:focus-visible { outline: 2px solid var(--granat); outline-offset: 2px; }
.licznik { display: inline-flex; align-items: center; border: 1px solid var(--linia2); border-radius: var(--r); height: 44px; }
.licznik button { width: 40px; height: 100%; font-size: 18px; }
.licznik button:disabled { color: #b5b6c2; cursor: default; }
.licznik input { width: 52px; text-align: center; border: 0; height: 100%; font-weight: 600; background: none; -moz-appearance: textfield; }
.licznik input::-webkit-inner-spin-button { -webkit-appearance: none; }
.licznik.mal { height: 40px; } .licznik.mal input { width: 40px; } .licznik.mal button { width: 34px; }
.pigulki { display: flex; flex-wrap: wrap; gap: 8px; }
.pigulki button { min-width: 52px; min-height: 44px; border: 1px solid var(--linia2); border-radius: var(--r); font-weight: 600; padding: 0 10px; }
.pigulki button[aria-checked="true"] { border-color: var(--tusz); background: var(--tusz); color: #fff; }
.pigulki button:disabled { color: #b5b6c2; text-decoration: line-through; cursor: default; }
.tab-r { width: 100%; border-collapse: collapse; font-size: 14px; margin: 4px 0 14px; }
.tab-r th, .tab-r td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linia); }
.tab-r th { color: var(--tusz2); font-weight: 500; }
.kupuj { display: flex; gap: 10px; margin-top: 22px; }
.kupuj .btn { flex: 1; }
.fakty { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-size: 15px; }
.fakty li { display: flex; gap: 10px; align-items: flex-start; }
.fakty svg { width: 18px; height: 18px; color: var(--granat); flex: none; margin-top: 3px; }
.akord { margin-top: 28px; border-top: 1px solid var(--linia); }
.akord details { border-bottom: 1px solid var(--linia); }
.akord summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-weight: 600; }
.akord summary::-webkit-details-marker { display: none; }
.akord summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--tusz2); }
.akord details[open] summary::after { content: '−'; }
.akord .tr { padding: 0 0 18px; color: #33343f; font-size: 15px; }
.akord dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0; }
.akord dt { color: var(--tusz2); } .akord dd { margin: 0; }
.dobierz { margin-top: 28px; }
.dob { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linia); }
.dob img { width: 64px; height: 64px; border-radius: 4px; background: var(--kadr); object-fit: cover; }
.dob a.n { font-weight: 500; line-height: 1.3; display: block; }
.dob span { font-size: 14px; color: var(--tusz2); }
.dob button { font-weight: 600; color: var(--granat); min-height: 44px; padding: 0 10px; border-radius: var(--r); }
.dob button:hover { background: var(--marka10); }
.pasuje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; }
.pasuje > span { color: var(--tusz2); font-size: 15px; margin-right: 4px; }

/* zestaw [SPEC §3.6] */
.zgal { background: var(--kadr); border-radius: var(--r); padding: 14px; }   /* [Yuri 12.10] bez sticky: rozwinięcie składu nie rusza zdjęcia */
.zgal-d { aspect-ratio: 1; border-radius: 4px; overflow: hidden; cursor: zoom-in; }
.zgal-d img { width: 100%; height: 100%; object-fit: cover; }
.zgal-m { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.zgal-m button { aspect-ratio: 1; border-radius: 4px; overflow: hidden; border: 1px solid transparent; }
.zgal-m button[aria-current="true"] { border-color: var(--tusz); }
.zgal-m img { width: 100%; height: 100%; object-fit: cover; }
.sklad { border: 1px solid var(--linia); border-radius: var(--r); margin-top: 18px; }
.sklad details + details { border-top: 1px solid var(--linia); }
.sklad summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px 1fr auto 20px; gap: 12px; align-items: center; padding: 8px 14px 8px 8px; min-height: 64px; }
.sklad summary::-webkit-details-marker { display: none; }
.sklad summary::after { content: '+'; color: var(--tusz2); font-size: 20px; text-align: center; }
.sklad details[open] summary::after { content: '−'; }
.sklad summary img { width: 48px; height: 48px; border-radius: 4px; background: var(--kadr); object-fit: cover; }
.sklad summary span { font-size: 14px; color: var(--tusz2); }
.sklad .tr { padding: 0 14px 14px 68px; font-size: 14px; color: #33343f; }

/* ---------- koszyk [SPEC §3.7] */
.kosz { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; padding-top: 8px; align-items: start; }
.poz { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--linia); }
.poz img { width: 96px; height: 96px; border-radius: var(--r); background: var(--kadr); object-fit: cover; }
.poz .n { font-weight: 600; }
.poz .w { font-size: 14px; color: var(--tusz2); margin-top: 2px; }
.poz .akc { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.poz .usun { font-size: 14px; color: var(--tusz2); text-decoration: underline; min-height: 44px; }
.poz .cen { text-align: right; font-weight: 700; }
.poz .cen span { display: block; font-weight: 400; font-size: 14px; color: var(--tusz2); }
.podp { font-size: 14px; background: var(--marka10); border-radius: 4px; padding: 8px 12px; margin-top: 12px; }
.podp b { color: var(--granat); }
.podsum { border: 1px solid var(--linia); border-radius: var(--r); padding: 24px; position: sticky; top: 88px; }
.podsum h2 { font-size: 20px; margin-bottom: 14px; }
.wiersz { display: flex; justify-content: space-between; padding: 6px 0; }
.wiersz.suma { border-top: 1px solid var(--linia); margin-top: 10px; padding-top: 14px; font-weight: 700; font-size: 20px; }
.form-p { margin-top: 16px; }
.form-p label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.form-p label span { font-weight: 400; color: var(--tusz2); }
.form-p input, .form-p textarea, .form-p select { width: 100%; min-height: 46px; border: 1px solid var(--linia2); border-radius: var(--r); padding: 10px 12px; background: #fff; font-size: 16px; }
.form-p textarea { min-height: 90px; resize: vertical; }
.form-p input:focus, .form-p textarea:focus { outline: 2px solid var(--granat); outline-offset: 0; border-color: var(--granat); }
.dodano { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding: 4px 0 18px; border-bottom: 1px solid var(--linia); }
.dodano img { width: 72px; height: 72px; border-radius: 4px; background: var(--kadr); object-fit: cover; }
.ok-ik { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; }
.ok-ik svg { width: 18px; height: 18px; }

/* szukaj [SPEC §3.7] */
.szukaj-ov { position: fixed; inset: 0; z-index: 70; display: none; }
.szukaj-ov.otw { display: block; }
.szukaj-p { position: relative; background: #fff; border-bottom: 1px solid var(--linia); padding: 18px 0 28px; }
.szukaj-pole { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--tusz); padding: 6px 0; }
.szukaj-pole input { border: 0; outline: 0; flex: 1; font-size: 26px; font-weight: 500; min-width: 0; background: none; }
.szukaj-pole svg { width: 26px; height: 26px; }
.podpow { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; margin-top: 20px; }
.podpow h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tusz2); margin-bottom: 8px; font-weight: 600; }
.podpow a.w { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.podpow a.w img { width: 48px; height: 48px; border-radius: 4px; background: var(--kadr); object-fit: cover; }
.podpow a.w span { color: var(--tusz2); font-size: 14px; display: block; }
.znajdziemy { background: var(--kadr); border-radius: var(--r); padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
.znajdziemy b { font-size: 24px; display: block; letter-spacing: -0.01em; }
.znajdziemy span { color: var(--tusz2); }
.znajdziemy.mala { padding: 18px 24px; margin-bottom: 0; } .znajdziemy.mala b { display: inline; font-size: 18px; } .znajdziemy.mala span { margin-left: 6px; }   /* [19.10, ekrany stanu] karta niższa, jedna linia; okładka tylko na pustych ekranach */

/* stopka [SPEC §3.7: sprzedawca = merch.help] */
.stopka { margin-top: 96px; border-top: 1px solid var(--linia); font-size: 15px; }
.stopka .wrap { padding-top: 48px; padding-bottom: 32px; }
.st-k { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.st-k h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tusz2); font-weight: 600; margin-bottom: 12px; }
.st-k ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.st-k a:hover { text-decoration: underline; }
.st-k p { margin: 0 0 10px; color: #33343f; }
.st-dol { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linia); color: var(--tusz2); font-size: 13px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* lightbox [SPEC §3.5, research zachowanie-zdjec §5] */
.lb { position: fixed; inset: 0; z-index: 100; background: #F7F7F9; display: none; }
.lb.otw { display: block; }
.lb-tor { position: absolute; inset: 64px 0 24px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lb-tor::-webkit-scrollbar { display: none; }
.lb-sl { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; overflow: hidden; touch-action: pan-x pinch-zoom; }
.lb-sl img { max-width: min(92vw, 1100px); max-height: 100%; object-fit: contain; cursor: zoom-in; transition: transform .2s ease-out; }
.lb-sl img.zoom { transform: scale(2.2); cursor: zoom-out; transition: transform .4s var(--p2o), transform-origin .25s var(--p2o); }   /* origin = kursor: przesuwasz, oglądasz całość */
.lb-sl .miejsce { width: min(80vw, 700px); height: min(80vw, 700px); }
.lb-g { position: absolute; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.lb-g span { font-weight: 600; }
.lb-s { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--linia); display: grid; place-items: center; z-index: 2; }
.lb-s.l { left: 20px; } .lb-s.p { right: 20px; }
.lb-s svg { width: 18px; height: 18px; }

/* makieta: pasek podglądu (nie jest częścią sklepu) */
.mak { position: fixed; left: 12px; bottom: 12px; z-index: 90; display: flex; gap: 8px; align-items: center; background: #fff; border: 1px dashed #8b8ca0;
  border-radius: 8px; padding: 6px 8px 6px 12px; font: 500 12px/1.2 ui-monospace, Menlo, monospace; color: #44455a; }
.mak button, .mak select { font: inherit; border: 1px solid var(--linia2); border-radius: 4px; padding: 5px 8px; background: #fff; min-height: 30px; }
.mak button[aria-pressed="true"] { background: var(--tusz); color: #fff; border-color: var(--tusz); }
.czysto .mak { display: none; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tusz); color: #fff; padding: 12px 18px; border-radius: var(--r); z-index: 120; font-size: 15px; }

/* ---------- tablet */
@media (max-width: 1180px) {
  :root { --pole: 24px; }
  .siatka, .pas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mega-in { grid-template-columns: 1fr 1fr 1fr; }
  .mega-in > :last-child { grid-column: 1 / -1; }
  .karta, .kosz { gap: 32px; }
}
@media (max-width: 960px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .obiet ul { grid-template-columns: 1fr 1fr; }
  .obiet li:nth-child(3) { border-left: 0; padding-left: 0; }
  .obiet li:nth-child(n+3) { border-top: 1px solid var(--linia); }
  .siatka, .pas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .karta, .kosz { grid-template-columns: 1fr; }
  .gal, .zgal, .podsum { position: static; }
  .st-k { grid-template-columns: 1fr 1fr; }
}
/* ---------- telefon */
@media (max-width: 760px) {
  :root { --pole: 16px; }
  body { font-size: 16px; }
  .nag-in { height: 60px; gap: 4px; }
  .logo img { height: 28px; }
  .jez, .jez-dd, .konto { display: none; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 16px; margin: 12px 0 20px; }
  .cta .btn, .cta .btn2 { width: 100%; }
  .obiet li { padding: 14px 10px 14px 0; gap: 8px; }
  .obiet li + li { padding-left: 10px; }
  .obiet svg { width: 18px; height: 18px; }
  .obiet b { font-size: 14px; } .obiet span { font-size: 13px; }
  .sek { padding-top: 44px; }
  .pas.z4 > * { flex-basis: 70%; }
  .h2 { font-size: 23px; }
  .siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  /* przewijane pasy na telefonie [SPEC §3.2.3] */
  .pas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pole); gap: 12px; margin: 0 calc(-1 * var(--pole)); padding: 0 var(--pole) 4px; scrollbar-width: none; }
  .pas::-webkit-scrollbar { display: none; }
  .pas > * { flex: 0 0 42%; scroll-snap-align: start; }
  .zak { flex-wrap: nowrap; overflow-x: auto; gap: 22px; scrollbar-width: none; margin-left: calc(-1 * var(--pole)); margin-right: calc(-1 * var(--pole)); padding: 0 var(--pole); }
  .zak::-webkit-scrollbar { display: none; }
  .zak button { font-size: 18px; white-space: nowrap; }
  .sez div { max-width: 100%; padding: 14px; } .sez b { font-size: 17px; }
  .koniec .wrap { flex-direction: column; align-items: stretch; padding-top: 40px; padding-bottom: 40px; }
  .koniec h2 { font-size: 24px; }
  .lista-g h1 { font-size: 30px; }
  .lista-g { padding-bottom: 14px; }
  .chipy { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--pole)) 12px; padding: 0 var(--pole); scrollbar-width: none; }
  .chipy::-webkit-scrollbar { display: none; }
  .filtry .f-dd { display: none; }
  .f-mob { display: inline-flex; }
  .f-p { margin-left: auto; gap: 8px; }
  .f-p .ile { display: none; }
  .aktywne { margin-top: -16px; }
  /* produkt: zdjęcie przed tytułem, karuzela + kropki */
  .karta { padding-top: 8px; gap: 20px; }
  .gal { display: block; margin: 0 calc(-1 * var(--pole)); }
  .gal-min { display: none; }
  .gal-d { border-radius: 0; aspect-ratio: auto; cursor: default; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .gal-d::-webkit-scrollbar { display: none; }
  .gal-d > .sl { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center; }
  .gal-d .gal-str, .gal-d .gal-pe { display: none; }
  .kropki { display: flex; justify-content: center; gap: 8px; padding: 12px 0 0; }
  .kropki i { width: 7px; height: 7px; border-radius: 50%; background: var(--linia2); }
  .kropki i.on { background: var(--tusz); width: 18px; border-radius: 4px; }
  .kup h1 { font-size: 26px; }
  .progi div { padding: 8px; font-size: 13px; } .progi b { font-size: 14px; }
  .akord dl { grid-template-columns: 110px 1fr; }
  .zgal { margin: 0 calc(-1 * var(--pole)); border-radius: 0; }
  .poz { grid-template-columns: 72px 1fr; }
  .poz img { width: 72px; height: 72px; }
  .poz .cen { grid-column: 2; text-align: left; }
  .podpow { grid-template-columns: 1fr; gap: 20px; }
  .szukaj-pole input { font-size: 20px; }
  .znajdziemy { flex-direction: column; align-items: stretch; padding: 22px; }
  .st-k { grid-template-columns: 1fr; gap: 28px; }
  .lb-s { display: none; }
  .lb-sl img { max-width: 100vw; }
  .mak { left: 8px; right: auto; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .hero video { display: none; }
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* ===== Runda 3 (11.10): poprawki z researchu, nie z wyczucia ===== */
/* [bench: Monday, Packhelp] treść węższa niż ekran — „Zobacz wszystkie” nie stoi na krawędzi */
.wrap { max-width: 1320px; }
.mega-in, .obiet ul { max-width: 1320px; }
/* [osie-nawigacji §1: Monday, Google, SpaceX; makieta 10.10; żywy CGH] kategorie wprost w pasku, potem osie i zestawy */
.nav { gap: 0; }
.nav > a, .nav > button { padding: 0 11px; font-size: 15px; white-space: nowrap; }
.nav .sep { width: 1px; height: 22px; background: var(--linia2); align-self: center; margin: 0 8px; }
/* [Yuri 18.10] belka zawsze w jednym rzędzie: kategorie przewijane w bok (gdy się nie mieszczą), logo nigdy się nie kurczy */
.logo { flex: none; }
.nav { min-width: 0; flex: 0 1 auto; }
.nav-k { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.nav-k::-webkit-scrollbar { display: none; }
.nav-k > a { display: inline-flex; align-items: center; padding: 0 11px; height: 100%; font-size: 15px; font-weight: 500; white-space: nowrap; position: relative; }
.nav-k > a::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 3px; background: transparent; }
.nav-k > a:hover::after, .nav-k > .on::after { background: var(--zolc); }
.nav > .dd, .nav > a { flex: none; }
@media (max-width: 1240px) { .nav { display: none; } .burger { display: inline-flex; } }
/* [bench: Monday „Christmas Essentials” + View all w linii tytułu; Packhelp tytuł + opis + przycisk] nagłówek rzędu */
.sek-g { align-items: flex-end; margin-bottom: 20px; }
.sek-t { min-width: 0; }
.sek-t h2 a { display: inline-flex; align-items: center; gap: 8px; }
.sek-t h2 a:hover { color: var(--granat); }
.sek-t h2 a svg { width: 18px; height: 18px; transition: transform .15s ease-out; }
.sek-t h2 a:hover svg { transform: translateX(3px); }
.sek-t p { margin: 4px 0 0; color: var(--tusz2); font-size: 15px; }
.sek-p { display: flex; align-items: center; gap: 8px; flex: none; }
.pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--linia2); border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pill:hover { border-color: var(--tusz); }
.strz { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linia2); display: grid; place-items: center; background: #fff; }
.strz:hover:not(:disabled) { border-color: var(--tusz); }
.strz:disabled { opacity: .35; cursor: default; }
.strz svg { width: 14px; height: 14px; }
/* [bench: Monday, Packhelp — rząd to karuzela: 5 widocznych, kolejne za strzałką] */
.karu { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.karu::-webkit-scrollbar { display: none; }
.karu > * { flex: 0 0 calc((100% - 80px) / 5); scroll-snap-align: start; }
.siatka4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* [kategoria-komunikaty.html, zaakceptowane 11.10] kafel komunikatu */
.kom { aspect-ratio: auto; border: 0; padding: 0; display: flex; flex-direction: column; }
.kom .kom-f { aspect-ratio: 1; border-radius: var(--r); background: linear-gradient(160deg, #fff, #eef0fb); border: 1px solid var(--linia); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 24px; }
.kom .kom-f span { font-size: 24px; line-height: 1.15; color: var(--tusz); font-weight: 400; letter-spacing: -0.01em; }
.kom .kom-f em { font-style: normal; font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--granat); border: 1px solid var(--linia); background: #fff; padding: 12px 16px; border-radius: 999px; }
.kom:hover .kom-f { border-color: var(--linia2); }
.kom:hover .kom-f em { border-color: var(--granat); }
@media (max-width: 1180px) { .karu > * { flex-basis: calc((100% - 60px) / 4); } }
@media (max-width: 960px) { .karu > * { flex-basis: calc((100% - 40px) / 3); } .siatka4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .karu { gap: 12px; margin: 0 calc(-1 * var(--pole)); padding: 0 var(--pole); scroll-padding-inline: var(--pole); }
  .karu > * { flex-basis: 42%; }
  .sek-p .strz { display: none; }
  .sek-t h2 { font-size: 22px; }
  .sek-t p { font-size: 14px; }
  .kom .kom-f { padding: 14px; } .kom .kom-f span { font-size: 17px; } .kom .kom-f em { font-size: 11px; padding: 10px 12px; }
}
.jez { white-space: nowrap; }
.kom .kom-f em { white-space: nowrap; letter-spacing: .08em; }
.siatkaZ { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 20px; }
/* [Yuri 12.10] przy wielu zestawach kafle zostają duże (3 na ekranie, jak przy dwóch + kaflu), reszta przewija się w poziomie */
@media (min-width: 761px) { .siatkaZ { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .siatkaZ > * { scroll-snap-align: start; } .siatkaZ::-webkit-scrollbar { display: none; } }
@media (max-width: 760px) {
  .siatkaZ { display: flex; overflow-x: auto; gap: 12px; margin: 0 calc(-1 * var(--pole)); padding: 0 var(--pole); scroll-snap-type: x mandatory; scroll-padding-inline: var(--pole); scrollbar-width: none; }
  .siatkaZ > * { flex: 0 0 62%; scroll-snap-align: start; }
}
.kom .kom-f em { max-width: 100%; }
@media (max-width: 1100px) { .kom .kom-f { padding: 16px; } .kom .kom-f span { font-size: 19px; } .kom .kom-f em { font-size: 11px; padding: 10px 12px; white-space: normal; } }
/* telefon: tytuł rzędu jest linkiem, przycisk „Zobacz wszystkie” byłby drugim celem i łamie nagłówek */
@media (max-width: 760px) { .sek-g .pill { display: none; } .sek-g { flex-wrap: nowrap; } }

.koniec + .stopka, main:has(> .koniec:last-child) + .stopka { margin-top: 0; }
/* telefon: obietnice jedną linią, bez dopisków (2 × 2 czytelnie, bez łamania „Odpowiadamy w 4 h”) */
@media (max-width: 760px) { .obiet li > div > span { display: none; } .obiet li { align-items: center; padding-top: 12px; padding-bottom: 12px; } .obiet b { font-size: 13px; line-height: 1.25; } }
@media (max-width: 760px) { .kom .kom-f em { white-space: nowrap; font-size: 10px; letter-spacing: .04em; padding: 8px 10px; } }

/* ===== Runda 5 (11.10): kadry z paczki (paczka-v2/manifest.json), rytm strony głównej, ruch z manifestu ===== */
:root { --noc: #141416;        /* [paczka manifest: stopka #1E1E20, grafit #3A3A3C] tło ciemnych pasów pod kadrami */
  --p2o: cubic-bezier(.215, .61, .355, 1);   /* power2.out [manifest ruchy_css, CLAUDE.md] */
  --p1o: cubic-bezier(.25, .46, .45, .94); } /* power1.out */
.karu > * { min-width: 0; }                  /* kafel nie rozpycha się treścią (ucięty produkt w rzędzie Upominki) */
.karu > .w2 { flex-basis: calc((100% - 80px) / 5 * 2 + 20px); }
@media (max-width: 1180px) { .karu > .w2 { flex-basis: calc((100% - 60px) / 4 * 2 + 20px); } }
@media (max-width: 960px) { .karu > .w2 { flex-basis: calc((100% - 40px) / 3 * 2 + 20px); } }
@media (max-width: 760px) { .karu > .w2 { flex-basis: 84%; } }
.pas.z6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kat .kaf-f { background: var(--kadr); }

/* hero: kadr z paczki + film Seedance (raz, bez pętli); tekst na ciemnej stronie kadru */
.hero { background: var(--noc); color: #fff; height: 58vh; min-height: 440px; max-height: 580px; }
.hero picture img, .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero video { opacity: 0; transition: opacity .6s var(--p2o); }
.hero video.gra { opacity: 1; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(21,19,31,.78) 0%, rgba(21,19,31,.5) 38%, rgba(21,19,31,0) 66%); }
.hero-t { z-index: 2; }
.hero .eyebrow { color: var(--zolc); }
.hero h1 { color: #fff; font-size: 54px; }
.hero p { color: rgba(255,255,255,.88); margin-bottom: 0; }
@media (max-width: 1100px) { .hero h1 { font-size: 44px; } .hero-tx { max-width: 460px; } }
@media (max-width: 760px) {
  .hero { height: 360px; min-height: 0; }
  .hero picture img { object-position: 50% 62%; }
  .hero::before { background: linear-gradient(0deg, rgba(21,19,31,.9) 0%, rgba(21,19,31,.55) 42%, rgba(21,19,31,0) 72%); }
  .hero-t { justify-content: flex-end; padding-bottom: 22px; }
  .hero h1 { font-size: 28px; } .hero p { font-size: 15px; margin-top: 10px; }
  .hero .eyebrow { margin-bottom: 8px; font-size: 12px; }
}

/* kafel komunikatu: pełna wysokość karty, tekst z dołem; foto = kadr paczki, gr = granat */
.kom { align-self: stretch; }
.kom .kom-f { aspect-ratio: auto; flex: 1; min-height: 100%; position: relative; overflow: hidden; border: 0; border-radius: var(--r);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 18px; padding: 24px; color: #fff; background: var(--granat); }
.siatka > .kom .kom-f { min-height: 0; }
.kom.foto .kom-f { background: var(--noc); }
.kom .kom-f > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--p2o); }
.kom.foto .kom-f::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(21,19,31,.05) 25%, rgba(21,19,31,.82) 100%); }
.kom .kom-f span { font-size: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; }
.kom .kom-t { position: relative; z-index: 2; display: block; }
.kom .kom-f .kom-h { display: block; font-size: 23px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.kom .kom-f .kom-h::after { content: ''; display: block; width: 44px; height: 3px; background: var(--zolc); margin-top: 14px; transform-origin: left; }
.kom .kom-f .kom-l { display: block; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.86); margin-top: 12px; max-width: 34ch; }
.kom .kom-f em { position: relative; z-index: 2; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: none; border: 0; padding: 0; border-radius: 0; white-space: nowrap; }
.kom:hover .kom-f em { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) { .kom:hover .kom-f > img { transform: scale(1.03); } }
@media (max-width: 1100px) { .kom .kom-f { padding: 18px; } .kom .kom-f .kom-h { font-size: 19px; } .kom .kom-f .kom-l { font-size: 14px; } }
@media (max-width: 760px) { .kom .kom-f { padding: 14px; gap: 12px; } .kom .kom-f .kom-h { font-size: 17px; } .kom .kom-f .kom-h::after { margin-top: 10px; width: 32px; }
  .kom .kom-f .kom-l { font-size: 13px; margin-top: 8px; } .kom .kom-f em { font-size: 11px; letter-spacing: .04em; padding: 0; } }

/* okładka rzędu (2 kolumny): nazwa, rodzaje z liczbami, cel — biały tekst na kadrze albo granacie */
.okl { position: relative; overflow: hidden; border-radius: var(--r); background: var(--granat); color: #fff; padding: 28px; display: flex; flex-direction: column; align-self: stretch; }
.okl.foto { background: var(--noc); }
.okl > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--p2o); }
.okl.foto::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(21,19,31,.8) 0%, rgba(21,19,31,.45) 55%, rgba(21,19,31,.1) 100%); }
.okl > * { position: relative; z-index: 2; }
.okl > img { z-index: 0; }
.okl-n { display: block; color: var(--zolc); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.okl-h { display: block; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; max-width: 15ch; }
.okl-h:hover { text-decoration: underline; text-underline-offset: 4px; }
.okl-l { display: block; margin-top: 8px; color: rgba(255,255,255,.82); }
.okl-c { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 24px; max-width: 380px; }
.okl-c a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; font-size: 14px; font-weight: 500; background: rgba(21,19,31,.25); }
.okl-c a i { font-style: normal; opacity: .7; font-size: 13px; }
.okl-c a:hover { background: #fff; color: var(--tusz); border-color: #fff; }
.okl-cta { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.okl:not(:has(.okl-c)) .okl-cta { margin-top: auto; padding-top: 24px; }
.okl-cta:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) { .okl:hover > img { transform: scale(1.03); } }
@media (max-width: 1100px) { .okl { padding: 20px; } .okl-h { font-size: 24px; } }
@media (max-width: 760px) { .okl { padding: 16px; } .okl-h { font-size: 21px; } .okl-c a { min-height: 32px; padding: 0 10px; font-size: 13px; } .okl-c { padding-top: 16px; } }

/* pas zestawów — jedyny pas na pełną szerokość [bench_dom: Shopify, Monday „Merch Packs”] */
.pasz { position: relative; margin-top: 80px; background: var(--noc); color: #fff; overflow: hidden; }
.pasz-tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pasz-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding-top: 64px; padding-bottom: 64px; align-items: center; }
.pasz-f { display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--kadr); }
.pasz-f img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--p2o); }
@media (hover: hover) { .pasz-f:hover img { transform: scale(1.03); } }
.pasz-g { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 18px; }
.pasz-g .h2 a { display: inline-flex; align-items: center; gap: 8px; } .pasz-g .h2 svg { width: 18px; height: 18px; }
.pasz-g .h2 a:hover { color: var(--zolc); }
.pasz-inny { font-size: 15px; color: rgba(255,255,255,.82); text-decoration: underline; text-underline-offset: 3px; }
.pasz-inny:hover { color: #fff; }
.zak.ciem { border-bottom-color: rgba(255,255,255,.2); margin-bottom: 26px; }
.zak.ciem button { color: rgba(255,255,255,.62); font-size: 20px; }
.zak.ciem button:hover, .zak.ciem button[aria-selected="true"] { color: #fff; }
.pasz-h { font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; }
.pasz-h a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pasz-c { margin: 10px 0 20px; color: rgba(255,255,255,.82); }
.pasz-c b { color: #fff; font-size: 22px; margin-right: 4px; }
.pasz-s { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.pasz-s a { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-weight: 500; }
.pasz-s a:hover { color: var(--zolc); }
.pasz-s img { width: 48px; height: 48px; border-radius: 4px; background: var(--kadr); object-fit: cover; flex: none; }
.pasz-b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn.bial { background: #fff; color: var(--tusz); } .btn.bial:hover { background: #E6E6EC; }
.btn2.ciem { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); } .btn2.ciem:hover { border-color: #fff; }
@media (max-width: 960px) { .pasz-in { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; padding-bottom: 44px; } .pasz-f { max-width: 560px; } }
@media (max-width: 760px) { .pasz { margin-top: 56px; } .pasz-h { font-size: 26px; } .pasz-b .btn, .pasz-b .btn2 { flex: 1 1 100%; }
  .zak.ciem button { font-size: 17px; } .pasz-inny { font-size: 14px; } }

/* zakończenie i stopka: ciemny koniec strony na kadrach paczki (closing, footer) */
.koniec.foto { position: relative; background: var(--noc); color: #fff; overflow: hidden; margin-top: 96px; }
.koniec.foto picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.koniec.foto .wrap { position: relative; padding-top: 72px; padding-bottom: 72px; }
.koniec.foto p { color: rgba(255,255,255,.82); }
.stopka { background: #1E1E20 url(img/p2/footer.webp) center / cover no-repeat; color: rgba(255,255,255,.86); border-top: 0; }
.stopka .st-k h3 { color: rgba(255,255,255,.6); }
.stopka .st-k p { color: rgba(255,255,255,.8); }
.stopka .lnk { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.stopka .st-dol { border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.6); }
.stopka :focus-visible { outline-color: var(--zolc); }
.koniec.foto + .stopka, main:has(> .koniec:last-child) + .stopka { margin-top: 0; border-top: 1px solid rgba(255,255,255,.1); }

/* lepki pasek zakupu (telefon) [bench_flow: Swag „pasek zakupu”] */
.lepki { display: none; }
@media (max-width: 760px) {
  .lepki { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; align-items: center; gap: 12px; background: #fff; border-top: 1px solid var(--linia);
    padding: 10px var(--pole) calc(10px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .28s var(--p2o); }
  .lepki.on { transform: none; }
  .lepki > div { min-width: 0; flex: 1; }
  .lepki b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lepki span { font-size: 13px; color: var(--tusz2); }
  .lepki .btn { min-height: 44px; padding: 0 16px; flex: none; }
}

/* ruch [paczka-v2/manifest.json ruchy_css; CLAUDE.md: power1/2.out, bez sprężyn, kierunek lewo → prawo] */
.kaf-f img { transition: opacity .55s var(--p1o), transform .9s var(--p1o); }   /* [19.10, Jerzy: „uspokoić, ułagodzić”] drugie zdjęcie przenika 0,55 s, zbliżenie 0,9 s, obie krzywe power1.out */
@media (hover: hover) { .kaf:hover .kaf-f img { transform: scale(1.03); } }
/* odsłona: kadr 1,04 → 1 i jasność 0,92 → 1, 700 ms; wjazd tekstu od lewej 12 px, 500 ms po 120 ms; pasek 0 → 100%, 600 ms */
.ods > img, .ods > picture img, .ods .kom-f > img, .kaf-f.ods img { transform: scale(1.04); filter: brightness(.92); transition: transform .7s var(--p2o), filter .7s var(--p2o); }
.ods.wid > img, .ods.wid > picture img, .wid .kom-f > img, .kaf-f.wid img { transform: none; filter: none; }
.ods .kom-t, .ods .kom-f em, .ods .okl-t, .ods .hero-tx, .koniec.ods .wrap > div { opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--p2o) .12s, transform .5s var(--p2o) .12s; }
.wid .kom-t, .wid .kom-f em, .wid .okl-t, .wid .hero-tx, .koniec.wid .wrap > div { opacity: 1; transform: none; }
.ods .kom-h::after { transform: scaleX(0); transition: transform .6s var(--p1o) .3s; }
.wid .kom-h::after { transform: scaleX(1); }
@keyframes wjedz { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.wjedz > *, .wjedz.pasz-f img, #pasz-d.wjedz, .nowy { animation: wjedz .5s var(--p2o) both; }
.wjedz > *:nth-child(2) { animation-delay: .04s; } .wjedz > *:nth-child(3) { animation-delay: .08s; } .wjedz > *:nth-child(4) { animation-delay: .12s; } .wjedz > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes bump { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.licz.bump { animation: bump .42s var(--p2o); }
@keyframes zPrawej { from { transform: translateX(100%); } to { transform: none; } }
@keyframes zLewej { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes tlo { from { opacity: 0; } to { opacity: 1; } }
.szuf.otw .szuf-p.r { animation: zPrawej .32s var(--p2o); }
.szuf.otw .szuf-p.l { animation: zLewej .32s var(--p2o); }
.szuf.otw .szuf-tlo { animation: tlo .25s var(--p2o); }
::view-transition-group(foto) { animation-duration: .5s; animation-timing-function: var(--p2o); }   /* = odsłona i lupa: .5s power2.out (12.10) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
/* [19.10, Jerzy: „najgorsze przeładowanie świata” między stronami w Shopify] każda zmiana strony sklepu (kategoria, produkt, kreator → sklep)
   to osobny dokument. Przejście między dokumentami tym samym ruchem, co między widokami konta: stara strona gaśnie w prawo (0,22 s),
   nowa wjeżdża od lewej (0,7 s, power2.out), bez białej klatki między nimi. Typ „strona” nie dotyka przejść w obrębie strony (foto). */
@view-transition { navigation: auto; types: strona; }
html:active-view-transition-type(strona)::view-transition-old(root) { animation: sv2VtOut .22s var(--p2o) both; }
html:active-view-transition-type(strona)::view-transition-new(root) { animation: sv2VtIn .7s var(--p2o) .16s both; }
@keyframes sv2VtOut { to { opacity: 0; transform: translateX(8px); } }
@keyframes sv2VtIn { from { opacity: 0; transform: translateX(-16px); } }
@media (prefers-reduced-motion: reduce) {
  .ods > img, .ods > picture img, .ods .kom-f > img, .kaf-f.ods img, .ods .kom-t, .ods .kom-f em, .ods .okl-t, .ods .hero-tx, .koniec.ods .wrap > div { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ods .kom-h::after { transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* runda 5, iteracja 2 */
/* kafel komunikatu i okładka w karuzeli: wysokość = kwadrat zdjęcia + 1 linia nazwy, cena, „od … przy 10 szt.” sąsiada */
.karu { container-type: inline-size; align-items: flex-start; }
.karu > .kom, .karu > .okl { height: calc((100cqw - 80px) / 5 + 83px); }
.karu > .kom .kom-f { min-height: 0; height: 100%; }
@media (max-width: 1180px) { .karu > .kom, .karu > .okl { height: calc((100cqw - 60px) / 4 + 83px); } }
@media (max-width: 960px) { .karu > .kom, .karu > .okl { height: calc((100cqw - 40px) / 3 + 83px); } }
@media (max-width: 760px) { .karu > .kom, .karu > .okl { height: calc((100cqw - 2 * var(--pole)) * .42 + 104px); } }
.hero h1, .kom-h, .okl-h, .pasz-h, .koniec h2, .h2 { text-wrap: balance; }
.hero-tx { max-width: 640px; }
.pasz-f { aspect-ratio: 4 / 3; }
.pasz-f img { object-position: 50% 42%; }
@media (max-width: 960px) {
  .pasz-t { display: contents; }
  .pasz-g { order: 1; margin-bottom: 0; } .zak.ciem { order: 2; margin-bottom: 0; } .pasz-f { order: 3; } #pasz-d { order: 4; }
  .pasz-in { gap: 20px; }
}
.pasz-f img { object-fit: contain; }   /* kompozycje zestawów są kwadratowe — w ramie 4:3 nic nie jest ucinane, tło kadru = tło ramy */
/* pas kategorii: 5 (w sezonie 6) w jednym rzędzie aż do telefonu — wcześniej 4 + 1 sierota przy 1024 i 3 + 2 przy 768 */
@media (min-width: 761px) { .pas { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pas.z6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1100px) { .pas { gap: 12px; } .kat .kaf-n { font-size: 15px; } }
/* kontrast zmierzony: tytuł okładki „Na zimę” na jasnym niebie kadru miał 3,1:1 → mocniejszy cień od lewej */
.okl.foto::before { background: linear-gradient(90deg, rgba(21,19,31,.88) 0%, rgba(21,19,31,.72) 50%, rgba(21,19,31,.2) 100%); }

/* ===== Runda 6 (11.10, uwagi Yuriego) ===== */
.kat .kaf-f { background: var(--marka10); }   /* pojedynczy produkt na tle marki 10% [SPEC §3.2] */

/* kafel komunikatu: przycisk rozkłada kafel w bok na miejsce dwóch sąsiadów, odpowiedź stoi w tym miejscu */
.kom { position: relative; display: flex; flex-direction: column; }
.kom-cta { position: relative; z-index: 2; align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.kom:not(.otw) .kom-cta::after { content: ''; position: absolute; inset: -400px -400px -40px -400px; }   /* cały kafel klika się jak przycisk */
.kom .kom-f { overflow: hidden; }
.kom:not(.otw) .kom-f:hover .kom-cta, .kom-cta:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.kom-cta:focus-visible { outline: 2px solid var(--zolc); outline-offset: 4px; }
.kom.otw .kom-f { position: absolute; top: 0; height: 100%; z-index: 6; transition: width .52s var(--p2o), left .52s var(--p2o); box-shadow: 0 0 0 0 transparent; }
.kom.otw .kom-t, .kom.otw .kom-cta { max-width: calc(var(--w0) - 48px); }
.kom.otw.foto .kom-f > img, .kom.otw.foto .kom-f::before { width: var(--w0); left: var(--x, 0); right: auto; }
.kom.otw.foto .kom-f::before { background: linear-gradient(180deg, rgba(21,19,31,.05) 25%, rgba(21,19,31,.82) 100%), linear-gradient(90deg, transparent 70%, var(--noc)); }
.kom.otw .kom-t, .kom.otw .kom-cta { transform: translateX(var(--x, 0)); transition: transform .52s var(--p2o); }
.kom-odp { position: absolute; z-index: 3; top: 0; bottom: 0; right: 0; left: calc(var(--w0) + var(--x, 0px)); padding: 24px 56px 24px 28px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
  border-left: 1px solid rgba(255,255,255,.16); color: #fff; opacity: 0; transition: opacity .2s var(--p2o); }
.kom.pokaz .kom-odp { opacity: 1; transition-duration: .3s; }
.kom-odp { container-type: inline-size; }
@container (max-width: 600px) { .kom-odp .kroki { grid-template-columns: 1fr; gap: 14px; } .kom-odp .kroki li { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: start; }
  .kom-odp .kroki li::before { grid-row: span 2; margin: 0; } .kom-odp .kroki b { font-size: 16px; } }
.kom-odp > * { opacity: 0; transform: translateX(-12px); transition: opacity .4s var(--p2o), transform .4s var(--p2o); }
.kom.pokaz .kom-odp > * { opacity: 1; transform: none; }
.kom.pokaz .kom-odp > :nth-child(3) { transition-delay: .06s; } .kom.pokaz .kom-odp > :nth-child(4) { transition-delay: .12s; }
.kom-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.kom-x:hover { background: rgba(255,255,255,.12); } .kom-x svg { width: 18px; height: 18px; }
.kom-x:focus-visible { outline: 2px solid var(--zolc); }
.kom-o-h { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.kom-o-p { font-size: 14px; color: rgba(255,255,255,.78); }
.kroki { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: k; }
.kroki li { counter-increment: k; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; }
.kroki li::before { content: counter(k); width: 28px; height: 28px; border-radius: 50%; background: var(--zolc); color: var(--tusz); font-weight: 700; display: grid; place-items: center; font-size: 14px; margin-bottom: 4px; }
.kroki b { font-size: 15px; } .kroki span { color: rgba(255,255,255,.8); }
.kom.pokaz .kroki li { animation: wjedz .45s var(--p2o) both; } .kom.pokaz .kroki li:nth-child(2) { animation-delay: .08s; } .kom.pokaz .kroki li:nth-child(3) { animation-delay: .16s; }
.tech { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.tech li { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.18); padding-top: 8px; font-size: 14px; }
.tech span { color: rgba(255,255,255,.75); }
.kom-form { display: grid; gap: 10px; }
.kom-form textarea, .kom-form input { width: 100%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; border-radius: var(--r); padding: 10px 12px; font-size: 15px; }
.kom-form textarea { min-height: 64px; resize: none; }
.kom-form ::placeholder { color: rgba(255,255,255,.6); }
.kom-form > div { display: flex; gap: 8px; } .wiecej { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .kom-form .btn { min-height: 44px; background: #fff; color: var(--tusz); flex: none; }
.kom-form :focus { outline: 2px solid var(--zolc); outline-offset: 0; }
/* [Yuri 12.10] „Wyślij” w niebieskim kafelku: na hoverze żółty (ogólny .btn:hover dawał czarne tło i czarny tekst) */
.kom-form .btn { transition: background .2s var(--p2o), color .2s var(--p2o); }
.kom-form .btn:hover, .kom-form .btn:focus-visible { background: var(--zolc); color: var(--tusz); }
.kom-odp .ok-ik { color: #fff; }
@media (max-width: 760px) {
  .kom.otw .kom-t, .kom.otw .kom-cta { opacity: 0; }
  .kom-odp { left: 0; padding: 14px 44px 14px 14px; border: 0; gap: 8px; }
  .kom.otw.foto .kom-f > img, .kom.otw.foto .kom-f::before { opacity: .25; }
  .kroki { grid-template-columns: 1fr; gap: 6px; } .kroki li { flex-direction: row; flex-wrap: wrap; gap: 0 8px; font-size: 13px; } .kroki li::before { width: 20px; height: 20px; font-size: 12px; margin: 0; }
  .kroki span { flex-basis: 100%; padding-left: 28px; } .kroki b { font-size: 13px; }
  .kom-o-h { font-size: 16px; } .tech { grid-template-columns: 1fr 1fr; gap: 6px 12px; } .tech li { font-size: 12px; }
  .kom-form textarea { min-height: 52px; } .kom-o-p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .kom.otw .kom-f, .kom-odp, .kom-odp > *, .kom.otw .kom-t { transition: none !important; } }

/* pas zestawów: jasny, zestaw zlewa się z tłem kadru — bez odcięcia [Yuri 11.10: forma OK, bez ciemnego tła] */
.pasz { background: var(--kadr); color: var(--tusz); }
.pasz-g .h2 a:hover { color: var(--granat); }
.pasz-f { border-radius: 0; background: transparent; }
.pasz-inny { color: var(--granat); } .pasz-inny:hover { color: var(--granat2); }
.pasz-c { color: var(--tusz2); } .pasz-c b { color: var(--tusz); }
.pasz-s { border-top-color: var(--linia2); } .pasz-s a { border-bottom-color: var(--linia2); } .pasz-s a:hover { color: var(--granat); }
.pasz-s img { background: #fff; }

/* zakończenie osobno (blok w treści), stopka jak na żywym sklepie */
.koniec.foto { margin-top: 0; border-radius: var(--r); }
.koniec-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 56px 48px; }
@media (max-width: 760px) { .koniec-in { flex-direction: column; align-items: stretch; padding: 32px 20px; } .koniec h2 { font-size: 24px; } }
.stopka { margin-top: 96px; background: #16171F url(img/stopka.jpg) right center / auto 100% no-repeat; color: rgba(255,255,255,.86); border: 0; font-size: 15px; }
.stopka .wrap { padding-top: 36px; padding-bottom: 24px; }
.st-logo img { height: 30px; width: auto; filter: none; }
.st-l { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 26px 0 30px; }
.st-l a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.stopka .st-dol { margin-top: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.6); font-size: 13px; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.stopka .st-dol a { text-decoration: underline; text-underline-offset: 2px; }
.st-mh { font-family: ui-monospace, Menlo, monospace; } .st-mh b { color: #fff; }
.koniec.foto + .stopka, main:has(> .koniec:last-child) + .stopka { margin-top: 96px; }
@media (max-width: 760px) { .stopka { margin-top: 64px; background-size: auto 60%; background-position: right bottom; } .st-l { gap: 4px 18px; font-size: 14px; } }
.kom-odp[hidden] { display: none; }

/* ===== Runda 6b ===== */
/* „Nie ma tego…” jak karta produktu: kadr z ikoną, nazwa, linia opisu, link — spokojnie [Yuri 11.10] */
.kom.jak .kom-f { background: transparent; color: var(--tusz); padding: 0; justify-content: flex-start; gap: 0; border-radius: 0; overflow: visible; }
.karu > .kom.jak { height: auto; }
.kom-kadr { display: grid; place-items: center; aspect-ratio: 1; width: 100%; background: var(--kadr); border-radius: var(--r); color: var(--granat); margin-bottom: 12px; transition: background .2s var(--p2o); }
.kom-kadr svg { width: 25%; height: auto; }
.kom.jak:hover .kom-kadr { background: var(--marka10); }
.kom.jak .kom-f .kom-h { font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
.kom.jak .kom-f .kom-h::after { display: none; }
.kom.jak .kom-f .kom-l { font-size: 14px; color: var(--tusz2); margin-top: 4px; }
.kom.jak .kom-cta { color: var(--granat); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; margin-top: 6px; }
.kom.jak .kom-t, .kom.jak .kom-cta { opacity: 1 !important; transform: none !important; }
.kom.jak.otw .kom-f { background: var(--kadr); border-radius: var(--r); padding: 0; overflow: hidden; }
.kom.jak.otw .kom-kadr { background: var(--marka10); }
.kom.jak.otw .kom-t, .kom.jak.otw .kom-cta { padding: 0 16px; max-width: var(--w0); }
.kom.jak .kom-odp { color: var(--tusz); border-left-color: var(--linia); }
.kom.jak .kom-x { color: var(--tusz); } .kom.jak .kom-x:hover { background: rgba(0,0,0,.06); }
.kom.jak .kom-o-p { color: var(--tusz2); }
.kom.jak .kom-form textarea, .kom.jak .kom-form input { background: #fff; color: var(--tusz); border-color: var(--linia2); }
.kom.jak .kom-form ::placeholder { color: #8a8b9c; }
.kom.jak .kom-form .btn { background: var(--granat); color: #fff; }
.kom.jak .kom-form :focus { outline-color: var(--granat); }
.kom.jak .kom-odp .ok-ik { color: var(--ok); }
.kom.jak .kom-cta:focus-visible { outline-color: var(--granat); }
@media (max-width: 760px) { .kom.jak.otw .kom-kadr, .kom.jak.otw .kom-t, .kom.jak.otw .kom-cta { opacity: 0 !important; } }

/* FAQ: dwie kolumny — po lewej tytuł i kontakt, po prawej pytania w grupach; płynne rozwijanie */
.faq-s { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 72px; align-items: start; }
.faq-l { position: sticky; top: 96px; }
.faq-l p { color: var(--tusz2); margin: 10px 0 20px; max-width: 30ch; }
.faq { max-width: none; }
.faq-g { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--tusz2); font-weight: 600; margin: 32px 0 6px; }
.faq-g:first-child { margin-top: 0; }
.faq details { border-bottom: 1px solid var(--linia); }
.faq summary { min-height: 64px; font-size: 17px; font-weight: 600; padding: 14px 0; gap: 24px; }
.faq summary::after { display: none; }
.faq summary i { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--kadr); transition: background .2s var(--p2o), transform .3s var(--p2o); }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--tusz); border-radius: 1px; transition: transform .3s var(--p2o); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { background: var(--granat); transform: rotate(180deg); }
/* [Yuri 12.10 „fajniejsze zachowanie FAQ, jakiś hover”] wiersz reaguje cały: tło wsuwa się od lewej, pytanie lekko w prawo,
   plus wypełnia się granatem; odpowiedź rozwija się płynnie i wjeżdża od lewej (jak skład zestawu) */
.faq details { position: relative; }
.faq summary { position: relative; transition: padding .3s var(--p2o), color .2s var(--p2o); }
.faq summary::before { content: ''; position: absolute; inset: 0 -16px; border-radius: var(--r); background: var(--kadr); transform: scaleX(.96); transform-origin: left; opacity: 0; transition: opacity .25s var(--p2o), transform .35s var(--p2o); z-index: -1; }
@media (hover: hover) {
  .faq summary:hover { padding-left: 8px; color: var(--granat); }
  .faq summary:hover::before { opacity: 1; transform: none; }
  .faq summary:hover i { background: var(--granat); }
  .faq summary:hover i::before, .faq summary:hover i::after { background: #fff; }
}
.faq details[open] summary i::before, .faq details[open] summary i::after { background: #fff; }
.faq-gr { isolation: isolate; }
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: hidden; transition: height .38s var(--p2o), content-visibility .38s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq-o p { opacity: 0; transform: translateX(-10px); transition: opacity .38s var(--p2o) .06s, transform .38s var(--p2o) .06s; }
.faq details[open] .faq-o p { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .faq summary, .faq summary::before, .faq-o p, .faq details::details-content { transition: none !important; } }
.faq details[open] summary i::before, .faq details[open] summary i::after { background: #fff; }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq summary:hover i { background: var(--marka10); }
.faq-o p { margin: 0 0 22px; color: #33343f; max-width: 64ch; line-height: 1.6; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: hidden; transition: height .35s var(--p2o), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}
@media (max-width: 960px) { .faq-s { grid-template-columns: 1fr; gap: 20px; } .faq-l { position: static; } }
@media (max-width: 760px) { .faq summary { font-size: 16px; min-height: 56px; } }

/* pola nadruku na karcie produktu [Yuri 11.10, Monday Merch „Print areas”] */
.ile-p { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 8px; border-radius: 11px; background: var(--kadr); font-size: 12px; font-weight: 600; color: var(--tusz2); vertical-align: 2px; }
.akord summary { justify-content: space-between; }
.pola { display: grid; gap: 12px; }
.pole-n { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; padding: 10px; border: 1px solid var(--linia); border-radius: var(--r); }
.pole-n.logo { border-color: var(--granat); box-shadow: inset 3px 0 0 var(--granat); }
.pole-n > div:only-child { grid-column: 1 / -1; }
.pole-f { position: relative; aspect-ratio: 1; background: #fff; border-radius: 4px; overflow: hidden; }
.pole-f img, .pole-f svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pole-f svg * { fill: rgba(21,19,31,.16); stroke: var(--granat); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 5 3; }
.pole-n b { display: block; font-weight: 600; }
.pole-l { display: inline-block; margin: 4px 0 2px; font-size: 12px; font-weight: 700; color: var(--granat); text-transform: uppercase; letter-spacing: .06em; }
.pole-n .mini { display: block; margin-top: 2px; }
.pole-n ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pole-n li { font-size: 13px; background: var(--kadr); border-radius: 999px; padding: 4px 10px; }
.pole-n li span { color: var(--tusz2); }
.pole-n li em { font-style: normal; color: var(--granat); font-weight: 600; }
@media (max-width: 760px) { .pole-n { grid-template-columns: 84px 1fr; gap: 12px; } }
.kom.jak .kom-f { overflow: hidden; }   /* klikalny obszar przycisku nie wychodzi poza kartę (poziomy przelew) */
/* odpowiedź po stronie z większym miejscem; oryginalna treść kafla zostaje na swoim miejscu */
.kom-odp { left: var(--ol, calc(var(--w0) + var(--x, 0px))); right: var(--or, 0); }
.kom.wlewo .kom-odp { border-left: 0; border-right: 1px solid rgba(255,255,255,.16); }
.kom.jak.wlewo .kom-odp { border-right-color: var(--linia); }
.kom.jak.otw .kom-kadr { width: var(--w0); flex: none; transform: translateX(var(--x, 0)); transition: transform .52s var(--p2o); border-radius: var(--r) var(--r) 0 0; }
.kom.jak.otw .kom-t, .kom.jak.otw .kom-cta { transform: translateX(var(--x, 0)) !important; }
.kom.jak.otw .kom-cta { margin-bottom: 14px; }
/* specyfikacja: szersza kolumna etykiet */
.akord dl { grid-template-columns: 180px 1fr; }
@media (max-width: 760px) { .akord dl { grid-template-columns: 128px 1fr; } }
/* pas zestawów: większe zdjęcie zestawu */
.pasz-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.pasz-f { aspect-ratio: 5 / 4; }
@media (max-width: 960px) { .pasz-in { grid-template-columns: 1fr; } }
.kom.jak .kom-x:focus-visible { outline-color: var(--granat); }
.kom-form input { min-width: 0; flex: 1; }
@media (max-width: 760px) { .kom-odp { left: 0 !important; right: 0 !important; border: 0 !important; } }

/* ===== Runda 7 (11.10) ===== */
/* pełna szerokość [pomiar zrzutów 1440 z bench/: Monday i Allbirds ~15–25 px marginesu, SpaceX/Google/Stanley 45–70, Shopify/Packhelp 90–110;
   wcześniejsze „max 1320 jak Monday” było błędne] — margines 32 px, bez maksymalnej szerokości */
:root { --pole: 32px; }
.wrap, .mega-in, .obiet ul { max-width: none; }
@media (max-width: 1180px) { :root { --pole: 24px; } }
@media (max-width: 760px) { :root { --pole: 16px; } }
/* rząd wychodzi za prawą krawędź (Packhelp): widać, że jest więcej */
@media (min-width: 761px) { .karu { margin-right: calc(-1 * var(--pole)); padding-right: var(--pole); scroll-padding-inline-end: var(--pole); } }

/* pas zestawów: lekko odróżniony (tło marki 10%), zestaw w karcie kadru jak produkt; stała wysokość — zestawy w jednej komórce */
.pasz { background: var(--marka10); }
.pasz-f { display: grid; aspect-ratio: 5 / 4; border-radius: var(--r); background: var(--kadr); overflow: hidden; }
.pasz-f > a { grid-area: 1 / 1; opacity: 0; transition: opacity .35s var(--p2o); }
.pasz-f > a.on { opacity: 1; }
.pasz-f img { width: 100%; height: 100%; object-fit: contain; }
.pasz-d { display: grid; }
.pasz-d > div { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateX(-12px); transition: opacity .35s var(--p2o), transform .35s var(--p2o), visibility 0s .35s; }
.pasz-d > div.on { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--p2o) .05s, transform .35s var(--p2o) .05s, visibility 0s; }
.pasz-s img { background: var(--kadr); }
/* [Yuri 11.10] zawsze 5 w rzędzie — nigdzie 6 (reguła 1600 px usunięta) */

/* ===== Runda 8 ===== */
/* pas zestawów: tor zdjęć przesuwany w bok (klik w zakładkę = płynny przejazd, palcem = swipe) */
.pasz-f { display: flex; aspect-ratio: 5 / 4; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.pasz-f::-webkit-scrollbar { display: none; }
.pasz-f > a { flex: 0 0 100%; scroll-snap-align: center; opacity: 1; grid-area: auto; display: block; height: 100%; }
.pasz-f img { width: 100%; height: 100%; object-fit: cover; }
/* skład: rozwijany w miejscu (jedna pozycja naraz), bez przejścia na stronę produktu */
.pasz-s { border-top: 1px solid var(--linia2); interpolate-size: allow-keywords; }
.pasz-s details { border-bottom: 1px solid var(--linia2); }
.pasz-s summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 8px 0; font-weight: 500; }
.pasz-s summary::-webkit-details-marker { display: none; }
.pasz-s summary span { flex: 1; }
.pasz-s summary:hover span { color: var(--granat); }
.pasz-s summary i { position: relative; width: 24px; height: 24px; flex: none; }
.pasz-s summary i::before, .pasz-s summary i::after { content: ''; position: absolute; left: 6px; top: 11px; width: 12px; height: 2px; background: var(--tusz2); transition: transform .3s var(--p2o); }
.pasz-s summary i::after { transform: rotate(90deg); }
.pasz-s details[open] summary i::after { transform: rotate(0deg); }
.pasz-s img { width: 48px; height: 48px; border-radius: 4px; background: var(--kadr); object-fit: cover; flex: none; }
.pasz-o { padding: 0 0 14px 62px; font-size: 14px; color: #33343f; }
.pasz-o p { margin: 0 0 8px; }
.pasz-o dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; margin: 0; }
.pasz-o dt { color: var(--tusz2); } .pasz-o dd { margin: 0; }
.pasz-s details::details-content { height: 0; overflow: hidden; transition: height .3s var(--p2o), content-visibility .3s allow-discrete; }
.pasz-s details[open]::details-content { height: auto; }
@media (prefers-reduced-motion: reduce) { .pasz-f { scroll-behavior: auto; } }
@media (max-width: 960px) { .pasz-t > .zak { order: 2; margin-bottom: 0; } }

/* ===== Runda 9 ===== */
/* menu: lista rozwija się tylko pod przyciskiem (jak na żywym sklepie) */
.dd { position: relative; height: 100%; display: flex; }
.dd > button { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; height: 100%; font-weight: 500; font-size: 15px; position: relative; white-space: nowrap; }
.dd > button::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 3px; background: transparent; }
.dd > button:hover::after, .dd.otw > button::after { background: var(--zolc); }
.dd > button svg { width: 12px; height: 12px; transition: transform .25s var(--p2o); }
.dd.otw > button svg { transform: rotate(180deg); }
.dd-p { position: absolute; top: calc(100% + 1px); left: 0; min-width: 260px; background: #fff; border: 1px solid var(--linia); border-top: 0; border-radius: 0 0 var(--r) var(--r);
  padding: 8px; display: grid; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--p2o), transform .22s var(--p2o), visibility 0s .22s; z-index: 45; }
.dd.otw .dd-p { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--p2o), transform .22s var(--p2o), visibility 0s; }
.dd-p a { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 4px; font-weight: 500; }
.dd-p a:hover { background: var(--kadr); color: var(--granat); }
.dd-p i { font-style: normal; color: var(--tusz2); font-size: 14px; font-weight: 400; }
.dd.otw .dd-p a { animation: wjedz .3s var(--p2o) both; } .dd.otw .dd-p a:nth-child(2) { animation-delay: .03s; } .dd.otw .dd-p a:nth-child(3) { animation-delay: .06s; } .dd.otw .dd-p a:nth-child(n+4) { animation-delay: .09s; }

/* cena: cicha tabela „Ilość” jak w makiecie 10.10 — informacja, nie przyciski */
.etk-p { margin-top: 18px; font-size: 14px; color: var(--tusz2); font-weight: 500; }
.progi { display: block; border: 0; border-top: 1px solid var(--linia); border-radius: 0; margin: 6px 0 8px; }
.progi .prog { display: grid; grid-template-columns: 1fr auto 52px; gap: 8px; padding: 9px 0 9px 12px; border-bottom: 1px solid var(--linia); font-size: 15px; background: none; box-shadow: none; border-left: 0; transition: box-shadow .3s var(--p2o), color .3s var(--p2o); }
.progi .prog + .prog { border-left: 0; }
.progi .prog span { color: var(--tusz2); } .progi .prog span:last-child { font-size: 13px; }
.progi .prog b { font-weight: 600; font-size: 15px; display: inline; }
.progi .prog.on { box-shadow: inset 3px 0 0 var(--granat); background: none; }
.progi .prog.on span:first-child { color: var(--tusz); font-weight: 600; }

/* kafel komunikatu: rozkłada się W BOK bez skoku — zostaje w przepływie, rośnie szerokość i margines (nie position:absolute) */
.kom { overflow: visible; }
.kom.otw { z-index: 6; }
.kom.otw .kom-f { position: relative; top: auto; height: auto; flex: 1 1 auto; transition: width .52s var(--p2o), margin-left .52s var(--p2o); }

/* odsłona warstwami: opacity + wjazd od lewej 10 px, 520 ms, power2.out; opóźnienie z --d */
.wj { opacity: 0; transform: translateX(-10px); }
.wj.wid { opacity: 1; transform: none; transition: opacity .52s var(--p2o) var(--d, 0ms), transform .52s var(--p2o) var(--d, 0ms); }
img.ld { opacity: 0; }
img { transition: opacity .45s var(--p2o); }
.kaf-f img, .gal-d img { transition: opacity .45s var(--p2o), transform .5s var(--p2o); }

/* galeria: przenikanie zdjęć, strzałki wjeżdżają, lupa idzie za kursorem */
@media (min-width: 761px) {
  .gal-d .sl { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--p2o); }
  .gal-d .sl.on { opacity: 1; }
  .gal-d .sl img { transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .5s var(--p2o), transform-origin .35s var(--p2o), opacity .45s var(--p2o); }
  .gal-d.lupa .sl.on img { transform: scale(1.7); }
  .zgal-d img { transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform .5s var(--p2o), transform-origin .35s var(--p2o); }
  .zgal-d.lupa img.on { transform: scale(1.7); }
  .gal-d .gal-str { opacity: 0; transition: opacity .25s var(--p2o), transform .25s var(--p2o); }
  .gal-d .gal-str.l { transform: translate(-6px, -50%); } .gal-d .gal-str.p { transform: translate(6px, -50%); }
  .gal-d:hover .gal-str { opacity: 1; transform: translate(0, -50%); }
  .gal-d.lupa .gal-str { opacity: .85; }
}
.lb.otw { animation: tlo .28s var(--p2o); }
.lb.otw .lb-sl img { animation: lbIn .38s var(--p2o); }
@keyframes lbIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lb-sl img { transition: transform .4s var(--p2o); }

/* reszta paneli też miękko: akordeony, filtry, szukaj, toast */
.akord { interpolate-size: allow-keywords; }
.akord details::details-content { height: 0; overflow: hidden; transition: height .35s var(--p2o), content-visibility .35s allow-discrete; }
.akord details[open]::details-content { height: auto; }
.f-pan.otw { animation: dol .22s var(--p2o); }
.szukaj-ov.otw .szukaj-p { animation: dol .3s var(--p2o); } .szukaj-ov.otw .szuf-tlo { animation: tlo .25s var(--p2o); }
.toast { animation: tlo .25s var(--p2o); }
@keyframes dol { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wj { opacity: 1 !important; transform: none !important; } img.ld { opacity: 1 !important; }
  .gal-d.lupa .sl.on img, .zgal-d.lupa img.on { transform: none !important; }
}
/* runda 10: treść rozłożonego kafla ma szerokość zmierzoną przed kliknięciem (bez przełamania tytułu = bez skoku) */
.kom.otw .kom-t { width: var(--tw); max-width: none; flex: none; }
.kom.otw .kom-cta { width: var(--cw); max-width: none; }
.kom.jak.otw .kom-t, .kom.jak.otw .kom-cta { padding: 0; }
/* pasek obietnic: cienki, jedna linia; Projekt i Wysyłka otwierają tę samą odpowiedź co kafel, panel rozsuwa się pod paskiem */
.obiet ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.obiet > ul > li { padding: 0 20px 0 0; align-items: center; min-height: 56px; gap: 10px; }
.obiet > ul > li + li { padding-left: 20px; }
.obiet > ul > li b { font-size: 15px; font-weight: 600; }
.obiet [data-obiet] { display: flex; align-items: center; gap: 10px; min-height: 56px; width: 100%; text-align: left; }
.obiet [data-obiet] > svg:last-child { width: 12px; height: 12px; margin-left: 2px; color: var(--tusz2); margin-top: 0; transition: transform .3s var(--p2o); }
.obiet [data-obiet][aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.obiet [data-obiet]:hover b { color: var(--granat); text-decoration: underline; text-underline-offset: 4px; }
.obiet > ul svg { margin-top: 0; }
.obiet-odp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--p2o); background: var(--granat); color: #fff; }
.obiet-odp.otw { grid-template-rows: 1fr; }
.obiet-odp > div { overflow: hidden; }
#obiet-in { position: relative; padding-top: 28px; padding-bottom: 32px; display: grid; gap: 16px; max-width: 980px; margin: 0; opacity: 0; transform: translateX(-10px); transition: opacity .3s var(--p2o), transform .3s var(--p2o); }
.obiet-odp.otw #obiet-in { opacity: 1; transform: none; transition-delay: .15s; }
#obiet-in .kom-x { right: auto; left: calc(100vw - 2 * var(--pole) - 40px); top: 16px; }
#obiet-in .kom-o-h { font-size: 20px; color: #fff; }
#obiet-in .kroki span { color: rgba(255,255,255,.82); }
@media (max-width: 960px) { .obiet > ul > li { min-height: 48px; padding-right: 10px; } .obiet > ul > li + li { padding-left: 10px; } }
@media (max-width: 760px) { .obiet > ul > li b { font-size: 13px; } .obiet [data-obiet] { min-height: 48px; } .obiet [data-obiet] > svg:last-child { display: none; }
  #obiet-in .kroki { grid-template-columns: 1fr; } #obiet-in .kom-x { left: auto; right: 0; } }
@media (prefers-reduced-motion: reduce) { .obiet-odp, #obiet-in { transition: none !important; } }
#obiet-in .kom-form { max-width: 560px; } #obiet-in .kom-o-p { color: rgba(255,255,255,.8); }
.obiet > ul > li { min-width: 0; } .obiet [data-obiet] b { min-width: 0; flex: 0 1 auto; line-height: 1.25; } .obiet [data-obiet] svg { flex: none; }
@media (max-width: 960px) { .obiet ul { grid-template-columns: 1fr 1fr; } .obiet > ul > li:nth-child(3) { border-left: 0; padding-left: 0; } .obiet > ul > li:nth-child(n+3) { border-top: 1px solid var(--linia); } }

/* panel odpowiedzi pod paskiem: nie dziedziczy stylów pozycji paska */
#obiet-in { max-width: none; }
#obiet-in > * { max-width: 980px; }
#obiet-in .kroki li { padding: 0; border: 0; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
#obiet-in .kroki li::before { margin: 0 0 4px; }
#obiet-in .kroki b { font-size: 15px; }
#obiet-in svg { width: 18px; height: 18px; color: #fff; margin: 0; }
#obiet-in .kom-x { position: absolute; left: auto; right: var(--pole); top: 18px; color: #fff; }
#obiet-in .kom-form > div { display: flex; gap: 8px; }
#obiet-in .kom-form input { flex: 1; min-width: 0; }
#obiet-in .kom-form .btn { flex: none; width: auto; min-height: 44px; }

/* ===== Runda 11: pasek obietnic — warianty ===== */
.obiet-odp { display: none; }
.obiet > ul > li { position: relative; }
/* A: dymek pod pozycją — ten sam język co lista „Okazje” w menu (biały, włosowa linia, wjazd z góry) */
.obi-pop { position: absolute; z-index: 30; top: calc(100% + 1px); left: 0; width: min(340px, 90vw); background: #fff; border: 1px solid var(--linia); border-top: 0; border-radius: 0 0 var(--r) var(--r);
  padding: 14px 16px 16px; animation: dol .22s var(--p2o); }
.obi-pop::before { content: ''; position: absolute; top: -1px; left: 16px; width: 32px; height: 3px; background: var(--zolc); }
.obi-pop p { margin: 0; font-size: 15px; line-height: 1.5; color: #33343f; }
.obi-pop .lnk { white-space: normal; }
.obiet > ul > li:nth-child(4) .obi-pop { left: auto; right: 0; }
/* B: odpowiedź w pasku — pasek rośnie o jedną linię, tekst w tym samym tonie co pasek */
.obiet-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--p2o); border-top: 1px solid transparent; }
.obiet-b.otw { grid-template-rows: 1fr; border-top-color: var(--linia); }
.obiet-b > div { overflow: hidden; }
.obiet-b p { margin: 0; padding: 14px var(--pole); font-size: 15px; color: #33343f; opacity: 0; transform: translateX(-10px); transition: opacity .3s var(--p2o), transform .3s var(--p2o); }
.obiet-b.otw p { opacity: 1; transform: none; transition-delay: .1s; }
.obiet [data-obiet][aria-expanded="true"] b { color: var(--granat); }
/* C: przejście do FAQ — otwarte pytanie krótko się podświetla */
@keyframes mig { 0%, 40% { background: var(--marka10); } 100% { background: transparent; } }
.faq details.mig { animation: mig 1.6s var(--p1o); }
@media (max-width: 760px) { .obi-pop { width: calc(200% + 1px); } .obiet > ul > li:nth-child(even) .obi-pop { left: auto; right: 0; } }

/* ===== Audyt telefonu (11.10) ===== */
/* „Pokaż kolejne”: na środku z odstępem (po zmianie na dopisywanie zgubił styl) */
.wiecej { text-align: center; margin-top: 32px; } .wiecej:empty { display: none; }
/* ogłoszenie w jednej linii na telefonie */
@media (max-width: 760px) { .ogl { font-size: 12.5px; padding: 8px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
/* tytuł rzędu zawija się z ›  w tej samej linii co ostatnie słowo (nie odklejony na prawej krawędzi) */
.sek-t h2 a { display: inline; } .sek-t h2 a svg { display: inline-block; vertical-align: -2px; margin-left: 6px; }
/* stopka na telefonie: tło z orbitami na całej wysokości, bez szwu */
@media (max-width: 760px) { .stopka { background-size: cover; background-position: 70% center; } }

/* ===== Test na telefonie (11.10) ===== */
/* hero na telefonie: pionowy kadr, tekst na pustej ścianie u góry, koła CGH w całości widoczne na dole */
@media (max-width: 760px) {
  .hero { height: auto; aspect-ratio: 3 / 4; max-height: 600px; }
  .hero picture img { object-position: 50% 100%; }
  .hero::before { background: linear-gradient(180deg, rgba(21,19,31,.82) 0%, rgba(21,19,31,.55) 30%, rgba(21,19,31,0) 52%); }
  .hero-t { justify-content: flex-start; padding-top: 26px; padding-bottom: 0; }
}
/* zestaw: tor zdjęć — swipe na telefonie, płynny przejazd po miniaturach */
.zgal-d { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 1; }
.zgal-d::-webkit-scrollbar { display: none; }
.zgal-d img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }

/* ===== Runda 12 (11.10): lekkość — wartości zmierzone w obecnym sklepie CGH (sb.css + sb-marka.css) [Yuri 11.10:
   „jest lżejszy, ładniejszy, mniej kanciasty, toporny”]. Układ i zasady bez zmian; zmieniają się tylko wartości. */
:root { --r: 12px; --linia: #E3E4E8; --linia2: #D6D7DD; --tusz: #111214; --tusz2: #4A4B50; --tlo2: #F6F7F8; }
body { font-size: 15px; }
/* przyciski: czarny z ikoną i promieniem 14 (koszyk), drugi plan biały z jasną ramką */
.btn { border-radius: 14px; background: #000; font-weight: 500; min-height: 52px; }
.btn:hover { background: #26272B; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn2 { border-radius: 14px; border-color: var(--linia2); font-weight: 500; }
.btn.bial { background: #fff; color: var(--tusz); }
/* linki: granat z żółtą kreską (jak „Więcej niż 10 szt.?” w obecnym sklepie) */
.lnk, .wlink { font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--zolc); padding-bottom: 1px; }
.lnk:hover, .wlink:hover { text-decoration: none; border-bottom-color: var(--granat); }
/* pola i liczniki: promień 10–14, jasna ramka */
.licznik { border-radius: 14px; border-color: #DFDFDF; height: 52px; }
.licznik.mal { border-radius: 10px; }
.form-p input, .form-p textarea, .form-p select, .f-p select, .mm-szukaj { border-radius: 10px; border-color: var(--linia); }
/* mniej pogrubień: nazwy produktów zwykłe, etykiety szare, drugi plan grafitowy */
.kaf-n { font-weight: 400; }
.kaf-c { font-weight: 600; }
.etk { font-weight: 500; }
.okr b, .pasuje > span, .mini { font-weight: 400; }
.akord summary, .faq summary { font-weight: 500; }
.kup h1 { font-weight: 700; letter-spacing: -0.02em; }
.cena b { font-weight: 700; }
/* progi: jedna zaokrąglona lista jak w obecnym sklepie (sb-progi), wiersz klikalny ustawia ilość */
.progi, .etk-p { display: none; }
.sb-progi { margin: 18px 0 8px; }
.sb-progi__tytul { font-size: 13px; font-weight: 600; color: var(--tusz2); margin: 0 0 8px; }
.sb-progi__lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linia); border-radius: 12px; overflow: hidden; background: #fff; }
.sb-progi__lista li + li { border-top: 1px solid var(--linia); }
.sb-prog { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; width: 100%; padding: 13px 16px; background: none; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: var(--tusz); transition: background .12s; }
.sb-prog:disabled { cursor: default; }
.sb-prog:not(:disabled):hover { background: var(--tlo2); }
.sb-prog.on { background: var(--tlo2); box-shadow: inset 3px 0 0 var(--granat); }
.sb-prog b { font-size: 15px; font-weight: 600; }
.sb-prog__jedn { font-size: 12.5px; color: var(--tusz2); }
.sb-prog__suma { font-size: 14.5px; font-weight: 700; }
/* akordeony, FAQ, filtry, szuflady: jaśniejsze linie, miękkie rogi */
.f-pan, .dd-p, .obi-pop, .podsum, .znajdziemy, .pole-n, .rozm, .sklad, .tab-r { border-radius: 12px; }
.szuf-p.r { border-radius: 16px 0 0 16px; }
.szuf-p.l { border-radius: 0 16px 16px 0; }
.chip, .pill, .aktywne button { border-color: var(--linia2); }
.faq summary i { background: var(--tlo2); }
/* kafle: promień 12 (karty), kafle komunikatów i okładki też */
.kaf-f, .kom .kom-f, .okl, .pasz-f, .gal-d, .zgal, .lb-s { border-radius: var(--r); }
.gal-min button, .zgal-m button, .dob img, .poz img, .sklad summary img, .pasz-s img { border-radius: 8px; }
/* „Nie ma tego…” z obecnego sklepu (pomoc.css: .sbp-kafel) — w karuzeli i siatce stoi jak karta produktu */
.kom-nm { align-self: flex-start; }
.karu > .kom-nm { flex: 0 0 calc((100% - 80px) / 5); }
@media (max-width: 1180px) { .karu > .kom-nm { flex-basis: calc((100% - 60px) / 4); } }
@media (max-width: 960px) { .karu > .kom-nm { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 760px) { .karu > .kom-nm { flex-basis: 42%; } .sbp-kafel__kadr { padding: 16px; } .sbp-kafel__kadr b { font-size: 17px; } .sbp-kafel__pig { padding: 10px 14px; font-size: 11px; letter-spacing: .1em; } }
/* przycisk w odpowiedzi kafla-komunikatu: biała pigułka z żółtą strzałką (ten sam język co „Nie ma tego…”) */
.kom-pig { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; background: #fff; color: var(--granat);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.kom-pig i { font-style: normal; color: var(--zolc); letter-spacing: 0; }
.kom-pig:hover { background: #F3F3F8; }
.kom.jak .kom-pig { border: 1px solid var(--linia); }
/* hero z obecnego sklepu [Yuri 11.10]: jasna hala, orbity CGH; tekst czarny na jasnej ścianie (bez ciemnego cienia), przycięty do 0,6 ekranu */
.hero { background: #EEF0F2; color: var(--tusz); max-height: 620px; }
.hero::before { background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 32%, rgba(255,255,255,0) 52%); }
.hero picture img, .hero video { object-position: 50% 32%; }
.hero h1 { color: var(--tusz); }
.hero p { color: #2F3036; }
.hero .eyebrow { color: var(--granat); }
@media (max-width: 760px) {
  .hero picture img { object-position: 50% 100%; }
  .hero::before { background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.3) 30%, rgba(255,255,255,0) 50%); }
}
/* pigułka „Napisz do nas” w kafelku nie łamie się */
.sbp-kafel__pig { white-space: nowrap; }
@media (max-width: 1100px) { .sbp-kafel__pig { letter-spacing: .1em; padding: 11px 16px; } }
/* desktop: całe orbity w kadrze — zdjęcie w pełnej wysokości do prawej, lewa strona w kolorze ściany z miękkim przejściem */
@media (min-width: 761px) {
  .hero { background: linear-gradient(180deg, #F4F5F7 0%, #EDEEF0 62%, #DCDEE2 100%); }
  .hero .hero-img, .hero picture img, .hero video { left: auto; right: 0; width: auto; max-width: none; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
  .hero::before { display: none; }
}
@media (max-width: 760px) { .sbp-kafel__pig { white-space: normal; } .sbp-kafel__kadr { min-width: 0; } .kom-nm { min-width: 0; } }
/* „Nie ma tego…”: forma z obecnego sklepu, typografia kafli komunikatów */
.kom.kom-nm .kom-pig { border: 1px solid var(--linia); letter-spacing: .12em; }
.kom.kom-nm .kom-pig:hover { border-color: var(--zolc); background: #fff; }
.kom-cta.kom-pig::after { display: none; }
.kom.kom-nm:hover .kom-f { border-color: var(--linia2); }
.kom :is(a, button):focus-visible { outline: 2px solid var(--granat); outline-offset: 3px; border-radius: 999px; }   /* [Yuri 12.10] pola formularza zostają w swoim kształcie po kliknięciu */
.st-mh:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .kom.kom-nm .kom-pig { padding: 9px 12px; font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; } }
.siatka > .kom-nm { aspect-ratio: 259 / 342; } .siatka > .kom-nm .kom-f { height: 100%; }   /* wysokość karty produktu, także gdy stoi sam w rzędzie */
/* kafel zamykający listę: CTA jak w niebieskich kaflach, tylko w granacie */
/* „Nie znasz rozmiarów zespołu?” → standardowy podział pod rozmiarówką [Yuri 11.10; docelowo „Zbierz rozmiary od zespołu”] */
.rozloz-w { margin-top: 12px; } .rozloz-w[hidden], .rozloz[hidden] { display: none; }
.rozloz { margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: var(--tlo2); font-size: 14px; animation: dol .22s var(--p2o); }
.rozloz p { margin: 0 0 10px; color: var(--tusz2); }
.rozloz-r { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rozloz-r label { font-weight: 600; margin-right: 4px; }
.rozloz-r input { width: 96px; min-height: 44px; border: 1px solid var(--linia); border-radius: 10px; text-align: center; font-weight: 600; background: #fff; }
.rozloz-r .btn2 { min-height: 44px; padding: 0 16px; }
/* „Nie znasz rozmiarów zespołu?” — dwie drogi do wyboru [Yuri 11.10] */
.rz-wyb { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rz-wyb button { text-align: left; padding: 12px 14px; border: 1px solid var(--linia); border-radius: 12px; background: #fff; display: grid; gap: 4px; transition: border-color .15s; }
.rz-wyb button:hover { border-color: var(--linia2); }
.rz-wyb button[aria-checked="true"] { border-color: var(--granat); box-shadow: inset 0 0 0 1px var(--granat); }
.rz-wyb b { font-size: 14.5px; font-weight: 600; } .rz-wyb span { font-size: 13px; color: var(--tusz2); line-height: 1.4; }
.rz-p { margin-top: 14px; } .rz-p[hidden] { display: none; }
.rozloz-r label span { font-weight: 400; color: var(--tusz2); }
.pole-zb { margin-bottom: 12px; } .etk-zb { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.zb-dni { display: flex; flex-wrap: wrap; gap: 6px; } .zb-dni .chip { min-height: 36px; font-size: 14px; }
.zb-link { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 10px 10px 14px; border: 1px solid var(--linia); border-radius: 12px; background: #fff; }
.zb-link span { grid-column: 1; font-size: 12.5px; color: var(--tusz2); } .zb-link b { grid-column: 1; font-weight: 600; font-size: 14px; word-break: break-all; }
.zb-link .btn2 { grid-column: 2; grid-row: 1 / 3; min-height: 40px; }
#zb-tekst { width: 100%; margin-top: 10px; border: 1px solid var(--linia); border-radius: 10px; padding: 10px 12px; font-size: 14px; resize: vertical; background: #fff; }
.zb-akc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; } .zb-akc .btn2 { min-height: 40px; }
.zb-wyn { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linia); }
.zb-n { font-size: 14px; color: var(--tusz2); } .zb-n b { font-size: 26px; color: var(--tusz); letter-spacing: -.02em; margin-right: 4px; }
.zb-wyn ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.zb-wyn li { display: grid; grid-template-columns: 40px 1fr 26px; gap: 8px; align-items: center; font-size: 14px; }
.zb-wyn .wp { height: 24px; border-radius: 7px; background: #fff; position: relative; overflow: hidden; }
.zb-wyn .wp i { position: absolute; inset: 0 auto 0 0; background: var(--marka10); transition: width .5s var(--p2o); }
.zb-wyn .wp span { position: relative; display: block; padding: 2px 8px; font-size: 12px; color: var(--tusz2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-wyn em { font-style: normal; font-weight: 700; text-align: right; }
.zb-wyp { width: 100%; margin-top: 14px; } .zb-wyp:disabled { opacity: .45; cursor: default; }
.zb-mini { margin: 10px 0 0; } .zb-mini .wlink { font-size: 13px; }
@media (max-width: 760px) { .rz-wyb { grid-template-columns: 1fr; } }
.zb-mail { margin-top: 10px; } .zb-mail label { flex-basis: 100%; } .zb-mail input { flex: 1; min-width: 200px; width: auto; text-align: left; padding: 0 12px; font-weight: 400; }

/* ===== 12.10: płynność (Yuri: „całość łagodna, gładka, płynna, staggered”) ===== */
/* filtry bez przeładowania: znikający kafel gaśnie, zanim reszta się przesunie (app.js podmienListe) */
#lista .siatka > .wy { opacity: 0; transform: scale(.97); transition: opacity .16s ease-out, transform .16s ease-out; pointer-events: none; }
/* [Yuri 13.10 „szarpie, za szybko, nie ma lekkości”] zakładki okazji / dla kogo: wolniej i lżej niż lista. Znikające gasną bez
   pomniejszania (scale ściągało je w bok), nowe wjeżdżają dłużej i z dalszego odstępu; tylko w trakcie podmiany (.plyn),
   pierwsza odsłona strony bez zmian */
.karu-duch { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
.karu-duch > * { position: absolute; margin: 0; opacity: 1; transition: opacity .22s var(--p1o); }   /* opóźnienie per kafel z JS */
.karu-duch.gas > * { opacity: 0; }
.karu.plyn > .wj { transform: translateX(-16px); }
.karu.plyn > .wj.wid { transform: none; transition: opacity .7s var(--p2o) var(--d, 0ms), transform .7s var(--p2o) var(--d, 0ms), height .52s var(--p2o); }
/* ↑ pełna lista, nie sam czas: kafel z własnym transition (np. .kom.kom-duzy: height) gubił wjazd i wskakiwał w 1 klatce [pomiar 13.10] */
.lista-w { overflow-anchor: none; }
.f-opt.zero { opacity: .4; } .f-opt input:disabled { cursor: default; }
/* pas aktywnych filtrów otwiera się i zamyka miękko zamiast wskakiwać */
.akt-w { display: grid; grid-template-rows: 0fr; margin: 0; transition: grid-template-rows .32s var(--p2o), margin .32s var(--p2o), opacity .32s var(--p2o); opacity: 0; }
.akt-w.on { grid-template-rows: 1fr; margin: -16px 0 24px; opacity: 1; }
.akt-w > .aktywne { min-height: 0; overflow: hidden; margin: 0; padding: 2px; }
/* skład zestawu: rozwija się płynnie, opis wjeżdża od lewej — galeria obok przesuwa się miękko, nie skacze */
.sklad { interpolate-size: allow-keywords; }
.sklad details::details-content { height: 0; overflow: hidden; transition: height .38s var(--p2o), content-visibility .38s allow-discrete; }
.sklad details[open]::details-content { height: auto; }
.sklad .tr { opacity: 0; transform: translateX(-10px); transition: opacity .38s var(--p2o) .06s, transform .38s var(--p2o) .06s; }
.sklad details[open] .tr { opacity: 1; transform: none; }
.sklad summary::after { transition: transform .3s var(--p2o); }
.akord details::details-content { height: 0; overflow: hidden; transition: height .38s var(--p2o), content-visibility .38s allow-discrete; }
.akord details[open]::details-content { height: auto; }
/* kafel „Wysyłka” (kroki): bez nagłówka „Tak to działa”, większe kroki (komputer;
   na telefonie kafel ma stałą wysokość, więc zostają rozmiary z reguły dla 760 px) */
@media (min-width: 761px) {
  .kroki { gap: 24px; }
  .kroki li { gap: 8px; font-size: 15px; line-height: 1.45; }
  .kroki li::before { width: 34px; height: 34px; font-size: 16px; margin-bottom: 6px; }
  .kroki b { font-size: 18px; line-height: 1.25; letter-spacing: -0.005em; }
  #obiet-in .kroki b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .akt-w, .sklad .tr, .sklad details::details-content, .akord details::details-content, #lista .siatka > .wy, .karu > .wy { transition: none !important; }
}


/* FAQ (12.10, Yuri: „oddzielić wyraźniej kategorie pytań”): każda grupa to osobny blok — żółta kreska jak w kaflach,
   nagłówek w skali sekcji, jedno zdanie o czym jest, duży odstęp między grupami */
.faq-gr + .faq-gr { margin-top: 64px; }
.faq .faq-g { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; text-transform: none; color: var(--tusz); }
.faq .faq-g::before { content: ''; width: 36px; height: 3px; background: var(--zolc); margin-bottom: 12px; }
.faq .faq-g span { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--tusz2); }
.faq-gr details:first-of-type { border-top: 1px solid var(--linia); }
.faq-o p { max-width: 68ch; }
@media (max-width: 760px) { .faq-gr + .faq-gr { margin-top: 44px; } .faq .faq-g { font-size: 20px; } }

/* pełny ekran zdjęć (12.10): wejście i wyjście jednym ruchem z galerii (app.js ruchLb), tło = tło kadru */
.lb { background: var(--kadr); }
.lb-tor { inset: 56px 0 28px; }
.lb-sl img { max-width: min(94vw, 1400px); max-height: calc(100dvh - 120px); }   /* [Yuri 12.10 „widzę połowę zdjęcia, deadend”] całe zdjęcie zawsze mieści się w ekranie */
::view-transition-group(lbfoto) { animation-duration: .5s; animation-timing-function: var(--p2o); }
::view-transition-old(lbfoto), ::view-transition-new(lbfoto) { animation-duration: .5s; animation-timing-function: var(--p2o); }
.lb.otw.vt, .lb.otw.vt .lb-sl img { animation: none; }
.lb-g, .lb-s { transition: opacity .3s var(--p2o) .2s; }
.lb-s { background: #fff; border-color: transparent; }

/* wariant B bloku ilości (12.10, makieta): licznik + pasek progów zamiast listy */
.k-razem { margin: 6px 0 0; font-size: 15px; color: var(--tusz2); min-height: 1.4em; }
.k-razem b { color: var(--tusz); }
.prog-pas { margin-top: 14px; }
.prog-chipy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.prog-c { width: 100%; min-height: 52px; border: 1px solid var(--linia2); border-radius: 10px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 14px; color: var(--tusz);
  transition: border-color .25s var(--p2o), background-color .25s var(--p2o), box-shadow .25s var(--p2o); }
.prog-c span { font-size: 12px; color: var(--tusz2); }
.prog-c:not(:disabled):hover { border-color: var(--tusz2); }
.prog-c.on { border-color: var(--granat); background: var(--marka10); box-shadow: inset 0 0 0 1px var(--granat); }
.prog-c.on span { color: var(--granat); font-weight: 600; }
.prog-c:disabled { cursor: default; }
.prog-podp { margin: 10px 0 0; font-size: 14px; color: var(--tusz2); line-height: 1.5; }
.prog-podp b { color: var(--tusz); }

/* pełny ekran: palce przesuwają zdjęcia i nie przybliżają strony (zoom zdjęcia = stuknięcie / gest w app.js), 12.10 */
.lb, .lb-tor, .lb-sl { touch-action: pan-x; overscroll-behavior: contain; }
.lb-sl { cursor: zoom-out; } .lb-sl img { cursor: zoom-in; }
.lb-g { z-index: 3; }

/* lupa przy najechaniu (Yuri 12.10: „za szybko — bardziej smooth, delikatniej”; świadomie poza wspólnym .5s przelotu):
   mniejsze powiększenie, dłuższy i miękki dojazd, punkt powiększenia płynie za kursorem z opóźnieniem */
@media (hover: hover) and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .gal-d .sl img { transition: transform .9s var(--p1o), transform-origin 1.1s var(--p1o), opacity .45s var(--p2o); }
  .gal-d.lupa .sl.on img { transform: scale(1.45); transition: transform 1.4s var(--p2o), transform-origin 1.1s var(--p1o), opacity .45s var(--p2o); }
  .zgal-d img { transition: transform .9s var(--p1o), transform-origin 1.1s var(--p1o); }
  .zgal-d.lupa img.on { transform: scale(1.45); transition: transform 1.4s var(--p2o), transform-origin 1.1s var(--p1o); }
}

/* plakietka = skrót do filtra (12.10): własny hover, klik filtruje (app.js plakFiltr) */
.plak[data-plak] { cursor: pointer; transition: background-color .25s var(--p2o), color .25s var(--p2o); }
.plak[data-plak]:hover, .plak[data-plak]:focus-visible { background: var(--granat); color: #fff; }

/* rozwinięty kafel: odpowiedź ma od początku docelową szerokość (app.js --ow), więc tekst nie łamie się w trakcie rozszerzania */
.kom.otw .kom-odp { right: auto; width: var(--ow, auto); }
@media (max-width: 760px) { .kom.otw .kom-odp { width: auto; } }

/* [Yuri 12.10] PAS ZESTAWÓW = INDEKS Z PODGLĄDEM (zastępuje zakładki + rozwijany skład). Białe tło, atrament jako jedyny akcent,
   stała wysokość: podgląd przenika się w miejscu, wiersze nie zmieniają rozmiaru. */
.pasi { margin-top: 80px; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); background: #fff; }
.pasi-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-top: 64px; padding-bottom: 64px; align-items: center; }
.pasi-f { position: relative; display: block; aspect-ratio: 1; width: min(100%, calc(100dvh - 160px)); justify-self: center; }
.pasi-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.985); transition: opacity .45s var(--p2o), transform .6s var(--p2o); }
.pasi-f img.on { opacity: 1; transform: none; }
.pasi-t .pasz-g { margin-bottom: 20px; }
.pasi .pasz-inny { color: var(--tusz2); } .pasi .pasz-inny:hover { color: var(--granat); }
.pasi-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linia); }
.pasi-w { position: relative; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--linia); }
.pasi-a { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "c s"; align-items: center; gap: 2px 16px; padding: 22px 0; color: var(--tusz2); }
.pasi-a[hidden] { display: none; }
.pasi-m { display: none; }
.pasi-n { grid-area: n; font-size: clamp(24px, 2.3vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; transition: color .25s var(--p2o), transform .35s var(--p2o); }
.pasi-c { grid-area: c; font-size: 15px; color: var(--tusz2); }
.pasi-s { grid-area: s; width: 24px; height: 24px; color: var(--tusz); opacity: 0; transform: translateX(-8px); transition: opacity .25s var(--p2o), transform .35s var(--p2o); }
.pasi-w.on .pasi-n { color: var(--tusz); transform: translateX(4px); }
.pasi-w.on .pasi-s { opacity: 1; transform: none; }
.pasi-w::before { content: ''; position: absolute; left: -20px; top: 22px; bottom: 22px; width: 3px; border-radius: 2px; background: var(--tusz); transform: scaleY(0); transition: transform .35s var(--p2o); }
.pasi-w.on::before { transform: scaleY(1); }
.pasi-v { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--kadr); }
.pasi-v button { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tusz2); transition: background .2s var(--p2o), color .2s var(--p2o); }
.pasi-v button[aria-pressed="true"] { background: #fff; color: var(--tusz); box-shadow: 0 1px 2px rgba(20,20,30,.08); }
.pasi-v button:focus-visible, .pasi-a:focus-visible { outline: 2px solid var(--granat); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) { .pasi-a:hover .pasi-n { color: var(--tusz); } }
@media (max-width: 960px) { .pasi-in { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; padding-bottom: 44px; } .pasi-f { width: min(100%, 520px); } }
@media (max-width: 760px) {
  .pasi { margin-top: 56px; } .pasi-f { display: none; }
  .pasi-a { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "m n s" "m c s"; padding: 14px 0; }
  .pasi-m { display: block; grid-area: m; width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: var(--kadr); }
  .pasi-n { font-size: 20px; } .pasi-w { flex-wrap: wrap; gap: 0 12px; } .pasi-a { flex: 1 1 100%; } .pasi-v { margin: -4px 0 14px 76px; } .pasi-w::before { display: none; }
  .pasi-w .pasi-n, .pasi-w.on .pasi-n { color: var(--tusz); transform: none; } .pasi-s, .pasi-w.on .pasi-s { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pasi-f img, .pasi-n, .pasi-s, .pasi-w::before { transition: none !important; } }

/* [Yuri 13.10, wzór Monday] karta hurtowa: wiersz ilości z samymi liczbami, cena progu w dymku, jedna duża suma */
.hi { display: grid; gap: 0; margin-top: 18px; }
.hi-w { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.hi-l { display: grid; gap: 2px; font-size: 14px; line-height: 1.35; padding-top: 3px; }
.hi-l span { color: var(--tusz2); }
.hi-l b { font-weight: 500; }
.hi-z { margin: 0; padding-top: 12px; font-size: 14px; color: var(--tusz2); }
.hi-c { display: flex; flex-wrap: wrap; gap: 8px; }
.hi-p { position: relative; min-width: 46px; height: 40px; padding: 0 10px; border: 1px solid var(--linia2); border-radius: 10px; background: var(--pole, #fff);
  font: inherit; font-size: 14px; color: var(--tusz); cursor: pointer; }
.hi-p:hover { border-color: var(--tusz2); }
.hi-p[aria-pressed="true"], .hi-p.on { border: 1.5px solid var(--tusz); font-weight: 600; }
.hi-info { display: inline-flex; align-items: center; justify-content: center; cursor: default; color: var(--tusz2); }   /* [21.10] drabinka cen przy rozmiarach: nie przycisk */
.hi-info:hover { border-color: var(--linia2); }
.hi-info.on { color: var(--tusz); }
.hi-p:focus-visible, .hi-in:focus-visible { outline: 2px solid var(--granat); outline-offset: 2px; }
.hi-plus { color: var(--tusz2); font-size: 18px; }
.hi-inna { color: var(--tusz2); padding: 0 14px; }
.hi-in { width: 92px; height: 40px; border: 1.5px solid var(--tusz); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; }
.hi-p[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--tusz); color: #fff; font-size: 12px; font-weight: 500; line-height: 1; padding: 8px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .12s ease-out; z-index: 3; }
@media (hover: hover) { .hi-p[data-tip]:hover::after { opacity: 1; } }
.hi-p[data-tip]:focus-visible::after { opacity: 1; }
.hi-cena { display: grid; gap: 4px; padding: 20px 0 0; }
.hi-cena b { font-size: 28px; font-weight: 700; line-height: 1.1; }
.hi-cena span { font-size: 13px; color: var(--tusz2); }
.hi-uw { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--tusz2); }
.hi .btn-kosz { margin-top: 18px; width: 100%; }
@media (prefers-reduced-motion: reduce) { .hi-p[data-tip]::after { transition: none; } }
@media (max-width: 600px) { .hi-w { grid-template-columns: 1fr; gap: 10px; } .hi-l { grid-auto-flow: column; justify-content: start; gap: 8px; } }
.hi-in { -moz-appearance: textfield; appearance: textfield; }
.hi-in::-webkit-outer-spin-button, .hi-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hi-wyc { color: var(--granat); padding: 0 14px; }

/* [Yuri 13.10] PERSONALIZACJA: rozłożony kafel „Personalizujemy” = tor zbliżeń z Brandingu (logo + imię na produkcie)
   + pigułka do panelu. Kafel rozkłada się jak każdy komunikat (§5); zbliżenia stoją na pełnej wysokości odpowiedzi,
   tor przewija się w poziomie ze snapem, kadr na najechanie 1 → 1,03 jak kafel produktu (§8). */
.kom-pers .kom-odp { justify-content: flex-start; padding: 20px 64px 20px 20px; gap: 14px; }
.pers-tor { flex: 1; min-height: 0; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; padding-bottom: 2px; }
.pers-k { flex: 0 0 auto; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; scroll-snap-align: start; color: #fff; }
.pers-f { height: 100%; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: rgba(255,255,255,.08); }
.pers-f img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--p2o); }
.pers-k:hover .pers-f img { transform: scale(1.03); }
.pers-k:focus-visible { outline: 2px solid var(--zolc); outline-offset: 3px; border-radius: var(--r); }
/* podpis w dwóch liniach (technika / rodzaj) i nigdy szerszy niż zbliżenie: width 0 + min-width 100% nie rozpycha kolumny */
.pers-p { width: 0; min-width: 100%; display: grid; font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.78); }
.pers-p b, .pers-p i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pers-p b { color: #fff; font-weight: 700; }
.pers-p i { font-style: normal; }
@container (max-width: 420px) { .pers-dol .kom-o-p { display: none; } .pers-dol .kom-pig { white-space: nowrap; padding: 9px 12px; font-size: 10.5px; letter-spacing: .06em; } }
.pers-dol { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.pers-dol .kom-pig { align-self: center; }
@media (max-width: 760px) {
  .kom-pers .kom-odp { padding: 12px 44px 12px 12px; gap: 10px; }
  .pers-tor { gap: 8px; } .pers-p { font-size: 11px; }
  .pers-dol .kom-o-p { display: none; }
  .pers-dol .kom-pig { padding: 9px 12px; font-size: 10.5px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) { .pers-f img { transition: none; } .pers-tor { scroll-behavior: auto; } }

/* [Yuri 13.10] PERSONALIZACJA, wariant B: krok 1 = zwykłe rozłożenie kafla w bok (.kom.otw), krok 2 = to samo w dół
   (wysokość kafla, 520 ms --p2o — to samo tempo co krok 1). Rząd rośnie razem z kaflem, treść niżej odsuwa się płynnie.
   Środek: hasło + „jeden duży, trzy małe”; kafle zdjęć przesuwają się po slotach jak siatka po filtrze (§8). */
.kom.kom-duzy { transition: height .52s var(--p2o); }
.kom-duzy .kom-odp { justify-content: flex-start; padding: 40px 72px 40px 40px; }
.kom-duzy:not(.gotowy) .kom-odp > * { opacity: 0 !important; transform: translateX(-12px) !important; transition-duration: .16s; }
.kom-duzy.gotowy .kom-odp > :nth-child(3) { transition-delay: .12s; }
.pd { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.pd-h { margin: 0; font-size: clamp(30px, 2.9vw, 44px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; color: #fff; max-width: 15ch; text-wrap: balance; }
.pd-h em { font-style: italic; color: var(--zolc); }
.pd-b { position: relative; width: 100%; }
.pd-k { position: absolute; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: #24267A; cursor: pointer;
  transition: left .64s var(--p2o), top .64s var(--p2o), width .64s var(--p2o), height .64s var(--p2o); }
.pd-k img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-k:not(.glowny):hover img { transform: scale(1.04); } .pd-k img { transition: transform .4s var(--p2o); }
.pd-k:focus-visible { outline: 2px solid var(--zolc); outline-offset: 3px; }
/* plakietka techniki na dużym — jak plakietki kafli (§4), wchodzi, gdy zdjęcie stanie */
.pd-t { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 4px; background: #fff; color: var(--tusz); font-size: 12px; font-weight: 700;
  opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--p2o), transform .3s var(--p2o); }
.pd-k.glowny .pd-t { opacity: 1; transform: none; transition-delay: .5s; }
/* wejście zdjęć po kroku 2: od lewej, co 45 ms (jak nowe kafle po filtrze) */
.kom-duzy .pd-k { opacity: 0; translate: -14px 0; }
.kom-duzy.gotowy .pd-k { opacity: 1; translate: 0 0; transition: left .64s var(--p2o), top .64s var(--p2o), width .64s var(--p2o), height .64s var(--p2o), opacity .5s var(--p2o), translate .5s var(--p2o); }
.kom-duzy.gotowy .pd-k:nth-child(2) { transition-delay: 45ms; } .kom-duzy.gotowy .pd-k:nth-child(3) { transition-delay: 90ms; } .kom-duzy.gotowy .pd-k:nth-child(4) { transition-delay: 135ms; }
@media (max-width: 760px) { .kom-duzy .kom-odp { padding: 20px 44px 20px 16px; } .pd { gap: 18px; } .pd-h { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .kom.kom-duzy, .pd-k, .pd-t, .pd-k img { transition: none !important; } }
/* kafel komunikatu ma własne reguły dla em i span (.kom .kom-f em = mała pigułka CTA, span dziedziczy biel) — tu odcinamy je jawnie */
.kom .kom-f .pd-h em { position: static; display: inline; padding: 0; border: 0; border-radius: 0; background: none; white-space: normal;
  font: italic 800 1em/1 var(--font); letter-spacing: -0.03em; text-transform: none; color: var(--zolc); text-decoration: none; }
.kom .kom-f .pd-t { font-size: 12px; line-height: 1.2; font-weight: 700; color: var(--tusz); letter-spacing: 0; }

/* [Yuri 14.10] PERSONALIZACJA · MINI FILM (wariant 1 z makiety perso-warianty.html). Typografia = kafel komunikatu. */
.pf { position: absolute; z-index: 6; border-radius: var(--r); background: var(--granat); color: #fff; overflow: hidden; }
.pf-pod { height: 0; }
.siatka > .pf-pod, .siatka4 > .pf-pod { grid-column: 1 / -1; }
.pf-kafel { position: absolute; left: 0; bottom: 0; z-index: 7; pointer-events: none; transition: opacity .22s cubic-bezier(.22,.61,.36,1); }
.pf-kafel .kom-f { background: none !important; height: 100%; min-height: 0 !important; }
.pf-kafel .kom-cta::after { display: none; }
.pf.otw .pf-kafel { opacity: 0; }
.pf-tlo { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.pf.srodek .pf-tlo { opacity: 1; }
.pf-tlo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); transform: translateX(-100%); }
.pf-tlo img.on { transform: none; animation: pf-zoom 5.8s cubic-bezier(.37, 0, .63, 1) both; }
@keyframes pf-zoom { from { scale: 1; } to { scale: 1.07; } }
.pf-mgla { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(21,19,31,.94) 0%, rgba(21,19,31,.78) 30%, rgba(21,19,31,.12) 58%, rgba(21,19,31,0) 70%); }
.pf-t { position: absolute; z-index: 4; left: 0; bottom: 0; padding: 0 24px 24px; max-width: min(420px, 50%); display: flex; flex-direction: column; align-items: flex-start; }
.pf-h { display: block; font-size: 23px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.pf-h::after { content: ''; display: block; width: 44px; height: 3px; background: var(--zolc); margin-top: 14px; }
.pf-zd { display: grid; margin-top: 12px; }
.pf-l { grid-area: 1 / 1; align-self: end; margin: 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.86); max-width: 34ch;
  opacity: 0; transform: translateX(-28px); transition: opacity .3s cubic-bezier(.22,.61,.36,1), transform .4s cubic-bezier(.22,.61,.36,1); }
.pf-l.on { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,.61,.36,1) .32s, transform .9s cubic-bezier(.12,.7,.2,1) .32s; }
.pf-l.wy { opacity: 0; transform: translateX(28px); }
.pf-k-cta { margin-top: 18px; text-decoration: none; }
.pf-k-cta:hover { text-decoration: underline; text-underline-offset: 4px; }
.pf-wsk { position: absolute; z-index: 4; right: 28px; bottom: 44px; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.7); text-align: right; transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.pf-wl { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 500; border-bottom: 1px solid var(--zolc); padding-bottom: 1px; white-space: nowrap; }
.pf-wl svg { width: 16px; height: 16px; flex: none; }
.pf.k0 .pf-wsk { opacity: 0 !important; transform: translateX(-10px) !important; }
.pf-post { position: absolute; z-index: 6; right: 28px; bottom: 26px; display: flex; gap: 6px; }
.pf-post { align-items: flex-end; }
.pf-post button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 28px; color: rgba(255,255,255,.66); font-size: 13px; font-weight: 600; line-height: 1; transition: color .4s cubic-bezier(.22,.61,.36,1); }
.pf-post button i { display: block; align-self: stretch; height: 2px; border-radius: 2px; background: rgba(255,255,255,.32); position: relative; overflow: hidden; }
.pf-post button i::after { content: ''; position: absolute; inset: 0; background: var(--zolc); transform: scaleX(0); transform-origin: left; }
.pf-post button.on i::after { animation: pf-post var(--czas, 4500ms) linear forwards; }
.pf-post button.byl i::after { transform: scaleX(1); }
.pf-post button.on, .pf-post button:hover { color: #fff; }
.pf-post button:focus-visible { outline: 2px solid var(--zolc); outline-offset: 3px; }
.pf-kreski button span { display: none; }
.pf-nazwy { gap: 16px !important; }
.pf-kroki { gap: 18px !important; }
.pf-kroki button span { display: inline-flex; align-items: center; gap: 8px; }
.pf-kroki button em { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.4); color: rgba(255,255,255,.7); transition: background .4s, color .4s, border-color .4s; }
.pf-kroki button.on em, .pf-kroki button.byl em { background: var(--zolc); border-color: var(--zolc); color: var(--tusz); }
@media (max-width: 760px) { .pf-post { left: 14px; right: 14px; } .pf-nazwy button span, .pf-kroki button span b { display: none; } .pf-nazwy { gap: 6px !important; } .pf-nazwy button { flex: 1; min-width: 0; } }
@keyframes pf-post { to { transform: scaleX(1); } }
.pf-x { position: absolute; z-index: 9; top: 14px; right: 14px; opacity: 0; transition: opacity .3s; }
.pf.gotowy .pf-x { opacity: 1; }
.pf .pf-wej { opacity: 0; transform: translateX(-10px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--d, 0ms) + 120ms); }
.pf.srodek .pf-wej { opacity: 1; transform: none; }
.pf.zwija .pf-wej, .pf.zwija .pf-x { opacity: 0; transition-duration: .16s; transition-delay: 0ms; }
@media (max-width: 760px) {
  .pf-t { max-width: none; right: 0; padding: 0 14px 14px; } .pf-h { font-size: 20px; } .pf-l { font-size: 12.5px; }
  .pf-mgla { background: linear-gradient(0deg, rgba(21,19,31,.95) 0%, rgba(21,19,31,.7) 38%, rgba(21,19,31,0) 70%); }
  .pf-wsk { display: none; } .pf-post { left: 14px; right: auto; top: 22px; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .pf *, .pf { transition: none !important; animation: none !important; } }
/* wyglad.woal (klient.json): ciemne hero i stopka w kolorze marki [22.10] */
.hero { background: #15131F; color: #fff; }
.hero::before { background: linear-gradient(90deg, rgba(21,19,31,.78) 0%, rgba(21,19,31,.5) 38%, rgba(21,19,31,0) 66%); }
.hero h1 { color: #fff; } .hero p { color: rgba(255,255,255,.88); } .hero .eyebrow { color: var(--zolc); }
.stopka { background-color: #15131F; }
@media (max-width: 760px) { .hero::before { background: linear-gradient(180deg, rgba(21,19,31,.9) 0%, rgba(21,19,31,.6) 32%, rgba(21,19,31,0) 56%); } }

/* [Yuri 18.10] PODKATEGORIE jak Monday Merch: krótka nazwa w belce, panel po najechaniu / fokusie, na stronie kategorii kafle ze zdjęciem */
.nav-k { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.kd { position: relative; display: flex; height: 100%; flex: none; }
.kd > a { display: inline-flex; align-items: center; padding: 0 11px; height: 100%; font-size: 15px; font-weight: 500; white-space: nowrap; position: relative; }
.kd > a::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 3px; background: transparent; }
.kd:hover > a::after, .kd:focus-within > a::after, .kd > a.on::after { background: var(--zolc); }
.kd-p { position: absolute; top: calc(100% + 1px); left: 0; min-width: 260px; background: #fff; border: 1px solid var(--linia); border-top: 0; border-radius: 0 0 var(--r) var(--r);
  padding: 14px 10px 12px; z-index: 30; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s var(--p2o), transform .18s var(--p2o), visibility 0s .18s; }
.kd:not(.zamk):hover .kd-p, .kd:focus-within .kd-p { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--p2o), transform .22s var(--p2o), visibility 0s; }
.kd-p a { display: flex; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 4px; font-weight: 500; white-space: nowrap; }
.kd-p a i { font-style: normal; color: var(--tusz2); font-size: 13px; font-weight: 400; }
.kd-p a:hover { background: var(--kadr); }
.kd-p .kd-t { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.kd-p .kd-w { margin-top: 6px; border-top: 1px solid var(--linia); border-radius: 0; padding-top: 12px; font-size: 14px; }
.podk { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 0 20px; padding-bottom: 2px; }
.podk::-webkit-scrollbar { display: none; }
.pk { flex: none; width: 128px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 500; font-size: 14px; }
.pk-f { width: 128px; height: 128px; border-radius: var(--r); background: var(--kadr); border: 1px solid transparent; display: grid; place-items: center; overflow: hidden; transition: border-color .18s var(--p2o); }
.pk-f img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pk b { font-weight: 500; line-height: 1.25; }
.pk i { font-style: normal; color: var(--tusz2); font-size: 13px; margin-top: -6px; }
.pk:hover .pk-f { border-color: var(--linia2); }
.pk[aria-pressed="true"] .pk-f { border-color: var(--tusz); }
.pk[aria-pressed="true"] b { text-decoration: underline; text-underline-offset: 3px; }
.mm-kd > summary { list-style: none; cursor: pointer; }
.mm-kd > summary::-webkit-details-marker { display: none; }
.mm-pod { padding-left: 52px; min-height: 44px; font-weight: 400; }
@media (max-width: 760px) { .pk, .pk-f { width: 104px; } .pk-f { height: 104px; } }
@media (prefers-reduced-motion: reduce) { .kd-p, .pk-f { transition: none; } }

/* [Yuri 19.10] sekcja Eko na karcie produktu: listek w kolorze --ok, linie materiałów, przypis o źródle danych */
.eko-s { display: inline-flex; align-items: center; gap: 10px; }
.eko-s svg { width: 18px; height: 18px; flex: none; color: var(--ok); }
.eko-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.eko-l li { padding-left: 28px; position: relative; }
.eko-l li::before { content: ''; position: absolute; left: 4px; top: .7em; width: 8px; height: 1px; background: currentColor; opacity: .5; }
.eko-z { margin: 14px 0 0; color: var(--tusz2); }

/* [19.10, Jerzy: „stopka jako wąski pasek; logo z małym shimmerem, że można tapnąć, bez copy; po rozwinięciu nie pełna wersja”]
   telefon: pasek 52 px z samym logo (co 7 s przez logo przechodzi jasny refleks), tap rozwija: trzy linki i linia prawna, nic więcej; biurko: bez zmian */
.st-pas { display: none; }
@media (max-width: 760px) {
  .stopka { margin-top: 56px; }
  .st-pas { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0 var(--pole); background: none; border: 0; color: inherit; cursor: pointer; }
  .st-pas-l { position: relative; display: inline-block; overflow: hidden; line-height: 0; } .st-pas-l img { height: 22px; width: auto; display: block; }
  .st-pas-l::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 40%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); transform: translateX(0); animation: stShimmer 7s cubic-bezier(.215,.61,.355,1) 1.5s infinite; pointer-events: none; }
  .stopka.otw .st-pas-l::after { animation: none; }
  .st-pas i { width: 10px; height: 10px; border-right: 1.5px solid rgba(255,255,255,.7); border-bottom: 1.5px solid rgba(255,255,255,.7); transform: translateY(-3px) rotate(45deg); transition: transform .45s cubic-bezier(.215,.61,.355,1); }
  .stopka.otw .st-pas i { transform: translateY(3px) rotate(225deg); }
  .st-in { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.215,.61,.355,1); }
  .stopka.otw .st-in { grid-template-rows: 1fr; }
  .st-in > .wrap { min-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateX(-10px); transition: opacity .45s cubic-bezier(.215,.61,.355,1) .1s, transform .55s cubic-bezier(.215,.61,.355,1) .05s, padding .55s cubic-bezier(.215,.61,.355,1); }
  .stopka.otw .st-in > .wrap { opacity: 1; transform: none; padding-top: 4px; padding-bottom: 22px; }
  .st-in .st-logo { display: none; } .st-l { margin: 0 0 16px; gap: 0; flex-direction: column; } .st-l a:not(.st-w) { display: none; } .st-l .st-w { padding: 11px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 15px; }
  .st-dol { margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 11px; line-height: 1.5; gap: 4px; color: rgba(255,255,255,.6); } .st-dol .st-mh { display: none; }
}
@keyframes stShimmer { 0% { transform: translateX(0); } 18% { transform: translateX(380%); } 100% { transform: translateX(380%); } }
@media (prefers-reduced-motion: reduce) { .st-in, .st-in > .wrap, .st-pas i { transition: none; } .st-pas-l::after { animation: none; } }

/* ---------- [22.10 Carlsberg/Kasztelan] MARKI: ekran wyboru, pigułka w nagłówku, przejście
   Ruch: power2.out, lewo → prawo, bez sprężyn; prefers-reduced-motion = bez ruchu. Kolor połowy = kolor marki (mk.kolor). */
html.mk-blok { overflow: hidden; }
.mk-wyb { position: fixed; inset: 0; z-index: 1000; display: flex; background: #111; }
.mk-wyb-n { position: absolute; z-index: 3; top: 28px; left: 0; right: 0; margin: 0; text-align: center; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.mk-pol { position: relative; flex: 1 1 0; min-width: 0; border: 0; padding: 0; margin: 0; cursor: pointer; overflow: hidden; background: var(--mk); color: #fff; font: inherit;
  transition: flex-grow .55s cubic-bezier(.215,.61,.355,1); }
.mk-pol-f { position: absolute; inset: 0; background-size: cover; background-position: 50% 100%; opacity: .55; transition: opacity .55s cubic-bezier(.215,.61,.355,1), transform .9s cubic-bezier(.215,.61,.355,1); }
.mk-pol::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--mk) 18%, transparent 70%); }
.mk-pol-t { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; }
.mk-pol-p { position: absolute; top: 100%; left: 0; right: 0; margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: opacity .25s; }
.mk-pol-t img { display: block; max-width: 70%; }
.mk-pol-t b { font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mk-pol-t em { font-style: normal; font-size: 14px; opacity: .8; }
.mk-pol + .mk-pol { border-left: 1px solid rgba(255,255,255,.18); }
@media (hover: hover) { .mk-wyb:not(.wybrana) .mk-pol:hover { flex-grow: 1.35; } .mk-wyb:not(.wybrana) .mk-pol:hover .mk-pol-f { opacity: .8; transform: scale(1.03); } }
.mk-pol:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
/* po wyborze: wybrana połowa rozlewa się na cały ekran i zostaje samo logo na kolorze marki = pierwsza klatka planszy przejścia */
.mk-wyb.wybrana .mk-pol { flex-grow: 0.0001; } .mk-wyb.wybrana .mk-pol.ta { flex-grow: 1; } .mk-wyb.wybrana .mk-pol:not(.ta) .mk-pol-t { opacity: 0; transition: opacity .2s; }
.mk-wyb.wybrana .mk-pol-p, .mk-wyb.wybrana .mk-wyb-n { opacity: 0; } .mk-wyb-n { transition: opacity .2s; }
.mk-wyb.wybrana .mk-pol.ta .mk-pol-f, .mk-wyb.wybrana .mk-pol.ta::after { opacity: 0; transition: opacity .45s cubic-bezier(.215,.61,.355,1); }
@media (max-width: 760px) { .mk-wyb { flex-direction: column; } .mk-pol + .mk-pol { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); } .mk-pol-t img { max-width: 56vw; height: auto !important; } .mk-wyb-n { top: 18px; } }
.mk-nak { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; }
.mk-nak > img { display: block; max-width: 60vw; }
/* przeładowanie w trakcie przejścia: kolor marki od pierwszej klatki, treść pod planszą */
html.mk-wejscie { background: var(--mk-wejscie) var(--mk-logo, none) center / auto var(--mk-logo-h, 0) no-repeat fixed; } html.mk-wejscie body { visibility: hidden; }
html.mk-przed { background: #111; } html.mk-przed body > :not(.mk-wyb) { visibility: hidden; }
/* dymek przy pigułce: tu jest druga marka */
.mk-dymek { position: fixed; z-index: 990; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 2px; background: var(--tusz); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.mk-dymek::before { content: ''; position: absolute; top: -6px; right: var(--strzalka); width: 12px; height: 12px; background: var(--tusz); transform: rotate(45deg); }
.mk-dymek img { display: block; height: 22px; width: auto; background: #fff; border-radius: 2px; padding: 3px 6px; box-sizing: content-box; }
.marka-pig { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 8px; margin-right: 6px; border: 1px solid var(--linia); border-radius: 999px; background: #fff; cursor: pointer;
  transition: border-color .2s; }
.marka-pig i { width: 16px; height: 16px; background: currentColor; color: var(--tusz2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-4-4M20 16H6l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h14l-4-4M20 16H6l4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.marka-pig img { display: block; height: 24px; width: auto; }
.marka-pig:hover { border-color: var(--tusz2); }
.marka-pig:focus-visible { outline: 2px solid var(--granat); outline-offset: 2px; }
.marka-pig.mk-nowa { animation: mkNowa 1.4s cubic-bezier(.215,.61,.355,1); }
@keyframes mkNowa { 0% { border-color: var(--zolc); box-shadow: 0 0 0 0 var(--zolc); } 60% { box-shadow: 0 0 0 6px transparent; } 100% { border-color: var(--linia); } }
@media (max-width: 760px) { .marka-pig { height: 34px; padding: 0 8px 0 6px; margin-right: 2px; } .marka-pig img { height: 20px; } .marka-pig i { display: none; } }
@media (prefers-reduced-motion: reduce) { .mk-pol, .mk-pol-f, .marka-pig { transition: none; } .marka-pig.mk-nowa { animation: none; } }

/* [Yuri 22.10 „dorób loaderek”, „niech się ładuje, musi dolecieć do końca”] pasek postępu pod logo planszy marki.
   [Yuri 22.10 „skokowy, ma być płynny”, 2. podejście] pasek = tor (::before / .mk-ladow) + wypełnienie (::after) ze scaleX w animacji CSS:
   jedzie na kompozytorze, więc nie staje, gdy app.js buduje stronę. Krzywa wykładnicza do 90 % (τ = 800 ms, linear() = 1−e^(−5x) na 4 s):
   prędkość zależy tylko od położenia, więc nowa strona rusza z miejsca, w którym stara stanęła (sv2-mk-v), z tą samą prędkością. */
.mk-ladow, html.mk-wejscie::before, html.mk-wejscie::after { content: ''; position: fixed; z-index: 1004; left: 50%; top: calc(50% + var(--mk-logo-h, 80px) / 2 + 28px);
  width: 120px; height: 2px; margin-left: -60px; border-radius: 2px; background: rgba(255,255,255,.22); }
.mk-ladow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.mk-ladow::after, html.mk-wejscie::after { background: #fff; transform-origin: 0 50%; transform: scaleX(var(--mk-od, 0)); animation: mkLad 4s linear(0.0000, 0.1183, 0.2227, 0.3148, 0.3961, 0.4679, 0.5312, 0.5871, 0.6364, 0.6799, 0.7183, 0.7522, 0.7821, 0.8085, 0.8318, 0.8524, 0.8705, 0.8865, 0.9007, 0.9131, 0.9241, 0.9339, 0.9424, 0.9500, 0.9567, 0.9625, 0.9677, 0.9723, 0.9764, 0.9800, 0.9831, 0.9859, 0.9883, 0.9905, 0.9924, 0.9941, 0.9956, 0.9969, 0.9981, 0.9991, 1.0000) forwards; }
/* [22.10, zmierzone] przeglądarka trzyma ostatnią klatkę starej strony ~400 ms, a animacja nowej już biegła → skok o ~45 %.
   Pasek nowej strony stoi do pierwszej klatki (rAF w <head> dodaje mk-lad-go), więc rusza z miejsca widocznego na starej. */
html.mk-wejscie:not(.mk-lad-go)::after { animation-play-state: paused; }
.mk-ladow.fin::after, html.mk-lad-prz::before, html.mk-lad-prz::after { animation: none; }
.mk-ladow.fin::after { transform: scaleX(var(--mk-s, 1)); }
html.mk-lad-prz::before, html.mk-lad-prz::after { content: none; }
@keyframes mkLad { from { transform: scaleX(var(--mk-od, 0)); } to { transform: scaleX(.9); } }

/* ---------- [Yuri 22.10 Carlsberg] DZIAŁY pod hero: 4 kafle w kolejności klienta (Marketing, Sprzedaż, HR, CSR).
   Kafel = okładka działu z paczki + woal marki od dołu, nazwa działu duża, okazje działu jako linki, liczba pozycji. */
/* [Yuri 22.10] okazje działu: pigułki pod zakładkami działów, zawsze jeden wiersz (telefon: przewijane) */
.dz-ok { margin: -8px 0 24px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.dz-ok::-webkit-scrollbar { display: none; }
.dz-ok button { white-space: nowrap; }
.dz-ok button span { font-weight: 400; margin-left: 6px; color: var(--tusz2); }
@media (max-width: 760px) { .dz-ok { display: flex; margin-left: 0; } .dz-ok button { padding: 0 13px; font-size: 14px; } }

/* ---------- [Yuri 22.10] SKLEP POKAZOWY: ekran zamiast konta i kasy. Układ jak wejście do sklepu merch.help (#ks-brama w ks-start.js):
   nagłówek z logo marki, po lewej tekst, po prawej ściana produktów tej marki płynąca bardzo wolno za matowym szkłem. Zero cieni. */
html.dm-blok { overflow: hidden; }
html.dm-blok #szuf { z-index: 2100; }   /* [Yuri 22.10] formularz wysuwa się nad ekranem demo */
#demo { position: fixed; inset: 0; z-index: 2000; background: var(--papier); display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
#demo .dm-g { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; border-bottom: 1px solid var(--linia); }
#demo .dm-g img { height: 34px; width: auto; display: block; }
#demo .dm-x { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--linia); border-radius: 999px; background: #fff; cursor: pointer; color: var(--tusz); }
#demo .dm-x svg { width: 18px; height: 18px; }
#demo .dm-t { padding: clamp(56px, 16vh, 160px) 56px 72px 32px; overflow: auto; max-width: 680px; }
#demo .dm-t .eyebrow { color: var(--granat); }
#demo h1 { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 800; margin: 14px 0 16px; text-wrap: balance; }
#demo p { font-size: 19px; line-height: 1.5; color: var(--tusz2); margin: 0; max-width: 34em; text-wrap: pretty; }
#demo .dm-a { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
#demo .dm-w { position: relative; overflow: hidden; border-left: 1px solid var(--linia); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 12px; align-items: start; }
#demo .dm-k { display: grid; gap: 12px; animation: dmPlyn 150s linear infinite; will-change: transform; }
#demo .dm-k2 { animation-direction: reverse; animation-duration: 190s; margin-top: -80px; } #demo .dm-k3 { animation-duration: 170s; margin-top: -40px; }
@keyframes dmPlyn { from { transform: translateY(0); } to { transform: translateY(-50%); } }
#demo .dm-k figure { margin: 0; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--kadr); }
#demo .dm-k img { width: 100%; height: 100%; object-fit: cover; display: block; }
#demo .dm-szklo { position: absolute; inset: 0; backdrop-filter: blur(6px) saturate(1.05); -webkit-backdrop-filter: blur(6px) saturate(1.05); background: rgba(255,255,255,.4); }
#demo .dm-d { position: absolute; left: 32px; bottom: 22px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tusz2); opacity: .75; }
#demo :focus-visible { outline: 2px solid var(--granat); outline-offset: 3px; }
@media (max-width: 900px) {
  #demo { grid-template-columns: 1fr; grid-template-rows: auto 30vh minmax(0, 1fr); }
  #demo .dm-w { border-left: 0; border-bottom: 1px solid var(--linia); gap: 8px; padding: 0 8px; } #demo .dm-k { gap: 8px; }
  #demo .dm-g { padding: 14px 18px; } #demo .dm-t { order: 3; padding: 26px 18px 64px; } #demo h1 { font-size: 30px; } #demo p { font-size: 16px; } #demo .dm-d { display: none; }
}
@media (prefers-reduced-motion: reduce) { #demo .dm-k { animation: none; } }

/* [Yuri 26.10 Suntago] szybkie dodanie z kafla (klient.json → szybko) + tagi kontekstu (klient.json → tagi) */
.plak + .plak.tag { top: 44px; }
.plak.tag { display: inline-flex; align-items: center; gap: 5px; }
.kaf-f .plak.tag img { position: static; inset: auto; opacity: 1; transform: none; flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; margin-left: -4px; }
.plak.tag[aria-pressed="true"] { background: var(--granat); color: #fff; }
.kaf-plus { position: absolute; right: 10px; bottom: 10px; z-index: 3; height: 44px; max-width: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: flex-end; overflow: hidden;
  background: var(--granat); color: #fff; cursor: pointer; white-space: nowrap; transition: max-width .32s var(--p2o), background-color .2s var(--p2o), transform .2s var(--p2o); }
.kaf-plus i { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font: 700 26px/1 var(--font, inherit); font-style: normal; transition: transform .32s var(--p2o); }
.kaf-plus b { font-size: 15px; font-weight: 700; padding-left: 18px; opacity: 0; transition: opacity .2s var(--p2o); }
.kaf-plus:hover, .kaf-plus:focus-visible { transform: scale(1.05); }
.kaf-plus.otw { max-width: calc(100% - 20px); transform: none; }
.kaf-plus.otw b { opacity: 1; transition-delay: .1s; }
.kaf-plus.otw i { transform: rotate(90deg); }
.kaf-plus.jest { background: #2E9E0B; }
.kaf-plus.jest i { transform: rotate(0); }
@media (prefers-reduced-motion: reduce) { .kaf-plus.jest { animation: none; } }

/* [Yuri 07.11 Polsat: „wywal ceny”] sklep.bez_cen → html.bez-cen: żadnej kwoty w sklepie (kafle, karta, lepki pasek, koszyk, szukaj, menu) */
.bez-cen .kaf-c, .bez-cen .mm-w i, .bez-cen .hi-cena, .bez-cen .cena, .bez-cen .podp, .bez-cen #k-razem,
.bez-cen .prog-c span, .bez-cen .sb-prog__jedn, .bez-cen .lepki span, .bez-cen .poz .cen, .bez-cen .podsum .wiersz,
.bez-cen .dob span, .bez-cen .w span { display: none !important; }