/* ================================================================= NX SHOP — nowoczesny styl sklepu nutra (GeneratePress child) ----------------------------------------------------------------- • Wszystko oskopowane pod .nx — nie koliduje z motywem. • Motyw = zmienne na .nx (inny produkt: podmień --brand/--lime). • .nx-breakout — owiń .nx, jeśli kontener GP jest wąski, a chcesz pełną szerokość:
… ================================================================= */ .nx{ /* MOTYW — podmieĹ„ pod produkt */ --brand:#0fa958; --brand-d:#0a7f42; /* zieleĹ„ CTA */ --lime:#d9f24f; --lime-d:#c4e02e; --lime-soft:#f3fada; --gold:#f2b41c; /* BAZA */ --ink:#0d120f; --dark:#101711; --dark-2:#16211a; --bg:#f5f6f2; --card:#ffffff; --text:#171c18; --muted:#68736c; --line:#e5e9e1; --line-2:#d7ddd2; --r:16px; --r-lg:24px; --sh-sm:0 1px 2px rgba(13,18,15,.05),0 10px 26px -14px rgba(13,18,15,.14); --sh:0 2px 8px rgba(13,18,15,.06),0 30px 70px -30px rgba(13,18,15,.28); --fd:'Space Grotesk',ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif; --ft:'Inter',ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif; --maxw:1240px; color:var(--text); background:var(--bg); font-family:var(--ft); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } .nx *,.nx *::before,.nx *::after{box-sizing:border-box} .nx img{max-width:100%;display:block} .nx a{color:inherit;text-decoration:none} .nx button{font-family:inherit} .nx h1,.nx h2,.nx h3,.nx h4,.nx p,.nx ul{margin:0;padding:0} .nx ul{list-style:none} .nx h1,.nx h2,.nx h3,.nx h4{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;line-height:1.08} .nx .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .nx :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px} .nx-breakout{width:100vw;position:relative;left:50%;margin-left:-50vw} /* podĹ›wietlenie w nagĹ‚Ăłwku (marker) */ .nx .hl{background:linear-gradient(to top,var(--lime) 34%,transparent 34%)} .nx .kick{display:inline-flex;align-items:center;gap:8px;background:var(--lime-soft);border:1px solid #e2eebf; color:#3d4a12;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:7px 14px;border-radius:999px} .nx .kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)} /* animacje wejĹ›cia (JS dodaje .in) */ .nx .rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease} .nx .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .nx .rv{opacity:1;transform:none;transition:none} .nx .mtrack{animation:none!important} .nx *{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* ---------- PASEK MARQUEE (announcement) ---------- */ .nx .annc{background:var(--ink);color:#dfe8de;overflow:hidden;font-size:13px;font-weight:600} .nx .mtrack{display:inline-flex;white-space:nowrap;animation:nxmarq 30s linear infinite} .nx .mgrp{display:inline-flex;align-items:center;gap:40px;padding:11px 20px 11px 40px} .nx .mgrp i{font-style:normal;color:var(--lime)} @keyframes nxmarq{to{transform:translateX(-50%)}} /* ---------- HEADER (glass) ---------- */ .nx .hd{position:sticky;top:0;z-index:60;background:rgba(245,246,242,.82);backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--line)} .nx .hd-in{display:flex;align-items:center;gap:26px;height:74px} .nx .logo{font-family:var(--fd);font-weight:700;font-size:24px;letter-spacing:-.03em;display:inline-flex;align-items:center} .nx .logo span{color:var(--brand)} .nx .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);margin-left:5px;box-shadow:0 0 0 4px var(--lime-soft)} .nx .menu{display:flex;gap:2px;margin-left:8px} .nx .menu a{padding:9px 14px;border-radius:999px;font-weight:600;font-size:14.5px;color:#3c453f;transition:.15s;cursor:pointer} .nx .menu a:hover{background:#fff;color:var(--ink);box-shadow:var(--sh-sm)} .nx .tools{margin-left:auto;display:flex;align-items:center;gap:8px} .nx .tbtn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:#333d36;cursor:pointer;transition:.15s} .nx .tbtn:hover{border-color:var(--brand);color:var(--brand)} .nx .cartp{position:relative;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;border:0;cursor:pointer;transition:.15s} .nx .cartp:hover{transform:translateY(-1px);box-shadow:var(--sh-sm)} .nx .cartp .bdg{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:11.5px;font-weight:800} @media(max-width:1060px){.nx .menu{display:none}} @media(max-width:520px){.nx .cartp .lbl{display:none}} /* ---------- BREADCRUMB ---------- */ .nx .crumbs{font-size:13px;color:var(--muted);padding:18px 0 4px} .nx .crumbs a:hover{color:var(--brand)} .nx .crumbs b{color:var(--text);font-weight:600} /* ---------- HERO ---------- */ .nx .hero{padding:14px 0 42px} .nx .hgrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr) 360px;gap:26px;align-items:start} @media(max-width:1080px){.nx .hgrid{grid-template-columns:1fr 1fr}} @media(max-width:780px){.nx .hgrid{grid-template-columns:1fr}} /* galeria — ciemna scena z poĹ›wiatÄ… */ .nx .stage{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1.04;display:grid;place-items:center; background:radial-gradient(90% 70% at 70% 12%,rgba(217,242,79,.16),transparent 55%), radial-gradient(80% 80% at 12% 88%,rgba(15,169,88,.22),transparent 60%), linear-gradient(160deg,#141c15,#0c110d 70%); box-shadow:var(--sh)} .nx .stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px} .nx .blob{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;filter:blur(46px);opacity:.5; background:conic-gradient(from 0deg,#0fa958,#d9f24f,#0fa958);animation:nxspin 14s linear infinite} @keyframes nxspin{to{transform:rotate(360deg)}} .nx .view{position:relative;z-index:2;width:100%;height:100%;display:none;place-items:center} .nx .view.on{display:grid} .nx .view svg{width:66%;height:auto;filter:drop-shadow(0 30px 34px rgba(0,0,0,.45))} .nx .chip{position:absolute;z-index:3;backdrop-filter:blur(8px)} .nx .chip.off{top:20px;left:20px;background:var(--lime);color:var(--ink);font-family:var(--fd);font-weight:700;font-size:17px; padding:10px 16px;border-radius:14px;transform:rotate(-6deg);box-shadow:0 12px 26px -10px rgba(217,242,79,.7)} .nx .chip.caps{top:22px;right:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#eef4ec; font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:999px} .nx .chip.rt{bottom:20px;left:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff; font-weight:700;font-size:14px;padding:9px 14px;border-radius:999px;display:inline-flex;gap:8px;align-items:center} .nx .chip.rt b{color:var(--lime)} .nx .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px} .nx .thumbs button{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:10px;cursor:pointer;transition:.16s;aspect-ratio:1/1;display:grid;place-items:center} .nx .thumbs button:hover{border-color:var(--brand);transform:translateY(-2px)} .nx .thumbs button.active{border-color:var(--ink);box-shadow:var(--sh-sm)} .nx .thumbs .n{position:absolute;bottom:6px;left:9px;font-size:10px;font-weight:700;color:var(--muted)} .nx .thumbs svg{width:70%;height:auto} /* info */ .nx .pinfo h1{font-size:clamp(42px,5.4vw,68px);margin-top:16px} .nx .pinfo .sub{color:var(--muted);font-size:17.5px;margin-top:12px;max-width:44ch} .nx .rating{display:flex;align-items:center;gap:11px;margin-top:18px;flex-wrap:wrap} .nx .stars{color:var(--gold);letter-spacing:2px;font-size:16px} .nx .rating b{font-family:var(--fd);font-size:17px} .nx .rating a{color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2);cursor:pointer} .nx .rating a:hover{color:var(--brand)} .nx .stock{display:inline-flex;align-items:center;gap:7px;color:#0a7f42;font-weight:700;font-size:13.5px;background:#eaf7ef;border:1px solid #cdebd9;border-radius:999px;padding:6px 12px} .nx .stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(15,169,88,.2)} .nx .proof{display:flex;align-items:center;gap:12px;margin-top:20px} .nx .avs{display:flex} .nx .avs span{width:34px;height:34px;border-radius:50%;border:2px solid var(--bg);display:grid;place-items:center; font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-d));margin-left:-8px} .nx .avs span:first-child{margin-left:0} .nx .proof small{font-size:13px;color:var(--muted);font-weight:600} .nx .proof small b{color:var(--text)} .nx .checks{margin-top:22px;display:flex;flex-direction:column;gap:12px} .nx .checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:#28322b} .nx .checks .ck{flex:0 0 auto;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--lime);color:var(--ink);margin-top:1px} .nx .checks .ck svg{width:13px;height:13px} .nx .bento3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px} @media(max-width:460px){.nx .bento3{grid-template-columns:1fr}} .nx .b3{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px;text-align:center;transition:.16s} .nx .b3:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)} .nx .b3 .ic{display:grid;place-items:center;color:var(--brand);margin-bottom:8px} .nx .b3 b{display:block;font-family:var(--fd);font-size:14px} .nx .b3 small{font-size:11.5px;color:var(--muted)} /* buybox */ .nx .buy{position:sticky;top:92px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh)} @media(max-width:1080px){.nx .buy{position:static;grid-column:1/-1}} .nx .buy .bt{font-family:var(--fd);font-size:15px;font-weight:700} .nx .packs{display:flex;flex-direction:column;gap:10px;margin:14px 0 16px} .nx .pk{position:relative;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;cursor:pointer;transition:.15s;background:#fff} .nx .pk:hover{border-color:var(--line-2)} .nx .pk.active{border-color:var(--ink);box-shadow:0 0 0 3px var(--lime-soft)} .nx .pk .rd{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;flex:0 0 auto;transition:.15s} .nx .pk.active .rd{border-color:var(--ink)} .nx .pk.active .rd::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink)} .nx .pk .t1{font-family:var(--fd);font-weight:700;font-size:15px} .nx .pk .t2{font-size:12px;color:var(--muted)} .nx .pk .pr{margin-left:auto;text-align:right;font-family:var(--fd);font-weight:700;font-size:15.5px} .nx .pk .pr small{display:block;font-size:10.5px;color:var(--muted);font-weight:600;font-family:var(--ft)} .nx .pk .fl{position:absolute;top:-10px;right:12px;background:var(--lime);color:var(--ink);font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.02em} .nx .priceline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .nx .priceline .now{font-family:var(--fd);font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1} .nx .priceline .was{color:var(--muted);text-decoration:line-through;font-size:17px;font-weight:600} .nx .priceline .sv{background:var(--lime);color:var(--ink);font-weight:800;font-size:12px;padding:5px 10px;border-radius:999px} .nx .cd{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--lime-soft);border:1px solid #e2eebf;border-radius:12px;padding:11px 14px;margin:14px 0} .nx .cd small{font-size:12px;font-weight:700;color:#4c5a17;letter-spacing:.03em;text-transform:uppercase} .nx .cd b{font-family:var(--fd);font-size:18px;font-variant-numeric:tabular-nums;color:var(--ink)} .nx .qtytot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .nx .stepper{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;overflow:hidden} .nx .stepper button{width:42px;height:44px;border:0;background:#fff;font-size:19px;font-weight:700;cursor:pointer;color:#333d36} .nx .stepper button:hover{color:var(--brand)} .nx .stepper input{width:44px;height:44px;border:0;text-align:center;font-family:var(--fd);font-weight:700;font-size:16px;color:var(--text)} .nx .tot{text-align:right} .nx .tot small{display:block;font-size:11.5px;color:var(--muted);font-weight:600} .nx .tot b{font-family:var(--fd);font-size:22px;font-weight:700} .nx .btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;cursor:pointer;font-family:var(--fd);font-weight:700;border-radius:999px;transition:.18s;font-size:16.5px;letter-spacing:.01em} .nx .btn-cta{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;padding:17px 22px;box-shadow:0 18px 34px -14px rgba(15,169,88,.55)} .nx .btn-cta:hover{transform:translateY(-2px);box-shadow:0 24px 44px -14px rgba(15,169,88,.65)} .nx .btn-cta .arr{transition:transform .2s} .nx .btn-cta:hover .arr{transform:translateX(4px)} .nx .btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--ink);padding:14px 22px;margin-top:10px} .nx .btn-line:hover{background:var(--ink);color:#fff} .nx .assure{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:12px;color:var(--muted);font-weight:600;flex-wrap:wrap} .nx .assure span{display:inline-flex;align-items:center;gap:6px} .nx .paymini{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;justify-content:center} .nx .paymini span{border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:10.5px;font-weight:800;color:var(--muted);letter-spacing:.04em} /* ---------- STRIP marquee skĹ‚adnikĂłw ---------- */ .nx .strip{background:var(--dark);color:#e8f0e6;overflow:hidden;border-block:1px solid #1e2b21} .nx .strip .mgrp{gap:34px;padding:15px 17px 15px 34px;font-family:var(--fd);font-weight:600;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase} .nx .strip i{color:var(--lime)} /* ---------- ZAKŁADKI ---------- */ .nx .tabsec{padding:34px 0 50px} .nx .tnav{position:sticky;top:82px;z-index:40;display:flex;gap:6px;background:rgba(255,255,255,.85);backdrop-filter:blur(12px); border:1px solid var(--line);border-radius:999px;padding:6px;overflow-x:auto;scrollbar-width:none;box-shadow:var(--sh-sm)} .nx .tnav::-webkit-scrollbar{display:none} .nx .tnav button{flex:1;white-space:nowrap;border:0;background:transparent;color:var(--muted);font-family:var(--fd);font-weight:600; font-size:14.5px;padding:12px 18px;border-radius:999px;cursor:pointer;transition:.16s} .nx .tnav button:hover{color:var(--text)} .nx .tnav button.active{background:var(--ink);color:#fff} .nx .tp{display:none;padding-top:36px} .nx .tp.on{display:block;animation:nxfade .3s ease} @keyframes nxfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .nx .tp h2{font-size:clamp(26px,3.4vw,38px);margin-top:12px} .nx .tp h3{font-size:19px;margin-top:4px} .nx .tp .lead,.nx .tp p{color:#39443c;font-size:16.5px;margin-top:14px;line-height:1.7;max-width:66ch} .nx .two{display:grid;grid-template-columns:1fr 1fr;gap:40px} @media(max-width:780px){.nx .two{grid-template-columns:1fr;gap:26px}} .nx .feats{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .nx .feat{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#2c362f;background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px} .nx .feat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)} /* dla kogo — bento */ .nx .aud{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px} @media(max-width:640px){.nx .aud{grid-template-columns:1fr}} .nx .aud .bx{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:.16s} .nx .aud .bx:hover{transform:translateY(-3px);box-shadow:var(--sh-sm)} .nx .aud .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--lime);color:var(--ink);margin-bottom:13px} .nx .aud h3{font-size:18px} .nx .aud p{font-size:14.5px;color:var(--muted);margin-top:7px;max-width:none} /* skĹ‚ad — karty z duĹĽym numerem */ .nx .ings{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;counter-reset:nxing} @media(max-width:880px){.nx .ings{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.nx .ings{grid-template-columns:1fr}} .nx .ing{counter-increment:nxing;position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;overflow:hidden;transition:.18s} .nx .ing:hover{transform:translateY(-4px);box-shadow:var(--sh-sm);border-color:#cfe8cf} .nx .ing::before{content:counter(nxing,decimal-leading-zero);position:absolute;right:14px;top:6px;font-family:var(--fd);font-weight:700; font-size:52px;color:var(--bg);-webkit-text-stroke:1px var(--line-2);letter-spacing:-.04em} .nx .ing h3{font-size:17px;position:relative} .nx .ing .role{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#4c5a17;background:var(--lime-soft);border-radius:999px;padding:3px 9px;margin-top:8px} .nx .ing p{font-size:14px;color:var(--muted);margin-top:10px;max-width:none} .nx .note{margin-top:24px;background:var(--card);border:1px dashed var(--line-2);border-radius:var(--r);padding:16px 20px;font-size:14px;color:#39443c} /* stosowanie */ .nx .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px} @media(max-width:760px){.nx .steps{grid-template-columns:1fr}} .nx .step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px} .nx .step .num{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--ink);background:var(--lime);width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:13px} .nx .step h3{font-size:17px} .nx .step p{font-size:14px;color:var(--muted);margin-top:7px;max-width:none} .nx .tml{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px} @media(max-width:760px){.nx .tml{grid-template-columns:1fr}} .nx .tl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;position:relative;overflow:hidden} .nx .tl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--brand),var(--lime))} .nx .tl .when{font-family:var(--fd);font-weight:700;color:var(--brand-d);font-size:14px} .nx .tl h3{font-size:16px;margin-top:5px} .nx .tl p{font-size:13.5px;color:var(--muted);margin-top:5px;max-width:none} /* opinie */ .nx .rtop{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:stretch;margin-top:26px} @media(max-width:680px){.nx .rtop{grid-template-columns:1fr}} .nx .score{background:var(--dark);color:#fff;border-radius:var(--r-lg);padding:28px;text-align:center;display:grid;place-content:center;gap:4px} .nx .score .big{font-family:var(--fd);font-size:62px;font-weight:700;line-height:1} .nx .score .stars{font-size:19px} .nx .score small{color:#9db5a4;font-size:12.5px;margin-top:6px} .nx .bars{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;display:flex;flex-direction:column;justify-content:center;gap:11px} .nx .bar{display:flex;align-items:center;gap:13px;font-size:12.5px;color:var(--muted);font-weight:700} .nx .bar .tr{flex:1;height:8px;border-radius:999px;background:var(--bg);overflow:hidden} .nx .bar .fl{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--lime));transition:width 1s cubic-bezier(.2,.7,.3,1) .15s} .nx .bars.in .fl{width:var(--w)} .nx .pcx{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px} @media(max-width:560px){.nx .pcx{grid-template-columns:1fr}} .nx .pcb{border-radius:var(--r);padding:20px;border:1px solid var(--line);background:var(--card)} .nx .pcb.plus{border-color:#cdebd9;background:#f2faf5} .nx .pcb h4{font-family:var(--fd);font-size:14px;margin-bottom:10px} .nx .pcb li{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:600;padding:6px 0} .nx .pcb li::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto} .nx .pcb.plus li::before{background:var(--brand)} .nx .pcb.minus li::before{background:#e2a23c} .nx .testi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px} @media(max-width:880px){.nx .testi{grid-template-columns:1fr}} .nx .t{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;position:relative} .nx .t::before{content:"\201C";position:absolute;top:8px;right:16px;font-family:var(--fd);font-size:54px;color:var(--lime);line-height:1} .nx .t.doc{background:var(--dark);color:#e9f2ea;border:0} .nx .t .hd2{display:flex;align-items:center;gap:11px} .nx .t .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-d));flex:0 0 auto} .nx .t.doc .av{background:var(--lime);color:var(--ink)} .nx .t .who{font-family:var(--fd);font-weight:700;font-size:14.5px} .nx .t .ro{font-size:12px;color:var(--muted)} .nx .t.doc .ro{color:#9db5a4} .nx .t .stars{font-size:13.5px;margin:11px 0 8px;display:block} .nx .t p{font-size:14px;color:#39443c;max-width:none} .nx .t.doc p{color:#cfe0d2} .nx .t .vf{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:11.5px;font-weight:800;color:var(--brand-d)} .nx .t.doc .vf{color:var(--lime)} /* bezpieczeĹ„stwo */ .nx .safety{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .nx .safety li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:17px 22px;font-size:15px;color:#39443c;border-top:1px solid var(--line)} .nx .safety li:first-child{border-top:0} @media(max-width:560px){.nx .safety li{grid-template-columns:1fr;gap:4px}} .nx .safety .lb{font-family:var(--fd);font-weight:700;font-size:13px;color:var(--brand-d)} /* faq */ .nx .faq{margin-top:22px;display:flex;flex-direction:column;gap:10px} .nx .faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.15s} .nx .faq details[open]{border-color:var(--line-2);box-shadow:var(--sh-sm)} .nx .faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--fd);font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px} .nx .faq summary::-webkit-details-marker{display:none} .nx .faq .pl{flex:0 0 auto;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:var(--lime-soft);color:var(--brand-d);font-size:18px;font-weight:700;transition:.2s} .nx .faq details[open] .pl{transform:rotate(45deg);background:var(--lime);color:var(--ink)} .nx .faq .a{padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:1.7;max-width:75ch} /* ---------- CTA ---------- */ .nx .cta{position:relative;overflow:hidden;background: radial-gradient(70% 90% at 85% 10%,rgba(217,242,79,.16),transparent 55%), radial-gradient(70% 90% at 8% 90%,rgba(15,169,88,.25),transparent 55%), linear-gradient(150deg,#131b14,#0b100c); color:#fff;border-radius:var(--r-lg);padding:clamp(30px,5vw,56px);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;margin:8px 0 48px;box-shadow:var(--sh)} @media(max-width:740px){.nx .cta{grid-template-columns:1fr;text-align:center}} .nx .cta h2{font-size:clamp(26px,4vw,44px)} .nx .cta h2 .hl{background:linear-gradient(to top,rgba(217,242,79,.35) 34%,transparent 34%)} .nx .cta p{color:#a9bcae;margin-top:10px;max-width:52ch} @media(max-width:740px){.nx .cta p{margin-inline:auto}} .nx .cta .pr{display:flex;align-items:baseline;gap:12px;margin-top:16px;font-family:var(--fd)} @media(max-width:740px){.nx .cta .pr{justify-content:center}} .nx .cta .pr .n{font-size:42px;font-weight:700} .nx .cta .pr .w{font-size:20px;color:#6e8274;text-decoration:line-through} .nx .cta .btn-lm{background:var(--lime);color:var(--ink);padding:18px 34px;font-size:17px;width:auto;box-shadow:0 18px 40px -14px rgba(217,242,79,.5)} .nx .cta .btn-lm:hover{transform:translateY(-2px);background:var(--lime-d)} .nx .cta .cap{position:absolute;border-radius:999px;opacity:.5;filter:blur(1px)} .nx .cta .cap.c1{width:90px;height:34px;background:linear-gradient(90deg,var(--lime) 50%,#fff 50%);top:14%;right:30%;transform:rotate(-24deg)} .nx .cta .cap.c2{width:64px;height:24px;background:linear-gradient(90deg,var(--brand) 50%,#dfe8de 50%);bottom:16%;right:12%;transform:rotate(18deg)} /* ---------- FOOTER ---------- */ .nx footer{background:var(--ink);color:#93a397;border-radius:var(--r-lg) var(--r-lg) 0 0} .nx .fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding:52px 0 30px} @media(max-width:860px){.nx .fcols{grid-template-columns:1fr 1fr}} @media(max-width:520px){.nx .fcols{grid-template-columns:1fr}} .nx .flogo{font-family:var(--fd);font-weight:700;font-size:24px;color:#fff;margin-bottom:12px} .nx .flogo span{color:var(--lime)} .nx footer p{font-size:13.5px;line-height:1.7;color:#7d8f82;max-width:36ch} .nx footer h4{color:#fff;font-family:var(--fd);font-size:13.5px;font-weight:700;margin-bottom:14px} .nx footer li{margin-bottom:9px} .nx footer li a{font-size:13.5px;color:#93a397;transition:.15s} .nx footer li a:hover{color:var(--lime)} .nx .fpay{display:flex;gap:7px;margin-top:16px;flex-wrap:wrap} .nx .fpay span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:5px 10px;font-size:10.5px;font-weight:800;color:#c4d1c6;letter-spacing:.04em} .nx .fbot{border-top:1px solid rgba(255,255,255,.08);padding:20px 0 32px} .nx .fbot .disc{font-size:11.5px;color:#66786b;line-height:1.7;max-width:940px} .nx .fbot .cp{font-size:12px;color:#586b5d;margin-top:12px} /* ---------- STICKY BAR + TOAST ---------- */ .nx .stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(12px); border-top:1px solid var(--line);box-shadow:0 -14px 34px -18px rgba(13,18,15,.3);transform:translateY(120%);transition:.3s;padding:10px 16px} .nx .stickybar.show{transform:none} .nx .stickybar .in2{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:14px} .nx .stickybar .nm{font-family:var(--fd);font-weight:700;font-size:15px} .nx .stickybar .pp b{font-family:var(--fd);color:var(--brand-d);font-size:16px} .nx .stickybar .pp s{color:var(--muted);font-size:12px;margin-left:6px} .nx .stickybar .btn-cta{width:auto;margin-left:auto;padding:12px 24px;font-size:15px} .nx .toast{position:fixed;top:92px;right:20px;z-index:80;background:var(--ink);color:#fff;padding:14px 18px;border-radius:14px; box-shadow:var(--sh);font-weight:600;font-size:14px;display:flex;align-items:center;gap:10px;transform:translateX(140%);transition:.35s} .nx .toast.show{transform:none} .nx .toast .ok{width:22px;height:22px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:12px} /* ================================================================= NX SHOP — UKŁAD HYBRYDOWY: NORMALNY WORDPRESS + ŚRODEK PRODUKTU NX Dotyczy wyłącznie produktu o slugu „eroboost”. ================================================================= */ /* Normalny header i footer WordPressa pozostają widoczne. */ body.nx-hybrid-product #masthead, body.nx-hybrid-product #site-navigation, body.nx-hybrid-product .site-footer { display:block; } /* Usuń marginesy i ograniczenia GeneratePress/WooCommerce w części produktu. */ body.nx-hybrid-product #page, body.nx-hybrid-product .site, body.nx-hybrid-product .site.grid-container, body.nx-hybrid-product .container.grid-container, body.nx-hybrid-product .site-content, body.nx-hybrid-product #primary, body.nx-hybrid-product .content-area, body.nx-hybrid-product #main, body.nx-hybrid-product .site-main, body.nx-hybrid-product .inside-article, body.nx-hybrid-product .entry-content, body.nx-hybrid-product .woocommerce, body.nx-hybrid-product .woocommerce div.product, body.nx-hybrid-product .nx-product-landing { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; } body.nx-hybrid-product .site-content { display:block !important; } body.nx-hybrid-product .widget-area, body.nx-hybrid-product #right-sidebar, body.nx-hybrid-product #left-sidebar { display:none !important; } /* Standardowa, pusta po usunięciu hooków kolumna WooCommerce. */ body.nx-hybrid-product div.product .summary.entry-summary { display:none !important; } /* Usuń zbędne odstępy i tła narzucone przez GeneratePress. */ body.nx-hybrid-product .inside-article, body.nx-hybrid-product article.product { background:transparent !important; border:0 !important; box-shadow:none !important; } body.nx-hybrid-product .woocommerce-notices-wrapper:empty { display:none !important; } /* Główny blok NX ma być pełną sekcją między headerem i footerem WP. */ body.nx-hybrid-product .nx-product-landing { display:block; clear:both; overflow:visible; } body.nx-hybrid-product .nx-product-landing > .nx { width:100%; max-width:none; min-height:0; margin:0; overflow:hidden; background:var(--bg,#f5f6f2); } /* Ukryj drugi nagłówek i drugi footer z samodzielnego demo Claude’a. */ body.nx-hybrid-product .nx .hd, body.nx-hybrid-product .nx footer { display:none !important; } /* Breadcrumb NX może zostać jako delikatne połączenie z WordPressem. */ body.nx-hybrid-product .nx .crumbs { padding-top:18px; } /* Produkt zaczyna się bez ogromnej przerwy pod nagłówkiem WP. */ body.nx-hybrid-product .nx .hero { padding-top:14px; } /* Zabezpieczenie przed floatami standardowego szablonu WooCommerce. */ body.nx-hybrid-product .woocommerce div.product::before, body.nx-hybrid-product .woocommerce div.product::after, body.nx-hybrid-product .nx-product-landing::before, body.nx-hybrid-product .nx-product-landing::after { display:table; clear:both; content:""; } /* Kontener projektu pozostaje taki jak w oryginalnym demie Claude’a. */ body.nx-hybrid-product .nx .wrap { width:100%; max-width:1240px; margin-right:auto; margin-left:auto; padding-right:24px; padding-left:24px; } /* Zakładki mają przyklejać się do góry ekranu, a nie do nieistniejącego wewnętrznego headera NX. */ body.nx-hybrid-product .nx .tnav { top:12px; } /* Nie pozwalaj stylom wpisu WordPressa zmieniać typografii i odstępów NX. */ body.nx-hybrid-product .entry-content .nx h1, body.nx-hybrid-product .entry-content .nx h2, body.nx-hybrid-product .entry-content .nx h3, body.nx-hybrid-product .entry-content .nx h4, body.nx-hybrid-product .entry-content .nx p, body.nx-hybrid-product .entry-content .nx ul, body.nx-hybrid-product .entry-content .nx ol { margin-top:0; margin-bottom:0; } /* Lepsze przejście do normalnej stopki strony. */ body.nx-hybrid-product .nx .cta { margin-bottom:48px; } /* Telefon: usuń boczne paddingi narzucone przez motyw, ale zachowaj bezpieczny odstęp wewnątrz sekcji NX. */ @media (max-width:768px) { body.nx-hybrid-product .site-content, body.nx-hybrid-product #primary, body.nx-hybrid-product #main, body.nx-hybrid-product .inside-article { padding:0 !important; } body.nx-hybrid-product .nx .wrap { padding-right:16px; padding-left:16px; } body.nx-hybrid-product .nx .crumbs { padding-top:14px; } } /* ========================================================= NX AUTO PRODUCT IMAGE Automatyczne dopasowanie zdjęcia produktu do kwadratu ========================================================= */ .nx .stage { aspect-ratio: 1 / 1.04; min-height: 560px; position: relative; overflow: hidden; } @media (max-width: 780px) { .nx .stage { min-height: 420px; } } .nx .stage .view.has-real-image { display: grid !important; place-items: center; position: relative; width: 100%; height: 100%; } .nx .stage .view.has-real-image svg { display: none !important; } .nx .stage .view.has-real-image::after { content: ""; position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: 42%; height: 22px; border-radius: 50%; background: rgba(0,0,0,.30); filter: blur(10px); z-index: 1; } .nx .stage .nx-real-image { position: relative; z-index: 2; display: block; width: auto; height: auto; max-width: 76%; max-height: 78%; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(0,0,0,.42)); transform: translateY(4px); } /* gdy zdjęcie jest wysokie */ .nx .stage .nx-real-image.is-tall { max-width: 62%; max-height: 82%; } /* gdy zdjęcie jest szerokie */ .nx .stage .nx-real-image.is-wide { max-width: 82%; max-height: 68%; } /* miniatury */ .nx .thumbs button img.nx-thumb-image { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 10px; } .nx .thumbs button { overflow: hidden; } /* opcjonalnie lekko czyści białe tło przy niektórych packshotach */ .nx .stage .view.has-real-image .nx-img-wrap { position: relative; width: 100%; height: 100%; display: grid; place-items: center; } .nx .stage .view.has-real-image .nx-img-wrap::before { content: ""; position: absolute; inset: 14% 14% 18% 14%; border-radius: 24px; background: radial-gradient(circle at center, rgba(255,255,255,.06), transparent 70%); z-index: 0; } .nx { --fd: "Space Grotesk", sans-serif; --ft: "Source Sans 3", sans-serif; } .nx .tp p { font-size: 17px; line-height: 1.78; max-width: 62ch; margin-top: 0; margin-bottom: 1.15em; } .nx .tp h2 { margin-bottom: 18px; } .nx .two { gap: 54px; }