/* ============================================================ * Testowe karty produktu /produkt/test-karta-a…d/ — cztery projekty karty. * Treść wstawia szablon woodmart-child/inc/karta-testowa/szablon.php (korzeń .dm-kt-strona). * Plik robi cztery rzeczy: * 1. przywraca makiecie style, których nie ma motyw (galeria, FAQ, typografia), * 2. wypuszcza stronę na pełną szerokość okna (motyw trzyma treść w kolumnie 1200 px), * 3. skaluje stałe szerokości z makiety (1320/1240 px) do szerokości ekranu, * 4. składa kolumny: ≤1240 px, ≤1024 px i ≤720 px. * ============================================================ */ /* ————— podstawa ————— */ .dm-kt-strona { width: 100%; background: #f5f7f8; font-family: "Satoshi", Arial, Helvetica, sans-serif; font-weight: 500; color: #767676; } .dm-kt-strona a { color: #000000; text-decoration: none; } .dm-kt-strona a:hover { color: #242424; text-decoration: underline; } .dm-kt-strona a:focus-visible, .dm-kt-strona button:focus-visible, .dm-kt-strona input:focus-visible { outline: 2px solid #242424; outline-offset: 2px; } .dm-kt-strona button { font: inherit; cursor: pointer; } .dm-kt-strona h1, .dm-kt-strona h2, .dm-kt-strona h3, .dm-kt-strona h4, .dm-kt-strona p, .dm-kt-strona ul, .dm-kt-strona ol, .dm-kt-strona figure { margin: 0; } .dm-kt-strona h1, .dm-kt-strona h2, .dm-kt-strona h3 { text-transform: none; letter-spacing: normal; } .dm-kt-strona img { max-width: 100%; } .dm-kt-strona input, .dm-kt-strona textarea { box-shadow: none; } /* ————— pełna szerokość ————— */ /* Motyw zamyka treść w kolumnie 1200 px (page-szeroka / wd-page-1200). Strona główna ma iść na całą szerokość okna, więc wychodzimy z kolumny. Szerokość okna bez paska przewijania podaje karta-testowa.js w zmiennej --dm-kt-okno; 100vw to zapas, gdyby skrypt się nie wczytał. */ .dm-kt-strona { width: var(--dm-kt-okno, 100vw); margin-left: calc(50% - var(--dm-kt-okno, 100vw) / 2); } .dm-kt-strona > section, .dm-kt-strona > div { padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box; } .dm-kt-strona [style*="width: 1320px"], .dm-kt-strona [style*="width: 1240px"] { width: 100% !important; max-width: 1560px; } /* motyw dokłada pływający uchwyt bocznego panelu — na tej stronie nie ma czego otwierać, a zachodzi na treść */ body.page .wd-sidebar-opener { display: none !important; } @media (prefers-reduced-motion: reduce) { .dm-kt-strona .dm-foto, .dm-kt-strona .dm-foto-akt { transition: none; } } /* ————— galeria, FAQ i drobiazgi z makiet ————— */ .dm-kt-strona .dm-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .dm-kt-strona .dm-foto-akt { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; } .dm-kt-strona .dm-mini { padding: 0; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; width: 92px; height: 92px; display: block; } .dm-kt-strona .dm-mini:hover { border-color: #242424; } .dm-kt-strona .dm-mini-akt { border: 2px solid #242424; } .dm-kt-strona .dm-faq { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; } .dm-kt-strona .dm-faq + .dm-faq { margin-top: 12px; } .dm-kt-strona .dm-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 16px 22px; font-size: 18px; color: #242424; } .dm-kt-strona .dm-faq > summary::-webkit-details-marker { display: none; } .dm-kt-strona .dm-faq > summary .dm-znak::before { content: "+"; } .dm-kt-strona .dm-faq[open] > summary .dm-znak::before { content: "\2212"; } .dm-kt-strona .dm-faq[open] > summary { border-bottom: 1px solid #e5e7eb; } .dm-kt-strona .dm-znak { flex: none; width: 28px; height: 28px; border-radius: 14px; background: #f5f7f8; color: #242424; font-size: 17px; line-height: 28px; text-align: center; } /* ————— prawdziwe elementy WooCommerce wstawione w makietę ————— */ .dm-kt-strona .dm-kt-cena .price { font-size: 30px; font-weight: 700; color: #242424; } .dm-kt-strona .dm-kt-cena .price .woocommerce-Price-amount { white-space: nowrap; } .dm-kt-strona form.variations_form { margin: 0; } .dm-kt-strona .variations { width: 100%; border: 0; margin: 0 0 14px; } .dm-kt-strona .variations td, .dm-kt-strona .variations th { display: block; padding: 0; border: 0; text-align: left; } .dm-kt-strona .variations .label { font-size:15px; font-weight: 700; color: #242424; padding-bottom: 8px; } .dm-kt-strona .variations .value { padding-bottom: 16px; } .dm-kt-strona .variations select { width: 100%; height: 52px; padding: 0 16px; border: 1px solid #d1d5db; border-radius: 10px; background: #ffffff; font: inherit; font-size:16px; color: #242424; } .dm-kt-strona .single_variation_wrap .woocommerce-variation-price { margin-bottom: 12px; font-size: 22px; font-weight: 700; color: #242424; } .dm-kt-strona .quantity input { height: 52px; border: 1px solid #d1d5db; border-radius: 35px; text-align: center; } .dm-kt-strona button.single_add_to_cart_button { height: 52px; padding: 0 28px; border: 0; border-radius: 35px; background: #000000; color: #ffffff; font-size: 16px; } .dm-kt-strona .stpro-price-inline, .dm-kt-strona .stpro-price-box { margin: 0 0 4px; } /* ————— konfigurator (projekt B) i przełącznik trybu (projekt D) ————— */ .dm-kt-strona .dm-kaf { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 60px; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #ffffff; color: #242424; text-align: left; transition: border-color 0.15s ease, background-color 0.15s ease; } .dm-kt-strona .dm-kaf:hover { border-color: #242424; } .dm-kt-strona .dm-kaf-akt { border-color: #242424; background: #f5f7f8; box-shadow: inset 0 0 0 1px #242424; } .dm-kt-strona .dm-cena { box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; min-height: 46px; padding: 0 16px; border: 1px solid #e5e7eb; border-radius: 10px; background: #ffffff; color: #242424; font-size:16px; transition: border-color 0.15s ease, background-color 0.15s ease; } .dm-kt-strona .dm-cena:hover { border-color: #242424; } .dm-kt-strona .dm-cena-akt { border-color: #242424; background: #242424; color: #ffffff; } .dm-kt-strona .dm-faq { border: 1px solid #e5e7eb; border-radius: 10px; background: #ffffff; padding: 18px 22px; } .dm-kt-strona .dm-faq > summary { cursor: pointer; list-style: none; font-size: 18px; color: #242424; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 28px; } .dm-kt-strona .dm-faq > summary::-webkit-details-marker { display: none; } .dm-kt-strona .dm-faq > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid #242424; border-bottom: 2px solid #242424; transform: rotate(45deg) translate(-3px, -3px); } .dm-kt-strona .dm-faq[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); } /* w projekcie B wyboru dokonuje się kafelkami — listy WooCommerce zostają, ale schowane */ .dm-kt-b .variations { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .dm-kt-b .single_variation_wrap .woocommerce-variation-price { display: none; } .dm-kt-b .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 14px; } /* projekt B: kafelki konfiguratora nieco mniejsze — mieszczą się bez przewijania */ .dm-kt-b .dm-kaf { min-height: 52px !important; padding: 9px 14px !important; gap: 0 !important; } .dm-kt-b .dm-kaf > span:first-child { font-size:16px !important; } .dm-kt-b .dm-kaf > span + span, .dm-kt-b .dm-kaf .dm-kaf-cena { font-size: 12px !important; } .dm-kt-b [style*="grid-template-columns: repeat(3, minmax(0, 1fr))"][style*="gap: 12px"] { gap: 10px !important; } .dm-kt-b .dm-cena { min-height: 40px !important; padding: 0 12px !important; font-size:15px !important; } /* dolna belka: trzy części — produkt, zamówienia telefoniczne, cena z przyciskiem. Wtyczka StonePro trzyma w prawym dolnym rogu pływający guzik (z-index 9999, 108 × 60 px), więc rezerwujemy mu miejsce, żeby nie zasłaniał „Dodaj do koszyka”. */ .dm-kt-b [style*="position: sticky; bottom: 0"] { z-index: 20 !important; } .dm-kt-b [style*="position: sticky; bottom: 0"] [style*="min-height: 88px"] { gap: 24px !important; padding-right: 130px !important; } @media (max-width: 720px) { .dm-kt-b [style*="position: sticky; bottom: 0"] [style*="min-height: 88px"] { padding-right: 76px !important; } } @media (max-width: 1100px) { .dm-kt-b [style*="position: sticky; bottom: 0"] [style*="min-height: 88px"] > div:nth-child(2) { display: none !important; } } /* projekt B: pasek miniatur pod dużym zdjęciem — najechanie zmienia duże zdjęcie, strzałki przewijają */ .dm-kt-b .dm-b-mini { cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dm-kt-b .dm-b-mini:hover, .dm-kt-b .dm-b-mini:focus-visible { border-color: #242424 !important; } .dm-kt-b .dm-b-mini-akt { border-color: #242424 !important; box-shadow: inset 0 0 0 1px #242424; } .dm-kt-b .dm-b-mini-lista { scrollbar-width: thin; } .dm-kt-b .dm-b-mini-lista::-webkit-scrollbar { height: 6px; } .dm-kt-b .dm-b-mini-lista::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } .dm-kt-b .dm-b-strzalka { cursor: pointer; } .dm-kt-b .dm-b-strzalka[hidden] { display: none !important; } .dm-kt-b .dm-b-strzalka:hover:not(:disabled) { border-color: #242424 !important; } /* model 3D w galerii: kafelek ze znakiem „3D” i iframe w pudełku dużego zdjęcia (600 × 600, na telefonie 100% × 600) */ .dm-kt-b .dm-b-3d-znak { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #ffffff; color: #242424; font-size: 15px; font-weight: 600; line-height: 1; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.35); } .dm-kt-b .dm-b-3d { display: block; width: 600px; max-width: 100%; height: 600px; border: 1px solid #e5e7eb; border-radius: 16px; background: #eceef1; } /* ————— ≤1240 px: siatki produktów z 5–6 kolumn na 3 ————— */ @media (max-width: 1240px) { .dm-kt-strona > section, .dm-kt-strona > div { padding-left: 24px !important; padding-right: 24px !important; } .dm-kt-strona [style*="grid-template-columns: repeat(6"], .dm-kt-strona [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .dm-kt-strona [style*="grid-column: span 2"] { grid-column: span 1 !important; } } /* ————— ≤1024 px: układy dwukolumnowe (zdjęcie + tekst) na jedną kolumnę ————— */ @media (max-width: 1024px) { .dm-kt-strona [style*="grid-template-columns: minmax(0, 2fr)"], .dm-kt-strona [style*="grid-template-columns: 380px"], .dm-kt-strona [style*="grid-template-columns: 320px"], .dm-kt-strona [style*="grid-template-columns: 600px"], .dm-kt-strona [style*="grid-template-columns: 540px"], .dm-kt-strona [style*="grid-template-columns: 272px"], .dm-kt-strona [style*="minmax(0, 1fr) 470px"], .dm-kt-strona [style*="minmax(0, 1fr) 700px"], .dm-kt-strona [style*="minmax(0, 1fr) minmax(0, 660px)"], .dm-kt-strona [style*="minmax(0, 1fr) 360px 230px"], .dm-kt-strona [style*="minmax(0, 3fr)"], .dm-kt-strona [style*="grid-template-columns: minmax(0, 1fr) auto"] { grid-template-columns: minmax(0, 1fr) !important; } .dm-kt-strona [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .dm-kt-strona [style*="grid-row: 1 / span 3"] { grid-row: auto !important; grid-column: 1 !important; } .dm-kt-strona .dm-bl-panel > .dm-bl-art { grid-template-columns: minmax(0, 1fr) !important; } .dm-kt-strona [style*="width: 400px"], .dm-kt-strona [style*="width: 320px"], .dm-kt-strona [style*="width: 660px"] { width: auto !important; max-width: 100%; } .dm-kt-strona [style*="align-items: stretch"][style*="gap: 20px"] { flex-wrap: wrap !important; } .dm-kt-strona [style*="width: 194px"] { width: calc(33.333% - 14px) !important; } .dm-kt-strona [style*="height: 460px"] { height: 420px !important; } .dm-kt-strona [style*="-webkit-line-clamp: 2"] { -webkit-line-clamp: 4 !important; } .dm-kt-strona [style*="justify-content: space-between"] { flex-wrap: wrap !important; } } /* ————— ≤720 px: telefon ————— */ @media (max-width: 720px) { .dm-kt-strona [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } .dm-kt-strona [style*="grid-template-rows: repeat(2"] { grid-template-rows: auto !important; } .dm-kt-strona ul[style*="grid-template-columns"] > li[style*="border-left"] { border-left: 0 !important; border-top: 1px solid #f0f1f3; } .dm-kt-strona > section, .dm-kt-strona > div { padding-left: 16px !important; padding-right: 16px !important; } .dm-kt-strona [style*="padding: 88px 0"] { padding-top: 48px !important; padding-bottom: 48px !important; } .dm-kt-strona [style*="font-size: 36px"] { font-size: 26px !important; } .dm-kt-strona [style*="font-size: 34px"], .dm-kt-strona [style*="font-size: 32px"] { font-size: 24px !important; } .dm-kt-strona [style*="font-size: 26px"] { font-size: 22px !important; } .dm-kt-strona [style*="width: 210px"], .dm-kt-strona [style*="width: 236px"], .dm-kt-strona [style*="width: 60px"][style*="height: 60px"] { width: auto !important; } .dm-kt-strona [style*="width: 194px"] { width: 100% !important; } .dm-kt-strona [style*="height: 220px"] { min-height: 180px; } .dm-kt-strona a[href^="mailto"] { overflow-wrap: anywhere; } .dm-kt-strona a[style*="border-radius: 35px"], .dm-kt-strona button[style*="border-radius: 35px"] { white-space: normal !important; max-width: 100%; text-align: center; padding-left: 18px !important; padding-right: 18px !important; } } /* ═══════════ TELEFON I TABLET: karta produktu B ═══════════ Cztery poprawki zgłoszone przez Tomasza 18.09: 1. belka nad paskiem StonePro, z ceną i przyciskiem 2. kafelki parametrów po trzy w rzędzie zamiast na całą szerokość 3. cennik po trzy ceny w rzędzie (naturalnie: trzy grubości szkła) 4. zdjęcia produktów powiązanych kwadratowe, po dwa w rzędzie */ /* zdjęcia w kafelkach produktów są kwadratowe — nie kadrujemy ich do paska */ .dm-kt-strona [style*="height: 286px"][style*="object-fit: cover"] { height: auto !important; aspect-ratio: 1 / 1; } /* ————— belka nad paskiem StonePro (poniżej 768 px pasek jest widoczny dla wszystkich) ————— */ @media (max-width: 767px) { .dm-kt-b [style*="position: sticky; bottom: 0"] { bottom: var(--dm-nav-h, 0px) !important; } /* poniżej 768 px pływający guzik StonePro jest ukryty — odzyskujemy zarezerwowane miejsce */ .dm-kt-b [style*="position: sticky; bottom: 0"] [style*="min-height: 88px"] { min-height: 0 !important; gap: 10px !important; padding: 9px 0 !important; padding-right: 0 !important; } /* lewa część: mniejsza miniatura, tytuł i parametry po jednej linii z wielokropkiem */ .dm-kt-b [style*="position: sticky; bottom: 0"] > div > div:nth-child(1) { gap: 9px !important; min-width: 0; flex: 1 1 auto; } .dm-kt-b [style*="position: sticky; bottom: 0"] > div > div:nth-child(1) img { width: 38px !important; height: 38px !important; } .dm-kt-b [style*="position: sticky; bottom: 0"] > div > div:nth-child(1) span[style*="font-size: 16px"], .dm-kt-b .dm-b-wybor { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-kt-b [style*="position: sticky; bottom: 0"] > div > div:nth-child(1) span[style*="font-size: 16px"] { font-size:14px !important; } .dm-kt-b [style*="position: sticky; bottom: 0"] .dm-b-wybor { font-size: 11px !important; } /* prawa część: cena i przycisk muszą się zmieścić obok siebie */ .dm-kt-b [style*="position: sticky; bottom: 0"] > div > div:nth-child(3) { gap: 10px !important; flex: none; } .dm-kt-b [style*="position: sticky; bottom: 0"] span[style*="font-size: 22px"] { font-size:16px !important; } .dm-kt-b [style*="position: sticky; bottom: 0"] span[style*="font-size: 13px"] { font-size: 10px !important; } .dm-kt-b .dm-b-do-koszyka { height: 40px !important; padding: 0 15px !important; font-size:14px !important; } } /* ————— ≤720 px: kafelki parametrów i cennik ————— */ @media (max-width: 720px) { .dm-kt-b [role="group"][aria-label="Rozmiar tablicy"], .dm-kt-b [role="group"][aria-label="Grubość panelu"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } .dm-kt-b [role="group"][aria-label="Przezroczystość"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .dm-kt-b .dm-kaf { min-height: 46px !important; padding: 7px 9px !important; } .dm-kt-b .dm-kaf > span:first-child { font-size:14px !important; } .dm-kt-b .dm-kaf > span + span, .dm-kt-b .dm-kaf .dm-kaf-cena { font-size: 11px !important; } /* cennik: nazwa rozmiaru nad rzędem, pod nią trzy ceny — po jednej na grubość */ .dm-kt-b [role="table"] [role="row"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .dm-kt-b [role="table"] [role="row"] > [role="rowheader"] { grid-column: 1 / -1 !important; font-size:15px !important; } .dm-kt-b [role="table"] [role="row"] > [role="columnheader"]:first-child { grid-column: 1 / -1 !important; } .dm-kt-b [role="table"] .dm-cena { min-height: 38px !important; padding: 0 8px !important; font-size:14px !important; justify-content: center !important; } /* produkty powiązane: dwa w rzędzie na większych telefonach */ .dm-kt-b [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .dm-kt-b [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] a { padding: 10px !important; gap: 10px !important; } .dm-kt-b [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] span[style*="font-size: 17px"] { font-size:15px !important; min-height: 40px !important; } .dm-kt-b [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] span[style*="font-size: 15px"] { font-size:14px !important; } } /* ————— ≤430 px: wąski telefon, jeden produkt w rzędzie ————— */ @media (max-width: 430px) { .dm-kt-b [style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; } } /* ═══════════ poprawki z 18.09 (druga tura) ═══════════ */ /* 1. Okruszki mają stykać się z górną belką — motyw daje
40 px paddingu */ main:has(> .dm-kt-strona) { padding-top: 0 !important; } /* 2. Telefon: cena detaliczna i linia B2B po prawej, w jednej linii z tytułem produktu. Belka łamała się przez regułę flex-wrap: wrap z zakresu ≤1024 px — tu ją cofamy. */ @media (max-width: 767px) { .dm-kt-b [style*="position: sticky; bottom: 0"] [style*="min-height: 88px"] { flex-wrap: nowrap !important; gap: 8px !important; } .dm-kt-b [style*="position: sticky; bottom: 0"] > div > div:nth-child(1) img { width: 34px !important; height: 34px !important; } /* prawa strona: cena nad linią B2B, obie wyrównane do prawej krawędzi */ .dm-kt-b [style*="position: sticky; bottom: 0"] > div > div:nth-child(3) { gap: 8px !important; } .dm-kt-b [style*="position: sticky; bottom: 0"] > div > div:nth-child(3) > div:first-child { align-items: flex-end !important; gap: 1px !important; } /* linia B2B jest długa — pozwalamy jej się złamać zamiast rozpychać belkę */ .dm-kt-b [style*="position: sticky; bottom: 0"] span[style*="color: #2e7d32"] { white-space: normal !important; font-size: 10px !important; line-height: 1.2 !important; text-align: right; } /* mniejszy przycisk, żeby ceny zmieściły się obok tytułu */ .dm-kt-b .dm-b-do-koszyka { height: 38px !important; padding: 0 13px !important; font-size: 12px !important; } } /* krótsza etykieta przycisku na telefonie */ .dm-kt-b .dm-b-etyk-kr { display: none; } /* Telefon: w belce nie zmieszczą się naraz tytuł, parametry, dwie ceny i pełny przycisk. Zostawiamy to, co się zmienia przy wyborze — parametry wariantu. Tytuł produktu jest zbędny, bo klient stoi na karcie tego produktu. */ @media (max-width: 767px) { .dm-kt-b [style*="position: sticky; bottom: 0"] > div > div:nth-child(1) img { display: none !important; } .dm-kt-b [style*="position: sticky; bottom: 0"] > div > div:nth-child(1) span[style*="font-size: 16px"] { display: none !important; } /* parametry wariantu mogą zająć dwa wiersze — nie urywamy „bez przezierności" */ .dm-kt-b [style*="position: sticky; bottom: 0"] .dm-b-wybor { font-size: 12px !important; line-height: 1.25 !important; color: #242424 !important; white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dm-kt-b .dm-b-etyk-dl { display: none; } .dm-kt-b .dm-b-etyk-kr { display: inline; } /* linia B2B łamie się na dwa wiersze zamiast rozpychać belkę */ .dm-kt-b [style*="position: sticky; bottom: 0"] span[style*="color: #2e7d32"] { max-width: 116px; } } /* Telefon: guzik „do góry" motywu (A.scrollToTop, z-index 350) zachodził na prawą krawędź „Do koszyka" — kciuk trafiał w przewijanie zamiast w zakup. Belka idzie nad niego (ale pod panele boczne z-index 500), a sam guzik przesuwamy nad belkę i pasek StonePro. */ @media (max-width: 767px) { .dm-kt-b [style*="position: sticky; bottom: 0"] { z-index: 400 !important; } .dm-kt-strona ~ * .scrollToTop, .scrollToTop { bottom: calc(var(--dm-nav-h, 0px) + 84px) !important; } } /* --------------------------------------------------------------------------- Guziki WooCommerce na karcie. Własna wtyczka motywu przegrywa z arkuszem Woo, bo jego selektor „.woocommerce button.button.alt” jest bardziej szczegółowy niż „.dm-kt-strona button.single_add_to_cart_button”. Stąd te reguły. --------------------------------------------------------------------------- */ .woocommerce .dm-kt-strona button.single_add_to_cart_button, .woocommerce .dm-kt-strona button.button.alt, .dm-kt-strona button.single_add_to_cart_button { height: 52px; padding: 0 28px; border: 0; border-radius: 35px; background: #000000; color: #ffffff; font-size: 16px; font-weight: 500; } .woocommerce .dm-kt-strona button.single_add_to_cart_button:hover, .woocommerce .dm-kt-strona button.button.alt:hover, .dm-kt-strona button.single_add_to_cart_button:hover { background: #242424; } /* Kafelki produktów powiązanych: zdjęcie kwadratowe jak na stronie głównej. */ .dm-kt-strona .dm-powiazane img, .dm-kt-strona .products img { aspect-ratio: 1 / 1; object-fit: cover; } /* --------------------------------------------------------------------------- Pole „Dodaj zdjęcia" (StonePro) wchodzi do wiersza dodawania do koszyka jako trzeci element obok ilości i guzika. Wiersz jest flexem bez zawijania, a samo pole ma 617 px przy 670 px karty — guzik wypadał poza kartę. Pole dostaje własną linię, ilość i guzik schodzą pod nie. --------------------------------------------------------------------------- */ .dm-kt-strona .woocommerce-variation-add-to-cart, .dm-kt-strona form.cart { flex-wrap: wrap !important; row-gap: 16px; } .dm-kt-strona .wc-dnd-file-upload { flex: 1 0 100% !important; max-width: 100%; } /* --------------------------------------------------------------------------- Przełącznik trzeciej osi w cenniku (np. przezierność). Widoczna jest ZAWSZE jedna tabela — wcześniej panele stały jeden pod drugim i strona rosła o całą dodatkową tabelę. Działa bez JavaScriptu: ukryte pola wyboru stoją przed panelami, a arkusz sięga do nich selektorem rodzeństwa. Kolory marki: aktywny guzik czarny, nieaktywny biały z obrysem. --------------------------------------------------------------------------- */ .dm-kt-strona .dm-tryb-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .dm-kt-strona .dm-tryb-grupa { display: flex; align-items: center; gap: 8px; } .dm-kt-strona .dm-tryb { flex: 1; min-height: 44px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 35px; background: #ffffff; color: #333333; font-size:15px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .dm-kt-strona .dm-tryb:hover { border-color: #242424; } /* aktywny guzik i widoczny panel — po jednej regule na każdą wartość osi */ .dm-kt-strona #dm-cennik-0:checked ~ .dm-tryb-grupa label[for="dm-cennik-0"], .dm-kt-strona #dm-cennik-1:checked ~ .dm-tryb-grupa label[for="dm-cennik-1"], .dm-kt-strona #dm-cennik-2:checked ~ .dm-tryb-grupa label[for="dm-cennik-2"], .dm-kt-strona #dm-cennik-3:checked ~ .dm-tryb-grupa label[for="dm-cennik-3"] { border-color: #242424; background: #242424; color: #ffffff; font-weight: 500; } .dm-kt-strona .dm-tryb-radio:focus-visible ~ .dm-tryb-grupa label[for="dm-cennik-0"], .dm-kt-strona #dm-cennik-1:focus-visible ~ .dm-tryb-grupa label[for="dm-cennik-1"], .dm-kt-strona #dm-cennik-2:focus-visible ~ .dm-tryb-grupa label[for="dm-cennik-2"], .dm-kt-strona #dm-cennik-3:focus-visible ~ .dm-tryb-grupa label[for="dm-cennik-3"] { outline: 2px solid #242424; outline-offset: 2px; } /* Chowamy panele TYLKO tam, gdzie jest przełącznik. Przy jednej osi ceny (84 ze 150 produktów) pól wyboru nie ma i panel ma być widoczny. */ .dm-kt-strona .dm-tryb-radio ~ .dm-cennik-panel { display: none !important; } .dm-kt-strona #dm-cennik-0:checked ~ .dm-cennik-panel[data-dm-panel="0"], .dm-kt-strona #dm-cennik-1:checked ~ .dm-cennik-panel[data-dm-panel="1"], .dm-kt-strona #dm-cennik-2:checked ~ .dm-cennik-panel[data-dm-panel="2"], .dm-kt-strona #dm-cennik-3:checked ~ .dm-cennik-panel[data-dm-panel="3"] { display: flex !important; } /* --------------------------------------------------------------------------- Moduł „Inne nasze przydatne usługi” (klasy dm-j), wklejany w opisy produktów widgetem „html” Elementora. Jego arkusz siedział w opisie w znaczniku