/* ------------------------------------------------------------------ HS Shop UI - style sklepu PLIK GENEROWANY. Nie edytowac na serwerze ani recznie. Zrodlo: files/design/_shared.css + bloki w szablonach. Przebudowa: python files/design/build_wp_css.py Wygenerowano: 2026-09-03 21:59:32 ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ Paleta i typografia wprost z Ustawien witryny (Elementor, zestaw 19): #FFFFFF · #111111 · #7A7A7A · akcent #2650A6 · tlo #F6F7FA Raleway (naglowki) + Inter (tresc) IBM Plex Mono tylko do danych technicznych: numery katalogowe, liczniki. Skala odstepow oparta na 4px, zeby rytm sekcji byl ten sam wszedzie. ------------------------------------------------------------------ */ :root{ --paper:#fff; --bg:#f6f7fa; --ink:#111; --muted:#7a7a7a; --accent:#2650a6; --accent-d:#1c3c7d; --rule:#e4e7ef; --rule-soft:#eef0f6; --w:1280px; --pad:32px; --sec:64px; /* pionowy oddech sekcji */ --head-h:86px; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--paper); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} .wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:Raleway,sans-serif} img{max-width:100%;display:block} button{font-family:inherit} /* ---------- pasek uzytkowy: jasny, bez czarnej belki ---------- */ .util{background:var(--bg);border-bottom:1px solid var(--rule);font-size:12.5px;color:#5c5f68} .util .wrap{display:flex;align-items:center;gap:24px;height:38px} .util .sep{flex:1} .util a:hover{color:var(--accent)} .util b{color:var(--ink);font-weight:600} .util .hide-sm{display:inline} /* ---------- naglowek: chowa sie przy scrollu w dol ---------- */ .head{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule); transition:transform .32s cubic-bezier(.4,0,.2,1)} .head.up{transform:translateY(-100%)} .head .wrap{display:flex;align-items:center;gap:28px;height:var(--head-h)} .logo{display:flex;align-items:center;gap:12px;flex:0 0 auto} .logo img{width:42px;height:42px;object-fit:contain} .logo .n{font-family:Raleway,sans-serif;font-weight:800;font-size:21px;letter-spacing:-.01em} /* UWAGA: klasa musi miec przedrostek. WordPress dodaje do klase `search` na stronie wynikow wyszukiwania, wiec gola regula `.search` trafiala w cala strone i ustawiala ja jako rzad flexa - uklad sie zapadal. */ .hs-search{flex:1;display:flex;height:50px;border:1.5px solid var(--ink);min-width:0} .hs-search .scope{display:flex;align-items:center;padding:0 15px;border-right:1px solid var(--rule); font-size:13.5px;color:var(--muted);background:var(--bg);white-space:nowrap} .hs-search input{flex:1;min-width:0;border:0;outline:0;padding:0 16px; font:400 15px/1 Inter,sans-serif;color:var(--ink)} .hs-search input::placeholder{color:#a6a9b2} .hs-search button{border:0;background:var(--accent);color:#fff;padding:0 26px;cursor:pointer; font:600 14px Inter,sans-serif;white-space:nowrap} .hs-search button:hover{background:var(--accent-d)} .hs-search .ico{display:none} .tools{display:flex;align-items:center;gap:22px;flex:0 0 auto} .tool{display:flex;align-items:center;gap:10px} .tool svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.5;flex:0 0 auto} .tool .l{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .tool .v{font-size:14px;font-weight:600;white-space:nowrap} .tool:hover .v{color:var(--accent)} .badge{background:var(--accent);color:#fff;font-size:11px;font-weight:600; min-width:19px;height:19px;padding:0 5px;border-radius:999px; display:inline-flex;align-items:center;justify-content:center; line-height:1;font-family:"IBM Plex Mono",monospace;flex:0 0 auto} /* ---------- koszyk rozwijany ---------- UWAGA: mini-koszyk renderuje Elementor, nie WooCommerce. Markup to `.elementor-menu-cart__*`, a przyciski to `a.elementor-button` - nie ma tu ani `.buttons`, ani `.button`, ani `.checkout`. Selektory pisane pod standardowy szablon Woo nie lapaly niczego. */ .cartbox{position:relative} .cartdrop{position:absolute;right:0;top:calc(100% + 14px);width:340px;background:var(--paper); border:1px solid var(--rule);box-shadow:0 14px 40px rgba(17,17,17,.13);padding:18px;z-index:60; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s} .cartbox.open .cartdrop{opacity:1;visibility:visible;transform:translateY(0)} @media (hover:hover) and (pointer:fine){ .cartbox:hover .cartdrop, .cartbox:focus-within .cartdrop{opacity:1;visibility:visible;transform:translateY(0)} } .cartdrop::before{content:"";position:absolute;right:22px;top:-7px;width:12px;height:12px; background:var(--paper);border-left:1px solid var(--rule);border-top:1px solid var(--rule); transform:rotate(45deg)} .cartdrop .elementor-menu-cart__products{max-height:320px;overflow-y:auto;margin:0 0 14px} /* Nazwa i cena to osobne elementy, wiec zajmuja dwa wiersze siatki. Bez jawnego rozpisania pozycji zdjecie zostawalo w pierwszym wierszu, a krzyzyk usuwania spadal do drugiego - nic nie bylo wzgledem siebie wyrownane. Zdjecie i krzyzyk rozpinamy na oba wiersze i centrujemy w pionie. */ .cartdrop .elementor-menu-cart__product{display:grid; grid-template-columns:52px minmax(0,1fr) 22px; grid-template-rows:auto auto; column-gap:12px;row-gap:2px; padding:14px 0;border-bottom:1px solid var(--rule-soft);position:relative} .cartdrop .elementor-menu-cart__product-image{grid-column:1;grid-row:1 / span 2; align-self:center;width:52px} .cartdrop .elementor-menu-cart__product-image img{width:52px;height:52px;object-fit:contain; border:1px solid var(--rule);background:#fff;display:block} .cartdrop .elementor-menu-cart__product-name{grid-column:2;grid-row:1; font-size:13.5px;line-height:1.35;font-weight:500;align-self:end} .cartdrop .elementor-menu-cart__product-price{grid-column:2;grid-row:2; font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);align-self:start} /* Krzyzyk usuwania zawiera dwa odnosniki, w tym jeden pozycjonowany absolutnie - przez to `align-self:center` w siatce liczylo sie od zlej wysokosci i guzik siadal ponizej srodka. Kotwiczymy go wprost do srodka pozycji; kolumna 3 w siatce zostaje jako rezerwacja miejsca. */ .cartdrop .elementor-menu-cart__product-remove{position:absolute;right:0;top:50%; transform:translateY(-50%);width:22px;height:22px;display:flex; align-items:center;justify-content:center} .cartdrop .elementor-menu-cart__subtotal{font-size:14px;font-weight:600;padding:12px 0; border-top:1px solid var(--ink);margin-bottom:14px;text-align:left} .cartdrop .elementor-menu-cart__subtotal .woocommerce-Price-amount{ font-family:"IBM Plex Mono",monospace;float:right;font-weight:500} .cartdrop .elementor-menu-cart__empty-message{font-size:14px;color:var(--muted); text-align:center;padding:18px 0;margin:0} /* Elementor maluje kolor globalnie na h1-h6 (.elementor-kit-19 h3), wiec naglowek kafla trzeba pomalowac celniej - inaczej jest czarny na zdjeciu. */ .tiles .tile .cap h3, .tiles .tile .cap .n{color:#fff} .nav{border-bottom:1px solid var(--rule);background:var(--paper)} .nav .wrap{display:flex;height:48px;align-items:stretch;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch} .nav .wrap::-webkit-scrollbar{display:none} .nav a{display:flex;align-items:center;gap:8px;padding:0 18px;font-size:14px;white-space:nowrap; border-right:1px solid var(--rule)} .nav a:first-child{padding-left:0} .nav a:hover{color:var(--accent)} .nav a i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#a6a9b2} .nav .all{border-right:0;color:var(--accent);font-weight:600} /* ---------- naglowek strony wejsciowej: w kodzie, nie na ekranie ---------- Uklad sklada sie z samych h2 i h3, wiec bez tego strona wejsciowa nie ma ani jednego H1 - a to glowny adres sklepu. Rysowany pas nad kaflami odpadl (rozbijal pierwszy ekran i wygladal jak doklejony), zostaje sam naglowek dla wyszukiwarki i czytnikow ekranu. NIE `display:none` ani `visibility:hidden` - jedno i drugie chowa tresc takze przed czytnikami, a Google traktuje ukryty w ten sposob naglowek jako probe manipulacji. Ponizej wzorzec `.screen-reader-text` z rdzenia WordPressa: element zostaje w drzewie dostepnosci, tylko nie zajmuje miejsca. */ .lead{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- kafle: pierwszy ekran pokazuje towar ---------- */ .tiles{padding:24px 0 0} .grid6{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:206px;gap:14px} .tile{position:relative;overflow:hidden;background:var(--bg);display:block} .tile:first-child{grid-row:span 2} .tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .tile:hover img{transform:scale(1.035)} .tile .cap{position:absolute;left:0;right:0;bottom:0;padding:18px; background:linear-gradient(transparent,rgba(17,17,17,.82) 62%);color:#fff} .tile h3{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.25} .tile:first-child h3{font-size:26px} .tile .n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;opacity:.75;margin-top:4px;display:block} /* ---------- sekcje ---------- */ .sec{padding:var(--sec) 0} .sec.alt{background:var(--bg)} .sec-h{display:flex;align-items:baseline;gap:16px;margin-bottom:28px} .sec-h h2{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;white-space:nowrap} .sec-h .line{flex:1;height:1px;background:var(--rule)} .sec-h a{font-size:13.5px;color:var(--accent);font-weight:600;white-space:nowrap} /* ---------- karty produktow ---------- */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .card{background:var(--paper);border:1px solid var(--rule);display:flex;flex-direction:column; transition:border-color .28s ease .07s, box-shadow .28s ease .07s} .card:hover{border-color:var(--accent);box-shadow:0 6px 22px rgba(38,80,166,.09)} /* Pudelko na zdjecie ma stala proporcje, a obrazek wypelnia je w calosci z `object-fit`. Wczesniej obrazek mial `width:auto; max-height:100%`, przez co jego rozmiar zalezal od wysokosci pudelka, a ta od proporcji - powstawala zaleznosc cykliczna, ktora WebKit rozwiazuje inaczej niz Blink i w Safari kafle rozjezdzaly sie w pionie. Tu nie ma juz czego rozwiazywac. */ .card-img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center; padding:18px;background:#fff;overflow:hidden;min-height:0} .card-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .card-b{padding:0 18px 18px;display:flex;flex-direction:column;flex:1} .card-cat{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .card-name{font-size:14px;line-height:1.4;margin-bottom:10px;flex:1} .card-sku{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--accent);margin-bottom:14px} .card-p{display:flex;align-items:baseline;gap:7px} .card-p b{font-size:22px;letter-spacing:-.02em;font-weight:600} .card-p span{font-size:11.5px;color:var(--muted)} .card-g{font-size:12px;color:var(--muted);margin-bottom:14px} .card-btn{display:block;text-align:center;border:1.5px solid var(--ink);padding:10px; font-size:13px;font-weight:600;transition:background-color .28s ease .07s, border-color .28s ease .07s,color .28s ease .07s} .card:hover .card-btn{background:var(--accent);border-color:var(--accent);color:#fff} /* ---------- szklo na wymiar: jasne, bez czarnej dominanty ---------- */ .cut{background:var(--bg);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .cut .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; padding-top:var(--sec);padding-bottom:var(--sec)} .cut .eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);font-weight:600;margin-bottom:16px} .cut h2{font-size:34px;font-weight:800;letter-spacing:-.022em;line-height:1.16;max-width:15ch} .cut p{color:#4a4d55;margin-top:16px;font-size:16px;max-width:42ch} .cut .ph{position:relative;aspect-ratio:16/11;overflow:hidden;background:#e9ecf2} .cut .ph img{width:100%;height:100%;object-fit:cover} .btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 28px; font-size:14.5px;font-weight:600;transition:background-color .2s} .btn-p{background:var(--accent);color:#fff;margin-top:26px} .btn-p:hover{background:var(--accent-d)} /* ---------- indeks katalogu ---------- */ .index{columns:3;column-gap:56px} .idx{display:flex;align-items:baseline;gap:11px;padding:10px 0; border-bottom:1px solid var(--rule-soft);break-inside:avoid} .idx-n{font-size:15px} .idx-r{flex:1;border-bottom:1px dotted #c9cdd8;transform:translateY(-3px);min-width:14px} .idx-c{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)} .idx:hover .idx-n,.idx:hover .idx-c{color:var(--accent)} /* ---------- fakty ---------- */ .facts{border-top:1px solid var(--rule)} .facts .wrap{display:grid;grid-template-columns:repeat(3,1fr);padding-left:var(--pad);padding-right:var(--pad)} .facts .f{padding:44px 40px;border-right:1px solid var(--rule)} .facts .f:first-child{padding-left:0} .facts .f:last-child{border-right:0;padding-right:0} .facts .k{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--accent); letter-spacing:.08em;margin-bottom:14px} .facts h3{font-size:21px;font-weight:700;letter-spacing:-.015em;margin-bottom:9px} .facts p{font-size:14.5px;color:#5c5f68;max-width:34ch} /* ================================================================== RESPONSYWNOSC — projektowana teraz, nie doklejana pozniej ================================================================== */ /* --- laptop --- */ @media(max-width:1180px){ :root{--sec:56px;--pad:24px} .grid6{grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:180px} .tile:first-child h3{font-size:22px} .cut .wrap{gap:40px}.cut h2{font-size:30px} } /* --- tablet --- */ @media(max-width:900px){ :root{--head-h:74px} .util .hide-sm{display:none} .head .wrap{gap:18px} .logo .n{font-size:19px} .hs-search{height:46px} .hs-search .scope{display:none} .tool .l,.tool .v{display:none} .tool{gap:0} .grid6{grid-template-columns:1fr 1fr;grid-auto-rows:170px} .tile:first-child{grid-row:span 1;grid-column:span 2} .tile:first-child h3{font-size:20px} .grid{grid-template-columns:repeat(2,1fr);gap:16px} .cut .wrap{grid-template-columns:1fr;gap:28px} .cut .ph{order:-1;aspect-ratio:16/9} .index{columns:2;column-gap:36px} .facts .wrap{grid-template-columns:1fr} .facts .f{border-right:0;border-bottom:1px solid var(--rule);padding:28px 0} .facts .f:last-child{border-bottom:0} } /* --- telefon --- */ @media(max-width:600px){ :root{--sec:44px;--pad:18px;--head-h:auto} .cartdrop{width:min(340px,calc(100vw - 24px));right:-6px} .util{font-size:12px} .util .wrap{height:34px;gap:14px;justify-content:space-between} .head .wrap{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:12px} .logo{order:1} .tools{order:2;margin-left:auto} .hs-search{order:3;flex:1 0 100%;height:46px} .hs-search button{padding:0;width:52px} .hs-search button .txt{display:none} .hs-search button .ico{display:block;margin:0 auto} .nav .wrap{height:44px} .nav a{padding:0 14px;font-size:13.5px} .grid6{grid-template-columns:1fr;grid-auto-rows:158px;gap:10px} .tile:first-child{grid-column:span 1;grid-row:span 1} .tile:first-child h3,.tile h3{font-size:18px} .sec-h{flex-wrap:wrap;gap:10px} .sec-h .line{display:none} .sec-h a{margin-left:auto} .grid{grid-template-columns:repeat(2,1fr);gap:12px} .card-b{padding:0 12px 12px} .card-img{padding:12px} .card-name{font-size:13px} .card-p b{font-size:19px} .card-btn{padding:9px;font-size:12.5px} .cut h2{font-size:25px} .cut p{font-size:15px} .btn{width:100%} .index{columns:1} .facts h3{font-size:19px} } /* --- maly telefon --- */ @media(max-width:380px){ .grid{grid-template-columns:1fr} .logo .n{font-size:17px}.logo img{width:36px;height:36px} } @media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} .head.up{transform:none} } /* ================================================================== UTWARDZENIE PRZECIW STYLOM MOTYWU I ELEMENTORA Elementor wstawia `.elementor-kit-19 a` oraz `.elementor-kit-19 h1..h6` o specyficznosci (0,1,1), a WooCommerce `.woocommerce a.button` (0,2,1). Same klasy (0,1,0) przegrywaja z nimi i komponenty lapia obce kolory - stad byl czarny tekst na kaflach i szary na niebieskim przycisku. Ponizej te same deklaracje, ale z selektorami o wyzszej specyficznosci (dolozony `body` i nazwa elementu). Zadnego !important. ================================================================== */ body a.btn, body a.btn-p, body a.btn-s{border-radius:0;text-transform:none;letter-spacing:normal} body a.btn-p{background:var(--accent);color:#fff} body a.btn-p:hover{background:var(--accent-d);color:#fff} body a.btn-s{color:var(--ink)} body .card .card-btn{color:var(--ink)} body .card:hover .card-btn{color:#fff} body a.card{color:var(--ink)} body a.card .card-sku{color:var(--accent)} body a.card .card-cat, body a.card .card-g, body a.card .card-p span{color:var(--muted)} body .sec-h a{color:var(--accent)} body .nav a{color:#2a3134} body .nav a:hover{color:var(--accent)} body .nav a.all{color:var(--accent)} body .util a{color:#5c5f68} body .util a:hover{color:var(--accent)} body .util a b{color:var(--ink)} body .tool .v{color:var(--ink)} body .tool:hover .v{color:var(--accent)} body a.idx .idx-n{color:var(--ink)} body a.idx .idx-c{color:var(--muted)} body a.idx:hover .idx-n, body a.idx:hover .idx-c{color:var(--accent)} body .tiles .tile .cap h3, body .tiles .tile .cap .n{color:#fff} /* Przyciski w stopce koszyka. Elementor daje im wlasny kolor, padding i szerokosc dobrana do tresci - stad jeden lamal sie na dwie linie i byly roznej wielkosci. Siatka o dwoch rownych kolumnach plus rozciagniecie sprawiaja, ze dlugosc napisu nie ma juz znaczenia. */ /* `1fr` to w istocie `minmax(auto,1fr)`, wiec najdluzsze slowo w przycisku ("Zamowienie") rozpychalo swoja kolumne i guziki wychodzily rozne. `minmax(0,1fr)` kaze kolumnom ignorowac minimalna szerokosc tresci. */ body .cartbox .cartdrop .elementor-menu-cart__footer-buttons{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;align-items:stretch} body .cartbox .cartdrop .elementor-menu-cart__footer-buttons a.elementor-button{ display:flex;align-items:center;justify-content:center;text-align:center; width:100%;min-height:50px;height:auto;margin:0;padding:9px 10px; font-family:Inter,sans-serif;font-size:13px;font-weight:600;line-height:1.25; letter-spacing:normal;text-transform:none;border-radius:0; border:1.5px solid var(--ink);background:none;color:var(--ink);box-shadow:none} /* Warianty musza byc specyficzniejsze od reguly ogolnej powyzej, inaczej to ona nadaje tlo obu przyciskom. */ body .cartbox .cartdrop .elementor-menu-cart__footer-buttons a.elementor-button.elementor-button--checkout{ background:var(--accent);border-color:var(--accent);color:#fff} body .cartbox .cartdrop .elementor-menu-cart__footer-buttons a.elementor-button.elementor-button--checkout:hover{ background:var(--accent-d);border-color:var(--accent-d);color:#fff} body .cartbox .cartdrop .elementor-menu-cart__footer-buttons a.elementor-button.elementor-button--view-cart:hover{ border-color:var(--accent);color:var(--accent)} body .cartbox .cartdrop .elementor-button-text{font:inherit;color:inherit} body .cartbox .cartdrop .elementor-menu-cart__subtotal{color:var(--ink)} body .cartbox .cartdrop .elementor-menu-cart__product-name a{color:var(--ink)} body .cartbox .cartdrop .elementor-menu-cart__product-name a:hover{color:var(--accent)} /* ================================================================== ZGODNOSC SILNIKOW `aspect-ratio` dziala od Safari 15. Na starszych WebKitach (iPady i macOS sprzed 2021) pudelko na zdjecie zapadloby sie do wysokosci tresci, wiec ponizej klasyczny zamiennik na `padding-top`. Nowsze przegladarki tego bloku nie czytaja. ================================================================== */ @supports not (aspect-ratio: 4 / 3) { .card-img{position:relative;height:0;padding:0 0 75%} .card-img img{position:absolute;top:18px;left:18px;right:18px;bottom:18px; width:auto;height:auto;max-width:calc(100% - 36px);max-height:calc(100% - 36px);margin:auto} .gal .main{position:relative;height:0;padding:0 0 100%} .gal .main img{position:absolute;inset:40px;width:auto;height:auto; max-width:calc(100% - 80px);max-height:calc(100% - 80px);margin:auto} .cut .ph{position:relative;height:0;padding:0 0 68.75%} .cut .ph img{position:absolute;top:0;left:0;width:100%;height:100%} } /* ===== koszyk i zamowienie ===== */ /* ================================================================== KOSZYK I ZAMOWIENIE Obie strony to bloki WooCommerce renderowane po stronie klienta (`wc-block-*`). Znacznikow nie da sie przebudowac i nie nalezy tego robic - nakladamy na nie nasz system wizualny. Selektory maja przedrostek `body`, bo bloki i motyw nadaja wlasne style o wysokiej specyficznosci. Bez !important. ================================================================== */ /* ---------- wspolne: naglowki i typografia ---------- UWAGA na kolejnosc arkuszy: style blokow WooCommerce i Elementora laduja sie PO naszym, wiec przy rownej specyficznosci wygrywaja one. Stad wszedzie dokladamy nazwe elementu (`h2.klasa`), zeby przewazyc bez !important. */ body .wp-block-woocommerce-cart h2.wc-block-cart__totals-title, body .wp-block-woocommerce-checkout h2.wc-block-components-checkout-step__title, body .wp-block-woocommerce-cart h2.wc-block-components-title, body .wp-block-woocommerce-checkout h2.wc-block-components-title, body h2.wc-block-components-title, body h2.wc-block-cart__totals-title, body h2.wc-block-components-checkout-step__title{ font-family:Raleway,sans-serif;font-weight:800;letter-spacing:-.02em;color:var(--ink)} body .wp-block-woocommerce-cart h2.wc-block-cart__totals-title{ font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700} body .wc-block-components-checkout-step__title{font-size:20px} body .wc-block-components-checkout-step__description{font-size:13.5px;color:var(--muted)} /* Kwoty zawsze monospaced - liczby maja sie kolumnowac. */ body .wc-block-formatted-money-amount, body .wc-block-components-formatted-money-amount, body .wc-block-components-totals-item__value{ font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums} /* ---------- koszyk: tabela pozycji ---------- */ body .wc-block-cart-items__header{ font-family:Inter,sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);border-bottom:1px solid var(--ink);padding-bottom:12px} body .wc-block-cart-items__row{border-bottom:1px solid var(--rule-soft);padding:20px 0} body .wc-block-cart-item__image img{ border:1px solid var(--rule);background:#fff;object-fit:contain;padding:6px} body .wc-block-components-product-name{ font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.4} body .wc-block-components-product-name:hover{color:var(--accent)} body .wc-block-cart-item__product .wc-block-components-product-metadata{ font-size:12.5px;color:var(--muted)} body .wc-block-cart-item__remove-link{ font-size:12.5px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)} body .wc-block-cart-item__remove-link:hover{color:var(--accent);border-bottom-color:var(--accent)} /* selektor ilosci - ten sam jezyk co na karcie produktu */ body .wc-block-components-quantity-selector{ border:1.5px solid var(--ink);border-radius:0;background:none; max-width:132px;height:46px;display:flex;align-items:stretch} body .wc-block-components-quantity-selector::after{display:none} body .wc-block-components-quantity-selector__button{ border:0;background:none;color:var(--ink);opacity:1;width:40px;font-size:18px; display:flex;align-items:center;justify-content:center} body .wc-block-components-quantity-selector__button:hover{color:var(--accent);background:none} body .wc-block-components-quantity-selector__input{ border:0;background:none;text-align:center;font:600 15px Inter,sans-serif; color:var(--ink);min-width:0;flex:1} /* ---------- panel boczny z podsumowaniem ---------- */ /* Uwaga: `wc-block-cart__sidebar` i `wc-block-components-sidebar` siedza na TYM SAMYM elemencie, wiec selektor musi byc zlozony, nie zagniezdzony. */ body .wc-block-cart__sidebar, body .wc-block-checkout__sidebar{ border:1px solid var(--rule);background:var(--bg);padding:24px;border-radius:0} /* Kazdy blok podsumowania siedzi we wlasnym `totals-wrapper`, ktory ma juz kreske u gory i 16 px odstepu. Nasza kreska pod wierszem tworzyla razem z nia pusty pas, ktory niczego nie oddzielal - zostawiamy jedna kreske, te na opakowaniu. */ /* WooCommerce sam zeruje ramke czesci opakowan selektorem o sile (0,2,0), wiec kreska na opakowaniu wychodzila raz jest, raz jej nie ma. Kreski rysujemy wiec na wierszach, a opakowania tylko wyciszamy. */ body .wc-block-components-totals-wrapper{ border-top:0;padding-top:0;padding-bottom:0} /* Blok z kwotami ma wlasne 16 px na dole - razem z kreska sumy dawalo to znowu dwie linie z pustym pasem miedzy nimi. Odstep robi juz gorny padding wiersza sumy. */ body .wp-block-woocommerce-checkout-order-summary-totals-block, body .wp-block-woocommerce-cart-order-summary-totals-block{padding-bottom:0} /* Etykieta jest w Interze, kwota w IBM Plex Mono. Kroje maja rozne metryki, wiec wyrownane srodki pudelek widac jako przesuniete - liczy sie wspolna linia pisma. */ /* Odstepy pionowe ustawiamy longhandami, a poziomych NIE ruszamy: na stronie zamowienia WooCommerce wcina wiersze o 16 px wlasnym `padding-left/right`, a nasz skrot `padding:12px 0` zerowal to tylko tam, gdzie akurat wygrywal - przez co wiersz sumy stal 16 px na lewo od pozostalych etykiet. */ body .wc-block-components-totals-item{ font-size:14px;padding-top:12px;padding-bottom:12px; border:0;border-bottom:1px solid var(--rule);align-items:baseline} body .wc-block-components-totals-item__label{color:#4a4d55} /* Ujemny margines nasuwa mocna kreske sumy na jasna kreske wiersza wyzej - dzieki temu jest jedna linia, a nie dwie z pustym pasem miedzy nimi. */ /* Pasmo sumy to odcinek od mocnej kreski do konca bloku podsumowania. Blok ma wlasne `padding-bottom:36px`, wiec przy naszym `16/2` tekst mial nad soba 19 px, a pod soba 41 px - i widac bylo, ze siedzi za wysoko. Zerujemy odstep bloku i dajemy wierszowi rowne marginesy; oddech pod panelem robi juz `padding:24px` samego panelu. */ body .wp-block-woocommerce-checkout-order-summary-block, body .wp-block-woocommerce-cart-order-summary-block, /* Ponizej 700 px WooCommerce dokłada blokowi 36 px na dole regula `.…-block.checkout-order-summary-block-fill-wrapper` w `@media` - (0,2,0). Powtarzamy obie klasy z `body`, co daje (0,2,1). Odstep miedzy sekcjami na telefonie robi juz padding samego panelu. */ body .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper, body .wp-block-woocommerce-cart-order-summary-block.cart-order-summary-block-fill-wrapper{padding-bottom:0} body .wc-block-components-totals-item.wc-block-components-totals-footer-item{ border-bottom:0;border-top:1px solid var(--ink);margin-top:-1px; padding-top:24px;padding-bottom:24px;font-size:16px} /* Etykieta sumy mial 20 px przy 14 px pozostalych etykiet. Poza tym, ze odstawala rozmiarem, przez wieksza litere sprawiala wrazenie wysunietej w lewo - pudelka wszystkich etykiet zaczynaja sie w tym samym miejscu co do piksela, wiec to bylo zludzenie samego kroju. Etykieta trzyma grubosc 600, ale w kolorze pozostalych etykiet - nie w atramencie. */ body .wc-block-components-totals-item.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{ font-size:15px;font-weight:600;color:#4a4d55} body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-size:22px;font-weight:600;color:var(--ink)} body .wc-block-components-totals-footer-item-tax-value, body .wc-block-components-totals-footer-item-shipping{font-size:12.5px;color:var(--muted)} /* ---------- przyciski ---------- */ body .wc-block-components-button:not(.is-link){ background:var(--accent);color:#fff;border:0;border-radius:0;box-shadow:none; font-family:Inter,sans-serif;font-weight:600;font-size:15px; min-height:52px;padding:0 26px;text-transform:none;letter-spacing:normal} body .wc-block-components-button:not(.is-link):hover{background:var(--accent-d);color:#fff} /* Bloki nadaja przyciskom wlasne `min-height` o wyzszej specyficznosci, stad pelne nazwy klas zamiast samego `.wc-block-components-button`. */ /* WooCommerce ma regule `body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link)` o specyficznosci (0,3,1) - dokladnie takiej jak nasza pierwotna wersja. Przy remisie wygrywa arkusz zaladowany pozniej, czyli ich. Dokladamy `:not(.is-link)`, co daje (0,4,1) i rozstrzyga bez !important. */ body .wc-block-cart__submit-container .wc-block-components-button.wc-block-cart__submit-button:not(.is-link), body .wc-block-checkout__actions .wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link){ width:100%;min-height:54px;height:auto} body .wc-block-components-button.is-link{color:var(--accent);text-decoration:none; border-bottom:1px solid var(--rule)} body .wc-block-components-button.is-link:hover{border-bottom-color:var(--accent)} /* ---------- checkout: pola formularza ---------- */ /* WooCommerce celuje w pola selektorem `.wc-block-components-form .wc-block-components-text-input input[type="email"]` o specyficznosci (0,3,1). Atrybut liczy sie jak klasa, wiec dolozenie samej nazwy elementu nic nie daje. Wykluczenia atrybutowe podnosza nas do (0,4,2), a przy okazji trzymaja checkboxy i radia z dala od `min-height:50px`. */ body .wc-block-components-text-input input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), body .wc-block-components-address-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), body .wc-block-components-combobox-control input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), body .wc-block-components-form textarea.wc-block-components-textarea, body textarea.wc-block-components-textarea{ border:1px solid var(--rule);border-radius:0;background:var(--paper); font-family:Inter,sans-serif;font-size:15px;color:var(--ink); min-height:50px;box-shadow:none} body .wc-block-components-text-input input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus, body .wc-block-components-combobox-control input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus, body .wc-block-components-form textarea.wc-block-components-textarea:focus{ border-color:var(--accent);box-shadow:none;outline:0} body .wc-block-components-text-input label, body .wc-block-components-combobox-control label{ font-family:Inter,sans-serif;color:var(--muted);font-size:14px} body .wc-block-components-text-input.is-active label{font-size:12px} /* ---------- wybor wysylki i platnosci ---------- WooCommerce rysuje ramke calej grupy i separatory miedzy opcjami pseudoelementami `::after`, a zaznaczenie - wewnetrznym cieniem 1,5 px. Doklejanie wlasnej ramki do kazdej opcji dawalo podwojny obrys i dziury w ramce grupy (przez nasze marginesy). Przejmujemy to, co juz jest, zamiast rysowac obok. */ body .wc-block-components-radio-control{border:1px solid var(--rule);border-radius:0} body .wc-block-components-radio-control::after{display:none} body .wc-block-components-radio-control__option{ border:0;margin:0;border-radius:0;padding:16px 16px 16px 46px;background:none} body .wc-block-components-radio-control__option::after{border-color:var(--rule)} /* Zaznaczenie rysuje `.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option-checked` - (0,2,1), czyli remis z naszym pierwszym podejsciem. Powtarzamy ich kotwice i dokładamy nazwe elementu, co daje (0,2,2) i rozstrzyga. */ body .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option-checked, body .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option--checked-option, body .wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option--checked-option-highlighted{ box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--bg)} /* W akordeonie cien nalezy do opakowania - etykieta nie moze go dublowac. */ body .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked{ box-shadow:none;background:none} body .wc-block-components-radio-control-accordion-option{border:0;margin:0;background:none} /* Rozwinieta tresc byla dosunieta do lewej krawedzi, a etykieta nad nia zaczyna sie za kolkiem wyboru - wyrownujemy do tej samej osi. */ body .wc-block-components-radio-control-accordion-content{padding:0 16px 18px 46px} body .wc-block-components-radio-control__label{font-size:14.5px;font-weight:500} body .wc-block-components-radio-control__secondary-label, body .wc-block-components-radio-control__description{font-size:13px;color:var(--muted)} /* ---------- pola wyboru: kratka i kolko ---------- OceanWP zdejmuje natywny wyglad (`appearance:none`) i dorysowuje znaczek pseudoelementem, a Elementor dokłada kazdemu `input` `padding:10px` i rozjasnia ramke do niewidocznej. Razem wypycha to znaczek poza kratke, a kolko wyboru robi sie bladym kwadratem. Rysujemy oba od zera. Dwa `:not()` sa po to, by przebic `.elementor-kit-19 input:not([type=button]):not([type=submit])` - (0,3,1). */ body .fgrp input[type="checkbox"]:not([type="button"]):not([type="submit"]), body .wc-block-components-checkbox__input[type="checkbox"]:not([type="button"]):not([type="submit"]){ appearance:none;-webkit-appearance:none; width:20px;height:20px;min-width:20px;flex:0 0 20px;padding:0;margin:0; border:1.5px solid var(--rule);border-radius:0;background:var(--paper); position:relative;cursor:pointer;transition:border-color .12s,background-color .12s} body .fgrp input[type="checkbox"]::before,body .fgrp input[type="checkbox"]::after, body .wc-block-components-checkbox__input::before, body .wc-block-components-checkbox__input::after{content:none} /* Znaczek rysujemy w kolorze firmowym na bialym tle, a nie na bialo na akcencie: WooCommerce trzyma bialy `background` zaznaczonej kratki wlasna regula, wiec bialy znaczek bywal niewidoczny. Kolor jest tu wpisany wprost, bo `var()` nie dziala wewnatrz adresu `data:`. */ body .fgrp input[type="checkbox"]:checked:not([type="button"]), body .wc-block-components-checkbox__input[type="checkbox"]:checked:not([type="button"]){ border-color:var(--accent);background-repeat:no-repeat; background-position:center;background-size:14px 14px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232650a6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.6'/%3E%3C/svg%3E")} /* WooCommerce dorysowuje wlasny znaczek osobnym SVG - bylby drugi. */ body .wc-block-components-checkbox__mark{display:none} body .wc-block-components-radio-control__input[type="radio"]:not([type="button"]):not([type="submit"]){ appearance:none;-webkit-appearance:none; width:20px;height:20px;padding:0;margin:0;top:17px;left:16px; border:1.5px solid var(--rule);border-radius:50%;background:var(--paper); cursor:pointer;transition:border-color .12s,box-shadow .12s} body .wc-block-components-radio-control__input::before, body .wc-block-components-radio-control__input::after{content:none} body .wc-block-components-radio-control__input[type="radio"]:checked:not([type="button"]){ border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3.5px var(--paper)} /* Kontener notatki ma sztywna wysokosc, wiec przy ciagnieciu uchwytu roslo samo pole, a otoczenie stalo w miejscu - stad wrazenie fizycznego oporu. */ body .wc-block-checkout__add-note{height:auto;min-height:0} body .wc-block-checkout__add-note textarea{display:block;resize:vertical;min-height:96px} /* Kraj to `select` z etykieta plywajaca NAD wartoscia. OceanWP zeruje gorny odstep, przez co wartosc wchodzila pod etykiete i kleila sie do krawedzi. Odtwarzamy odstep i nasze obramowanie. */ body .wc-blocks-components-select .wc-blocks-components-select__container{ border-radius:0;background:var(--paper)} /* Jedyne `!important` w tym pliku i jedyne uzasadnione: OceanWP trzyma `form select{padding-top:0!important;padding-bottom:0!important}`, a wobec `!important` sama specyficznosc nie wystarcza. Bez tego wartosc wchodzila pod plywajaca etykiete i kleila sie do gornej krawedzi. */ body .wc-blocks-components-select .wc-blocks-components-select__container .wc-blocks-components-select__select{ border:1px solid var(--rule);border-radius:0;background:none;box-shadow:none; padding:25px 36px 5px 12px !important;min-height:50px;height:50px;line-height:1.2; font-family:Inter,sans-serif;font-size:15px;color:var(--ink)} body .wc-blocks-components-select .wc-blocks-components-select__container .wc-blocks-components-select__select:focus{ border-color:var(--accent);outline:0} body .wc-blocks-components-select .wc-blocks-components-select__label{ top:7px;left:12px;font-size:12px;color:var(--muted);transform:none} /* ---------- podsumowanie zamowienia w panelu bocznym ---------- */ body .wc-block-components-order-summary-item__image img{ border:1px solid var(--rule);background:#fff;object-fit:contain} body .wc-block-components-order-summary-item__description{font-size:13.5px} body .wc-block-components-order-summary-item__quantity{ font-family:"IBM Plex Mono",monospace;background:var(--ink);color:#fff;border:0} /* ---------- komunikaty ---------- */ body .wc-block-components-notice-banner{border-radius:0;border-width:1px} /* ---------- oddech strony ---------- */ body .wc-block-cart, body .wc-block-checkout{padding-top:8px;padding-bottom:var(--sec)} @media(max-width:900px){ body .wc-block-components-checkout-step__title{font-size:18px} body .wc-block-cart__sidebar, body .wc-block-checkout__sidebar{padding:18px} } /* ================================================================== PUSTY KOSZYK Domyslnie WooCommerce rysuje tu wielka placzaca buzke (tlo `::before` naglowka `.with-empty-cart-icon`), kropkowana linie i siatke produktow we wlasnym stylu - z zastepczymi obrazkami i guzikami "Dodaj do koszyka". Na tle reszty sklepu wyglada to jak inna strona. Cala zawartosc bloku pustego koszyka jest teraz nasza (shortcode `[hs_cart_empty]`, tresc strony 1088), a ponizej to, co trzeba jeszcze zdjac z samego bloku i jego otoczenia. ================================================================== */ /* Buzka. Gdyby ktos kiedys wrocil do domyslnego naglowka bloku, ikona i tak sie nie pojawi - nie chcemy jej w tym sklepie w zadnym wariancie. */ body .wc-block-cart__empty-cart__title.with-empty-cart-icon::before, body h2.with-empty-cart-icon::before{content:none;display:none} /* Blok pustego koszyka nie ma juz wlasnego marginesu - odstepy daja sekcje w srodku, tak jak wszedzie indziej w sklepie. */ body .wp-block-woocommerce-empty-cart-block{margin:0;padding:0} body .wp-block-woocommerce-empty-cart-block>.wp-block-separator{display:none} /* ---------- wlasciwy komunikat ---------- */ .cart-empty{border-bottom:1px solid var(--rule);background:var(--bg)} .cart-empty .wrap{padding-top:64px;padding-bottom:64px;text-align:center} .cart-empty .ic{width:56px;height:56px;margin:0 auto 20px;color:#b4b8c4} .cart-empty .ic svg{width:100%;height:100%;display:block; fill:none;stroke:currentColor;stroke-width:1.25; stroke-linecap:square;stroke-linejoin:miter} .cart-empty h1{font-size:27px;font-weight:800;letter-spacing:-.022em;line-height:1.2} .cart-empty p{margin:10px auto 0;font-size:15px;color:#4a4d55;max-width:52ch} .cart-empty .btns{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap} /* `.btn-p` niesie wlasny `margin-top` pod pas "szklo na wymiar" - tutaj odstep daje juz `.btns`, wiec go zerujemy. */ .cart-empty .btns .btn{margin-top:0} .cart-empty .btn-s{border:1px solid var(--rule);background:var(--paper)} .cart-empty .btn-s:hover{border-color:var(--ink)} /* Numer telefonu pod przyciskami - w sklepie dla wykonawcow zamowienie czesto konczy sie telefonem, a nie koszykiem. */ .cart-empty .tel{margin-top:22px;font-size:13.5px;color:var(--muted)} .cart-empty .tel a{font-family:"IBM Plex Mono",monospace;color:var(--ink);font-weight:500} .cart-empty .tel a:hover{color:var(--accent)} @media(max-width:600px){ .cart-empty .wrap{padding-top:44px;padding-bottom:44px} .cart-empty h1{font-size:22px} .cart-empty p{font-size:14.5px} .cart-empty .btns{flex-direction:column} .cart-empty .btns .btn{width:100%} } /* ---------- pusty panel koszyka w naglowku ---------- Ten sam stan, druga scena. Domyslnie leci tu goly tekst WooCommerce. */ body .cartdrop .woocommerce-mini-cart__empty-message{ margin:0;padding:22px 4px;text-align:center;font-size:13.5px;color:var(--muted)} /* ===== potwierdzenie zamowienia ===== */ /* ================================================================== POTWIERDZENIE ZAMOWIENIA Strona `/zamowienie/order-received/` - pierwsza rzecz, ktora klient widzi po zaplacie. Nasz naglowek i arkusz juz sie tu ladowaly (bo `is_checkout()` jest prawda takze na tym punkcie koncowym), ale sama tresc byla w domyslnym wygladzie WooCommerce. Znaczniki sa klasyczne (`woocommerce-order`, `shop_table`), nie blokowe - inne niz w koszyku i kasie. Nie przebudowujemy ich, tylko nakladamy system wizualny. Selektory z przedrostkiem `body`, bo motyw i WooCommerce stylują tabele mocno. Bez !important. ================================================================== */ /* Szerokosc kolumny bierzemy z klasy `body`, a nie z `.woocommerce-order`, bo ta strona ma TRZY stany i tylko jeden z nich ma ten kontener: 1. potwierdzenie z pelnymi szczegolami zamowienia, 2. samo potwierdzenie (gdy szczegolow nie ma czego pokazac), 3. formularz weryfikacji adresu e-mail - WooCommerce zada go, gdy do starszego zamowienia goscia wraca sie po czasie z linku. Stan trzeci siedzi obok `.woocommerce-order`, wiec bez tego zostawalby nieubrany. */ body.woocommerce-order-received .woocommerce{ max-width:900px;margin:0 auto;padding:8px 0 var(--sec)} /* ---------- potwierdzenie ---------- WooCommerce daje tu zwykly akapit. Robimy z niego wyrazny blok otwierajacy, bo to jedyny komunikat "udalo sie" na calej sciezce zakupu. */ body p.woocommerce-notice--success.woocommerce-thankyou-order-received{ font-family:Raleway,sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em; color:var(--ink);line-height:1.25; border:0;border-top:3px solid var(--accent);border-radius:0;background:var(--bg); padding:26px 28px;margin:0 0 4px} body p.woocommerce-notice--success.woocommerce-thankyou-order-received::before{content:none} /* ---------- skrot zamowienia ---------- Numer, data, kwota i sposob zaplaty. WooCommerce trzyma etykiete jako goly tekst, a wartosc w - stad podzial na blokowa etykiete i wartosc. */ /* WooCommerce celuje w te liste `.woocommerce ul.order_details` - (0,2,1). Dopisujemy druga klase, ktora i tak jest na elemencie, co daje (0,2,2) i rozstrzyga bez !important. */ body ul.woocommerce-order-overview.order_details{ list-style:none;margin:0 0 34px;padding:0; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--rule);border-top:0} body ul.woocommerce-order-overview.order_details li{ margin:0;padding:18px 20px;border-left:1px solid var(--rule); font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); line-height:1.4} body ul.woocommerce-order-overview.order_details li:first-child{border-left:0} body ul.woocommerce-order-overview.order_details li strong{ display:block;margin-top:7px; font-size:15px;letter-spacing:normal;text-transform:none; font-weight:600;color:var(--ink)} /* Numer i kwota to dane, nie proza - stad krój maszynowy. */ body ul.woocommerce-order-overview.order_details li.order strong, body ul.woocommerce-order-overview.order_details li.total strong{ font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums} body ul.woocommerce-order-overview.order_details li.total strong{font-size:17px} body ul.woocommerce-order-overview.order_details .woocommerce-Price-amount{font-weight:600} /* ---------- naglowki sekcji ---------- */ body .woocommerce-order h2, body .woocommerce-order-details__title, body .woocommerce-column__title{ font-family:Raleway,sans-serif;font-weight:800;letter-spacing:-.02em;color:var(--ink); font-size:19px;margin:0 0 14px} /* ---------- tabela pozycji ---------- Ten sam jezyk co `.spec-t` na karcie produktu: cienkie linie, naglowek drobnymi wersalikami, kwoty do prawej i maszynowo. Wszedzie dopisane `.shop_table.order_details` - obie klasy tabela i tak ma. WooCommerce siega po nia dwoma regulami o rosnacej sile: `.woocommerce table.shop_table` (0,2,1) i `.woocommerce .shop_table.order_details tfoot th` (0,3,1). Dopiero trzy klasy po naszej stronie przebijaja obie, bez !important. Sama nazwa `--order-details` (0,1,2) przegrywala i tabela zostawala z cudzymi szarymi kreskami. */ body table.woocommerce-table--order-details.shop_table.order_details{ width:100%;border-collapse:collapse;border:0;margin:0 0 34px} /* `background:none` bo OceanWP podklada komorkom stopki szare pasy (`#f7f7f7`), przez co tabela wyglada jak arkusz kalkulacyjny. */ body table.woocommerce-table--order-details.shop_table.order_details th, body table.woocommerce-table--order-details.shop_table.order_details td{ border:0;padding:13px 0;text-align:left;vertical-align:top;background:none} body table.woocommerce-table--order-details.shop_table.order_details thead th{ font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:11px} body table.woocommerce-table--order-details.shop_table.order_details tbody td{ border-bottom:1px solid var(--rule);font-size:14.5px} body table.woocommerce-table--order-details.shop_table.order_details .product-total, body table.woocommerce-table--order-details.shop_table.order_details tfoot td{text-align:right} body table.woocommerce-table--order-details.shop_table.order_details tbody .product-name{font-weight:500;line-height:1.45} /* Ilosc dopisana przy nazwie ma byc drugorzedna wobec samej nazwy. */ body table.woocommerce-table--order-details.shop_table.order_details tbody .product-name .product-quantity{ color:var(--muted);font-weight:400} /* Wiersze stopki traktujemy jednakowo. Nie da sie tu wyroznic samej sumy: WooCommerce renderuje je z `get_order_item_totals()` BEZ zadnych klas, a ich kolejnosc zalezy od tego, co w danym zamowieniu wystapilo (rabat, doplata, wysylka, podatek, sposob zaplaty). Kazda regula oparta na pozycji trafialaby raz w sume, raz w metode platnosci - sprawdzone. Sama kwota do zaplaty i tak stoi wyroznona w kafelkach nad tabela. */ body table.woocommerce-table--order-details.shop_table.order_details tfoot th{ font-weight:400;color:#4a4d55;font-size:14px; border-top:1px solid var(--rule);border-bottom:0} body table.woocommerce-table--order-details.shop_table.order_details tfoot td{ font-size:14px;border-top:1px solid var(--rule);border-bottom:0} /* Uwaga: WooCommerce renderuje tu DWA elementy `tfoot` - osobny na wiersz z przyciskiem doplaty i osobny na kwoty. Bez `:first-of-type` regula zdejmowalaby kreske takze nad pierwszym wierszem kwot. */ body table.woocommerce-table--order-details.shop_table.order_details tfoot:first-of-type tr:first-child th, body table.woocommerce-table--order-details.shop_table.order_details tfoot:first-of-type tr:first-child td{ border-top:0} /* Kolor kwoty trzeba narzucic z `!important`, bo ustawienia witryny malują `.woocommerce-Price-amount` na jasny blekit wlasnie z `!important` (arkusz wewnetrzny Customizera). W tabeli podsumowania kwota to dana, nie odnosnik - ma byc atramentem. Poza naszymi stronami ustawienie witryny dziala bez zmian. */ body table.woocommerce-table--order-details.shop_table.order_details .woocommerce-Price-amount{ font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums; color:var(--ink) !important} /* Wiersz z przyciskiem doplaty (zamowienie czekajace na platnosc). */ body table.woocommerce-table--order-details.shop_table.order_details th.order-actions--heading{border-bottom:0;border-top:0} body a.woocommerce-button.button.pay{ display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:0 26px;border:0;border-radius:0; background:var(--accent);color:#fff;font:600 15px Inter,sans-serif; text-transform:none;letter-spacing:normal;transition:background .2s} body a.woocommerce-button.button.pay:hover{background:var(--accent-d);color:#fff} /* ---------- dane klienta ---------- */ body .woocommerce-customer-details{margin:0} body .woocommerce-customer-details .woocommerce-columns--addresses{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0} body .woocommerce-customer-details .col-1, body .woocommerce-customer-details .col-2{ width:auto;float:none;margin:0;padding:22px 24px; border:1px solid var(--rule);background:var(--bg)} body .woocommerce-customer-details .woocommerce-column__title{ font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); font-family:Inter,sans-serif;font-weight:600;margin:0 0 10px} body .woocommerce-customer-details address{ font-style:normal;font-size:14.5px;line-height:1.65;color:var(--ink);border:0;padding:0} body .woocommerce-customer-details p{font-size:14.5px;margin:8px 0 0} /* ---------- telefon ---------- */ @media(max-width:760px){ body p.woocommerce-notice--success.woocommerce-thankyou-order-received{ font-size:21px;padding:20px} /* Cztery kolumny nie miesciły sie czytelnie - na telefonie dwie. */ body ul.woocommerce-order-overview.order_details{grid-template-columns:repeat(2,minmax(0,1fr))} body ul.woocommerce-order-overview.order_details li:nth-child(3){border-left:0} body ul.woocommerce-order-overview.order_details li:nth-child(n+3){border-top:1px solid var(--rule)} body .woocommerce-customer-details .woocommerce-columns--addresses{ grid-template-columns:minmax(0,1fr)} } /* ---------- weryfikacja adresu e-mail ---------- Trzeci stan strony. Trzy klasy w selektorze pola, bo Elementor nadaje kazdemu `input` `padding:10px` regula o sile (0,3,1). */ body form.woocommerce-verify-email{ border:1px solid var(--rule);background:var(--bg);padding:26px 28px; margin-top:20px;max-width:520px} body form.woocommerce-verify-email > p{font-size:14.5px;color:#4a4d55;margin:0 0 18px;line-height:1.6} body form.woocommerce-verify-email .form-row{margin:0 0 14px;padding:0} body form.woocommerce-verify-email .form-row:last-child{margin-bottom:0} body form.woocommerce-verify-email label{ display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:0 0 7px} body form.woocommerce-form.woocommerce-verify-email input.input-text{ width:100%;min-height:50px;padding:0 14px;border:1px solid var(--rule);border-radius:0; background:var(--paper);font:400 15px Inter,sans-serif;color:var(--ink);box-shadow:none} body form.woocommerce-form.woocommerce-verify-email input.input-text:focus{ border-color:var(--accent);outline:0} body form.woocommerce-verify-email button.woocommerce-button{ min-height:50px;padding:0 26px;border:0;border-radius:0;background:var(--accent);color:#fff; font:600 15px Inter,sans-serif;text-transform:none;letter-spacing:normal;cursor:pointer; transition:background .2s} body form.woocommerce-verify-email button.woocommerce-button:hover{background:var(--accent-d)} /* ===== konto klienta ===== */ /* ================================================================== KONTO KLIENTA I ZAMOWIENIA Obejmuje wszystkie punkty koncowe `/moje-konto/`: logowanie, odzyskiwanie hasla, pulpit, liste zamowien, podglad zamowienia, adresy, dane konta i metody platnosci. Znaczniki sa klasyczne (`woocommerce-MyAccount-*`, `shop_table`), wiec nie przebudowujemy szablonow - nakladamy na nie system wizualny. Podglad zamowienia korzysta z TYCH SAMYCH klas co potwierdzenie zamowienia (`shop_table.order_details`, `woocommerce-customer-details`), wiec jest ubrany przez `_order.css` i nie powtarzamy tego tutaj. Selektory z przedrostkiem `body`, bo motyw i WooCommerce styluja te strony mocno. Bez !important. ================================================================== */ /* ---------- ukladanie strony ---------- Zalogowany dostaje dwie kolumny: menu i tresc. Niezalogowany widzi sam formularz, wiec zwezamy go do czytelnej karty zamiast rozciagac na cala szerokosc. Rozroznienie bierzemy z klasy `logged-in` na `body`. */ body.woocommerce-account .woocommerce{ max-width:var(--w);margin:0 auto;padding:8px var(--pad) var(--sec)} body.woocommerce-account.logged-in .woocommerce{ display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start} body.woocommerce-account:not(.logged-in) .woocommerce{max-width:520px;padding-top:32px} /* WooCommerce trzyma logowanie i rejestracje w dwoch kolumnach, kazda z wlasnym odstepem. Rejestracja jest w tym sklepie wylaczona, wiec zostaje pusta kolumna, a formularz siedzi wciety w polowie szerokosci. Zdejmujemy uklad kolumnowy - przy wlaczonej rejestracji formularze staną jeden pod drugim, co na karcie 520 px i tak jest czytelniejsze niz obok siebie. */ /* Uwaga: odstep kolumny trzyma `.woocommerce #customer_login > div`, czyli selektor z IDENTYFIKATOREM. Identyfikatora nie przebije zadna liczba klas, wiec musimy go powtorzyc po swojej stronie - to jedyny taki przypadek w calym arkuszu. */ /* WSZYSTKIE ponizsze reguly celuja w `#customer_login`, nie w same klasy `u-columns col2-set`. Powod: te same klasy nosi opakowanie ADRESOW na `/moje-konto/edit-address/`, wiec szersza wersja tej reguly rozbijala tam uklad dwukolumnowy - adresy staly jeden pod drugim. */ body .woocommerce #customer_login{display:block;margin:0} body .woocommerce #customer_login > div{ width:auto;float:none;padding:0;margin:0} body .woocommerce #customer_login > div + div{margin-top:24px} /* ---------- menu konta ---------- OceanWP uklada te strone oplywaniem (`float:right;width:76%` na tresci) i - co wazniejsze - opakowuje menu w DODATKOWY kontener `.woocommerce-MyAccount-tabs` z `width:18%`. To on, a nie samo menu, jest kafelkiem naszej siatki, a 18% liczy sie od szerokosci kolumny (250 px), czyli 45 px. Efekt: etykiety lamaly sie po jednej literze na wiersz. */ body .woocommerce-MyAccount-tabs{width:auto;float:none;margin:0} body .woocommerce-MyAccount-navigation{float:none;width:auto;margin:0} /* Blok tozsamosci nad menu: awatar, nazwa, wylogowanie. */ body .oceanwp-user-profile{ display:flex;align-items:center;gap:12px; margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--rule)} body .oceanwp-user-profile .image{flex:0 0 44px;width:44px;height:44px} body .oceanwp-user-profile .image img.avatar{ width:44px;height:44px;border-radius:50%;background:var(--rule); object-fit:cover;display:block} body .oceanwp-user-profile .user-info{min-width:0} body .oceanwp-user-profile .user-info .name{ font-size:15px;font-weight:600;color:var(--ink);margin:0;line-height:1.3; overflow:hidden;text-overflow:ellipsis} body .oceanwp-user-profile .user-info .logout{ font-size:13px;color:var(--muted);border-bottom:1px solid var(--rule)} body .oceanwp-user-profile .user-info .logout:hover{ color:var(--accent);border-bottom-color:var(--accent)} body .woocommerce-MyAccount-navigation ul{ list-style:none;margin:0;padding:0;border:1px solid var(--rule)} body .woocommerce-MyAccount-navigation li{ margin:0;border-top:1px solid var(--rule)} body .woocommerce-MyAccount-navigation li:first-child{border-top:0} body .woocommerce-MyAccount-navigation li a{ display:block;padding:14px 18px;font-size:14.5px;color:#4a4d55; border-left:3px solid transparent;transition:color .15s,background-color .15s,border-color .15s} /* OceanWP doklada kazdej pozycji ikone z wlasnego fontu (`simple-line-icons`) przez `:before`. To inna rodzina niz nasze ikony SVG w naglowku, wiec zamiast mieszac dwa jezyki - zdejmujemy je. Aktywna pozycje znaczy pasek w kolorze firmowym. */ body .woocommerce-MyAccount-navigation ul li a::before{content:none;display:none} body .woocommerce-MyAccount-navigation li a:hover{color:var(--ink);background:var(--bg)} body .woocommerce-MyAccount-navigation li.is-active a{ color:var(--ink);font-weight:600;border-left-color:var(--accent);background:var(--bg)} /* ---------- tresc ---------- */ body .woocommerce-MyAccount-content{float:none;width:auto;margin:0} /* Tylko akapity BEZPOSREDNIO w tresci - wewnatrz formularzy `p` jest wierszem pola i ma wlasny styl. */ body .woocommerce-MyAccount-content > p{ font-size:15px;color:#4a4d55;line-height:1.65;margin:0 0 14px} body .woocommerce-MyAccount-content > p a{ color:var(--accent);border-bottom:1px solid var(--rule)} body .woocommerce-MyAccount-content > p a:hover{border-bottom-color:var(--accent)} body .woocommerce-MyAccount-content h2, body .woocommerce-MyAccount-content h3{ font-family:Raleway,sans-serif;font-weight:800;letter-spacing:-.02em;color:var(--ink); font-size:19px;margin:0 0 14px} /* Numer, date i stan zamowienia WooCommerce wyroznia elementem `mark`, ktoremu przegladarka daje zolte tlo zakreslacza. Wyrozniamy krojem. */ body .woocommerce-MyAccount-content mark{ background:none;color:var(--ink);font-weight:600} body .woocommerce-MyAccount-content mark.order-number, body .woocommerce-MyAccount-content mark.order-date{ font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums} /* ---------- lista zamowien ---------- Ten sam jezyk co tabela pozycji na potwierdzeniu: naglowek drobnymi wersalikami, cienkie linie, dane maszynowo. Trzy klasy w selektorze, bo WooCommerce siega po te tabele przez `.woocommerce table.shop_table`. */ body table.woocommerce-orders-table.shop_table.my_account_orders{ width:100%;border-collapse:collapse;border:0;margin:0} body table.woocommerce-orders-table.shop_table.my_account_orders th, body table.woocommerce-orders-table.shop_table.my_account_orders td{ border:0;padding:15px 14px 15px 0;text-align:left;vertical-align:middle} body table.woocommerce-orders-table.shop_table.my_account_orders thead th{ font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:11px} body table.woocommerce-orders-table.shop_table.my_account_orders tbody td{ border-bottom:1px solid var(--rule);font-size:14.5px} body table.woocommerce-orders-table.shop_table.my_account_orders .woocommerce-orders-table__cell-order-number a{ font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--ink)} body table.woocommerce-orders-table.shop_table.my_account_orders .woocommerce-orders-table__cell-order-number a:hover{ color:var(--accent)} body table.woocommerce-orders-table.shop_table.my_account_orders .woocommerce-orders-table__cell-order-date{ font-family:"IBM Plex Mono",monospace;font-size:13.5px;color:#4a4d55;white-space:nowrap} body table.woocommerce-orders-table.shop_table.my_account_orders .woocommerce-orders-table__cell-order-total{ font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap} /* Kolor kwoty narzucamy tak samo jak w tabeli zamowienia - inaczej ustawienia witryny malowaly ja na jasny blekit, jakby byla odnosnikiem. */ body table.woocommerce-orders-table.shop_table.my_account_orders .woocommerce-Price-amount{ color:var(--ink) !important} body table.woocommerce-orders-table.shop_table.my_account_orders th, body table.woocommerce-orders-table.shop_table.my_account_orders td{background:none} body table.woocommerce-orders-table.shop_table.my_account_orders .woocommerce-orders-table__cell-order-actions{ text-align:right;padding-right:0} /* Stan zamowienia jako plakietka. Kolory sa celowo powsciagliwe: jedynym mocnym akcentem na stronie ma zostac przycisk akcji. */ body table.woocommerce-orders-table.shop_table.my_account_orders .woocommerce-orders-table__cell-order-status{ font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#4a4d55} body .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status{color:#1f7a45} body .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status{color:var(--accent)} body .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status, body .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status{color:#a3231f} /* Pusta lista zamowien. */ body .woocommerce-MyAccount-content .woocommerce-info, body .woocommerce-MyAccount-content .woocommerce-message{ border:1px solid var(--rule);border-top:3px solid var(--accent);border-radius:0; background:var(--bg);padding:22px 24px;font-size:14.5px;color:#4a4d55} body .woocommerce-MyAccount-content .woocommerce-info::before, body .woocommerce-MyAccount-content .woocommerce-message::before{content:none} /* ---------- adresy ---------- */ /* OceanWP maluje tu wlasne szare pudelka regulami w rodzaju `.woocommerce-MyAccount-content .addresses .woocommerce-Address address` - trzy klasy. Odnosnik "edytuj" ma u nich `position:absolute`. Dlatego wszedzie ponizej trzymamy te sama kotwice i dokladamy element albo czwarta klase. */ body .woocommerce-MyAccount-content .addresses, body .woocommerce-Addresses{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:32px 0 0} body .woocommerce-MyAccount-content .addresses .woocommerce-Address{ width:auto;float:none;margin:0;padding:0;border:1px solid var(--rule);background:var(--bg)} body .woocommerce-MyAccount-content .addresses .woocommerce-Address .title{ display:flex;align-items:baseline;justify-content:space-between;gap:12px; background:none;border:0;padding:20px 24px 0;position:static} body .woocommerce-MyAccount-content .addresses .woocommerce-Address .title h2, body .woocommerce-MyAccount-content .addresses .woocommerce-Address .title h3{ font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); font-family:Inter,sans-serif;font-weight:600;margin:0} body .woocommerce-MyAccount-content .addresses .woocommerce-Address .title a.edit{ position:static;top:auto;right:auto;padding:0;background:none; font-size:13px;color:var(--accent);border-bottom:1px solid var(--rule);white-space:nowrap} body .woocommerce-MyAccount-content .addresses .woocommerce-Address .title a.edit:hover{ background:none;color:var(--accent);border-bottom-color:var(--accent)} body .woocommerce-MyAccount-content .addresses .woocommerce-Address address{ font-style:normal;font-size:14.5px;line-height:1.65;color:var(--ink); background:none;padding:12px 24px 22px;margin:0} /* ---------- formularze ---------- Logowanie, rejestracja, odzyskiwanie hasla, dane konta, edycja adresu. Wszystkie opieraja sie na `p.form-row`, wiec styl jest jeden. */ body form.woocommerce-form, body form.woocommerce-EditAccountForm, body form.woocommerce-address-fields ~ form, body .woocommerce-MyAccount-content form{max-width:560px} body form.woocommerce-form-login, body form.woocommerce-form-register, body form.woocommerce-ResetPassword{ border:1px solid var(--rule);background:var(--bg);padding:28px;max-width:none} body form.woocommerce-form-login button.woocommerce-form-login__submit, body form.woocommerce-form-register button.woocommerce-form-register__submit{width:100%} /* Wiersz formularza bywa `inline-block` (przez to przycisk wysylania dostawal szerokosc tresci, a nie karty). Wariant z identyfikatorem jest dla `#customer_login`, gdzie WooCommerce styluje wnetrze przez ID. */ body .form-row, body form.woocommerce-form p.form-row, body .woocommerce #customer_login p.form-row{ display:block;width:auto;float:none;margin:0 0 16px;padding:0} /* OceanWP wcina wiersze formularza logowania regula `.account-original-style .woocommerce #customer_login .col-1 .form-row`, czyli identyfikator PLUS cztery klasy - przez to przycisk wysylania dostawal szerokosc swojej tresci zamiast szerokosci karty. Powtarzamy ich kotwice i dokladamy nazwe elementu, co daje (1,4,2) i rozstrzyga. */ body.account-original-style .woocommerce #customer_login .col-1 p.form-row, body.account-original-style .woocommerce #customer_login .col-2 p.form-row{ display:block;width:auto;float:none} body .form-row label{ display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:0 0 7px;font-weight:600} body .form-row .required{color:var(--accent);border:0;text-decoration:none} /* Elementor nadaje kazdemu `input` `padding:10px` regula o sile (0,3,1), stad trzy klasy po naszej stronie. */ /* Kotwica to klasa `body`, a nie klasa formularza: odzyskiwanie hasla ma forme `woocommerce-ResetPassword` BEZ klasy `woocommerce-form`, wiec celowanie w sam formularz zostawialo tam pola nieubrane. Trzy klasy sa potrzebne, by przewazyc `.elementor-kit-19 input:not(...)` - (0,3,1). */ body.woocommerce-account form input.woocommerce-Input.input-text, body.woocommerce-account form .woocommerce-input-wrapper input.input-text, body.woocommerce-account form .woocommerce-input-wrapper textarea.input-text, body.woocommerce-account form input.input-text[type="text"], body.woocommerce-account form input.input-text[type="email"], body.woocommerce-account form input.input-text[type="password"], body.woocommerce-account form input.input-text[type="tel"]{ width:100%;min-height:50px;padding:0 14px;border:1px solid var(--rule);border-radius:0; background:var(--paper);font:400 15px Inter,sans-serif;color:var(--ink);box-shadow:none} body.woocommerce-account form input.woocommerce-Input.input-text:focus, body.woocommerce-account form .woocommerce-input-wrapper input.input-text:focus, body.woocommerce-account form input.input-text[type="text"]:focus, body.woocommerce-account form input.input-text[type="email"]:focus, body.woocommerce-account form input.input-text[type="password"]:focus{ border-color:var(--accent);outline:0} body.woocommerce-account form .woocommerce-input-wrapper textarea.input-text{ min-height:110px;padding:12px 14px;line-height:1.6} /* Ta etykieta musi przebic nasza wlasna regule `.form-row label`, ktora robi z etykiet drobne wersaliki - przy "zapamietaj mnie" wygladaloby to jak naglowek pola, a to zwykly wybor. */ body form.woocommerce-form label.woocommerce-form-login__rememberme{ display:flex;align-items:center;gap:9px;font-size:14px;color:#4a4d55; text-transform:none;letter-spacing:normal;font-weight:400;margin:0 0 6px} body .woocommerce-LostPassword{margin:14px 0 0;font-size:14px} body .woocommerce-LostPassword a{color:var(--accent);border-bottom:1px solid var(--rule)} body .woocommerce-LostPassword a:hover{border-bottom-color:var(--accent)} /* ---------- przyciski ---------- */ /* `.show-password-input` to przelacznik podgladu hasla wewnatrz pola. Wykluczamy go z regul przyciskow, a przy okazji zdejmujemy mu tlo, ktore nadaje Elementor regula `.elementor-kit-19 button` - bez tego kolko podgladu hasla swieci na niebiesko w srodku pola. */ body form.woocommerce-form button.show-password-input, body .woocommerce-MyAccount-content button.show-password-input{ background:none;background-color:transparent;color:var(--muted); border:0;min-height:0;padding:0} body .woocommerce-MyAccount-content .button:not(.show-password-input), body form.woocommerce-form .button:not(.show-password-input), body a.woocommerce-button.button, body button.woocommerce-Button.button{ display:inline-flex;align-items:center;justify-content:center; min-height:50px;padding:0 26px;border:0;border-radius:0; background:var(--accent);color:#fff;font:600 15px Inter,sans-serif; text-transform:none;letter-spacing:normal;cursor:pointer;transition:background .2s} body .woocommerce-MyAccount-content .button:hover, body form.woocommerce-form .button:hover, body a.woocommerce-button.button:hover, body button.woocommerce-Button.button:hover{background:var(--accent-d);color:#fff} /* Akcje w wierszu zamowienia sa drugorzedne wobec tresci - dlatego obrys, nie plama koloru. */ body table.woocommerce-orders-table.shop_table.my_account_orders a.woocommerce-button.button{ min-height:38px;padding:0 16px;font-size:13.5px;font-weight:500; background:none;color:var(--ink);border:1px solid var(--rule);margin-left:8px} body table.woocommerce-orders-table.shop_table.my_account_orders a.woocommerce-button.button:hover{ background:none;color:var(--accent);border-color:var(--accent)} /* ---------- stronicowanie listy zamowien ---------- */ body .woocommerce-pagination.woocommerce-Pagination{ display:flex;gap:10px;margin-top:26px} body .woocommerce-pagination.woocommerce-Pagination a.button{ min-height:44px;padding:0 18px;background:none;color:var(--ink); border:1px solid var(--rule);font-weight:500;font-size:14px} body .woocommerce-pagination.woocommerce-Pagination a.button:hover{ background:none;color:var(--accent);border-color:var(--accent)} /* ---------- telefon ---------- */ /* ---------- telefon i tablet ---------- */ @media(max-width:900px){ /* Menu nad trescia, w jednej kolumnie. Wczesniej bylo poziomo przewijalne, ale przy szesciu pozycjach czesc chowala sie poza ekranem i nic tego nie zapowiadalo - lista jest przewidywalna i nic nie ukrywa. */ body.woocommerce-account.logged-in .woocommerce{ grid-template-columns:minmax(0,1fr);gap:26px} body .woocommerce-MyAccount-navigation li a{padding:13px 16px} body .woocommerce-MyAccount-content .addresses, body .woocommerce-Addresses{grid-template-columns:minmax(0,1fr)} body .woocommerce-customer-details .woocommerce-columns--addresses{ grid-template-columns:minmax(0,1fr)} } /* Telefon: lista zamowien zamienia sie w karty. WooCommerce ma na to wlasny tryb (`shop_table_responsive`), ale arkusz, ktory go definiuje, NIE jest na tej witrynie wczytywany - motyw dostarcza wlasna, okrojona wersje. Bez tego piec kolumn (numer, data, stan, kwota, akcje) nie miesci sie na ekranie telefonu i tabela wyjezdza w bok. Etykiety bierzemy z `data-title`, ktore WooCommerce i tak wypisuje przy kazdej komorce - nie trzeba ich powtarzac w CSS ani tlumaczyc. */ @media(max-width:600px){ body table.woocommerce-orders-table.shop_table.my_account_orders thead{display:none} body table.woocommerce-orders-table.shop_table.my_account_orders, body table.woocommerce-orders-table.shop_table.my_account_orders tbody{display:block} body table.woocommerce-orders-table.shop_table.my_account_orders tr{ display:block;border:1px solid var(--rule);padding:2px 16px 14px;margin:0 0 12px} /* Numer zamowienia WooCommerce renderuje jako `th`, nie `td` - jest naglowkiem wiersza. Na karcie robi za tytul, wiec nie dostaje etykiety z `data-title`. */ body table.woocommerce-orders-table.shop_table.my_account_orders tbody th{ display:block;text-align:left;padding:12px 0 11px; border-bottom:1px solid var(--rule);font-size:15px} body table.woocommerce-orders-table.shop_table.my_account_orders tbody th::before{ content:none} body table.woocommerce-orders-table.shop_table.my_account_orders td{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:10px 0;border-bottom:1px solid var(--rule-soft);text-align:right} body table.woocommerce-orders-table.shop_table.my_account_orders td::before{ content:attr(data-title);flex:0 0 auto;text-align:left; font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* Wiersz akcji nie potrzebuje etykiety - przycisk mowi sam za siebie. */ body table.woocommerce-orders-table.shop_table.my_account_orders td.woocommerce-orders-table__cell-order-actions{ display:block;border-bottom:0;padding:14px 0 0} body table.woocommerce-orders-table.shop_table.my_account_orders td.woocommerce-orders-table__cell-order-actions::before{ content:none} body table.woocommerce-orders-table.shop_table.my_account_orders a.woocommerce-button.button{ display:flex;width:100%;margin:0} } /* ===== karta produktu ===== */ /* ---------- karta produktu ---------- */ .crumbs{border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--muted)} .crumbs .wrap{display:flex;align-items:center;gap:8px;height:42px;overflow-x:auto; scrollbar-width:none;white-space:nowrap} .crumbs .wrap::-webkit-scrollbar{display:none} .crumbs a:hover{color:var(--accent)} .crumbs .cur{color:var(--ink)} .prod{padding:36px 0 var(--sec)} .prod .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} /* galeria */ .gal .main{border:1px solid var(--rule);aspect-ratio:1;display:flex;align-items:center; justify-content:center;padding:40px;background:#fff;overflow:hidden;min-height:0} .gal .main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .gal .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px} .gal .thumbs div{border:1px solid var(--rule);aspect-ratio:1;display:flex;align-items:center; justify-content:center;padding:8px;cursor:pointer;transition:border-color .2s; overflow:hidden;min-height:0} .gal .thumbs div.on,.gal .thumbs div:hover{border-color:var(--accent)} .gal .thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} /* podsumowanie */ .sum-cat{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .prod h1{font-size:31px;font-weight:800;letter-spacing:-.022em;line-height:1.2;margin:10px 0 14px} .ids{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:"IBM Plex Mono",monospace;font-size:12.5px; padding-bottom:20px;border-bottom:1px solid var(--rule)} .ids b{color:var(--accent);font-weight:500} .ids span{color:var(--muted)} /* Klasa nazywa sie `hs-price`, a nie `price`, bo WooCommerce ma w swoim arkuszu gola regule `.price{color:#57BF6D}` - wlasny kontener o tej samej nazwie dziedziczylby zielen. Zmiana nazwy usuwa kolizje u zrodla, zamiast przekrzykiwac ja specyficznoscia. */ .hs-price{padding:20px 0} .hs-price .net{display:flex;align-items:baseline;gap:9px} .hs-price .net b{font-size:37px;font-weight:700;letter-spacing:-.03em;color:var(--accent)} .hs-price .net span{font-size:13px;color:var(--muted)} .hs-price .gross{font-size:13.5px;color:var(--muted);margin-top:2px} .buy{display:flex;gap:12px;margin:22px 0} .qty{display:flex;border:1.5px solid var(--ink);height:52px;flex:0 0 auto} .qty button{width:44px;border:0;background:none;font-size:19px;cursor:pointer;color:var(--ink)} .qty input{width:52px;border:0;outline:0;text-align:center;font:600 15px Inter,sans-serif} .add{flex:1;height:52px;border:0;background:var(--accent);color:#fff;cursor:pointer; font:600 15px Inter,sans-serif;transition:background-color .2s} .add:hover{background:var(--accent-d)} /* Formularz zakupu renderuje WooCommerce: form.cart > .quantity (a.minus, input.qty, a.plus) + button.single_add_to_cart_button. Stylujemy prawdziwy markup, a nie wlasny wymysl. */ .buy form.cart{display:flex;gap:12px;width:100%;margin:0;align-items:stretch} .buy .quantity{display:flex;align-items:stretch;border:1.5px solid var(--ink);height:52px;flex:0 0 auto} .buy .quantity a.minus,.buy .quantity a.plus{width:44px;display:flex;align-items:center; justify-content:center;font-size:19px;line-height:1;color:var(--ink);text-decoration:none} .buy .quantity a.minus:hover,.buy .quantity a.plus:hover{color:var(--accent)} .buy .quantity input.qty{width:52px;border:0;outline:0;background:none;text-align:center; font:600 15px Inter,sans-serif;-moz-appearance:textfield} .buy .quantity input.qty::-webkit-outer-spin-button, .buy .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} body .buy button.single_add_to_cart_button{flex:1;height:52px;min-height:0;margin:0;padding:0 18px; border:0;border-radius:0;background:var(--accent);color:#fff;cursor:pointer; font:600 15px Inter,sans-serif;text-transform:none;letter-spacing:normal} body .buy button.single_add_to_cart_button:hover{background:var(--accent-d)} /* zalaczniki widoczne bez klikania w zakladke */ .att-strip{border:1px solid var(--rule);background:var(--bg);padding:14px 16px;margin-bottom:20px} .att-strip .h{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.1em; text-transform:uppercase;font-weight:600;margin-bottom:11px} .att-strip .h i{font-style:normal;font-family:"IBM Plex Mono",monospace;color:var(--accent); letter-spacing:0;font-size:12px} .att-strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px} .att-strip li a{display:flex;align-items:center;gap:8px;background:var(--paper); border:1px solid var(--rule);padding:8px 12px;font-size:13px;transition:border-color .2s} .att-strip li a:hover{border-color:var(--accent);color:var(--accent)} .att-strip svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.6;flex:0 0 auto} /* szybkie parametry */ .qspec{border-top:1px solid var(--rule)} .qspec div{display:flex;justify-content:space-between;gap:18px;padding:11px 0; border-bottom:1px solid var(--rule-soft);font-size:14px} .qspec span{color:var(--muted)} .qspec b{font-weight:500;text-align:right} /* kontakt przy produkcie */ .help{margin-top:24px;border:1px solid var(--rule);padding:18px} .help .t{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:12px} .help p{font-size:13.5px;color:#5c5f68;margin-bottom:14px} .help .row{display:flex;flex-wrap:wrap;gap:10px} .help a{display:flex;align-items:center;gap:9px;border:1px solid var(--rule);padding:10px 14px; font-size:14px;font-weight:500;transition:border-color .2s,color .2s} .help a:hover{border-color:var(--accent);color:var(--accent)} .help svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6} /* zakladki */ .tabs{border-top:1px solid var(--rule)} .tabbar{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule)} .tabbar::-webkit-scrollbar{display:none} .tabbar button{background:none;border:0;padding:20px 26px;font-size:14.5px;font-weight:600; color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent; margin-bottom:-1px;display:flex;align-items:center;gap:9px} .tabbar button:first-child{padding-left:0} .tabbar button.on{color:var(--ink);border-bottom-color:var(--accent)} .tabbar .cnt{font-family:"IBM Plex Mono",monospace;font-size:11.5px;background:var(--bg); padding:2px 7px;color:var(--accent)} .panel{display:none;padding:34px 0 var(--sec)} .panel.on{display:block} .panel h3{font-size:19px;font-weight:700;margin-bottom:14px} .panel p{font-size:15px;color:#4a4d55;max-width:70ch;margin-bottom:12px} .spec-t{width:100%;border-collapse:collapse;max-width:720px} .spec-t td{padding:13px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px} .spec-t td:first-child{color:var(--muted);width:46%} .spec-t td:last-child{font-weight:500} /* siatka zalacznikow */ .att-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px} .att{border:1px solid var(--rule);padding:20px;display:flex;gap:15px;align-items:flex-start; transition:border-color .25s ease .05s,box-shadow .25s ease .05s} .att:hover{border-color:var(--accent);box-shadow:0 5px 18px rgba(38,80,166,.08)} .att .ic{width:42px;height:42px;border:1px solid var(--rule);display:flex;align-items:center; justify-content:center;flex:0 0 auto} .att .ic svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.5} .att .nm{font-size:14.5px;font-weight:600;margin-bottom:4px} .att .meta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)} .att .go{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:9px;display:block} @media(max-width:900px){ .prod .wrap{grid-template-columns:1fr;gap:34px} .prod h1{font-size:26px} .att-grid{grid-template-columns:repeat(2,1fr)} .tabbar button{padding:16px 18px;font-size:13.5px} } @media(max-width:600px){ .prod{padding:22px 0 var(--sec)} .prod h1{font-size:22px} .hs-price .net b{font-size:30px} .gal .main{padding:22px} .gal .thumbs{grid-template-columns:repeat(4,1fr)} .att-grid{grid-template-columns:1fr} .buy{flex-wrap:wrap}.add{flex:1 0 100%} .help .row a{flex:1 0 100%} } /* ===== wyniki wyszukiwania ===== */ /* ---------- wyniki wyszukiwania ---------- */ .qbar{border-bottom:1px solid var(--rule);background:var(--bg)} .qbar .wrap{padding-top:26px;padding-bottom:26px} .qbar h1{font-size:25px;font-weight:800;letter-spacing:-.02em} .qbar h1 em{font-style:normal;color:var(--accent)} .qbar .meta{font-size:13.5px;color:var(--muted);margin-top:6px} .qbar .meta b{font-family:"IBM Plex Mono",monospace;color:var(--ink);font-weight:500} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper); border:1px solid var(--rule);padding:7px 12px;font-size:13px} .chip b{font-weight:500} .chip i{font-style:normal;color:var(--muted);cursor:pointer} .chip i:hover{color:var(--accent)} .chip.clear{border-color:transparent;color:var(--accent);font-weight:600;background:none;padding-left:4px} .res{padding:var(--sec) 0} .res .wrap{display:grid;grid-template-columns:248px 1fr;gap:44px;align-items:start} /* filtry */ .filters{position:sticky;top:120px} .fgrp{border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:18px} .fgrp:last-child{border-bottom:0} .fgrp h3{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:13px} .fgrp label{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px;cursor:pointer} .fgrp label:hover{color:var(--accent)} .fgrp input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto} .fgrp label .c{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)} .fgrp .more{font-size:13px;color:var(--accent);font-weight:600;margin-top:8px;display:inline-block} .range{display:flex;gap:10px;align-items:center;margin-top:4px} .range input{width:100%;min-width:0;height:40px;border:1px solid var(--rule);padding:0 10px; font:400 13.5px Inter,sans-serif;outline:0} .range input:focus{border-color:var(--accent)} .range span{color:var(--muted);font-size:13px} .ftog{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .fsum{display:flex;align-items:center;gap:10px;cursor:pointer; border:1.5px solid var(--ink);height:50px;padding:0 16px;font-size:14.5px;font-weight:600} .fsum::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s} .ftog:checked ~ .fsum::after{transform:rotate(-135deg) translate(-3px,-3px)} .ftog:focus-visible ~ .fsum{outline:2px solid var(--accent);outline-offset:2px} .fcnt{font-family:"IBM Plex Mono",monospace;font-size:11.5px;background:var(--accent);color:#fff; padding:2px 7px} /* domyslnie zwiniete - na telefonie wyniki maja byc widoczne od razu */ .fbody{display:none;padding-top:20px} .ftog:checked ~ .fbody{display:block} /* pasek nad wynikami */ .rtop{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap} .rtop .n{font-size:13.5px;color:var(--muted)} .rtop .n b{color:var(--ink);font-family:"IBM Plex Mono",monospace;font-weight:500} .rtop .sort{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted)} .rtop select{height:40px;border:1px solid var(--rule);background:var(--paper);padding:0 12px; font:500 13.5px Inter,sans-serif;color:var(--ink);outline:0} .rtop select:focus{border-color:var(--accent)} .res .grid{grid-template-columns:repeat(3,1fr)} /* paginacja */ .pag{display:flex;gap:8px;margin-top:36px;flex-wrap:wrap} .pag a{min-width:44px;height:44px;border:1px solid var(--rule);display:flex;align-items:center; justify-content:center;font-size:14px;font-weight:500;padding:0 12px;transition:border-color .2s} .pag a:hover{border-color:var(--accent);color:var(--accent)} .pag a.on{background:var(--ink);border-color:var(--ink);color:#fff} .pag .dots{border:0;color:var(--muted)} /* nie znalazles */ .nores{margin-top:44px;border:1px solid var(--rule);padding:28px;display:flex;gap:28px; align-items:center;flex-wrap:wrap} .nores .t{flex:1;min-width:260px} .nores h3{font-size:19px;font-weight:700;margin-bottom:7px} .nores p{font-size:14.5px;color:#5c5f68;max-width:52ch} .nores .row{display:flex;gap:10px;flex-wrap:wrap} .nores a.b{display:flex;align-items:center;gap:9px;border:1px solid var(--rule);padding:12px 16px; font-size:14px;font-weight:500;transition:border-color .2s,color .2s} .nores a.b:hover{border-color:var(--accent);color:var(--accent)} .nores svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6} /* przycisk zatwierdzania filtrow - na telefonie po rozwinieciu panelu */ .fapply{width:100%;height:48px;border:0;background:var(--accent);color:#fff;cursor:pointer; font:600 14px Inter,sans-serif;margin-top:4px} .fapply:hover{background:var(--accent-d)} /* paginacja WordPressa uzywa span.current i a.page-numbers */ .pag .page-numbers{min-width:44px;height:44px;border:1px solid var(--rule);display:flex; align-items:center;justify-content:center;font-size:14px;font-weight:500;padding:0 12px} .pag .page-numbers:hover{border-color:var(--accent);color:var(--accent)} .pag span.current{background:var(--ink);border-color:var(--ink);color:#fff} .pag .dots{border:0;color:var(--muted)} /* skok do wybranej strony - wielokropek jest przyciskiem, nie ozdoba */ .pag button.dots{background:none;font:inherit;cursor:pointer;border:1px solid transparent; min-width:44px;height:44px;color:var(--muted);transition:border-color .2s,color .2s} .pag button.dots:hover{color:var(--accent);border-color:var(--rule)} .pag .skok{display:flex;gap:6px} /* Elementor nadaje kazdemu `input` `padding:10px` selektorem o sile (0,3,1), stad atrybut i `:not()` po naszej stronie. */ .pag .skok input[type="number"]:not([type="submit"]){ width:78px;height:44px;padding:0;border:1.5px solid var(--ink);border-radius:0; background:var(--paper);text-align:center;font:600 15px Inter,sans-serif;color:var(--ink); appearance:textfield;-moz-appearance:textfield} .pag .skok input::-webkit-outer-spin-button, .pag .skok input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .pag .skok input:focus{border-color:var(--accent);outline:0} .pag .skok button{min-width:44px;height:44px;border:1.5px solid var(--ink);background:var(--ink); color:#fff;font:600 15px Inter,sans-serif;cursor:pointer;border-radius:0; transition:background .2s,border-color .2s} .pag .skok button:hover{background:var(--accent);border-color:var(--accent)} /* od tabletu w gore filtry sa zawsze widoczne, przycisk niepotrzebny */ @media(min-width:901px){ .fsum{display:none} .fbody{display:block;padding-top:0} } @media(max-width:1080px){ .res .grid{grid-template-columns:repeat(2,1fr)} .res .wrap{grid-template-columns:210px 1fr;gap:30px} } @media(max-width:900px){ .res .wrap{grid-template-columns:1fr} .filters{position:static} .fgrp{padding-bottom:14px;margin-bottom:14px} } @media(max-width:600px){ .qbar h1{font-size:20px} .res .grid{grid-template-columns:repeat(2,1fr);gap:12px} .rtop .sort{margin-left:0;width:100%} .rtop select{flex:1} .nores{padding:20px;gap:18px} } @media(max-width:380px){.res .grid{grid-template-columns:1fr}}