/* Sklep i kategorie: pasek boczny + siatka produktów. Tokeny z style.css motywu — nic nie dublujemy. */ /* Sklep idzie na pełną szerokość, tak jak nagłówek (style.css: .dm-naglowek .dm-srodek ma max-width:none i padding-inline:15px). Dzięki temu pasek kategorii zaczyna się w tej samej pionowej linii co menu, a siatka mieści o jedną kolumnę więcej na szerokich ekranach — przy 1320 px kafelki były niepotrzebnie wąskie, a po bokach zostawało pusto. */ .dm-sklep{max-width:none;padding:12px 15px 64px} /* okruszki */ .dm-okruszki{display:flex;flex-wrap:wrap;align-items:center;gap:8px; font-size:14px;color:var(--tekst);margin:0 0 18px} .dm-okruszki a{color:var(--tekst);text-decoration:none} .dm-okruszki a:hover{color:var(--ink)} .dm-okruszki [aria-current="page"]{color:var(--ink)} /* układ: pasek 264 px + reszta */ .dm-sklep__uklad{display:grid;grid-template-columns:264px minmax(0,1fr);gap:40px;align-items:start} /* ——— pasek boczny ——— */ .dm-pasek{position:sticky;top:24px} .dm-pasek__przel{display:none} .dm-pasek__tyt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--tekst);margin:0 0 12px} .dm-kat{list-style:none;margin:0 0 24px;padding:0;font-size:16px} .dm-kat__poz+.dm-kat__poz{margin-top:2px} .dm-kat__link{display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:8px 10px;margin-inline:-10px;border-radius:var(--radius-maly); color:var(--ink);text-decoration:none;line-height:1.35; transition:background .15s ease,color .15s ease} .dm-kat__link:hover{background:var(--chmura)} .dm-kat__link--tu{background:var(--chmura);font-weight:600} .dm-kat__ile{flex:none;font-size:12px;color:var(--tekst);font-variant-numeric:tabular-nums} .dm-kat__link--tu .dm-kat__ile{color:var(--ink)} .dm-kat__pod{list-style:none;margin:2px 0 6px;padding:0 0 0 14px; border-left:1px solid var(--linia)} .dm-kat__pod .dm-kat__link{font-size:15px;padding-block:6px;color:var(--tekst)} .dm-kat__pod .dm-kat__link:hover, .dm-kat__pod .dm-kat__link--tu{color:var(--ink)} /* baner usługi — przepisany 1:1 z widgetu Woodmarta, żeby wygląd się nie zmienił */ .dm-usluga{display:block;padding:12px 12px 14px;border:2px dashed #b9c9a0;border-radius:14px; background:var(--papier);color:var(--ink);text-decoration:none;transition:border-color .15s ease} .dm-usluga:hover{border-color:#8fa86a} .dm-usluga:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .dm-usluga img{display:block;width:100%;height:auto;border-radius:8px;margin:0 0 10px} .dm-usluga__tyt{display:block;font-size:16px;font-weight:600;line-height:1.3;margin:0 0 4px} .dm-usluga__tekst{display:block;font-size:14px;line-height:1.45;color:var(--tekst)} .dm-usluga__cena{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--tekst)} .dm-usluga__cena b{color:var(--ink);font-weight:700} .dm-usluga__btn{display:inline-block;margin-top:10px;padding:7px 15px;border-radius:999px; background:#0a0a0a;color:#fff;font-size:13px;font-weight:600;line-height:1.3} .dm-usluga:hover .dm-usluga__btn{background:#333} /* ——— lista ——— */ /* Nagłówek: tytuł z licznikiem po lewej, sortowanie po prawej — wyrównane do pierwszej linii tytułu, nie do jego środka, żeby przy tytule łamiącym się na dwa wiersze pasek sortowania nie zjeżdżał w dół. */ .dm-lista__gora{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between; gap:12px 24px} .dm-lista__tytul{min-width:0} .dm-lista__gora h1{margin:0 0 8px} .dm-lista__sort{flex:none;padding-top:6px} .dm-lista__sort .woocommerce-ordering{margin:0} /* Kreska oddzielająca nagłówek od siatki — została po dawnym pasku sortowania. */ .dm-lista__kreska{margin:18px 0 22px;border-bottom:1px solid var(--linia)} /* Opis kategorii pod siatką: oddzielony linią, węższa kolumna tekstu dla czytelności. */ .dm-lista__opis{max-width:74ch;margin:52px 0 0;padding-top:28px;border-top:1px solid var(--linia)} .dm-lista__opis-tyt{font-size:22px;margin:0 0 12px} .dm-lista__opis p{margin:0 0 12px} .dm-lista__opis p:last-child{margin-bottom:0} /* Licznik siedzi w nagłówku, pod tytułem, wyrównany do lewej. */ .dm-lista__ile{margin:0;font-size:15px;color:var(--tekst)} .dm-lista__ile .woocommerce-result-count{margin:0} .dm-lista__sort select{appearance:none;-webkit-appearance:none; padding:9px 38px 9px 14px;border:1px solid var(--linia);border-radius:999px; background:var(--papier) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23242424' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; font:inherit;font-size:15px;color:var(--ink);cursor:pointer} .dm-lista__sort select:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* siatka. woocommerce.css ustawia li.product { float:left; width:22.05% } — w gridzie float jest ignorowany, ale szerokość już nie: kafelek dostawał 22% szerokości KOLUMNY, nie rzędu, czyli około 50 px. Stąd potrzeba przebicia specyficzności `.woocommerce ul.products li.product`. */ .woocommerce ul.products, ul.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px; list-style:none;margin:0;padding:0} .woocommerce ul.products::before, .woocommerce ul.products::after{content:none} .woocommerce ul.products li.product.dm-kafel, ul.products li.product.dm-kafel, .dm-kafel{display:flex;flex-direction:column;width:auto;float:none;margin:0;position:relative} .dm-kafel__link{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit} /* GRID, nie block: oba zdjęcia siadają w tej samej komórce, bez pozycjonowania absolutnego. Przy `display:block` kontener był o 16 px wyższy od zdjęcia — jest elementem liniowym i pod nim zostawało miejsce na descender (line-height 25,6 px). Stąd szary pasek pod każdym kafelkiem, który wyglądał jak ucięte zdjęcie. */ .dm-kafel__foto{display:grid;position:relative;overflow:hidden;border-radius:var(--radius); background:var(--chmura);line-height:0} /* Kwadrat 1:1 — zdjęcia produktów są kwadratowe (157 ze 160) i miniatura WooCommerce też jest 600×600 z przycięciem. */ /* `margin:0` z pełną ścieżką WooCommerce: woocommerce.css daje obrazkom w pętli `margin:0 0 1em`, czyli 16 px pod zdjęciem. W siatce wyglądało to jak ucięty dół kadru — zdjęcie kończyło się wyżej niż zaokrąglone tło kontenera. */ .woocommerce ul.products li.product .dm-kafel__img, .woocommerce ul.products li.product .dm-kafel__brak, .dm-kafel__img,.dm-kafel__brak{grid-area:1/1;display:block;width:100%;margin:0; aspect-ratio:1/1;object-fit:cover; transition:transform .45s ease,opacity .55s cubic-bezier(.4,0,.2,1)} .dm-kafel__brak{background:var(--chmura)} /* Drugie zdjęcie z galerii leży pod pierwszym i wychodzi po najechaniu — klient widzi sam produkt, a po chwili ten sam produkt zamontowany na pomniku. Przenikanie jest celowo wolniejsze (0,55 s) niż zwykłe przejścia w motywie: to ma być spokojna zamiana kadru, a nie mignięcie. */ .dm-kafel__img--drugie{opacity:0} .dm-kafel--dwa:hover .dm-kafel__img--glowne, .dm-kafel--dwa:focus-within .dm-kafel__img--glowne{opacity:0} .dm-kafel--dwa:hover .dm-kafel__img--drugie, .dm-kafel--dwa:focus-within .dm-kafel__img--drugie{opacity:1} /* Powiększenie zostaje tylko tam, gdzie nie ma czego podmienić. */ .dm-kafel:not(.dm-kafel--dwa):hover .dm-kafel__img{transform:scale(1.03)} @media (hover:none){ .dm-kafel__img--drugie{display:none} } @media (prefers-reduced-motion:reduce){ .dm-kafel__img{transition-duration:.01ms} } /* Zasłona z przyciskiem pokazuje się po najechaniu na zdjęcie — pod kafelkiem zostają wtedy tylko nazwa i cena. Na urządzeniach dotykowych hover nie istnieje, więc tam zasłona jest wyłączona zupełnie (całe zdjęcie i tak jest linkiem). */ .dm-kafel__zaslona{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(18,18,18,.42);opacity:0;transition:opacity .25s ease;pointer-events:none} .dm-kafel:hover .dm-kafel__zaslona, .dm-kafel__link:focus-visible .dm-kafel__zaslona{opacity:1} .dm-kafel__akcja{padding:10px 22px;border:1.5px solid #fff;border-radius:999px; color:#fff;font-size:14px;line-height:1.3;white-space:nowrap; transform:translateY(6px);transition:transform .25s ease} .dm-kafel:hover .dm-kafel__akcja{transform:none} @media (hover:none){ .dm-kafel__zaslona{display:none} } /* Tytuł, cena i wszystko pod zdjęciem wyśrodkowane — tak jak w dotychczasowym sklepie. */ .dm-kafel__tresc{display:flex;flex-direction:column;gap:4px;text-align:center} .dm-kafel__nazwa{font-size:17px;line-height:1.35;color:var(--ink)} .dm-kafel__cena{font-size:16px;color:var(--tekst)} .dm-kafel__cena .amount,.dm-kafel__cena bdi{color:var(--ink);font-weight:600} /* Sufiks „z VAT” zostaje drobny i szary — cena ma się wybijać, nie cały wiersz. */ .dm-kafel__cena .woocommerce-price-suffix{font-size:14px;font-weight:400;color:var(--tekst)} .dm-kafel__cena del{opacity:.55;margin-right:6px} .dm-kafel__cena .woocommerce-Price-currencySymbol{font-size:.9em} /* Cały kafelek jest klikalny. */ .dm-kafel__link::after{content:"";position:absolute;inset:0} .woocommerce ul.products li.product.first, .woocommerce ul.products li.product.last{clear:none} .dm-lista__pusto{margin:24px 0;color:var(--tekst)} /* Paginacja. woocommerce.css rysuje ją jako jeden zrośnięty pasek: ramka wokół