ma mały, stały margines wewnętrzny u góry. */ body.is-service-page main{ padding-top: 0 !important; } /* Usługi (desktop): zmniejsz wysokość nagłówka i zgodnie z tym offset ciała strony, żeby tytuł był bliżej górnej krawędzi bez nakładania się na header. */ @media (min-width: 769px){ body.is-service-page .header-bar{ height: 68px; } body.is-service-page.no-hero-page{ padding-top: 68px; } } /* divider removed */ .vcard-list{display:grid;gap:1.8rem;grid-template-columns:1fr;} @media (min-width:850px){ .vcard-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} } .vcard{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(15,23,42,.08);} .vcard-img{width:100%;height:clamp(200px,24vw,340px);overflow:hidden;display:block} .vcard-img img{width:100%;height:100%;object-fit:cover;display:block} .vcard-body{display:flex;flex-direction:column;gap:.6rem;padding:1rem 1.1rem 1.25rem} .vcard-heading{font-family:Poppins,sans-serif;font-weight:700;font-size:1.15rem;color:#1f2937;margin:.25rem 0 .25rem} .vcard-text{color:#374151;font-size:.98rem;line-height:1.6} .vcard-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.6rem 1rem;border-radius:8px;border:1px solid #2d5a3d;background:#fff;color:#2d5a3d;font-weight:600;cursor:pointer;transition:background .2s ease, color .2s ease, box-shadow .2s ease} .vcard-btn:hover{background:#2d5a3d;color:#fff;box-shadow:0 6px 18px rgba(45,90,61,.2)} .vcard-btn.right{align-self:flex-end} .vcard-img.placeholder{display:grid;place-items:center;font-size:.85rem;color:#64748b;font-style:italic} .scroll-reveal{opacity:0;transform:translateY(40px) scale(.98);transition:.8s cubic-bezier(.4,0,.2,1);} .scroll-reveal.is-visible{opacity:1;transform:translateY(0) scale(1)} .contact-form{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start} .field{display:flex;flex-direction:column;gap:.4rem} .field.full{grid-column:1/-1} input,textarea{font:inherit;padding:.75rem .85rem;border:1px solid var(--border);border-radius:8px;resize:vertical} input:focus,textarea:focus{outline:2px solid var(--pri);outline-offset:2px} .form-status{font-size:.85rem;color:var(--pri);min-height:1.2em} .site-footer{padding:1rem 0 0.5rem;background:#2d5a3d;color:#e8f5e8;margin-top:3rem;font-size:.85rem;min-height:auto} .site-footer a{color:#cfcfcf} .footer-content{display:grid;grid-template-columns:1.5fr 1fr 1.5fr;gap:1.5rem;margin-bottom:1rem} .footer-section h3{color:#a7f3d0;font-size:1.1rem;margin-bottom:0.8rem;font-weight:600} .footer-logo{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.8rem} .footer-logo-img{height:40px;width:40px;object-fit:contain;border-radius:50%} .footer-logo-text{font-size:1.2rem;font-weight:700;color:#a7f3d0} .footer-description{line-height:1.6;margin-bottom:0.8rem;color:#b8e6c1} .footer-links-list{list-style:none;padding:0} .footer-links-list li{margin-bottom:0.5rem} .footer-links-list a{color:#b8e6c1;text-decoration:none;transition:color 0.3s} .footer-links-list a:hover{color:#a7f3d0} .footer-contact-info p{margin-bottom:0.5rem;color:#b8e6c1} .footer-contact-info a{color:#a7f3d0;text-decoration:none} .footer-contact-info a:hover{text-decoration:underline} .footer-contact-form{display:flex;flex-direction:column;gap:0.8rem} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem} .footer-contact-form input,.footer-contact-form textarea{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:6px;padding:0.8rem;color:#e8f5e8;font-size:0.9rem;width:100%} .footer-contact-form input::placeholder,.footer-contact-form textarea::placeholder{color:#b8e6c1} .footer-contact-form input:focus,.footer-contact-form textarea:focus{outline:none;border-color:#a7f3d0;background:rgba(255,255,255,0.15)} .form-note{font-size:0.75rem;color:#9ca3af;line-height:1.4} .form-note a{color:#a7f3d0} .footer-submit-btn{background:#16a085;color:white;border:none;padding:0.8rem 1.5rem;border-radius:6px;font-weight:600;cursor:pointer;transition:background 0.3s} .footer-submit-btn:hover{background:#138d75} .footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:0.8rem;text-align:center;color:#b8e6c1} /* Social icons in footer */ .footer-social{margin-top:.6rem} /* Czysta niebieska ikona bez białego koła */ .footer-social a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin-right:.4rem;background:transparent;border:0;border-radius:0;padding:0;width:auto;height:auto} .footer-social a:hover{opacity:.9} .footer-social svg{width:22px;height:22px;fill:#1877F2} @media (max-width:1024px){.footer-content{grid-template-columns:1fr 1fr;gap:2rem}.footer-form-section{grid-column:1/-1}} @media (max-width:640px){.footer-content{grid-template-columns:1fr;gap:2rem}.form-row{grid-template-columns:1fr}} .footer-links{list-style:none;display:flex;gap:1rem} /* Formularz kontaktowy przeniesiony na sam dół stopki (pełna szerokość) */ .footer-form-full{margin-top:1rem} /* Napis nad linią i wyśrodkowany */ .footer-form-full h3{ text-align:center; margin-bottom:0.75rem } /* Linia oddzielająca POD nagłówkiem (nie nad) */ .footer-form-full .footer-contact-form{max-width:760px;margin:0 auto; border-top:1px solid rgba(255,255,255,0.1); padding-top:1rem} /* Removed modal styles (not used in wizytówka) */ @media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}} /* Enhanced vertical cards */ .vcard{background:#fff;border:1px solid #e2e7eb;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;margin:0;box-shadow:0 4px 14px -6px rgba(15,23,42,.14);position:relative;transform:translate3d(0,0,0);transition:transform .5s cubic-bezier(.25,.46,.45,.94),box-shadow .5s cubic-bezier(.25,.46,.45,.94);will-change:transform,box-shadow} .vcard:hover{transform:scale(1.08) translateY(-20px);box-shadow:0 35px 60px -20px rgba(15,23,42,.3),0 15px 30px -8px rgba(0,0,0,.12);} @media (prefers-reduced-motion:reduce){.vcard,.vcard:hover{animation:none!important;transform:none!important}} .vcard-img{aspect-ratio:5/3;position:relative;background:#f1f5f9;overflow:hidden} .vcard-img img{width:100%;height:100%;object-fit:cover;display:block;} .vcard-body{padding:1.25rem 1.5rem 4.5rem;display:flex;flex-direction:column;gap:.85rem;min-height:260px} .vcard-heading{font-size:1.05rem;letter-spacing:.35px;font-weight:600} .vcard.alt .vcard-ico{color:#6a5af9;background:rgba(106,90,249,.1)} .vcard-text{font-size:.83rem;line-height:1.55;color:#364152} .vcard-meta{font-size:.58rem;letter-spacing:1px;text-transform:uppercase;color:#1d72ff;font-weight:600;margin-top:.1rem} .vcard-btn{background:#1d72ff;color:#fff;font-size:.63rem;font-weight:600;letter-spacing:.5px;padding:.55rem 1rem;border-radius:6px;margin-top:.35rem;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;box-shadow:0 2px 6px -1px rgba(29,114,255,.4);align-self:flex-start;white-space:nowrap;border:0;outline:0;-webkit-appearance:none;appearance:none} .vcard-btn:hover{background:#0b5ed7;text-decoration:none} .vcard-btn:before{display:none} /* accessible focus ring (no black UA border) */ .vcard-btn:focus{outline:0} .vcard-btn.more:focus-visible{box-shadow:0 0 0 3px rgba(45,90,61,.25),0 3px 8px rgba(45,90,61,.22)} /* align button to the bottom-right corner inside card */ .vcard-btn.right{align-self:flex-end} /* larger/nicer variant for cards */ .vcard-btn.more{--btn-bg:#2d5a3d;background:var(--btn-bg);box-shadow:0 3px 8px rgba(45,90,61,.22);padding:.7rem 1.1rem;border-radius:9px;font-size:.88rem;letter-spacing:.2px;margin-top:auto;transition:background-color .2s ease, box-shadow .2s ease, transform .15s ease} .vcard-btn.more:hover{background:#244c32;filter:none} .vcard-btn.more:active{transform:translateY(1px)} /* lock button at bottom-right corner for perfect alignment across cards */ .vcard .vcard-btn.more{position:absolute;right:1.25rem;bottom:1.25rem;margin-top:0} @media (min-width:850px){ .vcard-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem;align-items:stretch} .vcard-list .vcard{height:100%} } /* Timeline dots */ /* removed timeline dots */ @media (max-width:849.98px){ .vcard-list:before{display:none} } @media (max-width:640px){ .vcard{margin-bottom:2rem} .vcard-body{padding:1.15rem 1.25rem 4.25rem;min-height:auto} .info-section{padding:2.8rem 0 3.2rem} .info-section .info-title{font-size:1.7rem} } /* Expandable panel (under cards) – styled like testimonials */ .expand-panel { max-height: 0; overflow: hidden; border: 0; border-radius: 0; margin: 1.2rem 0 0; background: transparent; box-shadow: none; transition: max-height 0.45s ease, padding 0.45s ease, opacity 0.35s ease; opacity: 0; } .expand-panel.is-open { max-height: 2500px; padding: 0.5rem 0; opacity: 1; } /* Shopping Cart Styles */ .cart-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0; /* overlay – brak odstępu między ikoną a licznikiem */ /* Inherit nav link spacing – unikamy kafelka */ padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transition: color 0.2s; line-height: 1; } /* Bez tła na hover – zachowaj wygląd jak inne linki w menu */ .cart-icon:hover { background: transparent !important; text-decoration: none } /* Agresywne nadpisania – zero kafelka wokół ikony koszyka w KAŻDYM stanie */ .main-nav a.cart-icon, .main-nav a.cart-icon:hover, .main-nav a.cart-icon:focus, .main-nav a.cart-icon:active, .right-nav .main-nav a.cart-icon, .right-nav .main-nav a.cart-icon:hover, .right-nav .main-nav a.cart-icon:focus, .right-nav .main-nav a.cart-icon:active { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; } /* Kontener na koszyk poza maskowanym UL (desktop) */ .nav-cart{ display:inline-flex; align-items:center; justify-content:center; gap:0; margin-left:.5rem } .right-nav{ display:flex; align-items:center; gap:.25rem } /* Upewnij się, że wrapper

też nie ma tła */ #cartNavItem { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Obrazek ikony bez żadnego tła */ .cart-icon .cart-ico img { background: transparent !important; } /* Ostateczny bezpiecznik – bez względu na inline style */ #cartIcon { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; /* upewnij się, że ikona ma minimalny obszar klikalny nawet bez badge */ min-width: 24px; min-height: 24px; } /* Wyłącz pseudo-elementy, gdyby jakiś globalny styl je dodawał */ #cartIcon::before, #cartIcon::after { content: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; } /* Zeruj tło/cień tylko dla samej grafiki ikony (nie dotykaj .cart-count) */ .cart-icon .cart-ico, .cart-icon .cart-ico::before, .cart-icon .cart-ico::after, .cart-icon .cart-ico *:not(.cart-count) { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; } .cart-ico { position: relative; display: inline-flex } .cart-ico svg { width: 34px; height: 34px; display:block; color:#1f2937 } .cart-ico svg path, .cart-ico svg circle, .cart-ico svg line, .cart-ico svg polyline { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round } /* New image-based cart icon support */ .cart-ico img{ width:34px; height:34px; display:block; object-fit:contain; filter: none } /* Płynna skala ikony koszyka – lekko zmniejszona */ .cart-ico svg, .cart-ico img{ width:clamp(24px, 3.1vw, 34px); height:clamp(24px, 3.1vw, 34px) } /* Licznik obok ikony (nie na niej) */ .cart-count { position: absolute !important; /* nakładka w prawym górnym rogu ikony */ top: -6px; right: -6px; margin-left: 0; background: var(--cta, #0c7239); color: #fff; border-radius: 999px; padding: 0 .45em; min-width: clamp(17px, 2vw, 20px); min-height: clamp(17px, 2vw, 20px); display: inline-flex; /* JS ukrywa przy 0 */ align-items: center; justify-content: center; font-size: clamp(10px, 1.7vw, 12px); font-weight: 700; line-height: 1; text-align: center; box-shadow: none !important; z-index: 2; } /* Pusty koszyk: ukryj całą ikonę (badge i wrappery) */ body.cart-empty #navCartWrap, body.cart-empty #cartNavItem, body.cart-empty #cartIcon{ display: none !important; } /* Na desktopie przy włączonej masce fade na końcach listy zostaw wewnętrzny margines, aby badge nie wpadał w strefę wygaszenia po prawej krawędzi */ .right-nav.nav-can-scroll .main-nav ul{ padding-right: 44px; /* dopasowane do strefy fade ~44px, mniejsza wizualna przerwa */ overflow: visible; /* nie ucinaj nakładki badge */ } /* Ensure bottom border is visible on the last card in cart page */ .cart-page-content .cart-items .cart-item:last-child{ border-bottom: 1px solid #e5e7eb } .cart-text{ display:none } .cart-notification { position: fixed; top: 20px; right: 20px; background: var(--cta, #0c7239); color: white; padding: 1rem 1.5rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10000; transform: translateX(100%); transition: transform 0.3s ease; } .cart-notification.show { transform: translateX(0); } .notification-content { display: flex; align-items: center; gap: 0.5rem; } /* Warianty toasta */ .cart-notification.info{ background:#374151 } .cart-notification.success{ background: var(--cta, #0c7239) } .cart-modal, .payment-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .product-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .25s ease; z-index: 10001; } .product-modal.show { opacity:1; visibility:visible } .product-content { background: #fff; width: min(780px, 94vw); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.22); overflow: hidden; } /* podbicie efektu szkła i gradientowa ramka obrazka */ .product-elevated{ background:rgba(255,255,255,.96); backdrop-filter:saturate(140%) blur(10px) } /* usunięto gradientową ramkę aby kolory zdjęcia były neutralne */ .product-header { display:flex; align-items:center; justify-content:space-between; padding: 1rem 1.25rem; border-bottom:1px solid #eee } .product-header h2 { margin:0; font-size:1.28rem } .product-header .title-wrap{ display:flex; flex-direction:column; gap:.2rem } .close-product { background:none; border:0; font-size:1.6rem; line-height:1; cursor:pointer; padding:.25rem .5rem } .product-body { display:grid; grid-template-columns: 240px 1fr; gap:1.5rem; padding:1.25rem 1.5rem } .product-media { width:240px; height:240px; border-radius:16px; overflow:hidden; background:#f5f5f5 } .product-media img{ width:100%; height:100%; object-fit:cover; display:block } .product-info { display:flex; flex-direction:column; gap:1rem; align-items:flex-start; justify-content:flex-start; width:100% } /* Cena osobno nad wierszem akcji */ .price-qty-row{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap } /* Nowy wiersz: ilość po lewej, przycisk w prawym rogu */ .actions-row{ display:flex; align-items:center; gap:1rem; width:100% } .actions-row .btn-add-to-cart{ margin-left:auto } /* Duża, atrakcyjna prezentacja ceny */ .price-line{ display:flex; align-items:baseline; justify-content:flex-end; gap:.5rem; line-height:1; margin-top:.25rem; margin-bottom:.5rem; width:100% } .price-main{ font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:900; color:#111827 } .price-currency{ font-size:.95rem; color:#64748b; font-weight:800 } .price-vat{ font-size:.95rem; color:#6b7280; font-weight:600 } /* usunięto listę benefitów */ .product-qty { display:flex; align-items:center; gap:.6rem; margin-top:.35rem } .qty-stepper{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid #e5e7eb; padding:.25rem; border-radius:12px; background:#fff } .product-actions { display:flex; gap:1rem; justify-content:flex-end; padding: 1.1rem 1.5rem; border-top:1px solid #eee } .btn-add-to-cart, .btn-go-cart { padding:.9rem 1.2rem; border-radius:12px; border:0; cursor:pointer; font-weight:900; letter-spacing:.2px; white-space:nowrap } .price-qty-row .btn-add-to-cart{ margin-left:auto } .btn-primary{ background: var(--cta, #0c7239); color:#fff; box-shadow:0 10px 24px -8px rgba(12,114,57,.4) } .btn-primary:hover{ filter:brightness(.95) } .btn-secondary{ background:#101827; color:#fff } .btn-secondary:hover{ filter:brightness(.95) } .trust-row{ color:#475569; font-size:.88rem } /* Stepper buttons */ .qty-btn{ background:#f8fafc; border:1px solid #e5e7eb; width:36px; height:36px; border-radius:10px; font-weight:900; cursor:pointer } .qty-btn:disabled{ opacity:.45; cursor:not-allowed } @media (max-width:640px){ .product-body { grid-template-columns: 1fr; gap:1.1rem; padding:1rem } .product-media { width:100%; height:220px; border-radius:14px; margin-bottom:.35rem } .product-actions { flex-direction: column; gap:.75rem; align-items:stretch } .price-qty-row .btn-add-to-cart{ width:100%; margin-left:0 } .actions-row{ gap:.8rem } .actions-row .btn-add-to-cart{ width:100%; margin-left:0 } } .cart-modal.show, .payment-modal.show { opacity: 1; visibility: visible; } .cart-modal .cart-content, .payment-modal .payment-content { background: white; border-radius: 12px; max-width: 720px; width: 90%; max-height: 80vh; overflow-y: auto; transform: scale(0.9); transition: transform 0.3s ease; } .cart-modal.show .cart-content, .payment-modal.show .payment-content { transform: scale(1); } .payment-modal .payment-content { max-width: 1100px } /* Szerszy układ tylko na stronie płatności */ .payment-page .container{ width:min(1200px,100% - 2rem); margin-left:auto; margin-right:auto; display:block } .payment-page main > .container{ width:min(1100px,100% - 2rem); margin-left:auto; margin-right:auto; display:block } .payment-page #paymentPage{ width:100%; max-width:1100px; margin-left:auto; margin-right:auto; display:block } .payment-page .payment-content{ width:100% !important; max-width:1100px !important; margin-left:auto; margin-right:auto; display:block; background:transparent !important; border-radius:0 !important; box-shadow:none !important; max-height:none !important; overflow:visible !important } /* Wyśrodkuj i ogranicz szerokość bloku nagłówka płatności */ .payment-page .payment-header{ width:100%; margin: .25rem auto .5rem } .payment-page .payment-header{ display:block; text-align:center; max-width:1100px; } .payment-page .payment-header h2{ text-align:center; margin: 0 auto } /* Wyśrodkuj i ogranicz szerokość właściwej siatki płatności */ .payment-page .payment-body{ grid-template-columns: minmax(560px, 1fr) 400px; gap: 2rem; align-items:start; width:100%; max-width:1100px; margin-left:auto; margin-right:auto; justify-content:stretch; padding: 0 0 1rem !important; box-sizing: border-box } .payment-page .order-summary{ width: 400px; max-width: 100% } .payment-page .order-summary{ overflow: visible; max-height: none } /* Desktop: stałe szerokości kolumn dla idealnego wyśrodkowania */ @media (min-width: 1200px){ .payment-page .payment-body{ grid-template-columns: 660px 400px; gap: 2rem } .payment-page .payment-header{ max-width: 1100px; margin-left:auto; margin-right:auto } } /* Zapewnij poprawne centrowanie na węższych ekranach */ @media (max-width: 768px){ .payment-page #paymentPage{ width:100%; display:block; margin:0 auto } } /* Zapobiegaj poziomemu przewijaniu na stronie płatności */ .payment-page{ overflow-x:hidden; --left-pad: 1.5rem } /* Page title (payment) */ .payment-page .page-title-wrap{ text-align:left; padding: .25rem 0 .5rem; margin: 0 0 .9rem; max-width:660px; padding-left: 0 } .payment-page .container > .page-title-wrap{ margin-left:0; margin-right:auto } @media (max-width: 1023.98px){ .payment-page .page-title-wrap{ max-width:100% } } .payment-page .page-title{ font-family:Poppins,system-ui,sans-serif; font-weight:800; font-size:clamp(1.1rem,2.6vw,1.6rem); letter-spacing:.06em; margin:0; color:#111 } .payment-page .page-title-hr{ height:1px; width:100%; margin:.35rem 0 0; background:#e5e7eb } /* Usuń szare tło pod formularzem – zostaw je tylko dla prawej wyspy */ .payment-page .customer-form{ background:transparent !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; border:0 !important } /* Usuń wewnętrzny box w formularzu, aby pola były naprawdę długie */ .payment-page .payment-form{ background:transparent !important; padding:0 !important; border-radius:0 !important } /* Delikatne powiększenie typografii i pól */ .payment-page{ font-size:1.03rem } .payment-page .payment-form label{ font-weight:600 } .payment-page .payment-form input, .payment-page .payment-form textarea{ padding:.9rem 1rem; font-size:1rem } .payment-page .order-summary h3{ font-size:1.18rem } .payment-page .order-summary .total-row.final{ font-size:1.28rem } .payment-page .summary-cta{ padding:1rem 1.25rem; font-size:1rem } /* Cart page (not modal) – wider, 2 columns on desktop */ .cart-page-content{ max-width: 1100px; width:100%; margin:0 auto; /* Unset modal-like limits for page view */ max-height: none; overflow: visible; transform: none; box-shadow: none; background: transparent; border-radius: 0; } @media(min-width:900px){ .cart-page-content{ display:grid; grid-template-columns: minmax(0,1fr) 480px; justify-content:start; align-items:start; gap: 2.2rem } .cart-page-content .cart-header{ grid-column:1 / -1 } .cart-page-content .cart-summary{ border:1px solid #e5e7eb; border-radius:14px; align-self:start; background:#fff; box-shadow:0 8px 22px -10px rgba(15,23,42,.12) } } /* Distinct, airy card layout for cart items on page */ .cart-page-content .cart-items{ display:grid; gap:1rem; padding:0; justify-items:stretch; width:100%; max-width:820px } .cart-page-content .cart-items{ margin-top: .8rem } .cart-page-content .cart-item{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1.1rem 1.25rem; align-items:center; grid-template-columns: 72px minmax(0,1fr) auto; gap:1.05rem; box-shadow:0 8px 18px -12px rgba(15,23,42,.14); width:100%; justify-self:stretch; position:relative } .cart-page-content .cart-item{ margin-bottom: .9rem } .cart-page-content .cart-item::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:0; box-shadow: inset 0 -1px 0 #e5e7eb; border-bottom-left-radius:12px; border-bottom-right-radius:12px; pointer-events:none } .cart-page-content .item-media{ width:64px; height:64px; border-radius:12px; overflow:hidden; background:#f3f4f6 } .cart-page-content .item-info h3{ font-size:1.14rem; line-height:1.34; color:#111827; margin-bottom:.35rem } .cart-page-content .item-price{ font-size:1.06rem; line-height:1.5; color:#475569 } .cart-page-content .item-controls{ gap:.6rem; align-items:center } .cart-page-content .qty-btn{ width:32px; height:32px; border-radius:10px; background:#fff; border:1px solid #e5e7eb } .cart-page-content .qty-btn:hover{ background:#f8fafc } .cart-page-content .quantity{ min-width:2rem; font-size:.95rem; font-weight:700 } .cart-page-content .remove-item{ padding:.4rem .6rem; border-radius:10px; background:#fff; color:#b91c1c; border:1px solid #fecaca } .cart-page-content .remove-item:hover{ background:#fff5f5 } /* Ensure nothing gets clipped: allow text to wrap and middle column to shrink */ .cart-page-content .item-info{ min-width:0; overflow:visible } .cart-page-content .item-info h3, .cart-page-content .item-price{ white-space:normal; overflow-wrap:break-word; word-break:normal } .cart-page-content .item-controls{ flex-wrap:nowrap } /* Summary panel with header and comfortable spacing */ .cart-page-content .cart-summary{ padding:1.25rem 1.35rem; border-radius:16px } .cart-page-content .cart-summary h3{ margin:.25rem 0 1.1rem; font-weight:800; font-size:1.28rem; color:#0f3c21 } .cart-page-content .cart-summary .summary-row{ margin:.6rem 0; font-size:1.02rem; display:flex; justify-content:space-between; gap:.9rem } .cart-page-content .cart-summary .summary-row span:last-child{ white-space:nowrap } .cart-page-content .cart-summary .summary-row.total{ font-size:1.25rem; padding-top:.85rem } .cart-page-content .cart-summary .cart-actions{ margin-top:1.6rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; justify-content:flex-end } /* Turn big tiles into real buttons (smaller) on the page */ .cart-page-content .continue-shopping, .cart-page-content .proceed-payment{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; padding:.6rem .9rem; border-radius:8px; } /* Back-home: wyśrodkowany link pod tabelą pozycji (kolumna lewa) */ .cart-page-content .cart-back{ grid-column: 1 / 2; text-align:center; margin: .5rem 0 0; } .back-home{ display:inline-flex; align-items:center; gap:.45rem; padding:.65rem 1.1rem; border-radius:12px; border:1.5px solid #2d5a3d; color:#2d5a3d; background:#fff; text-decoration:none; font-weight:600; box-shadow:0 1px 0 rgba(0,0,0,.03); } .back-home:hover{ background:#f5fbf7 } /* Sticky summary on desktop to ensure nothing feels cramped while scrolling */ @media(min-width:900px){ .cart-page-content .cart-summary{ position:sticky; top:100px } } /* Header spacing */ .cart-page-content .cart-header{ padding:.25rem 0 .5rem } /* Na stronie koszyka nie pokazuj badge liczby w ikonie koszyka */ body.cart-page .cart-count{ display:none !important } .cart-header, .payment-header { padding: 1.5rem; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .cart-header h2, .payment-header h2 { margin: 0; color: #333; } .close-cart, .close-payment { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #666; padding: 0.5rem; border-radius: 4px; } .close-cart:hover, .close-payment:hover { background: #f0f0f0; } .cart-items { padding: 1.5rem; } .empty-cart { text-align: center; color: #666; padding: 2rem; } .cart-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 0.75rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid #eee; } .cart-item:last-child { border-bottom: none; } .item-media { width: 42px; height: 42px; border-radius: 8px; overflow: hidden; background: #f3f4f6; display: grid; place-items: center; } .item-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .item-info h3 { margin: 0 0 0.5rem 0; font-size: 1rem; color: #333; } .item-price { color: #666; font-size: 0.9rem; margin: 0; } .item-controls { display: flex; align-items: center; gap: 0.5rem; } .qty-btn { background: #f0f0f0; border: none; width: 30px; height: 30px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .qty-btn:hover { background: #e0e0e0; } .quantity { min-width: 2rem; text-align: center; font-weight: bold; } .remove-item { background: #ff4757; color: white; border: none; padding: 0.3rem 0.6rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem; } .remove-item:hover { background: #ff3742; } .cart-summary { padding: 1.5rem; border-top: 1px solid #eee; background: #f9f9f9; } .summary-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .summary-row.total { font-weight: bold; font-size: 1.1rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #ddd; } .cart-actions { display: flex; gap: 1rem; margin-top: 1.5rem; } /* Ensure the header bar does not resize */ .header-bar { height: 85px; /* Fixed height */ pointer-events: auto; /* Allow interaction */ } /* Fix spacing: avoid double offset created by body padding-top on small screens and the desktop margin applied to .hero.simple. */ @media (max-width: 899.98px) { /* On narrow screens the stylesheet reserves space on using --header-mobile-height; cancel that push for pages with hero by pulling the hero up by the same amount. This prevents a doubled gap. */ .hero.simple { margin-top: calc(-1 * var(--header-mobile-height)) !important; min-height: calc(100vh - var(--header-mobile-height)); margin-bottom: 0 !important; } } @media (min-width: 900px) { /* On desktop reserve the fixed header height so hero doesn't sit under it */ .hero.simple { margin-top: 85px; min-height: calc(100vh - 85px); } } /* Podniesienie treści hero większe — użytkownik poprosił "jeszcze wyżej". Większe wartości na desktop, umiarkowane na tabletach, delikatne na telefonach. */ .hero.simple .hero-inner{ transform: translateY(-30px); } @media (max-width: 899.98px){ .hero.simple .hero-inner{ transform: translateY(-10px); } } @media (max-width: 480px){ .hero.simple .hero-inner{ transform: none; } } /* Fix dropdown menu disappearing */ .main-nav li.has-dropdown:hover > .dropdown { display: block; } .main-nav .dropdown { pointer-events: auto; /* Ensure dropdown remains interactive */ } /* Ensure dropdown menu stays open when hovered */ .main-nav li.has-dropdown:hover > .dropdown, .main-nav li.has-dropdown > .dropdown:hover { display: block; visibility: visible; opacity: 1; } .main-nav .dropdown { transition: visibility 0.2s ease, opacity 0.2s ease; visibility: hidden; opacity: 0; } .main-nav li.has-dropdown.open > .dropdown { visibility: visible; opacity: 1; } /* Hero split layout */ .hero-split { display: flex; align-items: center; gap: 40px; text-align: left; } .hero-text { flex: 1; } .hero-photo { flex: 0 0 340px; display: flex; align-items: flex-end; justify-content: center; } .hero-expert-img { width: 100%; max-width: 340px; height: 480px; object-fit: cover; object-position: top center; border-radius: 16px 16px 0 0; box-shadow: 0 8px 40px rgba(0,0,0,0.35); display: block; } @media (max-width: 768px) { .hero-split { flex-direction: column; text-align: center; } .hero-photo { flex: unset; width: 100%; } .hero-expert-img { max-width: 260px; height: 340px; border-radius: 12px 12px 0 0; margin: 0 auto; } } /* Hero split overrides (higher specificity) */ .hero.simple .hero-inner.hero-split { flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important; max-width: 1100px !important; text-align: left !important; gap: 40px; padding: 3rem 2.5rem 0; } .hero.simple .hero-inner.hero-split .hero-text { flex: 1; text-align: left; } .hero.simple .hero-inner.hero-split .hero-text h1, .hero.simple .hero-inner.hero-split .hero-text .lead { text-align: left !important; } @media (max-width: 768px) { .hero.simple .hero-inner.hero-split { flex-direction: column !important; align-items: center !important; text-align: center !important; padding-bottom: 0; } .hero.simple .hero-inner.hero-split .hero-text h1, .hero.simple .hero-inner.hero-split .hero-text .lead { text-align: center !important; } } /* ===== SEKCJA EKSPERT ===== */ .ekspert-section { background: #ffffff; overflow: hidden; position: relative; padding-bottom: 4rem; } .ekspert-inner { display: flex; align-items: center; max-width: 1200px; margin: 0 auto; padding: 2rem 2rem 0; gap: 0; } /* PHOTO */ .ekspert-photo-col { flex: 0 0 400px; position: relative; align-self: center; } .ekspert-img { width: 400px; height: 560px; object-fit: cover; object-position: center top; display: block; -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 96%); mask-image: linear-gradient(to bottom, black 70%, transparent 96%); } /* SVG ARROWS */ .ekspert-arrows { flex: 0 0 140px; height: 420px; overflow: visible; align-self: center; } /* FEATURES */ .ekspert-features { flex: 1; display: flex; flex-direction: column; gap: 32px; padding: 2rem 0 2rem 8px; align-self: center; } .ekspert-feature-card { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 14px; padding: 18px 22px; box-shadow: 0 2px 16px rgba(0,0,0,0.07); border-left: 4px solid #0c7239; transition: box-shadow 0.2s, transform 0.2s; } .ekspert-feature-card:hover { box-shadow: 0 6px 28px rgba(12,114,57,0.14); transform: translateX(4px); } .ekspert-feature-num { width: 44px; height: 44px; border-radius: 50%; background: #0c7239; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; flex-shrink: 0; font-family: Poppins, sans-serif; } .ekspert-feature-body h4 { color: #1a1a1a; font-size: 1rem; font-weight: 700; margin: 0 0 4px; font-family: Poppins, sans-serif; } .ekspert-feature-body p { color: #555; font-size: 0.88rem; line-height: 1.55; margin: 0; } /* TABLET */ @media (max-width: 1024px) and (min-width: 901px) { .ekspert-photo-col { flex: 0 0 320px; } .ekspert-img { width: 320px; height: 460px; } .ekspert-arrows { flex: 0 0 110px; } .ekspert-features { gap: 24px; } } /* MOBILE — ten sam układ co desktop, mniejsza skala */ @media (max-width: 900px) { .ekspert-section { padding-bottom: 2rem; } .ekspert-inner { flex-direction: row; align-items: center; padding: 1rem 0.75rem 0; gap: 0; } /* FOTO */ .ekspert-photo-col { flex: 0 0 130px; align-self: center; } .ekspert-img { width: 130px; height: 200px; object-position: center 8%; -webkit-mask-image: linear-gradient(to bottom, black 68%, transparent 100%); mask-image: linear-gradient(to bottom, black 68%, transparent 100%); } /* SVG STRZAŁKI — widoczne, mniejsze */ .ekspert-arrows { display: block; flex: 0 0 58px; width: 58px; height: 174px; /* 420 * (58/140) = 174 */ align-self: center; overflow: visible; } /* KARTY */ .ekspert-features { flex: 1; gap: 10px; padding: 0.5rem 0 0.5rem 4px; align-self: center; } .ekspert-features::before { display: none; } .ekspert-feature-card { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border-left: 3px solid #0c7239; border-radius: 10px; margin-bottom: 0; margin-left: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.07); } .ekspert-feature-card::before { display: none; } .ekspert-feature-num { width: 30px; height: 30px; font-size: 0.72rem; flex-shrink: 0; } .ekspert-feature-body h4 { font-size: 0.78rem; margin-bottom: 2px; } .ekspert-feature-body p { font-size: 0.72rem; line-height: 1.4; } } /* SMALL MOBILE */ @media (max-width: 420px) { .ekspert-photo-col { flex: 0 0 108px; } .ekspert-img { width: 108px; height: 168px; } .ekspert-arrows { flex: 0 0 48px; width: 48px; height: 144px; } .ekspert-feature-card { padding: 8px 10px; gap: 8px; } .ekspert-feature-num { width: 26px; height: 26px; font-size: 0.65rem; } .ekspert-feature-body h4 { font-size: 0.72rem; } .ekspert-feature-body p { font-size: 0.67rem; } } /* ====================================================== HERO REDESIGN v2 — editorial authority ====================================================== */ :root { --hero-green-deep: #0a5c2f; --hero-green-brand: #0c7239; --hero-green-accent: #34d399; --hero-charcoal: #1a2332; --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif; } /* Gradient overlay — green-to-charcoal diagonal */ .hero.simple::before { background-image: linear-gradient( 135deg, rgba(10, 92, 47, 0.88) 0%, rgba(26, 35, 50, 0.82) 50%, rgba(10, 92, 47, 0.75) 100% ), var(--hero-image, url('assets/unnamed.jpg')) !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center !important; } /* Geometric line pattern overlay */ .hero-bg-pattern { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; background-image: repeating-linear-gradient( 45deg, transparent, transparent 40px, rgba(255,255,255,0.5) 40px, rgba(255,255,255,0.5) 41px ); } /* Bottom fade for section transition */ .hero.simple::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.06)); z-index: 1; pointer-events: none; } /* Layout: left-aligned editorial */ .hero.simple .container { justify-content: flex-start !important; padding-left: clamp(2rem, 8vw, 6rem) !important; padding-right: 2rem !important; } .hero.simple .hero-inner { align-items: flex-start !important; text-align: left !important; max-width: 780px !important; padding: 0 !important; transform: translateY(-30px); } /* Eyebrow label */ .hero-eyebrow { display: inline-block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hero-green-accent); margin-bottom: 1.2rem; padding: 0.4rem 1rem; border: 1px solid rgba(52, 211, 153, 0.3); border-radius: 4px; background: rgba(52, 211, 153, 0.08); opacity: 0; transform: translateY(20px); animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; } /* Heading — DM Serif Display */ .hero.simple h1 { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: clamp(2.4rem, 5vw, 3.8rem) !important; line-height: 1.12 !important; letter-spacing: -0.01em !important; color: #ffffff !important; text-align: left !important; margin-bottom: 1.5rem !important; opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards; } /* Lead paragraph — Source Sans 3 */ .hero.simple .lead { font-family: var(--font-body) !important; font-size: 1.08rem !important; line-height: 1.75 !important; color: rgba(255, 255, 255, 0.82) !important; text-align: left !important; max-width: 620px !important; font-weight: 400 !important; margin-bottom: 2.2rem !important; opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; } /* Button row */ .hero-buttons { display: flex !important; gap: 1rem !important; justify-content: flex-start !important; align-items: center !important; flex-wrap: wrap !important; margin-bottom: 3rem; opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards; } /* Primary CTA refined */ .hero .btn.primary { background: var(--hero-green-brand) !important; color: #fff !important; padding: 0.95rem 2.2rem !important; border-radius: 6px !important; font-family: var(--font-body) !important; font-weight: 600 !important; font-size: 1rem !important; letter-spacing: 0.02em !important; border: 2px solid var(--hero-green-brand) !important; box-shadow: 0 4px 16px rgba(12, 114, 57, 0.3) !important; transition: all 0.25s ease !important; text-decoration: none !important; margin-top: 0 !important; } .hero .btn.primary:hover { background: #0a5e30 !important; border-color: #0a5e30 !important; box-shadow: 0 6px 24px rgba(12, 114, 57, 0.4) !important; transform: translateY(-1px); } /* Ghost outline button */ .hero .btn.outline-light { background: transparent; color: rgba(255, 255, 255, 0.9); padding: 0.95rem 2.2rem; border-radius: 6px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; border: 2px solid rgba(255, 255, 255, 0.35); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.25s ease; } .hero .btn.outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); color: #fff; text-decoration: none; } /* Stats row */ .hero-stats { display: flex; gap: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards; } .hero-stat { display: flex; flex-direction: column; gap: 0.25rem; } .hero-stat-number { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: #fff; } .hero-stat-suffix { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--hero-green-accent); } .hero-stat-label { font-family: var(--font-body); font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } /* Entrance animation */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-eyebrow, .hero.simple h1, .hero.simple .lead, .hero-buttons, .hero-stats { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Tablet */ @media (max-width: 768px) { .hero.simple .container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; justify-content: center !important; } .hero.simple .hero-inner { align-items: center !important; text-align: center !important; max-width: 100% !important; transform: none !important; padding-top: 1rem !important; padding-bottom: 1rem !important; } .hero.simple h1 { text-align: center !important; font-size: clamp(1.9rem, 6vw, 2.8rem) !important; } .hero.simple .lead { text-align: center !important; max-width: 100% !important; } .hero-buttons { justify-content: center !important; } .hero-stats { justify-content: center; gap: 2rem; flex-wrap: wrap; } .hero-stat { align-items: center; text-align: center; } .hero-eyebrow { align-self: center; } /* Fix: remove bottom margin gap on mobile */ .hero.simple { margin-bottom: 0 !important; } } /* Small phone */ @media (max-width: 480px) { .hero.simple h1 { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; } .hero.simple .lead { font-size: 0.95rem !important; } .hero-stats { gap: 1.5rem; } .hero-stat-number, .hero-stat-suffix { font-size: 1.8rem; } .hero-stat-label { font-size: 0.75rem; } .hero-buttons { flex-direction: column !important; gap: 0.8rem !important; } .hero .btn.primary, .hero .btn.outline-light { width: 100%; text-align: center; justify-content: center; } .hero.simple .hero-inner { transform: none !important; padding-top: 0.5rem !important; } .hero.simple { margin-bottom: 0 !important; } } /* ========== HERO MOBILE — FINAL OVERRIDES (must be last) ========== */ @media (max-width: 900px) { .hero.simple { min-height: calc(100vh - var(--header-mobile-height, 72px)) !important; min-height: calc(100dvh - var(--header-mobile-height, 72px)) !important; overflow: hidden !important; margin-bottom: 0 !important; padding-top: 0 !important; } .hero.simple .container { display: flex !important; align-items: center !important; justify-content: center !important; min-height: calc(100vh - var(--header-mobile-height, 72px)) !important; min-height: calc(100dvh - var(--header-mobile-height, 72px)) !important; max-width: 100% !important; position: static !important; padding: 0 1.5rem !important; box-sizing: border-box !important; } .hero-inner { transform: none !important; padding: 2rem 1rem !important; max-width: 100% !important; box-sizing: border-box !important; } .hero.simple .lead { max-width: 90% !important; word-wrap: break-word !important; font-size: 1rem !important; } .hero.simple h1 { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; } .hero-buttons { flex-wrap: wrap !important; justify-content: center !important; } } /* Short phones (iPhone SE, Galaxy S series) */ @media (max-width: 640px) and (max-height: 700px) { .hero.simple h1 { font-size: clamp(1.4rem, 5.5vw, 2rem) !important; margin-bottom: 0.5rem !important; } .hero.simple .lead { font-size: 0.88rem !important; margin-bottom: 0.8rem !important; line-height: 1.45 !important; } .hero-inner { padding: 1rem 0.5rem !important; } .hero .btn { padding: 0.65rem 1rem !important; font-size: 0.9rem !important; } .hero-buttons { gap: 0.5rem !important; } } /* Tall phones (iPhone 12/13/14/15) */ @media (max-width: 640px) and (min-height: 701px) { .hero.simple h1 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; margin-bottom: 0.8rem !important; } .hero.simple .lead { font-size: 0.95rem !important; margin-bottom: 1.2rem !important; } .hero-inner { padding: 1.5rem 1rem !important; } }