/* ===== index.html ===== */
/* ============ ARGOTRUST — sticker + rolka opinii ============
Tokeny --tp / --tp-soft / --tp-ink siedzą w tokens.css (jedno źródło prawdy). */
/* --- sticker --- */
.argotrust{position:fixed;left:20px;bottom:20px;z-index:280;display:flex;align-items:center;gap:14px;
background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 34px 12px 18px;
box-shadow:var(--shadow-md);transition:transform .2s ease,box-shadow .2s ease;max-width:300px}
.argotrust:hover{transform:translateY(-2px);box-shadow:0 .5rem 1.6rem rgba(0,0,0,.22)}
.argotrust .rate{font-size:30px;font-weight:700;color:var(--tp);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.02em}
.argotrust .sep{width:1px;align-self:stretch;background:var(--border);margin:2px 0}
.argotrust .at-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.argotrust .at-brand{display:flex;align-items:center;gap:5px;font-size:16px;font-weight:700;color:var(--heading);line-height:1}
.argotrust .at-meta{font-size:11px;color:var(--muted);line-height:1.35}
.argotrust .at-meta b{color:var(--heading);font-weight:600}
.argotrust .at-close{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--muted);
font-size:17px;line-height:1;cursor:pointer;padding:2px 4px}
.argotrust .at-close:hover{color:var(--heading)}
.argotrust.hide{display:none}
@media (max-width:900px){.argotrust{display:none}}
/* --- rolka opinii --- */
/* ============ ARGOTRUST — ocena zbiorcza + rolka opinii ============
Uklad wzorowany na widgetach zaufania (blok oceny po lewej, karty po prawej),
ale w tokenach bocianek. Kolor --tp jest CELOWO niezalezny od --primary sklepu:
rebranding przemalowuje sklep, ale nie znak ArgoTrust. */
.at-strip{background:var(--tint);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
padding:var(--section-gap) 0;margin:var(--section-gap) 0}
.at-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;align-items:start}
/* --- blok oceny --- */
.at-score-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
padding:26px 24px;box-shadow:var(--shadow-sm);position:sticky;top:16px}
.at-score-big{display:flex;align-items:baseline;gap:10px;margin:2px 0 8px}
.at-score-big b{font-size:56px;line-height:1;font-weight:700;color:var(--tp);letter-spacing:-.03em;
font-variant-numeric:tabular-nums}
.at-score-big span{font-size:var(--fs-md);color:var(--muted)}
.at-score-base{font-size:var(--fs-sm);color:var(--muted);margin:12px 0 0;line-height:1.5}
.at-score-base b{color:var(--heading);font-weight:600}
.at-score-rec{font-size:var(--fs-sm);color:var(--muted);margin:4px 0 16px}
.at-score-card .at-link{display:inline-flex;align-items:center;gap:7px;color:var(--tp);font-weight:600;
font-size:var(--fs-sm)}
.at-score-card .at-link:hover{text-decoration:underline}
/* --- gwiazdki: wypelnione swieca, reszta wygaszona --- */
.at-stars{display:flex;gap:3px}
.at-stars svg{fill:var(--border-strong)}
.at-stars svg.on{fill:#ffb400}
.at-stars.sm{gap:2px}
/* --- rolka --- */
.at-railwrap{position:relative;min-width:0}
.at-railhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.at-railhead h2{margin:0;font-size:var(--fs-3xl)}
.at-nav{display:flex;gap:8px;flex-shrink:0}
.rail-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-strong);
background:var(--surface);color:var(--heading);cursor:pointer;display:grid;place-items:center;
transition:border-color .18s,color .18s}
.rail-btn:hover{border-color:var(--tp);color:var(--tp)}
.at-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px;
scrollbar-width:none;-ms-overflow-style:none}
.at-rail::-webkit-scrollbar{display:none}
.at-rail .rcard{scroll-snap-align:start;flex:0 0 300px;background:var(--surface);
border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 20px;
display:flex;flex-direction:column;gap:12px}
.rc-head{display:flex;flex-direction:column;gap:5px}
.rc-author{font-size:var(--fs-lg);font-weight:600;color:var(--heading);line-height:1.2}
.rc-verified{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--tp);font-weight:600}
.at-rail .rcard p{margin:0;font-size:var(--fs-md);color:var(--text);line-height:1.6;flex:1}
.rc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
font-size:var(--fs-xs);color:var(--muted);margin-top:auto;padding-top:10px;border-top:1px solid var(--border)}
.rc-src{font-weight:600;color:var(--heading)}
/* pasek postepu zamiast systemowego scrollbara (szerokosc = widoczna czesc rolki) */
.at-progress{height:4px;border-radius:2px;background:var(--border);margin-top:16px;overflow:hidden}
.at-progress i{display:block;height:100%;background:var(--tp);border-radius:2px;width:30%;
transition:width .15s,transform .15s}
@media (max-width:980px){
.at-layout{grid-template-columns:1fr;gap:24px}
.at-score-card{position:static;display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:center}
.at-score-card .eyebrow{grid-column:1/-1}
.at-score-big{margin:0}
.at-score-base,.at-score-rec{grid-column:2}
.at-score-card .at-link{grid-column:1/-1;margin-top:6px}
}
@media (max-width:760px){
.at-nav{display:none}
.at-rail .rcard{flex-basis:84%}
.at-score-card{grid-template-columns:1fr}
.at-score-base,.at-score-rec,.at-score-card .at-link{grid-column:1}
}
/* ===== produkt.html ===== */
/* galeria: każdy plik osadzony RAZ jako zmienna CSS, używany i w miniaturze, i w podglądzie */
:root{
--g1:url('../../images/bocianki/g-02.webp'); --g2:url('../../images/bocianki/g-01.webp'); --g3:url('../../images/bocianki/g-03.webp');
--g4:url('../../images/bocianki/g-04.webp'); --g5:url('../../images/bocianki/g-05.webp'); --g6:url('../../images/bocianki/g-06.webp');
--g7:url('../../images/bocianki/g-07.webp'); --g8:url('../../images/bocianki/g-08.webp'); --g9:url('../../images/bocianki/g-09.webp');
--g10:url('../../images/bocianki/g-10.webp'); --g11:url('../../images/bocianki/g-11.webp'); --g12:url('../../images/bocianki/g-12.webp');
--g13:url('../../images/bocianki/g-13.webp');
}
/* ===== BUY-BOX: pas warunków zamówienia (układ wg makiety demo, treść bocianek) ===== */
.usps{background:var(--tint);border-radius:var(--radius-md);padding:16px 20px;margin-top:20px;
display:flex;flex-direction:column;gap:10px}
.usps div{display:flex;align-items:center;gap:12px;font-size:var(--fs-md);color:var(--text)}
.usps svg{color:var(--primary);flex:0 0 auto}
.usps b{font-weight:600;color:var(--heading)}
.usps .free-left{color:var(--muted);font-size:var(--fs-sm)}
.wa-line{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:var(--fs-md)}
.wa-line .ic{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#25d366;
display:grid;place-items:center;color:#fff}
.wa-line b{font-weight:600;color:var(--heading)}
.bok-line{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;padding-left:42px;
font-size:var(--fs-sm);color:var(--muted)}
.bok-line a{color:var(--primary)}
.pay-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.pay-strip span{border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;
font-size:var(--fs-xs);font-weight:600;color:var(--muted);background:var(--surface)}
@media (max-width:520px){.bok-line{padding-left:0}}
/* ===== trust.html ===== */
/* ============ ARGOTRUST (wariant A) ============
Tokeny --tp / --tp-soft / --tp-ink siedzą w tokens.css (jedno źródło prawdy). */
/* --- hero --- */
.at-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.at-hero h1{font-size:var(--fs-4xl);margin:0 0 12px}
.at-hero p{font-size:var(--fs-lg);color:var(--muted);margin-bottom:22px;max-width:56ch}
.at-actions{display:flex;gap:12px;flex-wrap:wrap}
.at-score{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:28px;text-align:center;box-shadow:var(--shadow-sm)}
.at-brandmark{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--fs-lg);color:var(--heading);margin-bottom:10px}
.at-big{display:block;font-size:64px;line-height:1;font-weight:700;color:var(--tp);letter-spacing:-.03em}
.at-score>.muted{display:block;font-size:var(--fs-md);margin-top:6px}
.at-bars{margin:22px 0 16px;text-align:left}
.at-bar{display:grid;grid-template-columns:92px 1fr 46px;align-items:center;gap:10px;font-size:var(--fs-sm);margin-bottom:8px}
.at-bar i{height:8px;border-radius:99px;background:var(--surface-muted);display:block;overflow:hidden}
.at-bar i span{display:block;height:100%;background:var(--tp)}
.at-bar.neg i span{background:var(--border-strong)}
.at-meta2{font-size:var(--fs-sm);color:var(--muted);border-top:1px solid var(--border);padding-top:14px}
.at-meta2 b{color:var(--heading)}
/* --- kanały --- */
.at-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.at-chan{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;display:flex;flex-direction:column;gap:8px}
.at-chan.on{border-color:var(--tp);box-shadow:0 0 0 1px var(--tp) inset}
.at-chan .src{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--heading)}
.at-chan .n{font-size:var(--fs-2xl);font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums;line-height:1.1}
.at-chan .st{font-size:var(--fs-sm);color:var(--muted)}
.at-chan .tag{align-self:flex-start;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
border-radius:99px;padding:3px 10px;background:var(--tp-soft);color:var(--tp-ink);font-weight:600}
.at-chan .tag.soon{background:var(--surface-muted);color:var(--muted)}
/* --- filtr + siatka opinii --- */
.at-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.at-filter .chip.on{border-color:var(--tp);color:var(--tp);box-shadow:0 0 0 1px var(--tp) inset}
.at-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;display:flex;flex-direction:column;gap:10px}
.rcard.hide{display:none}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-sm);color:var(--muted)}
.rc-src{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--heading)}
.rc-rec{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--tp)}
.rcard p{margin:0;font-size:var(--fs-md);color:var(--text);line-height:1.6}
.rc-who{font-size:var(--fs-sm);color:var(--muted);margin-top:auto;padding-top:6px;border-top:1px solid var(--border)}
.at-more{display:flex;justify-content:center;margin-top:26px}
/* --- CTA --- */
.at-cta{background:var(--tp-soft);border:1px solid var(--tp);border-radius:var(--radius-md);padding:26px 30px;
display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.at-cta b{display:block;color:var(--heading);font-size:var(--fs-xl);margin-bottom:4px}
.at-cta span{color:var(--text);font-size:var(--fs-md)}
@media (max-width:980px){
.at-hero{grid-template-columns:1fr;gap:28px}
.at-channels,.at-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
.at-hero h1{font-size:var(--fs-3xl)}
.at-big{font-size:52px}
.at-channels,.at-grid{grid-template-columns:1fr}
}
/* ===== .usp w 3 kolumnach (strona ArgoTrust) — klasa zamiast inline,
żeby media queries mobile nadal zwijały siatkę ===== */
.usp.usp-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.usp.usp-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.usp.usp-3{grid-template-columns:1fr}}