/* ================================================================
   SKLEPY WOOCOMMERCE - design "Orbita" (templates/landing-sklepy-woocommerce.php)

   Warstwa na home-cosmos.css (wspólne: cz-aeo, cz-facts, cz-stats,
   cz-compare, cz-when, cz-ps, cz-guides, cz-plans). Tu: hero z panelem
   WordPress / WooCommerce (zamówienia + automaty po płatności), zakres
   wdrożenia, kalkulator kosztów, diagnoza sklepu, integracje.
   Prefiks wo-.
   ================================================================ */

.wo-hero .cz-hero__title{font-size:clamp(2.1rem,3.7vw,3.3rem)!important}
.wo-hero .cz-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}

/* ================================================================
   HERO - panel WooCommerce (wymiary w cqw: skaluje się z oknem)
   ================================================================ */
.wo-stage{position:relative;z-index:0;justify-self:end;width:100%;max-width:620px;padding:40px 0 120px;perspective:1600px}
.wo-win{position:relative;width:90%;margin-left:auto;aspect-ratio:480/330;border-radius:18px;overflow:hidden;background:#F0F0F1;container-type:inline-size;
	box-shadow:0 0 0 1px rgba(165,180,252,.3),0 0 0 7px rgba(255,255,255,.04),0 60px 100px -50px rgba(0,0,0,.95),0 0 140px -40px rgba(127,84,179,.6);
	transform:rotateY(-7deg) rotateX(3deg);transform-origin:70% 50%}
.wo-ui{position:absolute;inset:0;display:grid;grid-template-columns:24cqw minmax(0,1fr);font-family:var(--cz-body);color:#1D2327}
.wo-side{display:flex;flex-direction:column;gap:.4cqw;padding:2.4cqw 0;background:#1D2327;color:#C3C4C7;font-size:2.3cqw}
.wo-side__logo{display:block;padding:0 2.6cqw 2cqw;font-size:4.4cqw;color:#fff}
.wo-side span:not(.wo-side__logo){display:flex;align-items:center;gap:1.8cqw;padding:1.7cqw 2.6cqw}
.wo-side span i{width:3cqw;font-size:2.3cqw;text-align:center;opacity:.8}
.wo-side span.is-on{background:#7F54B3;color:#fff}
.wo-side b{margin-left:auto;display:grid;place-items:center;min-width:4cqw;height:4cqw;padding:0 1cqw;border-radius:99px;background:#fff;color:#7F54B3;font:700 2.1cqw/1 var(--cz-body);transition:transform .3s var(--cz-ease)}
.wo-side b.is-bump{transform:scale(1.35)}
.wo-main{display:flex;flex-direction:column;gap:2cqw;min-width:0;padding:3cqw 3cqw 0}
.wo-main__head{display:flex;align-items:baseline;gap:2cqw}
.wo-main__head b{font:700 3.8cqw/1 var(--cz-display);letter-spacing:-.02em}
.wo-main__head span{font:500 2cqw/1 var(--cz-mono);color:#787C82}
.wo-main__head em{margin-left:auto;font:500 1.7cqw/1 var(--cz-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#A7AAAD}
.wo-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;margin:0}
.wo-kpis>div{padding:1.8cqw 2.2cqw;border-radius:1.6cqw;background:#fff;border:1px solid #DCDCDE}
.wo-kpis dt{font:600 1.65cqw/1 var(--cz-mono);letter-spacing:.06em;text-transform:uppercase;color:#787C82}
.wo-kpis dd{margin:1cqw 0 0;font:700 3.5cqw/1 var(--cz-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wo-th,.wo-orders li{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 13cqw;gap:2cqw;align-items:center}
.wo-th{padding:0 2.2cqw;font:600 1.65cqw/1 var(--cz-mono);letter-spacing:.06em;text-transform:uppercase;color:#787C82}
.wo-th span:last-child,.wo-orders li em{text-align:right}
.wo-orders{display:grid;align-content:start;gap:1.2cqw;margin:0;padding:0;list-style:none;overflow:hidden}
.wo-orders li{height:8.6cqw;padding:0 2.2cqw;border-radius:1.6cqw;background:#fff;border:1px solid #DCDCDE;font-size:2.25cqw;animation:woIn .5s var(--cz-ease) both}
.wo-orders li>span:first-child{min-width:0}
.wo-orders li b{display:block;font-weight:700;color:#2271B1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wo-orders li small{display:block;margin-top:.5cqw;font-size:1.85cqw;color:#787C82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wo-orders li i{justify-self:start;padding:1cqw 1.6cqw;border-radius:.9cqw;font:600 1.85cqw/1 var(--cz-body);font-style:normal;white-space:nowrap;transition:background .4s,color .4s}
.wo-orders li[data-st="0"] i{background:#F8DDA7;color:#94660C}
.wo-orders li[data-st="1"] i{background:#C6E1C6;color:#2C4700}
.wo-orders li[data-st="2"] i{background:#C8D7E1;color:#2E4453}
.wo-orders li em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums}
@keyframes woIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

.wo-auto{position:absolute;left:0;bottom:0;z-index:5;width:min(250px,60%);padding:14px 16px;border-radius:18px;background:#F4F5FA;color:var(--cz-ink-text);box-shadow:0 30px 60px -28px rgba(0,0,0,.9)}
.wo-auto__head{margin-bottom:10px;font:500 .6rem/1 var(--cz-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cz-muted-l)}
.wo-auto__head i{margin-right:6px;color:#7F54B3}
.wo-auto ol{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.wo-auto li{display:grid;grid-template-columns:26px minmax(0,1fr) 14px;gap:9px;align-items:center;font-size:.76rem;font-weight:600;color:#9AA1B8;transition:color .35s}
.wo-auto li i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#E4E6EF;font-size:.66rem;color:#9AA1B8;transition:background .35s,color .35s}
.wo-auto li::after{content:"\2713";font-size:.7rem;font-weight:700;color:#10B981;opacity:0;transition:opacity .3s}
.wo-auto li.is-on{color:var(--cz-ink-text)}
.wo-auto li.is-on i{background:#EDE3F7;color:#7F54B3}
.wo-auto li.is-on::after{opacity:1}
.cz-js .wo-stage{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1.2s var(--cz-ease),transform 1.2s var(--cz-ease)}
.cz-js .cz-hero.is-in .wo-stage{opacity:1;transform:none;transition-delay:.7s}

/* ================================================================
   01, 02 - definicja, zakres
   ================================================================ */
.cz-aeo__more a,.cz-head__aside a{color:var(--cz-indigo-deep);font-weight:600}
.cz-dark .cz-head__aside a{color:var(--cz-cyan)}
.wo-scope{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.wo-scope li{position:relative;padding:22px;border-radius:22px;border:1px solid rgba(165,180,252,.12);background:rgba(255,255,255,.02);transition:border-color .3s,background .3s}
.wo-scope li:hover{border-color:rgba(167,139,250,.45);background:rgba(127,84,179,.08)}
.wo-scope__n{position:absolute;top:20px;right:20px;font:500 .66rem/1 var(--cz-mono);color:var(--cz-muted)}
.wo-scope__ic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:16px;border-radius:13px;background:rgba(167,139,250,.16);color:#C4B5FD}
.cz-page .wo-scope h3{margin-bottom:8px!important;font-size:1rem!important;line-height:1.3!important;color:#fff}
.wo-scope p{font-size:.86rem;line-height:1.6;color:var(--cz-muted)}

/* ================================================================
   03 - kalkulator + diagnoza
   ================================================================ */
.wo-tools{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:18px;align-items:start}
.wo-calc,.wo-diag{padding:26px;border-radius:28px;background:#fff;border:1px solid rgba(11,16,32,.08);box-shadow:0 40px 70px -56px rgba(49,46,129,.5)}
.cz-page .wo-tools h3{display:flex;align-items:center;gap:10px;margin-bottom:18px!important;font-size:1.08rem!important;line-height:1.3!important;color:var(--cz-ink-text)}
.wo-tools h3 i{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:10px;background:#EEF0FF;color:var(--cz-indigo-deep);font-size:.8rem}
.wo-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px;padding:0;border:0;min-width:0}
.wo-seg--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wo-seg legend{grid-column:1/-1;display:flex;justify-content:space-between;width:100%;margin-bottom:8px;padding:0;font-size:.84rem;font-weight:700;color:var(--cz-ink-text)}
.wo-seg legend em{font:500 .62rem/1.6 var(--cz-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--cz-muted-l)}
.wo-seg label{position:relative;cursor:pointer}
.wo-seg input{position:absolute;opacity:0}
.wo-seg label>span{display:grid;gap:3px;height:100%;padding:12px 13px;border-radius:14px;border:1.5px solid rgba(11,16,32,.12);font-size:.82rem;font-weight:600;color:var(--cz-indigo-deep);transition:border-color .25s,background .25s}
.wo-seg label>span b{font:600 .92rem/1.2 var(--cz-display);color:var(--cz-ink-text)}
.wo-seg label>span small{font-size:.72rem;font-weight:400;line-height:1.35;color:var(--cz-muted-l)}
.wo-seg input:checked+span{border-color:var(--cz-indigo-deep);background:#F5F6FF}
.wo-seg input:focus-visible+span,.wo-chk input:focus-visible+span{outline:2px solid var(--cz-indigo-deep);outline-offset:2px}
.wo-chk{position:relative;display:block;margin-bottom:12px;cursor:pointer}
.wo-chk input{position:absolute;opacity:0}
.wo-chk>span{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 13px;border-radius:13px;border:1px solid rgba(11,16,32,.12);font-size:.84rem;font-weight:500;color:#3A4459;transition:background .25s,border-color .25s}
.wo-chk>span::before{content:"";flex-shrink:0;width:16px;height:16px;border-radius:5px;border:1.5px solid rgba(11,16,32,.22);transition:background .2s,border-color .2s}
.wo-chk>span b{margin-left:auto;font-size:.78rem;color:var(--cz-indigo-deep);white-space:nowrap}
.wo-chk input:checked+span{border-color:var(--cz-indigo-deep);background:#EEF0FF;color:var(--cz-ink-text)}
.wo-chk input:checked+span::before{background:var(--cz-indigo-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--cz-indigo-deep)}
.wo-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.wo-nums label{display:grid;gap:6px;align-content:space-between;font-size:.76rem;font-weight:600;line-height:1.3;color:#3A4459}
.wo-nums input{width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(11,16,32,.14);background:#F7F8FC;font:600 16px/1 var(--cz-body);color:var(--cz-ink-text)}
.wo-nums input:focus{outline:2px solid var(--cz-indigo-deep);outline-offset:1px;background:#fff}
.wo-calc__out{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 0;padding:16px;border-radius:20px;background:var(--cz-deep)}
.wo-calc__out>div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05)}
.wo-calc__out .is-sum{grid-column:1/-1;background:rgba(34,211,238,.1)}
.wo-calc__out dt{font:500 .62rem/1 var(--cz-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cz-muted)}
.wo-calc__out dd{margin:6px 0 0;font-size:.84rem;color:var(--cz-muted)}
.wo-calc__out dd b{font:600 1.45rem/1 var(--cz-display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.wo-calc__out .is-sum dd b{color:var(--cz-cyan)}
.wo-calc__split{margin:10px 0 14px!important;font-size:.8rem;line-height:1.55;color:var(--cz-muted-l)}
.wo-note{margin-top:12px!important;font-size:.76rem;line-height:1.55;color:var(--cz-muted-l)}
.wo-diag__list{display:grid;gap:7px;list-style:none;margin:0;padding:0}
.wo-check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:center;padding:9px 12px;border-radius:14px;border:1px solid rgba(11,16,32,.08);cursor:pointer;font-size:.84rem;line-height:1.4;color:#27304A;transition:background .25s,border-color .25s}
.wo-check input{position:absolute;opacity:0;pointer-events:none}
.wo-check__box{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;border:1.5px solid rgba(11,16,32,.2);color:#fff;font-size:.66rem;transition:background .25s,border-color .25s}
.wo-check__box i{opacity:0;transition:opacity .2s}
.wo-check:has(input:checked){background:#FFF6F6;border-color:#FECDD3}
.wo-check input:checked+.wo-check__box{background:#F43F5E;border-color:#F43F5E}
.wo-check input:checked+.wo-check__box i{opacity:1}
.wo-check input:focus-visible+.wo-check__box{outline:2px solid var(--cz-indigo-deep);outline-offset:3px}
.wo-diag__out{display:grid;gap:10px;margin-top:16px;padding:18px;border-radius:20px;background:var(--cz-deep);color:var(--cz-text)}
.wo-diag__out small{font:500 .62rem/1 var(--cz-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cz-cyan)}
.wo-diag__out>b{font:600 1rem/1.35 var(--cz-display);color:#fff}
.wo-diag__out ol{display:grid;gap:6px;margin:0;padding-left:18px;font-size:.82rem;line-height:1.5;color:rgba(232,234,246,.86)}
.wo-diag__out ol:empty{display:none}

/* ================================================================
   04, 06, 10
   ================================================================ */
.wo-compare tbody th{width:19%}
.wo-compare td{width:27%}
.wo-compare thead th.is-good{color:var(--cz-cyan)}
.wo-integr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wo-integr article{padding:22px;border-radius:22px;border:1px solid rgba(165,180,252,.12);background:rgba(255,255,255,.02)}
.wo-integr article:nth-child(n+4){grid-column:span 1}
.cz-page .wo-integr h3{display:flex;align-items:center;gap:10px;margin-bottom:14px!important;font-size:1rem!important;color:#fff}
.wo-integr h3 i{color:#C4B5FD}
.wo-integr ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.wo-integr li{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.06);font-size:.8rem;font-weight:500;color:rgba(232,234,246,.88)}
.wo-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.wo-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:.9rem;line-height:1.5;color:rgba(232,234,246,.86)}
.wo-list i{margin-top:5px;font-size:.7rem;color:var(--cz-cyan)}

/* ================================================================
   RESPONSYWNOŚĆ
   ================================================================ */
@media (max-width:1100px){
	.wo-scope{grid-template-columns:repeat(2,minmax(0,1fr))}
	.wo-integr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
	.wo-hero .cz-hero__grid{grid-template-columns:1fr}
	.wo-stage{justify-self:center;max-width:560px;margin-top:24px}
	.wo-tools{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
	.wo-hero .cz-hero__title{font-size:clamp(1.8rem,8.4vw,2.4rem)!important}
	.wo-stage{padding:10px 0 170px}
	.wo-win{width:100%;transform:none}
	.wo-auto{left:50%;width:min(280px,90%);transform:translateX(-50%)}
	.wo-scope,.wo-integr{grid-template-columns:1fr}
	.wo-calc,.wo-diag{padding:20px;border-radius:22px}
	.wo-seg,.wo-seg--3,.wo-nums{grid-template-columns:1fr}
	.wo-calc__out{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
	.wo-orders li{animation:none}
}