/* public/produkt-opcje.css — konfigurator opcji WCPA na karcie produktu (Filtracja/Podajnik/Usluga montazowa/Butla-Reduktor-Wezyk CO2/Lampa UV/ Rozmiar koszulki) + lista wybranej konfiguracji w popupie checkoutu "kup teraz". Ladowany TYLKO na /produkt// (src/produkt/produkt.njk, frontmatter extraCss2), wpiety w src/_includes/layout.njk obok istniejacego extraCss - zgodnie z GRANICE tego zadania (public/styles.css i public/css/produkt.css NIE sa tu ruszane, nowe klasy zyja w NOWYM pliku). Zmienne kolorow (--blue/--navy/--ink/--line) sa zdefiniowane globalnie w public/styles.css (:root) - ten plik jest zawsze ladowany PRZED tym, wiec zmienne sa juz dostepne. Strona nie ma trybu ciemnego (sprawdzone przy public/css/cmp.css) - brak media query prefers-color-scheme jest tu celowe, nie przeoczenie. */ /* ------------------------------------------- pola konfiguratora (select) --- */ /* Zdanie nad konfiguratorem: "Podane doplaty dotycza zakupu. Przy wynajmie montaz i akcesoria sa gratis." Zastapilo dopisek "(Przy wynajmie GRATIS)" powtorzony 145 razy w etykietach opcji (decyzja zarzadu 2026-09-10; dopisek zdejmuje src/_data/produktyOpcjeWidok.js). Kolor #45526b na bieli = 7,4:1, wiec spelnia AA takze przy tym rozmiarze. Lewy pasek w kolorze marki wiaze je wizualnie z polami pod spodem, zeby nie czytalo sie jak stopka sekcji wyzej. */ .w-content-single-product__options-note { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--blue, #1a8fe3); border-radius: 0 6px 6px 0; background: #f4f9fe; font-size: 14px; line-height: 1.45; color: #45526b; } .w-content-single-product__options { margin: 0 0 18px; display: flex; flex-direction: column; gap: 14px; } .w-content-single-product__option { display: flex; flex-direction: column; gap: 6px; } .w-content-single-product__option-label { font-size: 15px; font-weight: 600; color: var(--navy); } .w-content-single-product__option-required { margin-left: 2px; color: #f25a87; } .w-content-single-product__option-select { appearance: none; width: 100%; padding: 11px 40px 11px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23021431' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; font-family: inherit; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .15s ease; } /* container-type na POJEDYNCZYM polu, nie na oknie: o ucieciu decyduje szerokosc . Zmierzone szerokosci pola: 320px okna -> 290, 375 -> 345, 414 -> 384, 480 -> 450, 992 -> 512, 1440 -> 722. */ .w-content-single-product__option { container-type: inline-size; container-name: produkt-opcja; } .w-content-single-product__option-select:hover { border-color: var(--blue); } .w-content-single-product__option-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--blue); } /* -------------------- echo wybranej opcji na waskich polach (defekt 2) --- */ /* Domyslnie NIEWIDOCZNE - i to jest tez bezpieczny fallback: jesli przegladarka nie zna @container albo :has(), reguly nizej odpadaja w calosci i zostaje dokladnie dotychczasowy wyglad (bez pustego bloku), a nie polowiczny stan. */ .w-content-single-product__option-echo { display: none; } .w-content-single-product__option-echo > span { display: none; margin-top: -2px; font-size: 13px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; } @container produkt-opcja (max-width: 460px) { /* display:contents, a nie block: gdy zaznaczona opcja ma krotka etykiete (pusty , patrz produkt.njk), zaden potomek nie jest widoczny - blokowy wrapper bylby wtedy zerowej wysokosci, ale WCIAZ elementem flex w .w-content-single-product__option (gap: 6px), czyli zostawialby 6 px martwego odstepu pod polem. Z display:contents wrapper znika z ukladu. */ .w-content-single-product__option:has(select) .w-content-single-product__option-echo { display: contents; } /* Parowanie po pozycji: N-ta opcja zaznaczona -> N-ty widoczny. W danych (src/_data/produktyOpcje.json) pole ma maksymalnie 4 opcje (histogram: 193 pol po 2, 48 po 3, 2 po 4) - 6 regul daje zapas. :not(:empty) - krotkie etykiety maja pusty i zostaja ukryte. */ .w-content-single-product__option:has(select > option:nth-child(1):checked) .w-content-single-product__option-echo > span:nth-child(1):not(:empty), .w-content-single-product__option:has(select > option:nth-child(2):checked) .w-content-single-product__option-echo > span:nth-child(2):not(:empty), .w-content-single-product__option:has(select > option:nth-child(3):checked) .w-content-single-product__option-echo > span:nth-child(3):not(:empty), .w-content-single-product__option:has(select > option:nth-child(4):checked) .w-content-single-product__option-echo > span:nth-child(4):not(:empty), .w-content-single-product__option:has(select > option:nth-child(5):checked) .w-content-single-product__option-echo > span:nth-child(5):not(:empty), .w-content-single-product__option:has(select > option:nth-child(6):checked) .w-content-single-product__option-echo > span:nth-child(6):not(:empty) { display: block; } } /* ------------------------------- lista konfiguracji w popupie checkoutu --- */ .c-checkout__config { margin: -2px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .c-checkout__config-title { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--navy); } .c-checkout__config-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; } .c-checkout__config-list li { font-size: 13px; color: var(--ink); line-height: 1.4; } /* ------------------------- selektor koloru: JEDEN dostepny kolor (2026-09) --- */ /* Zgloszenie klienta: "jezeli jest tylko jeden kolor, niech on bedzie domyslnie zaznaczony, nie ze trzeba go klikac". Radio faktycznie bylo zaznaczone, ale UI mowilo cos innego: czerwona gwiazdka "wymagane" przy etykiecie i PRZERYWANA ramka swatcha (public/css/produkt.css, .[data-variant-fixed]) czytaly sie jako "pole do wypelnienia". Gwiazdki przy jednej opcji juz nie ma (produkt.njk), a ramka jest tu nadpisana na ciagla, w kolorze zaznaczenia - stan "wybrane" zamiast "niewypelnione". public/css/produkt.css NIE jest ruszany (granice zadania) - ten plik laduje sie PO nim (layout.njk: extraCss, potem extraCss2), wiec te same selektory wygrywaja kolejnoscia. */ .w-content-single-product__variant-note { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--ink); } .w-content-single-product__variant-swatch[data-variant-fixed], .w-content-single-product__variant-swatch[data-variant-fixed]:hover { border-style: solid; border-color: var(--blue); cursor: default; }