/* Strona nagród Print24+. Style z makiety projekt-nagrody-print24-plus.html (PRINT24/docs), widok telefonu jako @media. */
/* Inter jak w sklepie (PRINT24/build/src/fonts.less): te same pliki woff2, hostowane tutaj (CSP font-src 'self'). */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url('fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Zastępcza o metrykach Inter: podmiana po doczytaniu nie przesuwa układu. */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica');size-adjust:107.06%;ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%}
:root{--ink:#0f1419;--ink-2:#2c3640;--ink-3:#5b6873;--ink-4:#8a98a3;--line:#e6e9ec;--line-2:#f0f2f4;--brand:#d33741;--brand-dark:#b02b34;--g1:#10ac82;--g2:#057755;--g3:#04634a;--gl:#e6f7f1;--bg:#f5f6f8;--warn:#fff7e6;--warn-i:#8a5a00;--err:#fff1f1;--err-i:#b02b34}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);font-family:'Inter','Inter Fallback',system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
/* ===================== STRONA NAGRÓD ===================== */
.site{font-size:14px;line-height:1.45;color:var(--ink);min-height:100%}
.site a{color:inherit;text-decoration:none}
.site button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.site svg{display:block;flex:none}
.container{max-width:1280px;margin:0 auto;padding:0 20px}

/* logo programu */
.plus-logo{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:7px;background:#fff;color:#1a1f24;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap;box-shadow:0 1px 5px rgba(0,0,0,.16)}
.plus-logo i{font-style:normal;color:var(--brand);font-weight:800;margin-left:1px}
.plus-logo.bd{box-shadow:none;border:1px solid var(--line)}

/* pasek górny: logo programu, link do sklepu, Moje punkty / stan konta */
.top{display:flex;align-items:center;gap:18px;height:64px;padding:0 20px;background:#fff;border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;gap:18px;width:100%;max-width:1240px;margin:0 auto}
.top .brand{display:flex;align-items:center;gap:14px;font-weight:700;font-size:15px;color:var(--ink-2)}
.top .brand .sep{width:1px;height:22px;background:var(--line)}
.top .brand .nm{color:var(--ink-3);font-weight:600}
.top .shop-logo{display:block;width:auto;height:34px}
.top .lk{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.top .lk svg{width:15px;height:15px}
.top .sp{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:12px;font-size:14.5px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.btn svg{width:16px;height:16px}
.btn.pri{background:var(--brand);color:#fff}
.site a.btn.pri{color:#fff}
.btn.pri:hover{background:var(--brand-dark)}
.btn.wh{background:#fff;color:var(--ink);border-color:#fff}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45)}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.lite{background:#fff;color:var(--ink-2);border-color:var(--line)}
.btn.grn{background:var(--g2);color:#fff}
.btn.sm{height:40px;padding:0 16px;font-size:13.5px;border-radius:10px}
.btn.dis{background:var(--line-2);color:var(--ink-4);border-color:var(--line-2);cursor:default}
.btn.full{width:100%}
/* stan konta w pasku */
.me{display:flex;align-items:center;gap:12px}
.me .pts{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border-radius:999px;background:var(--gl);color:var(--g2);font-weight:800;font-size:15px}
.me .pts i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--g2);color:#fff;font-style:normal;font-size:13px;font-weight:800}
.me .who{font-size:12.5px;color:var(--ink-3);line-height:1.3;text-align:right}
.me .who b{display:block;color:var(--ink);font-weight:600;font-size:13px}
.me .out{font-size:13px;font-weight:600;color:var(--ink-3);text-decoration:underline}

/* HERO */
.hero{position:relative;overflow:hidden;margin:20px 0 0;border-radius:14px;padding:44px 48px;background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 100%);color:#fff}
.hero i.c{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.hero i.c1{width:520px;height:520px;right:-200px;bottom:-320px}
.hero i.c2{width:120px;height:120px;left:50%;top:-56px;background:rgba(255,255,255,.14)}
.hero i.c3{width:42px;height:42px;left:47%;top:78px;background:rgba(255,255,255,.18)}
.hero>*{position:relative;z-index:1}
.hero-g{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:36px 56px;align-items:center}
.hero .tag{display:inline-block;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.18);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-left:12px;vertical-align:middle}
.hero h1{margin:18px 0 12px;font-size:40px;line-height:1.08;letter-spacing:-.025em;font-weight:800}
.hero p.l{margin:0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.92);max-width:600px}
.hero p.l b{color:#fff}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:14px;font-weight:600}
.hero .facts li{display:flex;align-items:center;gap:8px}
.hero .facts svg{width:16px;height:16px}
/* karta w hero: logowanie albo stan punktów */
.hc{background:#fff;color:var(--ink);border-radius:14px;padding:24px;box-shadow:0 14px 40px rgba(0,0,0,.18)}
.hc h3{margin:0 0 6px;font-size:19px;font-weight:800;letter-spacing:-.015em}
.hc p{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.hc .f{display:grid;gap:10px}
.inp{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border:1px solid #cfd5da;border-radius:12px;background:#fff;font-size:15px;color:var(--ink)}
.inp.ph{color:var(--ink-4)}
.inp svg{width:18px;height:18px;color:var(--ink-4)}
.inp.ro{background:var(--line-2);border-color:var(--line-2);color:var(--ink-2)}
.inp.err{border-color:var(--brand);box-shadow:0 0 0 3px rgba(211,55,65,.12)}
.hc .tiny{margin:12px 0 0;font-size:12.5px;color:var(--ink-4);line-height:1.45}
.hc .tiny a{color:var(--g2);font-weight:600;text-decoration:underline}
/* stan punktów (po zalogowaniu) */
.hc.me2{display:grid;grid-template-columns:1fr;gap:0}
.hc .big{display:flex;align-items:baseline;gap:8px;margin:4px 0 2px}
.hc .big b{font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--g2)}
.hc .big span{font-size:18px;font-weight:700;color:var(--ink-3)}
.hc .last{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 0;padding:12px 14px;border-radius:10px;background:var(--bg);font-size:13px;color:var(--ink-3)}
.hc .last b{color:var(--g2);font-weight:800;white-space:nowrap}
.hc .acts{display:flex;gap:8px;margin:14px 0 0}
.hc .acts .btn{flex:1}

/* kroki */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 0}
.how>div{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.how b.n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--gl);color:var(--g2);font-weight:800;font-size:15px}
.how h3{margin:4px 0 3px;font-size:14.5px;font-weight:700}
.how p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-3)}

/* katalog nagród */
.cat{padding:44px 0 56px}
.cat-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 18px}
.cat-h h2{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.cat-h h2::before{content:"";width:4px;height:24px;background:var(--brand);border-radius:2px}
.cat-h p{margin:0;font-size:14.5px;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sort{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px;color:var(--ink-2);font-weight:600}
.sort svg{width:14px;height:14px;color:var(--ink-4)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rw{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rw .im{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:var(--pb,#eef3f7);color:var(--pi,#3a5466)}
.rw .im svg{width:64px;height:64px}
.rw .im .pt{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:#fff;color:var(--g2);font-size:13px;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.rw .im .nw{position:absolute;right:12px;top:12px;height:24px;padding:0 9px;border-radius:999px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center}
.rw .bd{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.rw small.k{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.rw h3{margin:4px 0 4px;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.005em}
.rw p{margin:0 0 14px;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.rw .btn{margin-top:auto;height:42px;font-size:14px;border-radius:10px}
.rw .lack{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.rw .lack .bar{height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.rw .lack .bar i{display:block;height:100%;background:var(--g1);border-radius:3px}
.rw .lack small{font-size:12px;color:var(--ink-3);font-weight:600}
.rw .lack+.btn{margin-top:10px}
.more{display:flex;justify-content:center;margin:24px 0 0}

/* dół strony */
.faq{padding:0 0 48px}
.faq h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 14px}
.faq .qs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.faq .qa{padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.faq .qa h3{margin:0 0 6px;font-size:14.5px;font-weight:700}
.faq .qa p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-3)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 20px 28px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-4)}
.foot .ls{display:flex;gap:18px;flex-wrap:wrap}
.foot a{color:var(--ink-3);font-weight:600}

/* ===================== OKNA ===================== */
.md a,.mail a{color:inherit;text-decoration:none}
.md{width:480px;max-width:100%;background:#fff;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.3);overflow:hidden;color:var(--ink);font-size:14px;line-height:1.45}
.md.w{width:560px}
.md .mh{position:relative;overflow:hidden;padding:22px 24px 20px;background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 100%);color:#fff}
.md .mh::before,.md .mh::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.md .mh::before{width:200px;height:200px;right:-80px;bottom:-110px;background:rgba(255,255,255,.12)}
.md .mh::after{width:44px;height:44px;right:66px;top:16px;background:rgba(255,255,255,.16)}
.md .mh>*{position:relative;z-index:1}
.md .x{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.18);color:#fff;font-size:22px;line-height:1}
.md .mh h3{margin:12px 0 6px;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.md .mh p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.md .mb{padding:22px 24px 24px}
.md .mb .f{display:grid;gap:10px}
.md .mb .tiny{margin:12px 0 0;font-size:12.5px;color:var(--ink-4);line-height:1.5}
.md .mb .tiny a{color:var(--g2);font-weight:600;text-decoration:underline}
.md label.lb{display:block;margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.md .mb h4{margin:0 0 6px;font-size:17px;font-weight:800;letter-spacing:-.015em}
.md .mb p.d{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--ink-3)}
.md .mb p.d b{color:var(--ink);font-weight:600}
/* ikona stanu */
.ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--gl);color:var(--g2);margin:0 0 14px}
.ico svg{width:26px;height:26px}
.ico.err{background:var(--err);color:var(--err-i)}
.ico.warn{background:var(--warn);color:var(--warn-i)}
/* kod 6 cyfr */
.code{display:flex;gap:8px;justify-content:space-between}
.code b{display:grid;place-items:center;flex:1;height:56px;border:1px solid #cfd5da;border-radius:12px;font-size:24px;font-weight:800;letter-spacing:-.02em;background:#fff}
.code b.on{border-color:var(--g2);box-shadow:0 0 0 3px rgba(5,119,85,.14)}
.code b.e{color:var(--ink-4);font-weight:400}
.or{display:flex;align-items:center;gap:12px;margin:18px 0 12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.sub{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 0;font-size:13px;color:var(--ink-3)}
.sub a{color:var(--g2);font-weight:600;text-decoration:underline}
.sub span.t{color:var(--ink-4)}
.msg{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.45}
.msg svg{width:18px;height:18px;flex:none;margin-top:1px}
.msg.e{background:var(--err);color:var(--err-i)}
.msg.i{background:var(--gl);color:var(--g2)}
.msg.w{background:var(--warn);color:var(--warn-i)}
/* okno nagrody */
.md .rwd{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.md .rwd .im{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:var(--pb,#eef3f7);color:var(--pi,#3a5466)}
.md .rwd .im svg{width:84px;height:84px}
.md .rwd small.k{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.md .rwd h4{margin:4px 0 8px;font-size:20px}
.md .rwd p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.md .rwd ul{margin:0;padding:0;list-style:none;font-size:13px;color:var(--ink-2);display:grid;gap:4px}
.md .rwd ul li{display:flex;gap:8px;align-items:center}
.md .rwd ul svg{width:14px;height:14px;color:var(--g1)}
.bal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;margin:18px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--line)}
.bal div{padding:12px 14px;background:#fff;font-size:12px;color:var(--ink-4);font-weight:600}
.bal div b{display:block;margin-top:2px;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.bal div.c b{color:var(--brand)}
.bal div.g b{color:var(--g2)}
.md .ft{display:flex;gap:10px;margin:18px 0 0}
.md .ft .btn{flex:1}
/* paczkomat: wybór */
.pk-s{display:flex;gap:8px}
.pk-s .inp{flex:1}
.pk-map{position:relative;height:190px;margin:12px 0;border-radius:12px;background:#e3ebe6;background-image:linear-gradient(#d4dfd8 1px,transparent 1px),linear-gradient(90deg,#d4dfd8 1px,transparent 1px);background-size:38px 38px;overflow:hidden}
.pk-map::before{content:"";position:absolute;left:-40px;top:70px;width:140%;height:26px;background:#f2f4ef;transform:rotate(-8deg)}
.pk-map::after{content:"";position:absolute;left:30%;top:-10px;width:22px;height:120%;background:#f2f4ef;transform:rotate(12deg)}
.pk-map .pin{position:absolute;display:grid;place-items:center;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#f8bc1f;color:#1b1f24;font-size:10px;font-weight:800;z-index:1;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.pk-map .pin.on{background:var(--brand);color:#fff;width:32px;height:32px}
.pk-map .pin span{transform:rotate(45deg)}
.pk-map .mk{position:absolute;right:10px;bottom:8px;font-size:10px;color:var(--ink-4);z-index:1}
.pk-l{display:grid;gap:8px}
.pk{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.pk.on{border-color:var(--g2);box-shadow:0 0 0 2px rgba(5,119,85,.14)}
.pk i{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:9px;background:#fff3cd;color:#1b1f24;font-style:normal;font-size:11px;font-weight:800}
.pk b{display:block;font-size:14px;font-weight:700}
.pk small{display:block;font-size:12.5px;color:var(--ink-3)}
.pk .dst{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.pk .btn{margin-left:auto}

/* ===================== KROKI WYMIANY (strony) ===================== */
.stp{display:flex;align-items:center;gap:0;margin:24px 0 20px;font-size:13px;font-weight:600;color:var(--ink-4)}
.stp span{display:flex;align-items:center;gap:8px}
.stp span i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--line-2);color:var(--ink-4);font-style:normal;font-size:12.5px;font-weight:800}
.stp span.done i{background:var(--g2);color:#fff}
.stp span.on{color:var(--ink)} .stp span.on i{background:var(--ink);color:#fff}
.stp em{flex:none;width:48px;height:1px;background:var(--line);margin:0 12px}
.two{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start;padding-bottom:56px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.card h2{margin:0 0 4px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.card p.d{margin:0 0 20px;font-size:14px;color:var(--ink-3);line-height:1.5}
.card h3{margin:22px 0 10px;font-size:15px;font-weight:800;letter-spacing:-.01em}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg .full{grid-column:1 / -1}
.fl{display:grid;gap:6px}
.fl label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.fl label small{font-weight:500;color:var(--ink-4);margin-left:4px}
.fl .hint{font-size:12px;color:var(--ink-4)}
.fl .hint a{color:var(--g2);font-weight:600;text-decoration:underline}
.dv{display:grid;gap:10px}
.dv .op{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.dv .op>div{flex:1;min-width:0}
.dv .op.on{border-color:var(--g2);box-shadow:0 0 0 2px rgba(5,119,85,.14)}
.dv .rd{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #cfd5da;background:#fff}
.dv .op.on .rd{border:6px solid var(--g2)}
.dv .op b{display:block;font-size:14.5px;font-weight:700}
.dv .op small{display:block;font-size:12.5px;color:var(--ink-3)}
.dv .op .lg{margin-left:auto;display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:6px;background:#ffcd00;color:#1b1f24;font-size:11px;font-weight:800;letter-spacing:.02em}
.dv .op .free{margin-left:auto;font-size:13px;font-weight:700;color:var(--g2);white-space:nowrap}
.pksel{display:flex;gap:12px;align-items:center;margin:10px 0 0 0;padding:14px 16px;border:1px dashed var(--g1);border-radius:12px;background:var(--gl)}
.pksel i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:#ffcd00;color:#1b1f24;font-style:normal;font-size:11px;font-weight:800}
.pksel b{display:block;font-size:14px;font-weight:700}
.pksel small{display:block;font-size:12.5px;color:var(--ink-2)}
.pksel a{margin-left:auto;font-size:13px;font-weight:700;color:var(--g2);text-decoration:underline;white-space:nowrap}
.ta{min-height:84px;padding:12px 14px;border:1px solid #cfd5da;border-radius:12px;font-size:14px;color:var(--ink-4)}
.actbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.actbar .bk{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink-3)}
.actbar .bk svg{width:16px;height:16px}
/* podsumowanie (prawa kolumna) */
.sum{position:sticky;top:20px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:14px}
.sum h3{margin:0;font-size:15px;font-weight:800}
.sum .it{display:flex;gap:12px;align-items:center}
.sum .it .im{display:grid;place-items:center;flex:none;width:68px;height:68px;border-radius:10px;background:var(--pb,#eef3f7);color:var(--pi,#3a5466)}
.sum .it .im svg{width:34px;height:34px}
.sum .it b{display:block;font-size:14px;font-weight:700;line-height:1.3}
.sum .it small{display:block;font-size:12.5px;color:var(--ink-3)}
.sum dl{margin:0;display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13.5px}
.sum dl div{display:flex;justify-content:space-between;gap:12px}
.sum dt{color:var(--ink-3)} .sum dd{margin:0;font-weight:700;text-align:right}
.sum dd.g{color:var(--g2)} .sum dd.c{color:var(--brand)}
.sum .after{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.sum .after b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--g2)}
.sum .after b span{font-size:14px;font-weight:700;color:var(--ink-3);margin-left:4px}
.sum .fine{font-size:12px;color:var(--ink-4);line-height:1.45;margin:0}
.ck{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink-2)}
.ck i{flex:none;width:20px;height:20px;border-radius:5px;border:2px solid #cfd5da;background:#fff;margin-top:1px}
.ck i.on{border-color:var(--g2);background:var(--g2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}
.ck a{color:var(--g2);font-weight:600;text-decoration:underline}
/* zatwierdzenie: bloki do sprawdzenia */
.rv{display:grid;gap:12px}
.rv .bl{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:12px}
.rv .bl h4{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4)}
.rv .bl div{font-size:14px;line-height:1.5;color:var(--ink-2)}
.rv .bl div b{color:var(--ink);font-weight:700}
.rv .bl a{font-size:13px;font-weight:700;color:var(--g2);text-decoration:underline}
/* potwierdzenie */
.ok{max-width:720px;margin:40px auto 72px;text-align:center}
.ok .okc{position:relative;overflow:hidden;padding:40px 40px 36px;border-radius:16px;background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 100%);color:#fff}
.ok .okc i.c{position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}
.ok .okc i.c1{width:300px;height:300px;left:-120px;bottom:-180px}
.ok .okc i.c2{width:80px;height:80px;right:40px;top:-20px;background:rgba(255,255,255,.16)}
.ok .okc>*{position:relative}
.ok .tick{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:#fff;color:var(--g2)}
.ok .tick svg{width:30px;height:30px}
.ok h2{margin:0 0 8px;font-size:30px;font-weight:800;letter-spacing:-.02em}
.ok .okc p{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.92)}
.ok .okc p b{color:#fff}
.ok .num{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.16);font-size:13.5px;font-weight:700}
.ok .nx{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 0;text-align:left}
.ok .nx div{padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:12px}
.ok .nx b{display:block;font-size:13.5px;margin:0 0 3px}
.ok .nx small{font-size:12.5px;color:var(--ink-3);line-height:1.45;display:block}
.ok .acts{display:flex;justify-content:center;gap:10px;margin:22px 0 0}

/* ===================== TELEFON ===================== */
@media (max-width:700px){
  .container{padding:0 14px}
  .top{height:56px;padding:0 14px}
  .top .brand .nm,.top .brand .sep,.top .lk{display:none}
  .top .shop-logo{height:30px}
  .top .btn.sm{height:36px;padding:0 13px;font-size:13px}
  .me .who{display:none}
  .me .pts{height:34px;font-size:14px}
  .hero{margin-top:14px;padding:24px 18px 22px;border-radius:12px}
  .hero i.c1{width:260px;height:260px;right:-120px;bottom:auto;top:-160px}
  .hero i.c2,.hero i.c3{display:none}
  .hero-g{grid-template-columns:minmax(0,1fr);gap:20px}
  .hc .acts{flex-direction:column}
  .hero .tag{display:block;width:max-content;margin:12px 0 0}
  .hero h1{font-size:28px;margin-top:12px}
  .hero p.l{font-size:14.5px}
  .hero .facts{flex-direction:column;gap:8px;margin-top:16px;font-size:13.5px}
  .hc{padding:18px}
  .hc h3{font-size:17px}
  .hc .big b{font-size:44px}
  .how{grid-template-columns:1fr;gap:8px;margin-top:14px}
  .how>div{padding:14px 16px}
  .cat{padding:32px 0 40px}
  .cat-h h2{font-size:21px}
  .cat-h p{font-size:13.5px}
  .chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;margin:0 -14px;padding-left:14px;padding-right:14px;scrollbar-width:none}
  .chip{flex:none;height:34px;font-size:13px}
  .sort{display:none}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .rw .im svg{width:48px;height:48px}
  .rw .im .pt{left:8px;top:8px;height:24px;font-size:12px;padding:0 8px}
  .rw .im .nw{right:8px;top:8px}
  .rw .bd{padding:10px 12px 12px}
  .rw small.k{display:none}
  .rw h3{font-size:13.5px;margin:0 0 4px}
  .rw p{display:none}
  .rw .btn{height:38px;font-size:13px;padding:0 10px}
  .faq .qs{grid-template-columns:1fr;gap:10px}
  .faq h2{font-size:19px}
  .foot{flex-direction:column;align-items:flex-start;padding:18px 14px 26px}
  /* okna jako arkusze od dołu */
  .ov{align-items:flex-end;padding:0}
  .ov .md{width:100%;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.3)}
  .md .mh{padding:18px 18px 18px}
  .md .mh h3{font-size:20px}
  .md .mb{padding:18px 18px 22px}
  .md .rwd{grid-template-columns:1fr}
  .md .rwd .im{aspect-ratio:auto;height:150px}
  .md .rwd .im svg{width:70px;height:70px}
  .md .ft{flex-direction:column}
  .code b{height:50px;font-size:22px}
  .pk-map{height:150px}
  /* kroki */
  .stp{margin:16px 0 14px;font-size:12px}
  .stp span i{width:24px;height:24px;font-size:12px}
  .stp em{width:20px;margin:0 8px}
  .stp span .tx{display:none} .stp span.on .tx{display:inline}
  .two{grid-template-columns:1fr;gap:12px;padding-bottom:36px}
  .card{padding:18px 16px}
  .card h2{font-size:19px}
  .fg{grid-template-columns:1fr;gap:12px}
  .sum{position:static;padding:16px}
  .actbar{flex-direction:column-reverse;align-items:stretch}
  .actbar .btn{width:100%}
  .actbar .bk{justify-content:center}
  .rv .bl{grid-template-columns:1fr;gap:6px}
  .rv .bl a{justify-self:start}
  .ok{margin:20px 0 40px}
  .ok .okc{padding:30px 20px 26px}
  .ok h2{font-size:24px}
  .ok .nx{grid-template-columns:1fr;gap:8px}
  .ok .acts{flex-direction:column}
  .dv .op .free{font-size:12px}
  .pksel{flex-wrap:wrap}
  .pksel>div{flex:1 1 0;min-width:0}
  .pksel a{flex-basis:100%;margin-left:0}
}

/* ===================== APLIKACJA (uzupełnienia do makiety) ===================== */
[hidden]{display:none!important}
.p1{--pb:#f6ede4;--pi:#7a4b2a}.p2{--pb:#eef6f1;--pi:#2f6b4f}.p3{--pb:#f0efe8;--pi:#5a5a3a}
.p4{--pb:#f7eaea;--pi:#8a3a3a}.p5{--pb:#eef3f7;--pi:#3a5466}.p6{--pb:#f3eef7;--pi:#5a3a6b}
.rw .im img,.md .rwd .im img,.sum .it .im img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.md .rwd .im{overflow:hidden}
.site input,.site textarea,.site select{font:inherit;color:var(--ink)}
.inp input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:15px}
input.inp{width:100%;outline:0}
input.inp:focus,.inp:focus-within,textarea.ta:focus{border-color:var(--g2);box-shadow:0 0 0 3px rgba(5,119,85,.14)}
textarea.ta{width:100%;resize:vertical;color:var(--ink);outline:0;font:inherit}
.fl .err,.err{font-size:12.5px;color:var(--err-i);font-weight:600}
.chip,.sort{cursor:pointer;font:inherit}
.chip{font-size:13.5px;font-weight:600}
form.inl{display:inline}
.lnk,.me .out{border:0;background:none;padding:0;font:inherit;cursor:pointer;color:var(--g2);font-weight:700;text-decoration:underline}
.me .out{color:var(--ink-3);font-weight:600}
.me .who a{color:var(--ink-3)}
.sub .lnk{font-size:13px}
.sub .lnk:disabled{color:var(--ink-4);text-decoration:none;cursor:default}
.kodin{width:100%;height:56px;border:1px solid #cfd5da;border-radius:12px;text-align:center;font-size:26px;font-weight:800;letter-spacing:.4em;outline:0}
.kodin:focus{border-color:var(--g2);box-shadow:0 0 0 3px rgba(5,119,85,.14)}
.ov{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;background:rgba(15,20,25,.55)}
.md .x{text-decoration:none;border:0;cursor:pointer}
.x-ciemny{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--line-2);color:var(--ink);font-size:22px;border:0;cursor:pointer}
.md .mb{position:relative}
.pk-md{width:900px}
.pk-mapa{height:min(70vh,560px);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.ck input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--g2)}
.btn{cursor:pointer;font-family:inherit}
.rv .bl .lnk{font-size:13px}
.actbar .bk.lnk{color:var(--ink-3);font-weight:600;text-decoration:none}
.ok .card{text-align:left}
.ok .card .ico{margin-bottom:14px}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.card .acts{margin-top:18px}
.tab{overflow-x:auto}
.tab table{width:100%;border-collapse:collapse;font-size:13.5px}
.tab th,.tab td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tab th{font-size:12px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.04em}
.tab small{color:var(--ink-3)}
.stt{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;background:var(--line-2);color:var(--ink-3);white-space:nowrap}
.stt.s-nowe{background:var(--warn);color:var(--warn-i)}.stt.s-w_realizacji{background:#eef3f7;color:#3a5466}
.stt.s-wyslane{background:var(--gl);color:var(--g2)}.stt.s-anulowane{background:var(--err);color:var(--err-i)}
.hc .last+.last{margin-top:6px}
@media (max-width:700px){
  .pk-md{width:100%}
  .pk-mapa{height:65vh}
}
.stp span i svg{width:14px;height:14px}
.site .lnk{border:0;background:none;padding:0;font:inherit;font-size:13px;cursor:pointer;color:var(--g2);font-weight:700;text-decoration:underline}
.site .actbar .bk.lnk{font-size:14px;color:var(--ink-3);font-weight:600;text-decoration:none}
.site .me .out{color:var(--ink-3);font-weight:600;font-size:13px;text-decoration:underline}
.ok .num svg{width:16px;height:16px}
@media (max-width:700px){
  .ov{align-items:flex-end;padding:0}
  .ov .md{width:100%;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.3)}
  .md .ft .btn,.hc .acts .btn{flex:none}
}
/* Logo jak w nagłówku sklepu (PRINT24/dev-pkg/devpkg/css: desktop 44 px, tablet 36 px, telefon 34 px przy pasku 58 px). */
.top{height:72px}
.top .shop-logo{height:44px}
@media (max-width:1024px){.top .shop-logo{height:36px}}
@media (max-width:700px){
  .top{height:58px}
  .top .shop-logo{height:34px}
}
/* Pasek górny przypięty jak w sklepie; cień po przewinięciu (klasa z nagrody.js). */
.top{position:sticky;top:0;z-index:40;transition:box-shadow .2s ease-out}
.top.scrolled{box-shadow:0 2px 12px rgba(15,20,25,.08)}
#katalog{scroll-margin-top:84px}
/* Stopka na szerokość kontenera głównego: tekst i linia równo z treścią. */
.container>.foot{padding-left:0;padding-right:0}
/* Lista zalet w hero: dwie kolumny po dwa punkty (Jerzy, 2026-11-09); na telefonie jedna. */
.hero .facts{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start;gap:8px 28px}
@media (max-width:1150px){.hero .facts{grid-template-columns:1fr}}
/* Stopka zawsze na dole okna, także przy krótkiej stronie; treść z odstępem od przypiętego paska. */
.site{min-height:100vh;display:flex;flex-direction:column}
.site>.container{width:100%}
.site>.stopka-w{margin-top:auto}
.site>.container>.two:first-child{margin-top:24px}
/* Linki obok logo w osi napisu „print24” (41/134 wysokości obrazka), a nie środka obrazka ze sloganem. */
.top{--logo-h:44px}
.top .shop-logo{height:var(--logo-h)}
.top .brand .sep,.top .brand .nm,.top .lk{transform:translateY(calc(var(--logo-h) * -0.194))}
@media (max-width:1024px){.top{--logo-h:36px}}
@media (max-width:700px){.top{--logo-h:34px}}
/* Katalog: 3 kolumny na komputerze (Jerzy, 2026-11-09); na telefonie bez zmian. */
@media (min-width:701px){.grid{grid-template-columns:repeat(3,1fr)}}
/* Zdjęcia nagród w proporcjach kart podarunkowych (ok. 16:9), bez ucinania grafiki. */
.rw .im{aspect-ratio:16/9}
.md .rwd .im:has(img){aspect-ratio:16/9;background:none}
.md .rwd .im img{object-fit:contain}
.sum .it .im:has(img){width:96px;height:54px}
/* Na zdjęciach punkty w prawym górnym rogu (lewy górny to zwykle logo marki), „Nowość” w lewym. */
.rw .im:has(img) .pt{left:auto;right:12px}
.rw .im:has(img) .nw{right:auto;left:12px}
@media (max-width:700px){
  .grid{grid-template-columns:1fr}
  .rw .im:has(img) .pt{right:8px}
  .rw .im:has(img) .nw{left:8px}
  .rw p{display:block}
}
/* Formularz: pola w jednym wierszu zaczynają się na tej samej wysokości (podpowiedź pod jednym nie rozpycha drugiego). */
.fl{align-content:start}
.sum .it .im:has(img) img{object-fit:contain;background:#fff}
/* Własne okno wyboru paczkomatu (bez tokenu Geowidgetu). */
.pk-s{margin:0 0 8px}
.pk-gps{font-size:13px;margin:4px 0 10px}
.pk-info{margin:0 0 10px;font-size:13px;color:var(--ink-3)}
.pk-l{max-height:min(55vh,460px);overflow:auto}
button.pk{width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
button.pk:hover,button.pk:focus{border-color:var(--g2);box-shadow:0 0 0 2px rgba(5,119,85,.14);outline:0}
button.pk>span:not(.dst){flex:1;min-width:0}
.pksel i,.pk i{background:#ffcd00}
/* Wyraźny przycisk wyboru paczkomatu (jak pole wyboru w makiecie). */
.site .pk-wybierz{display:flex;align-items:center;gap:14px;width:100%;margin:10px 0 0;padding:14px 16px;border:2px dashed var(--g1);border-radius:12px;background:var(--gl);color:var(--ink);text-align:left;cursor:pointer}
.site .pk-wybierz:hover,.site .pk-wybierz:focus{border-style:solid;outline:0;box-shadow:0 0 0 3px rgba(5,119,85,.14)}
.site .pk-wybierz.err{border-color:var(--brand);background:var(--err)}
.pk-wybierz i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:#ffcd00;color:#1b1f24}
.pk-wybierz i svg{width:20px;height:20px}
.pk-wybierz span{flex:1;min-width:0}
.pk-wybierz b{display:block;font-size:15px;font-weight:800;color:var(--g2)}
.pk-wybierz small{display:block;font-size:12.5px;color:var(--ink-3)}
.pk-wybierz svg.st{width:18px;height:18px;color:var(--g2)}
/* Okno paczkomatu z mapą: mapa po lewej, wyszukiwarka i lista po prawej; na telefonie mapa nad listą. */
.pk-md{width:1080px}
.pk-uklad{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px}
.pk-uklad .pk-mapa{height:min(68vh,560px);border-radius:12px;overflow:hidden;border:1px solid var(--line);z-index:0}
.pk-panel{display:flex;flex-direction:column;min-height:0;max-height:min(68vh,560px)}
.pk-panel .pk-l{flex:1;max-height:none;overflow:auto}
.pk-pin span{display:block;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#f8bc1f;border:2px solid #1b1f24;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pk-pin.on span{background:var(--brand);border-color:#fff}
.pk-dymek{display:grid;gap:6px;min-width:200px;font-family:inherit}
.pk-dymek b{font-size:14px}
.pk-dymek small{font-size:12.5px;color:var(--ink-3)}
.site .pk-dymek .btn,.pk-dymek .btn{height:36px;font-size:13px;color:#fff;background:var(--brand)}
@media (max-width:700px){
  .pk-uklad{grid-template-columns:1fr;gap:10px}
  .pk-uklad .pk-mapa{height:34vh}
  .pk-panel{max-height:none}
  .pk-panel .pk-l{max-height:32vh}
}
/* Pinezka paczkomatu (SVG w nagrody.js): żółta z ciemną szafką, podświetlona czerwona. */
.pk-pin svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.pk-pin .t{fill:#ffcd00;stroke:#1b1f24;stroke-width:1.6}
.pk-pin .s{fill:#1b1f24}
.pk-pin .k{stroke:#ffcd00;stroke-width:1.4;fill:none}
.pk-pin.on .t{fill:var(--brand);stroke:#fff}
.pk-pin.on .s{fill:#fff}
.pk-pin.on .k{stroke:var(--brand)}
/* Panel wyszukiwania paczkomatu: pole i przycisk tej samej wysokości, link lokalizacji do lewej. */
.pk-panel .pk-s{display:flex;gap:8px;align-items:stretch;margin:0 0 10px}
.pk-panel .pk-s .inp{flex:1;min-width:0}
.site .pk-panel .pk-s .btn{height:48px;border-radius:12px;padding:0 18px;flex:none}
.site .pk-panel .pk-gps{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;text-align:left;margin:0 0 8px}
.pk-panel .pk-gps svg{width:15px;height:15px}
.pk-panel .pk-info{margin:0 0 10px;line-height:1.45}
.pk-panel .pk-s .inp input{text-overflow:ellipsis}
.pk-panel .pk-s .inp input::placeholder{color:var(--ink-4)}
/* Ikona paczkomatu (szafka ze skrytkami) zamiast napisu na żółtym kwadracie. */
.pk i.szafka svg,.pksel i.szafka svg{width:24px;height:24px;display:block}
/* Lista paczkomatów: miejsce na obwódkę po najechaniu, żeby nie była ucinana przez przewijanie. */
.pk-panel .pk-l{padding:3px 6px 3px 3px;margin:0 -6px 0 -3px}
/* Krzyżyk w białych oknach (paczkomat, regulamin): ciemny, widoczny (styl .md .x z makiety jest dla zielonego nagłówka). */
.site .md .x.x-ciemny{position:absolute;top:12px;right:12px;z-index:5;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--line-2);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
.site .md .x.x-ciemny:hover{background:var(--line)}
/* Regulamin w oknie */
.reg-md{width:820px}
.reg-md .mb{max-height:86vh;overflow:auto;padding:28px 32px}
.regulamin h2{margin:0 40px 2px 0}
.regulamin h3{margin:22px 0 8px;font-size:15px}
.regulamin ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.regulamin a{color:var(--g2);font-weight:600;text-decoration:underline}
@media (max-width:700px){.reg-md .mb{max-height:90vh;padding:20px 18px}}
/* Hero na telefonie bez ściany tekstu (Jerzy, 2026-11-09): przelicznik w ramce, jedno zdanie, zalety jako trzy kafelki. */
.hero .rate,.hero .lm,.hero .facts .fm{display:none}
@media (max-width:700px){
  .hero{padding:20px 16px 18px}
  .hero .tag{display:inline-block;width:auto;margin:0 0 0 8px;padding:4px 9px;font-size:10px}
  .hero h1{font-size:26px;margin:16px 0 14px}
  .hero p.l{display:none}
  .hero .rate{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.15)}
  .hero .rate b{font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
  .hero .rate span{font-size:22px;font-weight:700;opacity:.65}
  .hero .rate small{flex-basis:100%;font-size:12.5px;color:rgba(255,255,255,.88)}
  .hero .lm{display:block;margin:12px 0 0;font-size:14px;line-height:1.45;color:rgba(255,255,255,.92)}
  .hero .lm b{color:#fff}
  .hero .facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;font-size:12.5px;line-height:1.25}
  .hero .facts li{flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border-radius:10px;background:rgba(255,255,255,.12)}
  .hero .facts li:first-child,.hero .facts .fd{display:none}
  .hero .facts .fm{display:inline}
}
/* Katalog nagród na samej górze, powitanie i logowanie pod nim (Jerzy, 2026-11-09). */
.start{display:flex;flex-direction:column}
.start>.cat{order:-1;padding:32px 0 20px}
@media (max-width:700px){.start>.cat{padding:20px 0 28px}}
/* Odstęp nad pytaniami, odkąd katalog nie stoi już między krokami a FAQ. */
.start>.faq{padding-top:44px}
@media (max-width:700px){.start>.faq{padding-top:30px}}
/* Pole e-mail tej samej szerokości co przycisk także w Safari na telefonie (domyślne marginesy i wygląd pola). */
.hc .f,.md .mb .f{grid-template-columns:minmax(0,1fr)}
.inp{box-sizing:border-box;width:100%;min-width:0}
.inp input{width:100%;margin:0;padding:0;border-radius:0;-webkit-appearance:none;appearance:none}
@media (max-width:700px){.inp input{font-size:16px}}
/* Na telefonie nagłówek nie pokazuje e-maila, historii ani wylogowania, więc są w stopce. */
.foot .tel{display:none}
.foot .out{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ink-3);cursor:pointer}
@media (max-width:700px){.foot .tel{display:inline}}
/* „Wróć do sklepu” obok logo, na środku jego wysokości, także na telefonie (Jerzy, 2026-11-10). */
.top .lk.wroc{display:flex;align-self:center;transform:none;padding-left:18px;border-left:1px solid var(--line);line-height:1.2;white-space:nowrap}
.top .lk.wroc:hover{color:var(--g2)}
@media (max-width:700px){.top .in{gap:12px}.top .lk.wroc{padding-left:12px;font-size:13px;gap:5px}}
.top .lk.wroc .fm{display:none}
.me .pts{white-space:nowrap}
@media (max-width:700px){.top .lk.wroc .fd{display:none}.top .lk.wroc .fm{display:inline}}
/* Tekst pod „Wyślij link do logowania”: trzy wyśrodkowane linie (Jerzy, 2026-11-10). */
.tiny.srodek{text-align:center}
/* (i) z dymkiem: najechanie na komputerze, dotknięcie na telefonie (fokus przycisku). */
.tip{position:relative;display:inline-block;vertical-align:-3px}
.tip-i{display:inline-flex;margin-left:5px;padding:0;border:0;background:none;color:var(--ink-4);cursor:pointer}
.tip-i svg{width:16px;height:16px}
.tip-i:hover,.tip-i:focus{color:var(--g2);outline:0}
.tip-t{position:absolute;bottom:calc(100% + 8px);right:-10px;z-index:5;width:250px;padding:10px 12px;border-radius:10px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;line-height:1.45;text-align:left;box-shadow:0 6px 20px rgba(15,20,25,.18);opacity:0;visibility:hidden;transition:opacity .15s ease-out}
.tip-t::after{content:"";position:absolute;top:100%;right:13px;border:6px solid transparent;border-top-color:var(--ink)}
.tip:hover .tip-t,.tip-i:focus-visible+.tip-t,.tip.on .tip-t{opacity:1;visibility:visible}
/* FAQ jako rozwijane wiersze zamiast kafelków (Jerzy, 2026-11-10). */
.faq .qs{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq .qa{padding:0;background:none;border:0;border-radius:0}
.faq .qa+.qa{border-top:1px solid var(--line)}
.faq .qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none}
.faq .qa summary::-webkit-details-marker{display:none}
.faq .qa summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);transform:rotate(45deg) translateY(-3px);transition:transform .2s ease-out}
.faq .qa[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .qa summary:hover{color:var(--g2)}
.faq .qa p{margin:0;padding:0 20px 18px;font-size:14px;line-height:1.6;color:var(--ink-3);max-width:860px}
@media (max-width:700px){.faq .qa summary{padding:14px 16px;font-size:14.5px}.faq .qa p{padding:0 16px 16px;font-size:13.5px}}
/* Na telefonie dymek na całą szerokość akapitu, żeby nie wychodził poza ekran, gdy (i) spadnie do nowej linii. */
@media (max-width:700px){.tiny{position:relative}.tip{position:static}.tip-t{left:0;right:0;width:auto;bottom:calc(100% + 6px)}.tip-t::after{display:none}}
.faq .qa p a{color:var(--g2);font-weight:600;text-decoration:underline}