/* Podstrona „Sklepy internetowe”. Wymaga site.css i strony.css (race, scope, types, gallery, quotes). */
/* --- demo: droga do zakupu --- */
.shop{position:relative;width:100%;border-radius:14px;border:1px solid rgb(255 255 255 / .14);background:#0d0e12;overflow:hidden;box-shadow:0 40px 80px -40px rgb(0 0 0 / .8);font-size:11px;line-height:1.3;color:rgb(250 250 250 / .8);min-height:22rem}
.shop__bar{display:flex;gap:6px;padding:9px 12px;background:rgb(255 255 255 / .05);border-bottom:1px solid rgb(255 255 255 / .08)}
.shop__bar i{width:8px;height:8px;border-radius:50%;background:rgb(255 255 255 / .18)}
.shop__bar span{margin-left:8px;flex:1;height:8px;border-radius:4px;background:rgb(255 255 255 / .06)}
.shop__view{position:absolute;left:0;right:0;top:27px;bottom:0;padding:16px 18px;opacity:0;translate:0 8px;transition:opacity 380ms var(--ease-out),translate 380ms var(--ease-out);pointer-events:none}
.shop__view.is-on{opacity:1;translate:0 0}
.shop__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.shop__prod{border:1px solid rgb(255 255 255 / .1);border-radius:8px;padding:8px;background:rgb(255 255 255 / .03)}
.shop__img{aspect-ratio:1;border-radius:6px;background:linear-gradient(135deg,rgb(115 96 223 / .35),rgb(255 255 255 / .06));margin-bottom:6px}
.shop__prod b{display:block;font-weight:500;color:var(--fg)}
.shop__prod span{display:block;color:rgb(250 250 250 / .55)}
.shop__btn{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;background:var(--accent);color:#fff;font-weight:500;margin-top:6px}
.shop__btn--ghost{background:none;border:1px solid rgb(255 255 255 / .18);color:var(--fg)}
.shop__prod.is-hit{outline:1px solid var(--accent);outline-offset:3px}
.shop__cart{position:absolute;right:18px;top:16px;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid rgb(255 255 255 / .16);color:var(--fg)}
.shop__cart i{width:14px;height:14px;border-radius:50%;background:var(--accent);display:inline-grid;place-items:center;font-size:9px;font-style:normal;color:#fff}
.shop__steps{display:flex;gap:6px;margin-bottom:12px}
.shop__steps span{flex:1;height:3px;border-radius:2px;background:rgb(255 255 255 / .12)}
.shop__steps span.is-on{background:var(--fg)}
.shop__opts{display:grid;gap:6px}
.shop__opt{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid rgb(255 255 255 / .12);border-radius:8px;color:var(--fg)}
.shop__opt small{color:rgb(250 250 250 / .55)}
.shop__opt.is-pick{border-color:var(--accent);background:rgb(115 96 223 / .1)}
.shop__sum{margin-top:10px;display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid rgb(255 255 255 / .1);color:var(--fg)}
.shop__ok{display:grid;place-items:center;text-align:center;height:100%;gap:8px}
.shop__ok i{width:36px;height:36px;border-radius:50%;background:var(--accent);position:relative}
.shop__ok i::after{content:"";position:absolute;left:12px;top:8px;width:8px;height:14px;border-right:2px solid #fff;border-bottom:2px solid #fff;rotate:45deg}
.shop__ok b{font-size:14px;color:var(--fg);font-weight:500}
.shop__ok span{color:rgb(250 250 250 / .55)}
.checkout{display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:1fr;align-items:center;margin-top:clamp(3rem,5vw,4.5rem)}
@media (min-width:1024px){.checkout{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.cstep{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--hairline);color:var(--fg-faint);transition:color 300ms var(--ease-soft)}
.cstep:last-child{border-bottom:1px solid var(--hairline)}
.cstep b{font-weight:500;font-variant-numeric:tabular-nums}
.cstep.is-on{color:var(--fg)}
.cstep.is-on p{color:var(--fg-muted)}
.cstep p{max-width:none;font-size:.9375rem;color:inherit}
.cstep h3{font-size:1.0625rem;letter-spacing:-.012em;color:inherit}
/* --- przepływ zamówienia (SVG) --- */
.flow{margin-top:clamp(3rem,5vw,4.5rem);display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:1024px){.flow{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.flow svg{width:100%;height:auto;display:block}
.flow .path{fill:none;stroke:rgb(255 255 255 / .18);stroke-width:1.5}
.flow .path--on{stroke:var(--accent);stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.flow .node{fill:#0d0e12;stroke:rgb(255 255 255 / .22);stroke-width:1}
.flow .node--on{stroke:var(--accent)}
.flow text{font:500 12px/1 var(--font-body);fill:var(--fg);letter-spacing:-.01em}
.flow text.sub{font-weight:400;font-size:10.5px;fill:rgb(250 250 250 / .55)}
.flow__list{margin:0;padding:0;list-style:none}
.flow__list li{padding:.85rem 0;border-top:1px solid var(--hairline);font-size:.9375rem;color:var(--fg-muted)}
.flow__list li:last-child{border-bottom:1px solid var(--hairline)}
.flow__list b{display:block;font-weight:500;color:var(--fg)}
/* --- liczby --- */
.nums{display:grid;gap:clamp(1.5rem,2vw,2rem);margin-top:clamp(3rem,5vw,4.5rem);grid-template-columns:1fr}
@media (min-width:768px){.nums{grid-template-columns:repeat(3,1fr)}}
.num{padding-top:1.25rem;border-top:1px solid var(--hairline)}
.num .who{font-size:.8125rem;color:var(--fg-faint)}
.num .val{display:block;font-size:clamp(2.25rem,3.6vw,3rem);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin-top:.75rem;font-variant-numeric:tabular-nums}
.num p{margin-top:.75rem;font-size:.9375rem;max-width:none}
/* --- audyt OWCA: było / jest --- */
.audit{display:grid;gap:1px;margin-top:2rem;grid-template-columns:1fr;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden}
@media (min-width:768px){.audit{grid-template-columns:1fr 1fr}}
.audit div{background:var(--bg);padding:1.35rem}
.audit .eyebrow{margin-bottom:.75rem}
.audit ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;font-size:.9375rem;color:var(--fg-muted)}
.audit li{padding-left:1rem;position:relative}
.audit li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:rgb(250 250 250 / .3)}
.audit div:last-child li::before{background:var(--accent)}
/* --- realizacje: zrzut + dwie karty --- */
.works3{display:grid;gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(3rem,5vw,4.5rem);grid-template-columns:1fr}
@media (min-width:1024px){.works3{grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);align-items:start}}
.works3 .shot{max-width:none;width:100%;margin:0}

@media (max-width:639px){.flow svg{display:none}}