/* ══════════════════════════════════════════════════════════════════════════ PASEK WYBRANEGO POJAZDU — JEDNA DEFINICJA DLA CAŁEGO SKLEPU ══════════════════════════════════════════════════════════════════════════ Powstał 19.08.2026 po zgłoszeniu usera: „na obu kartach mam ten sam pojazd a inny selector… to powinien być TEN SAM SELECTOR, dlaczego wczytuje się inny kod?". Odpowiedź brzmiała: bo faktycznie wczytywał się inny kod. Pasek `.vehicle-card` renderują DWIE templatki: • product_page/template_new.php (karta produktu) • products_list/template_new.php (lista / kategoria) a stylowały go DWA niezależne arkusze, każdy z własnym modelem układu: • product_page/style_new.css → display:grid, sztywne kolumny • kategoria_podglad.css → display:flex, flex-wrap przy czym ten drugi był w środku ZDUPLIKOWANY (linie 794 i 2950, bajt w bajt). Skutek: na karcie produktu Z listą dopasowań ładowały się OBA arkusze i wygrywał ten od listy (flex), a na karcie BEZ listy zostawał grid. Ten sam komponent, ten sam pojazd, dwa różne wyglądy — dokładnie to, co user widział. 🔴 ZASADA: wygląd paska zmienia się TYLKO tutaj. W arkuszach kontekstowych zostają wyłącznie reguły POŁOŻENIA (gdzie pasek siedzi w danym układzie), nigdy jego wygląd wewnętrzny. Układ jest celowo na `flex` + `flex-wrap`, nie na `grid` o sztywnej liczbie kolumn. Poprzednia siatka miała 3 kolumny, a 18.08.2026 doszedł czwarty element („Usuń pojazd") — czwarte dziecko spadało do drugiego wiersza i pasek rósł z 82 na 96 px. Flex jest odporny na dokładanie przycisków. ══════════════════════════════════════════════════════════════════════════ */ /* ── 27.08.2026, poprawki usera ──────────────────────────────────────────── „za duze marginesy dolny i gorny, tlo mozna wyjebac totalnie, border wole, na full width bez bocznych odstepow". 1. TŁO ZDJĘTE (`transparent`). Pasek siedzi na białej stronie, więc delikatna szarość i tak ledwo się różniła od tła, a dokładała trzeci odcień do układu. Zostaje sama ramka — na niej trzyma się cała forma paska. 2. WYSOKOŚĆ: `min-height` 82 → 64 px, `padding` 10 → 6 px w pionie. 82 px brało się z czasów, gdy pasek miał trzy kolumny i przycisk „Usuń pojazd" spadał do drugiego wiersza. Przy `flex-wrap` to już nieaktualne. 3. PEŁNA SZEROKOŚĆ: `main.container` ma 12 px paddingu z każdej strony, przez co pasek kończył się 24 px węższy niż reszta układu. Zdejmujemy to ujemnym marginesem i zaokrągleniem — pasek dochodzi do krawędzi kontenera, więc `border-radius` traci sens i idzie do zera, a boczne ramki znikają (zostaje kreska nad i pod, jak pasek pełnej szerokości). ⚠ Ujemny margines MUSI iść w parze z paddingiem kontenera. Jeśli kiedyś zmieni się `main.container{padding-inline}`, tę wartość trzeba poprawić razem z nią — inaczej pasek wyjedzie poza ekran i zrobi przewijanie w bok. */ /* ── WYGLĄD DOCELOWY (decyzja usera 27.08) — ŚCIĄGNIĘTY TU 31.08.2026 ───────── Te wartości mieszkały w `product_page/style_tweaks.css` pod prefiksem `.pdp-new` i obowiązywały WYŁĄCZNIE na karcie produktu: ramka dookoła, `border-radius:12px`, `min-height:52px`, `padding:4px 14px`. Baza poniżej dawała staremu wariantowi „pasek pełnej szerokości" (64 px, kreska tylko nad i pod, bez zaokrągleń). Efekt: pasek na karcie 56 px w ramce, ten sam pasek na liście i na stronie głównej 64 px bez ramki — zmierzone w przeglądarce 31.08.2026. 🔴 Zgodnie z zasadą z nagłówka tego pliku: WYGLĄD PASKA TYLKO TUTAJ. Kopie z prefiksem strony usunięte ze `style_tweaks.css`. */ .vehicle-card{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-height:52px; /* ── ODSTĘP POD PASKIEM (31.08.2026) ────────────────────────────────────── 14 px niósł dotąd `kategoria_podglad.css` (`body:has(.pl-new) .vehicle-card`), czyli arkusz ładowany na karcie i na listach, ALE NIE na stronie głównej — tam pasek miał margines 0 i odstęp brał się z opakowania (24 px). Stąd „nierówny odstęp". Wartość należy do PASKA, więc mieszka tu i rusza wszystkie strony naraz. */ margin:0 0 14px; padding:4px 14px; border:1px solid var(--line,#e3e7ed); border-radius:12px; background:transparent; } /* 🔴 UJEMNY MARGINES CELOWO WYCIETY. Chcialem `margin-inline:-12px`, zeby pasek dochodzil do krawedzi kontenera — i trafilem na ostrzezenie z 12.08.2026 (style_new.css:305): pasek szerszy niz OKRUSZKI, GALERIA i BOX ZAKUPU wyglada jak wypadniety z kontenera i user zglaszal to WIELOKROTNIE. Reszta karty tez siedzi w tych 12 px paddingu, wiec „pelna szerokosc" dla samego paska znaczy „szerszy od wszystkiego innego". Zeby zrobic to porzadnie, trzeba zdjac padding z calego `main.container`, a nie wyrywac jeden element. */ .vehicle-card .vehicle-label{ display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--muted,#687080); text-transform:uppercase; } /* Nazwa pojazdu nie łamie się na dwie linie — kolumna etykiety bywa wąska. */ .vehicle-card .vehicle-label strong{white-space:nowrap;} .vehicle-card .vehicle-pic{ width:68px; height:46px; object-fit:contain; flex:0 0 68px; display:block; } .vehicle-card .vehicle-copy{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; } .vehicle-card .vehicle-copy strong{ font-size:15px; font-weight:700; color:var(--text,#111318); line-height:1.25; } .vehicle-card .vehicle-copy span{ font-size:13px; color:var(--muted,#687080); line-height:1.3; } /* Przyciski „Zmień pojazd" / „Usuń pojazd". `margin-left:auto` TYLKO na pierwszym z nich — inaczej drugi odkleiłby się na przeciwną krawędź i między nimi powstałaby dziura. Dzięki temu para trzyma się razem przy prawej krawędzi. */ .vehicle-card .button{ flex:0 0 auto; padding:8px 14px; border:1px solid var(--line-strong,#d0d5dd); border-radius:8px; background:#fff; color:var(--text,#111318); font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; } .vehicle-card .button:hover{border-color:#98a2b3;} .vehicle-card .vehicle-copy ~ .button{margin-left:auto;} .vehicle-card .button ~ .button{margin-left:0;} /* ══ SZEROKOŚCI ══════════════════════════════════════════════════════════ Przyciski „Zmień pojazd" i „Usuń pojazd" MUSZĄ zawsze siedzieć w tym samym wierszu. Przy `flex-wrap` każdy zawija się osobno, więc bez tych reguł drugi spadał SAM na następną linię, do lewej krawędzi, podczas gdy pierwszy zostawał przy prawej — pasek rósł z 82 na 126 px i wyglądał na rozbity. Objaw wychodził dopiero w paśmie ~640–900 px, więc łatwo go przeoczyć na desktopie. */ /* Do 1100 px etykieta „TWÓJ POJAZD" ustępuje miejsca — zdjęcie auta niesie tę samą informację, a zwolnione ~130 px trzyma całość w jednym wierszu. */ @media(max-width:1100px){ .vehicle-card .vehicle-label{display:none;} } /* Do 900 px opis bierze cały wiersz, a przyciski dzielą między siebie drugi. Punkt łamania jest z zapasem: realna granica zależy od DŁUGOŚCI nazwy pojazdu („MERCEDES-BENZ SPRINTER 4-t Furgon" to jeden z dłuższych przypadków), więc lepiej złamać o 20 px za wcześnie niż zostawić rozbity pasek. */ @media(max-width:900px){ .vehicle-card .vehicle-copy{flex:1 1 100%;} .vehicle-card .vehicle-copy ~ .button{margin-left:0;} .vehicle-card .button{flex:1 1 0;} } /* Do 520 px przyciski jeden pod drugim, pełną szerokością — obok siebie robią się węższe niż ich własne etykiety. */ @media(max-width:520px){ .vehicle-card .button{flex:1 1 100%;} }