/** * Strona produktu – zgodność z makietą Figma "Product page / Fix". * * Ramki źródłowe (pasmo aktualnych makiet, y ≈ -24681): 1920 → 1547:139146, * 1440 → 1547:140120, 1024 → 1547:140611, 768 → 1547:141106, 390 → 1547:141602. * Starsza wersja karty (1547:136219, y ≈ -17166) jest nieaktualna — nie mierzyć z niej. * * Wartości pochodzą z pliku Figma i są weryfikowane pomiarem getComputedStyle na * moeblo-stage.ddev.site. Część wymiarów w makiecie jest ułamkowa (efekt skalowania ramek – * gap 9.6 / 10.86 / 14.13 px, radius 42.6 px) i została zaokrąglona do siatki. * * Layout (kolumny, kolejność sekcji) pozostaje w kreatorze Creative Elements – tutaj * wyłącznie warstwa prezentacji komponentów. * * O !important: `themes/classic/assets/css/custom.css` (ok. 1057–1123) wymusza * !important na wariantach produktu – wariant jako płaski tekst z podkreśleniem #DEB970. * Makieta zamienia je na kafle z ramką, więc te konkretne deklaracje muszą je przebić. * Reguły są zawężone do `#product`, żeby nie ruszyć widgetu wariantów na innych szablonach CE. */ #product { /* #A53F5B / #DEB970 / #232323 są już w custom.css, powtórzone jako lokalne tokeny. #D2D8DD to nowy kolor z makiety: obramowania pól wyboru i inputów. */ --moeblo-accent: #a53f5b; --moeblo-ink: #232323; --moeblo-muted: #7a7a7a; --moeblo-star: #e8a020; --moeblo-gold: #deb970; --moeblo-border: #d2d8dd; --moeblo-radius: 4px; --moeblo-control-height: 60px; } /* --- Nazwa produktu ----------------------------------------------------- */ /* Makieta (węzeł 1547:139205) daje tu 23/31, ale zgłoszenie z 25.08.2026 pkt 7 koryguje typografię i odstępy prawej kolumny „względem projektu, bo źle wygląda" — nazwa schodzi do 20 px na każdym progu powyżej 1440. Line-height zostaje 31 px z makiety: zgłoszenie podaje własną interlinię dopiero od progu 1440 (26 px). Mniejsze rozmiary na węższych ekranach są w bloku „wartości z makiety" niżej. */ #product .ce-product-name { font-size: 20px; font-weight: 400; line-height: 31px; } /* --- Ceny --------------------------------------------------------------- */ /* Cena bieżąca (30/36.3 w600 #000) jest już ustawiona przez .price-reviews-box .product-price w custom.css i zgadza się z makietą – nie dublujemy jej tutaj. */ #product .product-prices .current-price { display: flex; align-items: baseline; gap: 14px; } #product .product-prices .regular-price { color: var(--moeblo-muted); font-size: 20px; font-weight: 400; line-height: 24px; text-decoration: line-through; } /* Omnibus (moduł omnibuseufree) – w makiecie 14/20 w400 na czarno (1547:139196). custom.css rozjaśnia go do szarości. UWAGA na selektor: szablon modułu (presta_studio_omnibus_price.tpl) renderuje `.presta-studio-price-history > p.presta-studio-price-history-text`, a nie `.omni`. Reguła pisana na `.tax-shipping-delivery-label .omni` nie trafiała w nic, więc omnibus zostawał 13 px szary na każdym breakpoincie. */ #product .presta-studio-price-history, #product .presta-studio-price-history-text, #product .presta-studio-price-history-price { color: #000 !important; font-size: 14px !important; font-weight: 400; line-height: 20px !important; } /* Akapit omnibusu ma domyślny margines dolny 16 px, który wychodził poza widget cen i doklejał się do odstępu sekcji – przez to blok cen → warianty miał 44 px zamiast 28 px z makiety. */ #product .presta-studio-price-history-text { margin-bottom: 0; } /* --- Ocena (hook displayMoebloProductRating) ---------------------------- */ /* Zgłoszenie „Produkt" pkt 1: blok opinii siedzi pod nazwą produktu, ocena i liczba opinii są widoczne, a całość (gwiazdki + tekst) jest jednym odnośnikiem do sekcji opinii. Wszystkie wymiary z węzła Figmy 1547:139206 (ramka „Product 1920w" 1547:139146, aktualne pasmo y ≈ -24681), odczytane wtyczką DesignAgent: blok 246,5x12 | gwiazdka 12,478x12, odstęp 4,8 | gwiazdki → tekst 10,86 tekst 14/24,7 Medium #000000 | gwiazdka pełna #E8A020, pusta – obrys #000000. Wysokość wiersza trzymamy na 12 px (tyle ma ramka w makiecie), mimo że sam węzeł tekstowy ma line-height 24,7 — w Figmie tekst jest wyśrodkowany w niższej ramce. */ /* Prawa kolumna w makiecie to auto-layout z gapem 28 px, a nazwa i ocena siedzą w jednym podkontenerze z gapem 20 px. Zgłoszenie z 25.08.2026 pkt 7 zbija oba odstępy do 16 px, a blok ceny do 20 px — wartości podane wprost w zgłoszeniu, nie z makiety. */ #product .elementor-widget-product-name { margin-bottom: 16px; } #product .moeblo-rating { margin: 0; } #product .elementor-element-fa11c03 { margin-bottom: 16px; } /* custom.css trzyma tu 28 px z ramki 1920 (blok „Kreska pod ceną zlikwidowana"). */ #product .price-reviews-box { margin-bottom: 20px; } /* Creative Elements daje każdemu widgetowi `margin-bottom: 20px`, a odstępy w kolumnie są w makiecie stałe (28 / 24 / 16 / 16 / 16) i ustawiamy je sami – na widgetach, które mają własny margines, dokładka CE musi zniknąć, bo inaczej odstępy się sumują (warianty → licznik wychodziło 48 px zamiast 28). */ #product .elementor-widget-product-variants, #product .elementor-element-fa11a01, #product .elementor-element-fa11b02 { margin-bottom: 0; } #product .moeblo-rating__link, #product .moeblo-rating__first { display: inline-flex; align-items: center; gap: 10.86px; color: #000; font-size: 14px; font-weight: 500; line-height: 12px; text-decoration: none; } #product .moeblo-rating__link:hover .moeblo-rating__text, #product .moeblo-rating__first:hover { text-decoration: underline; } #product .moeblo-rating__stars { display: inline-flex; align-items: center; gap: 4.8px; } #product .moeblo-rating__star { position: relative; display: block; width: 12.478px; height: 12px; line-height: 0; } /* Warstwa spodnia: pusta gwiazdka to sam obrys (w makiecie czarny), nie szare pole. */ #product .moeblo-rating__star > .moeblo-rating__star-icon { fill: none; stroke: #b3b3b3; stroke-width: 1; } #product .moeblo-rating__star-icon { display: block; width: 12.478px; height: 12px; } /* Warstwa wierzchnia przycięta do procentu oceny – stąd połówki gwiazdek. */ #product .moeblo-rating__star-fill { position: absolute; top: 0; left: 0; display: block; overflow: hidden; height: 12px; line-height: 0; } #product .moeblo-rating__star-fill .moeblo-rating__star-icon { fill: var(--moeblo-star); stroke: none; } #product .moeblo-rating--empty .moeblo-rating__first { color: var(--moeblo-ink); text-decoration: underline; } /* --- Warianty – wspólne ------------------------------------------------- */ /* CE rozstawia etykiety ujemnymi marginesami kontenera; zastępujemy to flex-gapem. */ #product .ce-product-variants__options, #product .ce-product-variants__patterns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; } #product .ce-product-variants__options label, #product .ce-product-variants__patterns label { margin: 0; } /* 28 px z makiety; zgłoszenie z 25.08.2026 pkt 7 zbija do 24 px. */ #product .ce-product-variants__item { margin: 0 0 24px; } #product .ce-product-variants { margin: 0; } /* CE stawia na tym widgecie `elementor-overflow-hidden`, więc `.ce-product-variants` i `.elementor-widget-container` przycinają wszystko, co wychodzi poza kolumnę — a poza kolumnę wychodzą obwódka zaznaczonej próbki i outline :focus-visible (offset 2 px). Pierwsza próbka w rzędzie miała przez to obwódkę ściętą pionowo. */ #product .elementor-widget-product-variants > .elementor-widget-container, #product .ce-product-variants { overflow: visible; } /* Węzeł „Farbe" (1547:139223): etykieta 18/24,2 Regular #232323, wartość Semi Bold, odstęp etykieta → wartość 10 px, a odstęp do rzędu próbek 9,6 px. */ #product .ce-product-variants__label { display: block; /* !important, bo CE ustawia tu 10 px z ustawień widgetu (ce/8170301.css) i wygrywa specyficznością – bez tego mierzone było 10 px zamiast 9,6 px z makiety. */ margin-bottom: 9.6px !important; color: var(--moeblo-ink); /* Makieta daje 18 px; zgłoszenie z 25.08.2026 pkt 7 koryguje na 17 px. */ font-size: 17px; font-weight: 400; line-height: 24.2px; } #product .ce-product-variants__radio-wrapper { cursor: pointer; } /* --- Warianty – próbki koloru (kółko 28 px) ----------------------------- */ /* Zgłoszenie „Produkt" pkt 3: zamiast zdjęć wariantów mają być próbki koloru. Węzeł „Colors" w makiecie (1547:139222): kafel 36x36 z paddingiem 4, w środku kółko 28, odstęp kafli 8 → rozstaw środków 44. Zaznaczony kafel ma obwódkę #A53F5B; rysujemy ją box-shadow (2 px białej przerwy + 2 px obwódki = te same 36 px), bo cień nie zmienia rozmiaru elementu i rozstaw zostaje 44. */ /* Kafel 36 jest realnym pudełkiem próbki, nie tylko rachunkiem na rozstaw: obwódka zaznaczenia (2 px przerwy + 2 px linii) mieści się w jego paddingu, więc rząd zaczyna się równo z krawędzią kolumny — dokładnie jak w makiecie — zamiast wystawać 4 px w lewo. Rozstaw środków dalej 36 + 8 = 44. */ #product .ce-product-variants__patterns { gap: 8px; } #product .ce-product-variants__patterns .ce-product-variants__radio-wrapper { box-sizing: border-box; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid #e1e1e1; border-radius: 100%; } #product .ce-product-variants__pattern { position: relative; box-sizing: border-box; width: 28px !important; height: 28px !important; padding: 0; border: 0 !important; border-radius: 50%; background-position: center; background-size: cover; transition: box-shadow 0.15s ease; } /* Zgłoszenie z 25.08.2026 pkt 1: biała/kremowa próbka (#fff7e8 „Creme - Poso 100") zlewa się z białym tłem strony. Zamiast wyjątku na jeden kolor dokładamy wszystkim próbkom delikatny wewnętrzny cień — na jasnych kolorach rysuje krawędź kółka, na ciemnych jest niewidoczny, a samo wypełnienie zostaje dokładnie takie, jakie przychodzi z atrybutu (inline background-color). Cień siedzi na pseudoelemencie, a nie na samej próbce, bo box-shadow próbki jest już zajęty przez obwódkę zaznaczenia/hoveru i musiałby być powtarzany w każdym z tych stanów na każdym progu. */ #product .ce-product-variants__pattern::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.16); content: ''; pointer-events: none; } #product .ce-product-variants__radio-wrapper:hover .ce-product-variants__pattern { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--moeblo-border); } #product .ce-product-variants__radio:checked ~ .ce-product-variants__pattern, #product .ce-product-variants__radio-wrapper:hover .ce-product-variants__radio:checked ~ .ce-product-variants__pattern { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--moeblo-accent); } /* --- Warianty – kafle tekstowe (Liegefläche, Hocker) -------------------- */ /* Makieta 1547:139241 „Label - 140x200 cm": kafel 132×49, padding 12, promień 4, tekst 18/24,2 Regular #232323. Padding poziomy w CSS to 11 px, bo Figma liczy go od krawędzi ramki, a obramowanie 1 px leży w środku tej ramki (11 + 1 = 12). Wysokość trzymamy min-heightem i centrujemy w pionie – tak jak auto-layout. */ #product .ce-product-variants__option { box-sizing: border-box; display: flex; min-height: 49px; align-items: center; justify-content: center; padding: 0 11px !important; border: 1px solid var(--moeblo-border) !important; border-radius: var(--moeblo-radius); color: var(--moeblo-ink); font-size: 18px; font-weight: 400; line-height: 24px; text-align: center; transition: border-color 0.15s ease; } /* Zgłoszenie z 25.08.2026 pkt 3: po najechaniu na jeden kafel rozmiaru pozostałe się przesuwały. Powód: custom.css (ok. 1109) pogrubia kafel na hover (`font-weight: 600 !important`), a kafel nie ma stałej szerokości — grubszy tekst go poszerzał i przepychał rząd. Wracamy do wagi z makiety (hover zmienia tylko kolor obramowania) i udajemy pogrubienie cieniem tekstu, tak jak proponuje zgłoszenie — cień nie wpływa na metryki, więc kafle stoją w miejscu. Zgłoszenie z 31.08.2026 pkt 3: cień symetryczny (`0 0 0.7px`) lekko rozmywał font — wartości poziome wprost ze zgłoszenia. */ #product .ce-product-variants__radio-wrapper:hover .ce-product-variants__option { border-color: var(--moeblo-ink) !important; font-weight: 400 !important; text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor; } /* Zgłoszenie z 31.08.2026 pkt 3: kafel zaznaczony DALEJ przeskakiwał, bo hover zdjęliśmy z `font-weight`, ale zaznaczenie zostało na `600` — kliknięcie zmieniało szerokość tekstu i przepychało rząd. Teraz zaznaczenie znaczy tylko obramowanie 2 px + ten sam cień poziomy co hover; cień nie wpływa na metryki, więc kafle stoją w miejscu i przy hoverze, i po kliknięciu. Wartości wprost ze zgłoszenia. Reguła stoi po hoverze, więc wygrywa też, gdy myszka jest nad zaznaczonym kaflem. */ #product .ce-product-variants__radio:checked ~ .ce-product-variants__option { padding: 0 10px !important; border: 2px solid var(--moeblo-accent) !important; font-weight: 400 !important; text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor; } #product .ce-product-variants__radio:focus-visible ~ .ce-product-variants__option, #product .ce-product-variants__radio:focus-visible ~ .ce-product-variants__pattern { outline: 2px solid var(--moeblo-accent); outline-offset: 2px; } /* --- Ilość + "In den Warenkorb" ---------------------------------------- */ /* Zgłoszenie z 31.08.2026 pkt 4: licznik traci stałą szerokość i boczny padding — szerokość dobiera z zawartości (`width: auto`), a przyciski +/- rozciągają się na całą wysokość ramki, żeby pole klikalne było jak największe. Zamiast makietowych 129,7×60 z paddingiem 11,84 zostaje sama ramka; wysokość dalej bierze --moeblo-control-height, bo to dokładnie wysokość wiersza z CTA (zgłoszenie mówi `height: 100%`, ale procent w tym miejscu nie ma się od czego odbić — rodzic ma wysokość z treści). */ #product .ce-product-quantity { box-sizing: border-box; display: flex; width: auto; height: var(--moeblo-control-height); align-items: stretch; justify-content: space-between; padding: 0; border: 1px solid var(--moeblo-border); border-radius: var(--moeblo-radius); } /* Zgłoszenie „Produkt" pkt 5: „counter ilości ucięty". Powód: Creative Elements dokłada przyciskom padding: 8px (wygenerowane ce/8170301.css), więc 34+46+34 nie mieściło się w 104 px światła ramki i „+" wychodził poza obramowanie. Makieta (1547:139246 → „counting" 129,7x60, padding 0/12): przycisk to ramka 30,1x30,1 z paddingiem 2, w środku znak 15,1 px. Zgłoszenie z 31.08.2026 pkt 4: znaki +/- to teraz SVG w tle, a nie glify ikonfontu podmienione w custom.css (`.ceicon-sort-up:before { content: "+" }`). Sam przycisk bierze całą wysokość ramki i 44 px szerokości, żeby pole klikalne było możliwie duże; `font-size: 0` chowa glif z custom.css, tło robi resztę. Drabinka wielkości ikony (15 / 12 / 10 / 8) pochodzi ze zgłoszenia — pokrywa się z dotychczasową drabinką font-size znaku, więc sam znak nie zmienia rozmiaru. margin-top zerujemy, bo custom.css (.ce-product-quantity__minus) podnosi sam minus o 7 px, a tutaj obie ramki rozciąga flex. */ #product .ce-product-quantity__btn { box-sizing: border-box; display: flex; flex: 0 0 44px; width: auto; height: auto; align-items: center; justify-content: center; /* custom.css wymusza tu padding: 2px !important przy box-sizing: content-box. */ padding: 0 !important; margin-top: 0; color: var(--moeblo-ink); font-size: 0; line-height: 1; background-repeat: no-repeat; background-position: center; background-size: 15px auto; cursor: pointer; user-select: none; } #product .ce-product-quantity__btn.ce-product-quantity__plus { background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.07812 8.07053H16.1429M8.61051 1.07617V15.0649' stroke='black' stroke-width='2.15211' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #product .ce-product-quantity__btn.ce-product-quantity__minus { background-image: url("data:image/svg+xml,%3Csvg width='18' height='3' viewBox='0 0 18 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.07812 1.07617H16.1429' stroke='black' stroke-width='2.15211' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Hover jak dotąd zmieniał `color`, ale znak nie jest już tekstem — te same ścieżki z obrysem w kolorze akcentu (#A53F5B), żeby zachowanie zostało bez zmian. */ #product .ce-product-quantity__btn.ce-product-quantity__plus:hover { background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.07812 8.07053H16.1429M8.61051 1.07617V15.0649' stroke='%23A53F5B' stroke-width='2.15211' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #product .ce-product-quantity__btn.ce-product-quantity__minus:hover { background-image: url("data:image/svg+xml,%3Csvg width='18' height='3' viewBox='0 0 18 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.07812 1.07617H16.1429' stroke='%23A53F5B' stroke-width='2.15211' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Po zmianie z pkt 4 licznik nie ma już stałej szerokości, więc to pole wyznacza jego rozmiar: przy `width: auto` pole rozdymało się do domyślnej szerokości inputa (zmierzone 288 px na 1920) i zjadało CTA. Szerokości dobrane tak, żeby cały licznik wyszedł na makietowych 130 / 110 / 112 / 92 px przy nowych przyciskach 44 / 36 / 36 / 36: 2 x przycisk + pole + 2 x 1 px obramowania. `!important` bo custom.css (ok. 818) wymusza tu `width: 15px !important`. `min-height: 0`, bo Elementor daje polom `.elementor-size-md` min-height 47 px — na 768/390 input był przez to wyższy (47) od całej ramki licznika (39). */ #product .ce-product-quantity .elementor-field { flex: 1 1 auto; width: 40px !important; min-width: 0; height: auto; min-height: 0; /* custom.css (ok. 1128) daje polu `margin: 0 5px` – przy liczniku o szerokości z zawartości te 10 px doklejały się do jego szerokości. */ margin: 0; padding: 0; border: 0; background: none; color: var(--moeblo-ink); /* 18/24,2 Semi Bold #232323 — węzeł „1" w ramce counting (1547:139246). */ font-size: 18px; font-weight: 600; line-height: 24.2px; text-align: center; -moz-appearance: textfield; } #product .ce-product-quantity .elementor-field::-webkit-outer-spin-button, #product .ce-product-quantity .elementor-field::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } /* W makiecie ilość i CTA leżą w jednym wierszu (gap 14), a przycisk dobiera resztę szerokości kolumny. W CE oba widgety to rodzeństwo w tym samym .elementor-widget-wrap. */ #product .elementor-widget-wrap:has(> .elementor-widget-product-add-to-cart) { display: flex; align-items: center; gap: 14px; } /* Kreator ustawia temu widgetowi width:100% na węższych ekranach – w wierszu z przyciskiem ma zajmować tylko tyle, ile sama kontrolka. Zerujemy też marginesy, którymi CE rozstawia pola formularza (20 px na .ce-product-quantity + 5 px na widgecie): odstęp w wierszu daje flex-gap, a te marginesy zabierały przyciskowi 25 px szerokości. */ #product .elementor-widget-product-quantity { width: auto; max-width: none; margin-right: 0; flex: 0 0 auto; } #product .ce-product-quantity { margin: 0; } #product .elementor-widget-product-add-to-cart { flex: 1 1 auto; width: auto; max-width: none; } #product .elementor-widget-product-add-to-cart .elementor-button-wrapper, #product .elementor-widget-product-add-to-cart .elementor-button { width: 100%; } #product .elementor-widget-product-add-to-cart .elementor-button { display: flex; height: var(--moeblo-control-height); align-items: center; justify-content: center; padding: 0 54px; border-radius: var(--moeblo-radius); font-size: 18px; font-weight: 600; line-height: 1; } /* Zgłoszenie z 25.08.2026 pkt 5: po najechaniu przycisk robił się czarny (ce/8170301.css: `a.elementor-button:hover, :focus { background-color: #000000 }` dla obu widgetów koszyka — 94f397b i 3bb8a48). Zostaje kolor stanu domyślnego. */ #product .elementor-widget-product-add-to-cart .elementor-button:hover, #product .elementor-widget-product-add-to-cart .elementor-button:focus { background-color: var(--moeblo-accent); } #product .elementor-widget-product-add-to-cart .elementor-button-content-wrapper { display: flex; align-items: center; gap: 16px; } #product .elementor-widget-product-add-to-cart .elementor-button-icon { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; font-size: 20px; } /* --- Galeria – strzałki lewo/prawo -------------------------------------- */ /* Zgłoszenie „Produkt" pkt 4: w galerii brakowało strzałek. Sam widget je już rysuje (show_arrows w layoucie CE), ale domyślnie stoją poza kadrem (left: -50px), a kadr ma overflow: hidden — czyli były przycięte i w dodatku prawie białe. Wymiary z makiety (ramka „Frame 1261153194" nad zdjęciem): kółko 36 px na białym, ikona 16,36 px, wsunięcie 12 px od krawędzi zdjęcia. Wcześniej było 40 px i 16 px „na oko", bo Figma oddawała wtedy 429 — teraz jest z węzła. Rozmiary na węższych progach: 36 / 36 / 28 / 16 / 20 px, wsunięcie 12 / 12 / 12 / 8,36 / 8. */ #product .elementor-widget-product-images .elementor-swiper-button { left: auto; right: auto; width: 36px; height: 36px; /* custom.css chowa strzałki poniżej 768 (`display: none`), a poniżej 520 przywraca je jako `display: initial` – obie reguły przegrywają tu specyficznością z `#product`, więc kółko zostaje flexem na każdym progu. */ display: flex; align-items: center; justify-content: center; color: var(--moeblo-ink); /* font-size to rozmiar ikony: glif ikonfontu i maska SVG biorą go przez 1em, więc jedna liczba na próg skaluje całą strzałkę. */ font-size: 16.36px; /* Zgłoszenie z 25.08.2026 pkt 6: tło ma być półprzezroczyste, nie kryjące. */ background: rgba(255, 255, 255, 0.8); border-radius: 50%; transition: opacity 0.15s ease, background-color 0.15s ease; } /* Ikona: ce/8170301.css ustawia widgetowi galerii `.elementor-swiper-button i { font-size: 20px }` i `svg { width: 20px; height: 20px }` bez żadnego progu — przez to na telefonie chevron 20 px sterczał poza kółko 16/20 px. Wiążemy rozmiar ikony z font-size przycisku, żeby skalowała się razem z kółkiem. */ #product .elementor-widget-product-images .elementor-swiper-button i { font-size: inherit; line-height: 1; } #product .elementor-widget-product-images .elementor-swiper-button svg { width: 1em; height: 1em; } /* !important, bo CE poniżej 992 px wymusza `left/right: 0 !important` na strzałkach. */ #product .elementor-widget-product-images .elementor-swiper-button-prev { left: 12px !important; } #product .elementor-widget-product-images .elementor-swiper-button-next { right: 12px !important; } #product .elementor-widget-product-images .elementor-swiper-button:hover { background: rgba(255, 255, 255, 0.8); } /* Na pierwszym i ostatnim zdjęciu Swiper wyłącza przycisk – wtedy go chowamy, żeby nie sugerował, że da się przewinąć dalej. */ #product .elementor-widget-product-images .elementor-swiper-button.swiper-button-disabled { opacity: 0; pointer-events: none; } /* --- Galeria – miniatury (122x89, padding 6, aktywna ramka 2px) --------- */ #product .elementor-thumbnails-swiper .swiper-slide { height: 89px; } #product .elementor-thumbnails-swiper .swiper-slide > a { box-sizing: border-box; display: block; width: 100%; height: 100%; padding: 6px; border: 1px solid transparent; border-radius: var(--moeblo-radius); transition: border-color 0.15s ease; } #product .elementor-thumbnails-swiper .swiper-slide > a > img { width: 100%; height: 100%; object-fit: cover; } #product .elementor-thumbnails-swiper .swiper-slide:hover > a { border-color: var(--moeblo-border); } #product .elementor-thumbnails-swiper .swiper-slide-thumb-active > a { padding: 5px; border: 2px solid var(--moeblo-accent); } /* --- Nowe elementy z makiety -------------------------------------------- */ /* Pasek płatności – Figma Container 432,3×19, gap 16, tuż pod CTA. Każde logo ma w makiecie własną wysokość (PayPal 15, Visa/MC 16,29, Amex 17,64, GPay 15,6, ApplePay 15,61, Klarna 11,64, EPS 19, Nachnahme 18,64) – jedna wspólna `max-height: 19px` robiła z nich równe klocki i rozjeżdżała proporcje paska. Na węższych ramkach cały pasek jest przeskalowany: 19 → 16 → 15 → 14 px wysokości najwyższego logo, czyli mnożnik 1 / 0,8421 / 0,7895 / 0,7368. */ #product .moeblo-payments { --moeblo-pay: 1; display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 28px 0 0; gap: 16px; list-style: none; } #product .moeblo-payments__item { display: flex; align-items: center; } #product .moeblo-payments__logo { display: block; width: auto; height: calc(19px * var(--moeblo-pay)); } #product .moeblo-payments__logo[src$="paypal-default.svg.svg"] { height: calc(15px * var(--moeblo-pay)); } #product .moeblo-payments__logo[src$="visa_mastercard.svg"] { height: calc(16.29px * var(--moeblo-pay)); } #product .moeblo-payments__logo[src$="amex.svg"] { height: calc(17.64px * var(--moeblo-pay)); } #product .moeblo-payments__logo[src$="gpay.svg"] { height: calc(15.6px * var(--moeblo-pay)); } #product .moeblo-payments__logo[src$="apay.svg"] { height: calc(15.61px * var(--moeblo-pay)); } #product .moeblo-payments__logo[src$="klarna.svg"] { height: calc(11.64px * var(--moeblo-pay)); } #product .moeblo-payments__logo[src$="eps.svg"] { height: calc(19px * var(--moeblo-pay)); } #product .moeblo-payments__logo[src$="cash.svg"] { height: calc(18.64px * var(--moeblo-pay)); } /* Ramka dostawa + montaż – Figma Frame 1261153202 795×129 r4, wiersze 64 px. */ #product .moeblo-delivery { margin-top: 28px; border: 1px solid var(--moeblo-border); border-radius: var(--moeblo-radius); } #product .moeblo-delivery__row { display: flex; box-sizing: border-box; min-height: 64px; align-items: center; padding: 12px 20px; gap: 12px; } #product .moeblo-delivery__row + .moeblo-delivery__row { border-top: 1px solid var(--moeblo-border); } #product .moeblo-delivery__icon { display: flex; width: 28px; height: 28px; flex: 0 0 28px; align-items: center; justify-content: center; color: var(--moeblo-accent); } /* SVG ma w szablonie sztywne width/height 28, wiec na progach, gdzie makieta zmniejsza ikone (24 na 1024, 20 na 768 i 390), sama grafika zostawala 28 px wysoka i wychodzila poza ramke - ikona robila sie sciesniona w poziomie (zmierzone 24x28 i 20x28 na DDEV 20.08.2026). Wymiar bierze teraz z ramki, ktora skaluje sie wg tabeli z makiety. */ #product .moeblo-delivery__icon svg { width: 100%; height: 100%; } #product .moeblo-delivery__text { display: block; } #product .moeblo-delivery__title { display: block; color: #000; font-size: 14px; font-weight: 700; line-height: 20px; } #product .moeblo-delivery__note { display: block; color: #000; font-size: 13px; font-weight: 400; line-height: 18.38px; } /* Wartość wybranego wariantu dopisywana przez views/js/front.js. W makiecie to osobny węzeł tekstowy 10 px od etykiety, nie zwykła spacja. */ #product .moeblo-variant-value { margin-left: 10px; font-weight: 600; } /* --- RWD ---------------------------------------------------------------- */ /* * Uwaga do wartości: ramki 1440/1024/768/390 w Figmie to proporcjonalnie przeskalowane * kopie ramki 1920 (przy 768 wychodzi H1 14 px, tekst pomocniczy 10 px, przycisk 39 px * wysokości). Układ z nich bierzemy wprost, ale typografii i wysokości kontrolek nie * schodzimy poniżej czytelnych i klikalnych wartości – stąd 48 px zamiast 38–39 px * na przycisku i 16 px zamiast 10 px w treści. * * Progi zgodne z Creative Elements (tablet <= 1024, telefon <= 767), żeby pokrywały się * z klasami elementor-hidden-tablet / elementor-hidden-phone użytymi w layoucie. * * Konkretne wartości z aktualnych ramek są w bloku „wartości z makiety" na końcu pliku. */ /* Boczny padding CTA wprost z makiety (53,8 / 47,97 / 43,27 / 35,38) – przycisk i tak rozciąga się na całą kolumnę, więc padding wyznacza tylko minimalną szerokość. */ #product .elementor-widget-product-add-to-cart .elementor-button { padding: 0 53.8px; } /* Miniatury skalują się z kolumną, zachowując proporcję 122:89 z makiety. */ #product .elementor-thumbnails-swiper .swiper-slide { height: auto; aspect-ratio: 122 / 89; } /* UWAGA: bloki poniżej trzymają WYŁĄCZNIE reguły układu (co jest widoczne, w jakiej kolejności, czy wiersz się łamie). Wszystkie rozmiary, odstępy i typografia są w bloku „Wartości z makiety" na końcu pliku i tylko tam wolno je zmieniać. Wcześniej oba zestawy dublowały te same własności na innych progach (767 vs 768) i część wartości nigdy nie przeszła na aktualne ramki – stąd np. kafel „140x200 cm" trzymał 49 px i 18 px od 1920 aż do 768. */ @media (max-width: 767px) { /* W makiecie 390w kolejność jest ta sama co na desktopie: warianty -> ilość + koszyk -> płatności -> ramka dostawy. Layout CE chowa sekcję w kolumnie i pokazuje osobną, leżącą dopiero za całą pierwszą sekcją – przez co na telefonie koszyk lądował pod ramką dostawy. Odwracamy to, zamiast przestawiać sekcje w kreatorze. */ #product .elementor-element-492646af { display: block !important; } #product .elementor-element-64cb206d { display: none !important; } } /* Uwaga na próg: custom_css widgetu koszyka w kreatorze używa `max-width: 768px`, a klasy elementor-hidden-phone `max-width: 767px`. Reguły prostujące wiersz muszą trafić w ten szerszy próg, inaczej przy dokładnie 768 px przycisk zjeżdża pod pole ilości. Zakres rozszerzony do 991 px (tablicowy próg CE), bo między ramkami 1024 i 768 — przy oknie ok. 769–840 px, gdy kolumna ma 370–410 px — przycisk zjeżdżał pod pole ilości. To reguła układu, nie wartość z makiety: makieta nie ma tam ramki, więc trzymamy wartości z 1024 i pilnujemy tylko, żeby wiersz się nie rozpadł. */ @media (max-width: 991px) { /* Widget koszyka ma w kreatorze własne custom_css: width 100% + margin-top 5px poniżej 768 px. W makiecie ilość i przycisk zostają w jednym wierszu, więc blokujemy zawijanie i pozwalamy przyciskowi się skurczyć zamiast rozpychać kolumnę. */ #product .elementor-widget-wrap:has(> .elementor-widget-product-add-to-cart) { flex-wrap: nowrap; } #product .elementor-widget-product-add-to-cart { min-width: 0; flex: 1 1 0; margin-top: 0; } #product .elementor-widget-product-add-to-cart .elementor-button { margin-top: 0; } /* Zgłoszenie z 31.08.2026 pkt 4: CE ma poniżej 992 px własne `.ce-product-quantity--view-inline .ce-product-quantity { padding: 0 !important }`, a custom.css tuż obok dokłada `padding-left/right: 10px` — zerujemy jedno i drugie, licznik nie ma już bocznego paddingu na żadnym progu. */ .ce-product-quantity--view-inline .ce-product-quantity { padding: 0 !important; } } @media (max-width: 768px) { /* Etykieta CTA jest wersalikami i w wąskim wierszu łamie się na dwie linie – blokujemy łamanie i zbijamy odstęp do ikony, zamiast pozwolić przyciskowi urosnąć. Sam padding i rozmiar pisma są w bloku „Wartości z makiety". */ #product .elementor-widget-product-add-to-cart .elementor-button { white-space: nowrap; } #product .elementor-widget-product-add-to-cart .elementor-button-content-wrapper { gap: 8px; } /* Szerokość pola liczby (a więc i całego licznika) – patrz blok „Wartości z makiety". */ } /* --- Karuzela "Weitere Produkte dieser Kategorie" ------------------------ */ /* Strzalki karuzeli mialy domyslne ustawienia CE: `left: -50px` (czyli poza kontenerem) i kolor #EEEEEE z alfa 0,9, wiec na bialym tle byly niewidoczne. To ten sam blad co w galerii, tylko w drugim widgecie. Makieta (Figma 1547:139624 / 1547:139626) daje wylacznie geometrie: ramka 25x25 przypieta absolutnie do lewej i prawej krawedzi kontenera kart, w pionie na srodku. Same ramki sa puste - bez wypelnienia, obrysu i ikony - wiec koloru glifu projekt nie definiuje; bierzemy kolor tekstu, tak jak przy strzalkach galerii. */ #product .elementor-widget-product-carousel .elementor-swiper-button { left: auto !important; right: auto !important; display: flex; width: 25px; height: 25px; align-items: center; justify-content: center; color: var(--moeblo-ink); font-size: 25px; opacity: 1; } #product .elementor-widget-product-carousel .elementor-swiper-button-prev { left: 0 !important; } #product .elementor-widget-product-carousel .elementor-swiper-button-next { right: 0 !important; } #product .elementor-widget-product-carousel .elementor-swiper-button i { color: inherit; font-size: inherit; } #product .elementor-widget-product-carousel .elementor-swiper-button.swiper-button-disabled { opacity: 0; pointer-events: none; } /* Zgłoszenie z 31.08.2026 pkt 9: sekcja karuzeli jest „stretched", a jej kontener ma max-width 1640 px — poniżej tej szerokości rozlewa się na 100% i nagłówek razem z kartami przykleja się do krawędzi okna (zmierzone: x = 0 przy 1440 / 1024 / 768 / 390, przy czym blok opinii nad nim stoi na x = 15). Dokładamy padding 0 20px i podnosimy max-width o te same 2x20 px, żeby na 1920 światło treści zostało dokładnie takie jak dziś (1640 px, x = 140) — zmiana dotyczy wyłącznie szerokości, na których kontener i tak nie był już boxowany. */ #product .elementor-element-1bd39710 > .elementor-container { box-sizing: border-box; max-width: 1680px; padding: 0 20px; } /* Naglowek drugiego akordeonu ma w makiecie padding 10/0/10/0 (Figma 1547:139509); dolne 10 px brakowalo. */ #product #productAccordion .card + .card .card-header { padding-bottom: 10px; } /* * Nic tu nie ma celowo. Nagłówek (24/36 w600 do lewej), odstęp kart (40), tło sekcji * i padding ustawia upgrade/upgrade-1.2.0.php wprost w ustawieniach widgetu i sekcji CE – * szerokości slajdów wylicza Swiper w JS, więc nadpisywanie tego stylami rozjeżdża * przewijanie. Sama karta należy do modułu `moeblo_product_miniatures`. */ /* ========================================================================= Wartości z makiety — zgłoszenie „Produkt" pkt 5 ========================================================================= Odczytane wtyczką DesignAgent wprost z aktualnych ramek (pasmo y ≈ -24681): 1920 → 1547:139146, 1440 → 1547:140120, 1024 → 1547:140611, 768 → 1547:141106, 390 → 1547:141602. Wartości bazowe (>= 1441 px) siedzą w regułach wyżej; tu są tylko różnice. PEŁNA tabela z makiety — każda liczba pochodzi z węzła, nie z oszacowania. Poprzednia wersja tej tabeli miała tylko część kolumn, więc pozycje spoza niej (kafel tekstowy, licznik ilości, pasek płatności, ramka dostawy, omnibus) zostały na wartościach ze starej ramki 1547:136219 i nie skalowały się wcale. 1920 1440 1024 768 390 kolumna 795 663 460 378 366 gap kolumny 28 24 16 16 16 nazwa 23/31 22/31 20/24 14/20 15/20 gwiazdka 12,48 12,48 10,40 8,32 8,32 gap gwiazdek 4,8 4,8 4,0 3,2 3,2 gwiazdki→tekst 10,86 10,86 10,86 10,86 10,86 tekst oceny 14 14 14 9 9 cena 30 30 21 19 19 cena przekreślona 20 20 18 18 18 omnibus (#000) 14/20 14/20 12/20 9/20 9/20 etykieta wariantu 18 17 15 11 11 etykieta→wartość 10 10 10 10 10 etykieta→rząd 9,6 9,6 9,6 9,6 9,6 kafel próbki 36 32 24 20 20 kółko próbki 28 24 18 15 15 gap próbek 8 7,11 5,33 5,33 5,33 kafel tekstowy 132x49 120x40 120x40 90,3x30,6 90,3x30,6 padding kafla 12 12 12 9,17 9,17 promień kafla 4 4 4 3,06 3,06 tekst kafla 18 16 16 12 12 gap kafli 12 12 12 12 12 licznik ilości 129,7x60 109,9x53,5 112x48 91,6x39,3 91,6x40 padding licznika 11,84 10,55 9,52 7,78 7,78 przycisk +/- 30,13 24 21,65 16 16 liczba 18 16 13 11 11 (zgłoszenie z 31.08.2026 pkt 4 zastępuje wiersz „przycisk +/-": przycisk to teraz 44 / 36 / 36 / 36 px szerokości na całą wysokość ramki, ikona SVG 15 / 12 / 10 / 8, a boczny padding licznika schodzi do zera. Szerokość całego licznika i wysokości zostają makietowe — dobiera je pole liczby: 40 / 36 / 38 / 18 px.) CTA 60 / 18 53,5 / 16 48,3 / 14 39,5 / 13 40 / 13 promień CTA 4 3,57 3,22 2,63 2,63 płatności: wys. 19 19 16 15 14 gap płatności 16 16 10,11 9,47 8,84 dostawa: wiersz 64 56 47 38 38 padding wiersza 12/20 8/20 11/16 8/16 8/16 ikona 28 28 24 20 20 tytuł 14/20 13/20 11/20 10/20 10/20 notka 13/18,38 12/18,38 10/12 9/12 9/12 UWAGA do 768 i 390: te dwie ramki są przeskalowaną (~0,79) kopią ramki 1024, przez co tekst pomocniczy schodzi do 9–11 px. Wcześniej trzy pozycje (tekst oceny, omnibus, etykieta wariantu) trzymaliśmy na wartościach z 1024 pod hasłem „próg czytelności"; przy wymogu 1:1 idą teraz dosłownie z makiety. Jeśli klient woli czytelność, cofa się to trzema wartościami w bloku 768. Padding poziomy kontrolek z obramowaniem jest w CSS o 1 px mniejszy niż w Figmie: Figma liczy padding od krawędzi ramki, a obramowanie leży w środku tej ramki. ROZBIEŻNOŚĆ W SAMEJ MAKIECIE — wiersz ramki dostawy na 1024 / 768 / 390. Makieta podaje jednocześnie: wysokość wiersza 47 (1024) i 38 (768/390), padding pionowy 11 i 8 oraz teksty 11/20 + 10/12 (1024) i 10/20 + 9/12 (768/390). Te liczby się nie sumują: 20 + 12 + 2x11 = 54, a nie 47; 20 + 12 + 2x8 = 48, a nie 38. To znany efekt z CLAUDE.md — wysokości węzłów TEXT w Figmie to zasięg glifów, nie line-box, więc wysokość ramki policzona w projekcie jest niższa od realnej. Trzymamy padding i typografię z węzłów (są jednoznaczne), a wysokość wychodzi z treści: zmierzone 54 / 48 / 48 px. Na 1920 i 1440 min-height 64 i 56 z makiety wciąż wygrywa, bo treść jest niższa. Do rozstrzygnięcia z projektantem: czy zmniejszyć interlinię, czy przyjąć wyższy wiersz. ========================================================================= */ @media (max-width: 1440px) { #product { --moeblo-control-height: 53.5px; } /* Makieta: 22/31. Zgłoszenie z 25.08.2026 pkt 7: 20/26. */ #product .ce-product-name { font-size: 20px; line-height: 26px; } #product .elementor-widget-product-name { margin-bottom: 16px; } /* Makieta: 24 px na obu. Zgłoszenie z 25.08.2026 pkt 7: opinie 16, wariant 20. */ #product .elementor-element-fa11c03 { margin-bottom: 16px; } #product .ce-product-variants__item { margin-bottom: 20px; } #product .ce-product-variants__label, #product .moeblo-variant-value { font-size: 17px; } /* Kafel 32 z kółkiem 24 (padding 4 = obwódka 2 + 2), odstęp kafli 7,11. */ #product .ce-product-variants__pattern { width: 24px !important; height: 24px !important; } #product .ce-product-variants__patterns .ce-product-variants__radio-wrapper { width: 32px; height: 32px; } #product .ce-product-variants__patterns { gap: 7.11px; } /* Kafel tekstowy 120×40, padding 12 (CSS 11 + 1 px obramowania), tekst 16/24,2. */ #product .ce-product-variants__option { min-height: 40px; padding: 0 11px !important; font-size: 16px; } #product .ce-product-variants__radio:checked ~ .ce-product-variants__option { padding: 0 10px !important; } /* Zgłoszenie z 31.08.2026 pkt 6: strzałki galerii 32 z ikoną 14. */ #product .elementor-widget-product-images .elementor-swiper-button { width: 32px; height: 32px; font-size: 14px; } #product .ce-product-quantity .elementor-field { width: 36px !important; font-size: 16px; } /* Zgłoszenie z 31.08.2026 pkt 4: przycisk 36 px szerokości (wysokość z ramki), ikona 12 px. */ #product .ce-product-quantity__btn { flex-basis: 36px; background-size: 12px auto; } #product .elementor-widget-product-add-to-cart .elementor-button { padding: 0 47.97px; font-size: 16px; border-radius: 3.57px; } /* Odstęp kolumny na tym progu to w makiecie 24 px; zgłoszenie z 25.08.2026 pkt 7 ustawia 20 px, tak samo jak na progu bazowym. */ #product .price-reviews-box { margin-bottom: 20px; } #product .moeblo-payments, #product .moeblo-delivery { margin-top: 24px; } /* Wiersz dostawy 661×56, padding 8/20; tytuł 13/20 Bold, notka 12/18,38. */ #product .moeblo-delivery__row { min-height: 56px; padding: 8px 20px; } #product .moeblo-delivery__title { font-size: 13px; } #product .moeblo-delivery__note { font-size: 12px; line-height: 18.38px; } } @media (max-width: 1024px) { #product { --moeblo-control-height: 48px; } /* Makieta: 20/24. Zgłoszenie z 25.08.2026 pkt 7: 18/22, a wszystkie trzy odstępy prawej kolumny (nazwa, opinie, wariant) schodzą z 16 px do 8 px. */ #product .ce-product-name { font-size: 18px; line-height: 22px; } #product .elementor-widget-product-name, #product .elementor-element-fa11c03, #product .ce-product-variants__item { margin-bottom: 8px; } #product .moeblo-rating__link, #product .moeblo-rating__first { font-size: 13px; } #product .moeblo-rating__star, #product .moeblo-rating__star-icon { width: 10.4px; height: 10px; } #product .moeblo-rating__star-fill { height: 10px; } #product .moeblo-rating__stars { gap: 4px; } #product .price-reviews-box .product-price { font-size: 21px; } #product .product-prices .regular-price { font-size: 18px; } #product .presta-studio-price-history, #product .presta-studio-price-history-text, #product .presta-studio-price-history-price { font-size: 12px !important; } #product .ce-product-variants__label, #product .moeblo-variant-value { font-size: 15px; } /* Kafel 24 z kółkiem 18 (padding 3 = obwódka 1,5 + 1,5), odstęp kafli 5,33. */ #product .ce-product-variants__pattern { width: 18px !important; height: 18px !important; } #product .ce-product-variants__patterns .ce-product-variants__radio-wrapper { width: 24px; height: 24px; } #product .ce-product-variants__patterns { gap: 5.33px; } #product .ce-product-variants__radio-wrapper:hover .ce-product-variants__pattern { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--moeblo-border); } #product .ce-product-variants__radio:checked ~ .ce-product-variants__pattern { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--moeblo-accent); } /* Makieta dawała kółko 28 z ikoną 12,73; zgłoszenie z 31.08.2026 pkt 6: 24 / 12. */ #product .elementor-widget-product-images .elementor-swiper-button { width: 24px; height: 24px; font-size: 12px; } /* Kafel tekstowy 120×40, padding 12 (CSS 11 + 1 px obramowania), tekst 16/24,2. */ #product .ce-product-variants__option { min-height: 40px; padding: 0 11px !important; font-size: 16px; } #product .ce-product-variants__radio:checked ~ .ce-product-variants__option { padding: 0 10px !important; } #product .ce-product-quantity .elementor-field { width: 38px !important; font-size: 13px; } /* Zgłoszenie z 31.08.2026 pkt 4: ikona 10 px (szerokość przycisku z progu 1440). */ #product .ce-product-quantity__btn { background-size: 10px auto; } /* Zgłoszenie z 31.08.2026 pkt 8: odstęp pod blokiem wariantów tylko na tym progu. */ #product .ce-product-variants { margin-bottom: 20px; } #product .elementor-widget-product-add-to-cart .elementor-button { padding: 0 43.27px; font-size: 14px; border-radius: 3.22px; } /* Makieta: 16 px. Zgłoszenie z 25.08.2026 pkt 7: 8 px. */ #product .price-reviews-box { margin-bottom: 8px; } /* Pasek płatności: najwyższe logo 19 → 16 px, odstęp 16 → 10,11. */ #product .moeblo-payments { --moeblo-pay: 0.8421; margin-top: 16px; gap: 10.11px; } /* Wiersz dostawy: padding 11/16, tytuł 11/20 Bold, notka 10/12. Makieta podaje wysokość wiersza 47 px, ale liczy ją z pudełek glifów (22 px na dwa wiersze tekstu); realne line-boxy to 20 + 12 = 32, więc wiersz wychodzi 54 px. To ta sama pułapka co z wysokościami węzłów TEXT – nie da się jej trafić bez line-heightu mniejszego od fontu. Padding i typografia są 1:1. */ #product .moeblo-delivery { margin-top: 16px; } #product .moeblo-delivery__row { /* min-height zerujemy, bo próg 1440 narzuca 56 px, a tu makieta chce mniej niż wysokość dwóch line-boxów – patrz komentarz wyżej. */ min-height: 0; padding: 11px 16px; } #product .moeblo-delivery__icon { width: 24px; height: 24px; flex-basis: 24px; } /* Makieta: 11 / 10. Zgłoszenie z 25.08.2026 pkt 7: 12 / 11. */ #product .moeblo-delivery__title { font-size: 12px; } #product .moeblo-delivery__note { font-size: 11px; line-height: 12px; } } @media (max-width: 768px) { #product { --moeblo-control-height: 39.2px; } /* Makieta: 14/20. Zgłoszenie z 25.08.2026 pkt 7: 16/20, a odstępy prawej kolumny (nazwa, opinie, wariant) schodzą do 4 px, blok ceny do zera. */ #product .ce-product-name { font-size: 16px; line-height: 20px; } #product .elementor-widget-product-name, #product .elementor-element-fa11c03, #product .ce-product-variants__item { margin-bottom: 4px; } #product .price-reviews-box { margin-bottom: 0; } #product .moeblo-rating__star, #product .moeblo-rating__star-icon { width: 8.32px; height: 8px; } #product .moeblo-rating__star-fill { height: 8px; } #product .moeblo-rating__stars { gap: 3.2px; } /* Ramki 768 i 390 to przeskalowana (~0,79) kopia ramki 1024, więc tekst pomocniczy schodził tu do 9–11 px. Zgłoszenie z 25.08.2026 pkt 7 podnosi te wartości: opinie 11, etykieta wariantu i wybrana wartość 13, kafel 13. */ #product .moeblo-rating__link, #product .moeblo-rating__first { font-size: 11px; } #product .price-reviews-box .product-price { font-size: 19px; } #product .presta-studio-price-history, #product .presta-studio-price-history-text, #product .presta-studio-price-history-price { font-size: 9px !important; } #product .ce-product-variants__label, #product .moeblo-variant-value { font-size: 13px; } /* Kafel 20 z kółkiem 15 (padding 2,5 = obwódka 1,25 + 1,25), odstęp kafli 5,33. */ #product .ce-product-variants__pattern { width: 15px !important; height: 15px !important; } #product .ce-product-variants__patterns .ce-product-variants__radio-wrapper { width: 20px; height: 20px; } #product .ce-product-variants__patterns { gap: 5.33px; } #product .ce-product-variants__radio-wrapper:hover .ce-product-variants__pattern { box-shadow: 0 0 0 1.25px #fff, 0 0 0 2.5px var(--moeblo-border); } #product .ce-product-variants__radio:checked ~ .ce-product-variants__pattern { box-shadow: 0 0 0 1.25px #fff, 0 0 0 2.5px var(--moeblo-accent); } /* Makieta dawała kółko 16 z ikoną 7,27 i wsunięciem 8,36 — na telefonie strzałka była przez to ledwo widoczna. Zgłoszenie z 31.08.2026 pkt 6: 28 / 14, wsunięcie 12, i te wartości schodzą już do najwęższych ekranów (blok 390 nie nadpisuje ich). */ #product .elementor-widget-product-images .elementor-swiper-button { width: 28px; height: 28px; font-size: 14px; } #product .elementor-widget-product-images .elementor-swiper-button-prev { left: 12px !important; } #product .elementor-widget-product-images .elementor-swiper-button-next { right: 12px !important; } /* Kafel tekstowy 90,34×30,56, padding 9,17 (CSS 8,17 + 1 px obramowania), promień 3,06, tekst 12/18,49. */ #product .ce-product-variants__option { min-height: 30.56px; padding: 0 8.17px !important; border-radius: 3.06px; font-size: 13px; line-height: 18.49px; } #product .ce-product-variants__radio:checked ~ .ce-product-variants__option { padding: 0 7.17px !important; } /* !important, bo custom.css dokłada tu `padding-left/right: 10px`. */ #product .ce-product-quantity { padding: 0 !important; } #product .ce-product-quantity .elementor-field { width: 18px !important; font-size: 11px; } /* Zgłoszenie z 31.08.2026 pkt 4: ikona 8 px. */ #product .ce-product-quantity__btn { background-size: 8px auto; } #product .elementor-widget-product-add-to-cart .elementor-button { padding: 0 35.38px; font-size: 13px; border-radius: 2.63px; } /* Pasek płatności: najwyższe logo 19 → 15 px, odstęp 16 → 9,47. */ #product .moeblo-payments { --moeblo-pay: 0.7895; margin-top: 16px; gap: 9.47px; } /* Wiersz dostawy: padding 8/16, tytuł 10/20 Bold, notka 9/12. Wysokość jak przy 1024 – makietowe 38 px to suma pudełek glifów, nie line-boxów. */ #product .moeblo-delivery { margin-top: 16px; } #product .moeblo-delivery__row { padding: 8px 16px; } #product .moeblo-delivery__icon { width: 20px; height: 20px; flex-basis: 20px; } /* Makieta: 10 / 9. Zgłoszenie z 25.08.2026 pkt 7: 11 / 11. */ #product .moeblo-delivery__title { font-size: 11px; } #product .moeblo-delivery__note { font-size: 11px; line-height: 12px; } } @media (max-width: 390px) { #product { --moeblo-control-height: 40px; } /* Makieta ma tu nazwę 15/20, ale zgłoszenie z 25.08.2026 pkt 7 podnosi ją na progu 768 do 16/20 właśnie dlatego, że na telefonie była za mała — zostawienie tu 15 px cofałoby tę korektę na najwęższych ekranach. Rozmiar leci więc z bloku 768. */ /* Strzałki galerii schodzą tu z progu 768 (28 / 14 / 12). Makieta 390 dawała kółko 20 z ikoną 9,09 i wsunięciem 8, ale zgłoszenie z 31.08.2026 pkt 6 podnosi je właśnie dlatego, że na telefonie były za małe — nadpisanie z tego bloku cofałoby tę korektę poniżej 390 px. */ /* Pasek płatności: najwyższe logo 19 → 14 px, odstęp 16 → 8,84. */ #product .moeblo-payments { --moeblo-pay: 0.7368; gap: 8.84px; } } /* Zgłoszenie z 25.08.2026 pkt 5: poniżej 360 px etykieta „IN DEN WARENKORB" nie mieści się już w przycisku stojącym w jednym wierszu z licznikiem (zmierzone przy 320 px: przycisk 164 px przy potrzebnych ~208 px, tekst ucinany przez `nowrap` z bloku 768). Wtedy wiersz się łamie: licznik na całą szerokość w pierwszej linii, przycisk na całą szerokość w drugiej. Makieta nie ma ramki węższej niż 390, więc to reguła układu ze zgłoszenia, nie wartość z projektu. Blok musi stać po progu 991 (`flex-wrap: nowrap`) i po 768 (`width: 92px`), bo ma tę samą specyficzność i wygrywa dopiero kolejnością. */ @media (max-width: 360px) { #product .elementor-widget-wrap:has(> .elementor-widget-product-add-to-cart) { flex-wrap: wrap; } #product .elementor-widget-product-quantity, #product .ce-product-quantity { width: 100%; max-width: none; flex: 1 1 100%; } #product .elementor-widget-product-add-to-cart { width: 100%; flex: 1 1 100%; } /* Boczny padding przycisku wyznacza tylko jego minimalną szerokość, a tu przycisk i tak zajmuje całą kolumnę – zbijamy go, żeby etykieta z ikoną miały miejsce. */ #product .elementor-widget-product-add-to-cart .elementor-button { padding: 0 12px; } } /* --- Sticky CTA (dolna belka) ------------------------------------------- */ /* Zgłoszenie 7.6.2 „Responsywność / Produkt / Brak sticky CTA" (Asana, opis z 21.04, komentarz z 28.05: „Zrobić zgodnie z taskiem (projekt figma)"). Źródło wyglądu: Production → tag 1547:135686 „Product page mobile - sticky panel", ramka 390w 1547:142073, panel 1547:142615. Panel jest w makiecie wyłącznie w wariancie 390 (żadna z ramek 768/1024/1440/1920 go nie ma), a wszystkie jego wymiary pokrywają się z mobilnym pasmem tej karty (licznik 92, CTA 40, promień 2,63, font 13) — dlatego blok makietowy siedzi w @media (max-width: 768px), tak jak reszta wartości telefonowych wyżej w tym pliku. Liczby potwierdzone pomiarem eksportu PNG @4x z Figmy (1560×440 px = 390×110): panel 390×110, border-top 1 px #A53F5B (stroke INSIDE), padding 12, wiersz 1 wysokość 36: licznik 92×36 w x 12..104, blok ceny do prawej (x = 378), odstęp wiersz → przycisk 10, przycisk 366×40 w y 58..98, w liczniku: „−" i „+" w ramkach 20×20 środkami w x 30 i x 86, ikona 10 px, stroke 1,43, w przycisku: tekst 130 px + odstęp 12 + ikona 20×20, całość wyśrodkowana. --------------------------------------------------------------------------- Uzupełnienie z odpowiedzi klienta (sierpień 2026 — „w figmie nie da rady tego zrobić, ale opisuję poniżej"), trzy rzeczy poza makietą: 1. Pasek ma się pokazywać, gdy głównego CTA nie widać na ekranie, i chować, gdy CTA wraca w kadr — na desktopie i na mobile (wzór: selsey.pl na telefonie). Steruje tym views/js/front.js: klasa --ready = „jest co obsługiwać", klasa --visible = „głównego CTA nie widać". CSS tylko je odgrywa. 2. Pasek ma być na WSZYSTKICH rozdzielczościach, nie tylko ≤768. 3. Wariantu desktopowego nie ma w Figmie („możesz zrobić jak na mobile […] ze stylami responsywnymi / rozmiarami jak leci po kolei w wersji desktopowej w contencie"). Odwzorowanie: te same trzy elementy, ale w jednym wierszu, w tej samej ramie co treść strony, a KAŻDY rozmiar wzięty z odpowiednika w contencie na tym progu (sekcja „Ilość + In den Warenkorb" i „Ceny" wyżej w tym pliku) — nic nie jest dobrane na oko. Zmierzone na moeblo-stage.ddev.site, kolumna prawa karty produktu: próg wys. kontrolki licznik krok font CTA padding font promień cena 1441+ 60 130 / 10,84 30 18 0 54 18 4 30/36,31 1025+ 53,5 110 / 9,55 24 16 0 47,97 16 3,57 30/36,31 769+ 48 112 / 8,52 21,65 13 0 43,27 14 3,22 21/36,31 Rama treści: kolumna kończy się 25 px od krawędzi okna, a przy 1920 stoi w polu 1590 px (165 px marginesu z każdej strony) — czyli max-width 1590 + padding 25. UWAGA — zgłoszenie z 01.09.2026 pkt 1 tę drabinkę kasuje: „na wyższych rozdzielczościach jednak za duże są elementy — [...] wygląd ten powyżej (min-width: 769px) [...] wszystko powyżej". Od 769 px w górę obowiązuje więc TYLKO wiersz „769+" z tabeli (i to on jest w bloku @media (min-width: 769px) na końcu pliku); wiersze 1025+ i 1441+ zostają tu jako zapis stanu sprzed zgłoszenia, bo opisują skalowanie kontrolek w TREŚCI strony, które się nie zmienia. Wysokość kontrolek paska jest przez to wpisana na sztywno (48 px), a nie brana z var(--moeblo-control-height) — ta zmienna dalej rośnie progami do 53,5 i 60 px dla contentu i to ona robiła „za duże elementy" w pasku na 1440/1920. */ #product .moeblo-sticky { position: fixed; z-index: 1000; right: 0; bottom: 0; left: 0; box-sizing: border-box; /* Trzy stany: bez --ready panel nie istnieje (produkt bez CTA), z --ready ale bez --visible czeka schowany pod krawędzią, dopiero --visible go wsuwa. visibility (a nie sama transformacja) trzyma go poza zasięgiem klawiatury i klików. */ display: none; transform: translateY(100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; /* Padding 12 z makiety liczony jest od krawędzi ramki, a obramowanie w Figmie jest INSIDE — w CSS zabiera więc górnemu paddingowi 1 px (1 + 11 = 12). */ padding: 11px 12px 12px; border-top: 1px solid var(--moeblo-accent); background: #fff; } #product .moeblo-sticky--ready { display: block; } #product .moeblo-sticky--ready.moeblo-sticky--visible { transform: none; visibility: visible; transition: transform 0.2s ease; } @media (prefers-reduced-motion: reduce) { #product .moeblo-sticky, #product .moeblo-sticky--ready.moeblo-sticky--visible { transition: none; } } /* Panel leży na treści, więc bez zapasu zasłaniałby stale koniec stopki. Wysokość wpisuje front.js (zmierzoną, bo różni się progami), 110 px to wartość makietowa na wypadek, gdyby JS nie zdążył. Zapas dostaje stopka, a nie body, żeby jej tło sięgało pod panel. */ #product.moeblo-has-sticky #footer { padding-bottom: var(--moeblo-sticky-height, 110px); } #product .moeblo-sticky__row { display: flex; height: 36px; align-items: center; justify-content: space-between; margin-bottom: 10px; } /* „counting" 1547:142617 — 92×36, obramowanie 1 px w ramce. Zgłoszenie z 01.09.2026 pkt 2: licznik w pasku ma działać jak ten w treści strony (zgłoszenie „Produkt" pkt 4) — przyciski +/- biorą CAŁĄ wysokość ramki, żeby pole kliknięcia było jak największe. Zewnętrzna ramka zostaje makietowa (92×36), więc znika tylko jej poziomy padding 7 px: to on zjadał wysokość i szerokość klikalną. Podział światła 90 px: 28 + 34 + 28, czyli tyle samo miejsca na znak co wcześniej (ramka 20 px), ale pole kliknięcia rośnie z 20×20 na 28×34. */ #product .moeblo-sticky__counting { box-sizing: border-box; display: flex; width: 92px; height: 36px; flex: 0 0 92px; align-items: stretch; justify-content: space-between; padding: 0; border: 1px solid var(--moeblo-border); border-radius: 2.63px; } /* Znak jest tłem, nie inline SVG — te same data-URI, co .ce-product-quantity__btn w treści strony (zgłoszenie z 01.09.2026 pkt 2: „ikony +- spójne svg"). */ #product .moeblo-sticky__step { display: flex; box-sizing: border-box; width: 28px; height: auto; flex: 0 0 28px; align-self: stretch; align-items: center; justify-content: center; padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 12px auto; color: #000; cursor: pointer; } #product .moeblo-sticky__step--plus { background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.07812 8.07053H16.1429M8.61051 1.07617V15.0649' stroke='black' stroke-width='2.15211' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #product .moeblo-sticky__step--minus { background-image: url("data:image/svg+xml,%3Csvg width='18' height='3' viewBox='0 0 18 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.07812 1.07617H16.1429' stroke='black' stroke-width='2.15211' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Hover jak w liczniku w treści: ta sama ścieżka w kolorze akcentu. */ #product .moeblo-sticky__step--plus:not([disabled]):hover { background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.07812 8.07053H16.1429M8.61051 1.07617V15.0649' stroke='%23A53F5B' stroke-width='2.15211' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #product .moeblo-sticky__step--minus:not([disabled]):hover { background-image: url("data:image/svg+xml,%3Csvg width='18' height='3' viewBox='0 0 18 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.07812 1.07617H16.1429' stroke='%23A53F5B' stroke-width='2.15211' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Makieta pokazuje „−" przy ilości 1, czyli w stanie nieaktywnym — czarny na 30%. */ #product .moeblo-sticky__step[disabled] { opacity: 0.3; cursor: default; } /* W makiecie to węzeł TEXT, tutaj input — licznik ma działać także z klawiatury, a wygląd jest ten sam (pole bez ramki, tła i strzałek). */ #product .moeblo-sticky__qty { /* Po zmianie z 01.09.2026 pkt 2 szerokość licznika rozdzielają przyciski i to pole: 28 + 34 + 28 = 90 px światła ramki 92 px. */ width: auto; flex: 1 1 auto; min-width: 0; height: auto; align-self: stretch; padding: 0; border: 0; background: none; color: var(--moeblo-ink); /* 13/15,92 Semi Bold #232323 — węzeł „1" (1547:142623). */ font-size: 13px; font-weight: 600; line-height: 15.92px; text-align: center; -moz-appearance: textfield; /* Line-box liczby jest wyśrodkowany w ramce, ale glify Inter siedzą w nim 0,75 px wyżej niż w renderze Figmy; padding oddaje tę różnicę (flex centruje wtedy pole o 1,5 px wyższe, czyli tekst schodzi o 0,75 px). */ padding-top: 1.5px; } #product .moeblo-sticky__qty::-webkit-outer-spin-button, #product .moeblo-sticky__qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } /* Blok ceny nie jest centrowany w wierszu, tylko zaczepiony od góry: pozycje glifów z makiety (cena y 16,25, notka y 35,00 licząc od góry panelu) wypadają na line-boxach 20 px dopiero przy tym przesunięciu. 0,84 px i -2,76 px to wynik zestawienia środków ciężkości tuszu w eksporcie PNG @4x z Figmy i w zrzucie @4x z moeblo-stage.ddev.site. Reszta różnicy to 0,41 px na cenie i 0,49 px na notce — Chrome przyciąga linię bazową tekstu do pełnych pikseli CSS, więc pozycji z makiety (ułamki .25 / .72) nie da się trafić dokładniej niż o pół piksela; to najbliższy osiągalny punkt siatki. */ #product .moeblo-sticky__prices { display: flex; min-width: 0; flex-direction: column; align-items: flex-end; align-self: flex-start; padding-top: 0.84px; } /* 15/20 Bold #232323 — węzeł „879,00 €" (1547:142627). */ #product .moeblo-sticky__price { color: var(--moeblo-ink); font-size: 15px; font-weight: 700; line-height: 20px; white-space: nowrap; } /* 11/20 Medium #787878 — węzeł „Preis inkl. ausgewählter Optionen" (1547:142628). Makieta ustawia odstęp 8 px między pudełkami glifów (11 + 8 + 8 = 27 px wysokości bloku), a nie między line-boxami po 20 px — to ta sama pułapka, co przy wysokościach węzłów TEXT opisana w CLAUDE.md. Ujemny margines odtwarza pozycje glifów zmierzone w eksporcie PNG @4x (cena y 16,25..30,25, notka y 35..46 licząc od góry panelu). */ #product .moeblo-sticky__note { margin-top: -2.76px; color: #787878; font-size: 11px; font-weight: 500; line-height: 20px; white-space: nowrap; } /* „Button" 1547:142629 — 366×40 (przy 390 to całe światło panelu), tło #A53F5B, promień 2,63, padding 8/20, odstęp tekst → ikona 12. Te 40 px to wartość z makiety panelu, a nie --moeblo-control-height (kontrolki w treści mają na tym progu 39,2 px). */ #product .moeblo-sticky__cta { display: flex; box-sizing: border-box; width: 100%; height: 40px; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border: 0; border-radius: 2.63px; background: var(--moeblo-accent); color: #fff; font-size: 13px; font-weight: 600; line-height: 20px; text-transform: uppercase; cursor: pointer; } #product .moeblo-sticky__cta-icon { display: flex; box-sizing: border-box; width: 20px; height: 20px; flex: 0 0 20px; align-items: center; justify-content: center; } /* --- Sticky CTA: wariant desktopowy (poza makietą, pkt 3 wyżej) ---------- */ /* Jeden wiersz w ramie treści: cena po lewej, licznik i CTA po prawej — tak jak w kolumnie produktu, gdzie cena stoi nad wierszem [licznik][CTA]. __row dostaje display: contents, żeby licznik i blok ceny stały się bezpośrednimi dziećmi wiersza; kolejność ustawia order, bez zmian w szablonie. Zgłoszenie z 01.09.2026 pkt 1: „na wyższych rozdzielczościach jednak za duże są elementy — zrób tak, żeby wygląd ten powyżej (min-width: 769px) był właśnie z tego widoku wszystko powyżej". Czyli pasek NIE skaluje się już progami: jeden zestaw rozmiarów (ten z 769–1024) obowiązuje od 769 px w górę. Zniknęły więc bloki @media (min-width: 1025px) i (min-width: 1441px), a wysokość kontrolek jest wpisana na sztywno (48 px) zamiast brana z var(--moeblo-control-height) — ta zmienna rośnie progami do 53,5 i 60 px razem z kontrolkami w treści strony i to ona robiła „za duże elementy" na 1440/1920. Zestaw zamrożony (kolumna „769+" z tabeli wyżej): kontrolka 48, licznik 112, krok 36 (cała wysokość ramki), liczba 13, CTA 0 43,27 / 14 / promień 3,22, cena 21/36,31, notka 12/18,38. */ @media (min-width: 769px) { #product .moeblo-sticky { /* Boki 25 px = odstęp kolumny treści od krawędzi okna (zmierzony na każdym progu). Pion 12 px jak w makiecie, minus 1 px obramowania u góry. */ padding: 11px 25px 12px; } #product .moeblo-sticky__inner { display: flex; max-width: 1590px; align-items: center; /* Odstęp licznik → CTA z contentu (.elementor-widget-wrap gap: 14px). */ gap: 14px; margin: 0 auto; } #product .moeblo-sticky__row { display: contents; } #product .moeblo-sticky__prices { order: 1; align-items: flex-start; align-self: center; margin-right: auto; padding-top: 0; } #product .moeblo-sticky__note { margin-top: 0; } /* Zgłoszenie z 01.09.2026 pkt 2: przyciski +/- na całą wysokość ramki, bez poziomego paddingu licznika — pole kliknięcia to 36 × 46 px zamiast 21,65² (i tak samo jak w liczniku w treści strony, gdzie krok ma 36 px szerokości). */ #product .moeblo-sticky__counting { order: 2; width: 112px; height: 48px; flex-basis: 112px; padding: 0; border-radius: var(--moeblo-radius); } #product .moeblo-sticky__step { width: 36px; flex-basis: 36px; } #product .moeblo-sticky__qty { font-size: 13px; line-height: 20px; padding-top: 0; } #product .moeblo-sticky__cta { order: 3; width: auto; height: 48px; /* Odstęp tekst → ikona z contentu (.elementor-button-content-wrapper gap: 16px). */ gap: 16px; padding: 0 43.27px; border-radius: 3.22px; font-size: 14px; } #product .moeblo-sticky__price { color: #000; font-size: 21px; font-weight: 600; line-height: 36.31px; } /* Notka idzie za wielkością omnibusu w contencie na progu 769–1024; po zgłoszeniu z 01.09.2026 pkt 1 ten rozmiar obowiązuje już na każdej szerokości powyżej. */ #product .moeblo-sticky__note { font-size: 12px; line-height: 18.38px; } }