, a opakowaniu "Probieren"
* dopisuje w atrybucie style= margin-top:10px. Oba
sa elementami
* elastycznymi tego rzedu, wiec ten margines po prostu spycha jeden nizej.
* Same przyciski sa identyczne - zmierzone po 28px wysokosci i 12px pisma;
* roznily sie tylko polozeniem.
*
* !important, bo margines siedzi w atrybucie style=, a ten bije arkusz.
* align-items:center wyzej dorownuje reszte.
*
* Kafelka (.sortTile__actions) to NIE dotyczy - tam przyciski stoja jeden
* pod drugim na pelnej szerokosci i ten odstep jest na miejscu. */
#content .sortItem__actions > div { margin-top: 0 !important; }
/* Wspolny kafelek dla wszystkich ikon pozycji: przycisku listy zyczen
* i plakietki "edytowalne napisy". Wczesniej plakietka byla golym obrazkiem
* 25px, a przycisk obrazkiem 20px w ramce - stad wrazenie dwoch roznych
* zestawow ikon. Teraz oba maja to samo pudelko 32x32 i ten sam rysunek
* 18px w srodku; rozni je tylko to, ze w przycisk da sie kliknac. */
#content .itemIco {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid #e0e0e0;
border-radius: 3px;
background: #fff;
text-decoration: none;
vertical-align: middle;
}
#content .itemIco img { display: block; width: 18px; height: 18px; margin: 0; border: 0; }
/* plakietka informacyjna - nie jest klikalna */
#content .itemIco--info { background: #fafafa; border-color: #ececec; cursor: default; }
/* przycisk listy zyczen */
#content a.itemIco--btn { transition: border-color 140ms ease, background-color 140ms ease; }
#content a.itemIco--btn:hover { border-color: #c9a0a0; background: #fdf6f6; }
/* ---------------------------------------------------------------------
* RAMKA WARUNKU ZAKUPU ("Setzt voraus den Kauf ...")
*
* Znaczniki (includes/functions/products.inc.php):
*
*
![]()
...
*
* Wariant .ramkaUwaga--cena niesie informacje o nizszej cenie.
*
* Ramka lezy w .sortItem__actions, ktory ma justify-content:flex-end.
* Bez flex:1 1 100% zachowywalaby sie jak kolejny przycisk i zostala
* dosunieta do prawej krawedzi pozycji.
*
* order:-1 jest tu dlatego, ze ramka to INFORMACJA O WARUNKU ZAKUPU,
* a nie kolejny przycisk - ma stac NAD calym rzedem przyciskow. PHP
* sklada ja razem z przyciskami, wiec w znacznikach potrafi wypasc
* miedzy nimi; order wyciaga ja na wlasny wiersz na gorze.
*
* width:100% nadpisuje width:130px z css/style_new.css i css/style2.css -
* tamta sztywna szerokosc jest z ramki w koszyku i tu ucinala tekst.
* --------------------------------------------------------------------- */
#content .sortItem .ramkaUwaga {
box-sizing: border-box;
flex: 1 1 100%;
order: -1;
width: 100%;
/* Ikona i tekst jako DWIE KOLUMNY. Poprzednia wersja miala na obrazku
* align="absmiddle" - tekst oplywal ikone schodkowo i druga linia
* wracala pod nia. Flex daje tekstowi wlasna, rowna kolumne. */
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 4px;
padding: 9px 11px;
border: 1px solid #e2d4b7;
border-radius: 3px;
background: #fdf9ef;
font-size: 12px;
line-height: 1.45;
color: #6b5a2e;
text-align: left;
}
/* Ikona trzyma swoj rozmiar - flex:0 0 auto, bo domyslne flex-shrink:1
* zgniotloby ja w pasek, gdy lista numerow artykulow jest dluga. */
#content .sortItem .ramkaUwaga__ico {
flex: 0 0 auto;
display: block;
width: 22px;
height: 22px;
margin: 0;
border: 0;
}
/* Ten sam bezpiecznik dla obrazka BEZ klasy. Panele autorow i anlagenbauer
* (showInfoAndButtons_AUTOREN / _ANLAGEN w products.inc.php) skladaja ramke
* po staremu, samym
![]()
. Kiedy ich wynik trafi w
* .sortItem, ramka i tak dostaje display:flex z reguly wyzej - bez tego
* ikona jako element flex zostalaby sciesniona przez dlugi tekst. */
#content .sortItem .ramkaUwaga > img { flex: 0 0 auto; }
/* min-width:0 zdejmuje domyslne min-width:auto elementu flex - bez tego
* dlugi, nielamliwy numer artykulu rozpycha ramke poza szerokosc pozycji
* zamiast sie zlamac. */
#content .sortItem .ramkaUwaga__txt {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Wariant "nizsza cena" - to nie ostrzezenie, tylko dobra wiadomosc,
* wiec chlodna zielen zamiast piaskowego zoltego ostrzezenia. */
#content .sortItem .ramkaUwaga--cena {
border-color: #cfe0d6;
background: #f4f9f6;
color: #3f5b49;
}
/* Numery artykulow. Legacy .SP_Link_1 ma na kazdym stanie #069 z twardym
* podkresleniem - w kolorowej ramce robilo to trzeci kolor w jednym
* zdaniu. Zostaje akcent arkusza, podkreslenie wchodzi na najechanie.
* overflow-wrap powtorzone na linku, bo numery bywaja podane ciagiem
* ("V10NMS70011 und V10NMS70012 und ...") i musza sie lamac. */
#content .sortItem .ramkaUwaga a.SP_Link_1,
#content .sortItem .ramkaUwaga a.SP_Link_1:link,
#content .sortItem .ramkaUwaga a.SP_Link_1:visited {
color: #4E5461;
font-weight: bold;
text-decoration: none;
overflow-wrap: break-word;
word-wrap: break-word;
}
#content .sortItem .ramkaUwaga a.SP_Link_1:hover,
#content .sortItem .ramkaUwaga a.SP_Link_1:active {
color: #4E5461;
text-decoration: underline;
}
/* =====================================================================
* STRONICOWANIE
*
* CELOWO BEZ REGUL. Paginacja ma juz komplet stylow w
* include/tabs/sortiment.css (.Paging, .pagingNumer, .pagingNumerActive).
* Dolozenie tu wlasnych regul zakotwiczonych w #content dawalo im wyzsza
* specyficznosc i rozjezdzalo stronicowanie na wszystkich listach - mimo
* ze tamten arkusz laduje sie pozniej.
* ===================================================================== */
/* =====================================================================
* NAGLOWEK LISTY (uzywany przez liste zyczen)
* ===================================================================== */
#content .sortHead {
background: #5b5b5b;
color: #fff;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
border-radius: 2px 2px 0 0;
}
#content .sortHead span { font-weight: normal; font-size: 12px; opacity: 0.85; }
#content .sortBody {
box-sizing: border-box;
border: 1px solid #d9d9d9;
border-top: 0;
border-radius: 0 0 2px 2px;
padding: 4px 10px 10px;
}
/* =====================================================================
* WIDOK KAFELKOWY ("trzy w rzedzie")
*
* Szablon: templates/sortiment/sortimentItem_vertical.html
* Kontener
otwiera shop_sortiment_all.php wokol petli.
*
* Bylo: kafelki plywaly (float:left, sztywne 170px), a rzedy dzielil licznik
* wstawiajacy co trzeci element rozdzielacz clear:both. Kafelki w rzedzie
* mialy przez to rozne wysokosci, tytul byl przycinany na sztywno w polowie
* wyrazu, a ocena lezala na zdjeciu.
*
* Siatka CSS wyrownuje wysokosci w rzedzie sama, a auto-fill dobiera liczbe
* kolumn do szerokosci - na telefonie wychodza dwie zamiast sztywnych trzech.
* ===================================================================== */
#content .sortGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 10px;
align-items: stretch;
}
#content .sortGrid .sortItem { display: none; } /* zabezpieczenie na wypadek zmieszania szablonow */
#content .sortTile {
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 10px;
border: 1px solid #e6e6e6;
border-radius: 3px;
background: #fff;
font-family: Arial, Helvetica, sans-serif;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
#content .sortTile:hover {
border-color: #cfd2dd;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
/* --- zdjecie: staly kadr, zeby kafelki nie skakaly --- */
#content .sortTile__media {
position: relative;
margin: 0 0 8px;
}
#content .sortTile__media > a {
display: block;
height: 130px;
overflow: hidden;
border-radius: 2px;
background: #f7f7f8;
border: 1px solid #ececec;
}
#content .sortTile__media > a > img {
display: block;
width: 100%;
height: 100%;
/* cover jak na liscie - kadr wypelniony, bez pustych pasow */
object-fit: cover;
border: 0;
}
/* --- ocena POD zdjeciem, nie na nim --- */
#content .sortTile__vote { min-height: 18px; margin: 0 0 4px; }
/* --- tytul: dokladnie dwie linie, lamane po wyrazach --- */
#content .sortTile__title { margin: 0 0 6px; }
#content .sortTile__title a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 13px;
font-weight: bold;
line-height: 1.35;
color: #222;
text-decoration: none;
overflow-wrap: break-word;
}
#content .sortTile__title a:hover { text-decoration: underline; }
#content .sortTile__ico:empty { display: none; }
#content .sortTile__ico { margin: 0 0 6px; }
/* Cena dosunieta do dolu kafelka: margin-top:auto zjada wolna przestrzen,
dzieki czemu ceny i przyciski stoja w rzedzie na tej samej wysokosci
niezaleznie od dlugosci tytulu. */
#content .sortTile__price {
margin-top: auto;
padding-top: 6px;
text-align: right;
}
/* W kafelku kwota stoi pod tytulem i konkuruje z nim o uwage - stad
mniejsza niz na liscie, ale i tak podniesiona z 22px. */
#content .sortTile__price .cena { font-size: 28px; }
#content .sortTile__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
}
/* glowny przycisk zajmuje cala szerokosc kafelka */
#content .sortTile__actions a:not(.itemIco),
#content .sortTile__actions button.download-button {
flex: 1 1 100%;
box-sizing: border-box;
text-align: center;
}
/* Sam powyzszy zapis NIE wystarcza. Przycisk glowny ("Download",
* "In den Einkaufswagen") jest wypisywany w opakowaniu:
*
* czyli elementem elastycznym jest ten
, a nie link - flex na linku
* nie ma na czym zadzialac i przycisk zostawal szerokosci swojego tekstu.
* Rozciagamy wiec opakowanie, a link w srodku dostaje pelna szerokosc.
*
* Ikony siedza w
- w kontenerze elastycznym float
* jest pomijany, wiec span zachowuje sie poprawnie sam z siebie; pilnujemy
* tylko, zeby sie nie kurczyl. */
#content .sortTile__actions > span {
flex: 0 0 auto;
}
#content .sortTile__actions > div {
flex: 1 1 100%;
min-width: 0;
}
#content .sortTile__actions > div > a {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
}
/*
po przycisku bylby w kontenerze elastycznym osobnym elementem */
#content .sortTile__actions > div > br {
display: none;
}
/* =====================================================================
* REGULY RESPONSYWNE - CELOWO NA KONCU PLIKU
* Viewport ma initial-scale=0.6, wiec telefon 390px renderuje uklad
* ~650px. Dlatego prog to 700px, nie 480px.
* ===================================================================== */
@media only screen and (max-width: 700px) {
/* Obrazek i tresc zostaja OBOK SIEBIE.
* Wczesniej kolumna tresci dostawala flex:1 1 100% i spadala pod
* miniature - przy duzej czcionce jedna pozycja zajmowala pol ekranu
* i lista wymagala mnostwa przewijania. */
/* Odstep boczny wiekszy niz na desktopie, bo liczy sie przez skale 0.6:
* 6px ukladu to na ekranie telefonu 3.6px - tresc praktycznie dotykala
* krawedzi. 14px daje okolo 8.4px, a cena i przycisk (ktore maja jeszcze
* wlasne 5px) stoja wtedy okolo 11px od brzegu. */
#content .sortItem {
gap: 10px;
padding: 10px 14px;
align-items: flex-start;
}
/* Zdjecie na telefonie.
*
* UWAGA na przelicznik: viewport ma initial-scale=0.6, wiec kazda wartosc
* w pikselach ukladu jest na ekranie telefonu o 40% MNIEJSZA. Poprzednie
* 140x104 to fizycznie okolo 84x62px - z modelu nie dalo sie nic odczytac,
* a to zdjecie jest tu najwazniejsza informacja o towarze.
* 200x150 daje na ekranie okolo 120x90px. */
#content .sortItem__media { width: 200px; max-width: 46%; }
/* kadr 16:10 do szerszej kolumny (200 / 1.6 = 125) */
#content .sortItem__media > a { height: 125px; }
/* Mniejsze miniatury: w kolumnie 140px cztery kwadraty po 38px
* spadaly do drugiego rzedu i pozycja listy rosla o cala linie.
* Po 30px mieszcza sie w jednym rzedzie i wysokosc pozycji zostaje. */
#content .sortItem__thumbs { gap: 3px; margin-top: 5px; }
/* szerokosc nadal dzielona po rowno - miniatury maja konczyc sie rowno
* z kadrem takze na telefonie; zmienia sie tylko wysokosc */
#content .sortItem__thumb { width: auto; height: 28px; }
#content .sortItem__body {
flex: 1 1 0;
min-width: 0;
gap: 2px 10px;
}
/* dane produktu ciasniej - to najdluzszy blok w pozycji. Ciasniej robi
tu INTERLINIA, nie rozmiar liter: na telefonie czytelnosc jest jeszcze
wazniejsza niz na pulpicie, wiec 13 px zostaje. */
#content .sortItem__meta {
flex: 1 1 100%;
font-size: 13px;
line-height: 1.45;
}
/* Cena we wlasnym wierszu (dane produktu zajmuja cala szerokosc), ale
* wyrownana do PRAWEJ - laduje wtedy tuz nad przyciskiem koszyka, ktory
* stoi przy prawej krawedzi. Przy wyrownaniu do lewej kwota uciekala na
* przeciwlegly koniec pozycji i gubila zwiazek z przyciskiem.
* Odstep od danych produktu - bez niego etykieta "Ihr Preis" kleila sie
* do ostatniej linii bloku z numerem i rozmiarem pliku. */
#content .sortItem__price {
flex: 1 1 100%;
margin-left: 0;
text-align: right;
margin-top: 8px;
}
#content .sortItem__price .cenaBox { text-align: right; }
/* Cena po tym samym przeliczniku 0.6: 23px ukladu to na ekranie okolo
* 14px, czyli mniej niz tekst opisu. Na liscie zakupowej kwota ma byc
* odczytywalna bez skupiania wzroku. 34px daje okolo 20px na ekranie. */
#content .sortItem__price .cena { font-size: 34px; }
#content .sortItem__price .cena__gr { font-size: 19px; }
#content .sortItem__price .cena__wal { font-size: 22px; }
#content .sortItem__price .cenaBox__etykieta { font-size: 13px; }
/* cena przekreslona i etykieta obnizki skaluja sie razem z kwota */
#content .sortItem__price .cenaStara { font-size: 16px; }
#content .sortItem__price .cenaBox__rabat { font-size: 14px; }
/* nota o MwSt zabiera cala linie przy kazdej pozycji */
#content .sortItem__price div[style*="font-size:9px"] { display: none; }
/* =================================================================
* CELE DOTYKOWE
*
* Przycisk koszyka mial 28px wysokosci. Viewport ma initial-scale=0.6,
* wiec 28px ukladu to okolo 17px na ekranie telefonu - grubo ponizej
* 44px, ktore przyjelo sie jako minimum dla palca. Trafienie wymagalo
* celowania, a to jest GLOWNY przycisk zakupowy na liscie.
* ================================================================= */
#content .sortItem__actions a:not(.itemIco),
#content .sortItem__actions button.download-button {
box-sizing: border-box;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 14px;
font-size: 14px;
line-height: 1.2;
}
#content .itemIco { width: 40px; height: 40px; }
#content .itemIco img { width: 20px; height: 20px; }
/* =================================================================
* TYTUL - najwyzej dwie linie
*
* Nazwy produktow potrafia miec ponad 100 znakow ("Les Wagons Couvert
* - Die gedeckten Gueterwagen - GABS 50 - SET 2 - OBB - ...") i zajmowaly
* cztery linie, spychajac cene i przycisk pod krawedz ekranu. Pelna nazwa
* zostaje w atrybucie title odnosnika i na karcie produktu.
* ================================================================= */
#content .sortItem__title a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* =================================================================
* MNIEJ DANYCH DRUGORZEDNYCH
*
* Na telefonie o zakupie decyduja zdjecie, nazwa, ocena, cena i wersja
* EEP. Numer katalogowy, data udostepnienia i rozmiar pliku zajmowaly
* trzy z osmiu linii pozycji, a sa potrzebne dopiero na karcie produktu.
* Po ich ukryciu na ekran wchodzi okolo pieciu pozycji zamiast trzech.
*
* Wiersze maja WLASNE KLASY, a nie numery porzadkowe: szablon dla
* artykulow darmowych nie zawiera wiersza z wersja EEP, wiec numeracja
* jest w nim przesunieta i :nth-child ukrywalby nie te dane.
* ================================================================= */
#content .sortItem__meta .mNr,
#content .sortItem__meta .mData,
#content .sortItem__meta .mPlik { display: none; }
/* Akcje pod calym blokiem, przycisk na pelna szerokosc.
*
* align-items:center jest tu konieczne: ikony siedza w , a przycisk
* w o innej wysokosci (przycisk ma min-height 44px na palec, ikony
* 40px). Bez wyrownania oba pudelka lezaly na roznej wysokosci - ikona
* koszyka wypadala o kilka pikseli nizej niz reszta rzedu. */
#content .sortItem__actions {
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 6px;
}
/* oba pudelka rzedu maja te sama wysokosc, wiec nic sie nie przesuwa */
#content .sortItem__actions > span,
#content .sortItem__actions > div {
display: flex;
align-items: center;
min-height: 44px;
}
#content .sortItem__actions a.button_style_5,
#content .sortItem__actions button.download-button {
flex: 1 1 auto;
min-width: 0;
text-align: center;
}
/* Ramka warunku zakupu ciasniej - na waskim ekranie zajmuje cala
* szerokosc pozycji i przy desktopowych odstepach zjadala tyle
* miejsca, co same przyciski. */
#content .sortItem .ramkaUwaga {
gap: 6px;
margin-bottom: 3px;
padding: 6px 8px;
font-size: 11px;
}
#content .sortItem .ramkaUwaga__ico { width: 18px; height: 18px; }
}
/* =====================================================================
* PRZYCISK POBIERANIA - ODROZNIONY OD KOSZYKA
*
* "Download" i "In den Einkaufswagen" to dwie rozne akcje, a wygladaly
* identycznie - ten sam szary przycisk button_style_5. Pobranie dostaje
* zielony akcent i strzalke, zeby dalo sie je rozroznic jednym spojrzeniem,
* takze na liscie pelnej patchy i aktualizacji, gdzie wszystkie pozycje
* maja cene 0,00 i tylko ten przycisk je rozniczkuje.
*
* Uchwytem jest przedrostek identyfikatora (id="downlButton_
") nadawany
* w products.inc.php - nie trzeba ruszac PHP.
*
* Zielen #2e7d32 jest juz uzywana w sklepie (okienko odstapienia), wiec nie
* wprowadzamy nowego koloru do palety.
*
* Ikona jest wpisana jako data: URI - jeden plik mniej do pobrania i nie ma
* jak sie rozjechac ze sciezka. */
/* Dwa rodzaje pobrania, dwa rozne uchwyty:
* - kupione/patche: (products.inc.php ~528)
* - gratisy: BEZ id (~776)
* Gratis nie ma identyfikatora, wiec lapiemy go po adresie - jest stabilny
* i nie trzeba ruszac PHP. */
#content a[id^="downlButton_"],
#content a[href*="dskript_aktion_gratis"] {
background-color: #2e7d32 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11'/%3E%3Cpath d='M7.5 10l4.5 4.5 4.5-4.5'/%3E%3Cpath d='M4.5 20h15'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 12px center !important;
background-size: 16px 16px !important;
padding-left: 34px !important;
border-color: #2e7d32 !important;
}
#content a[id^="downlButton_"]:hover,
#content a[href*="dskript_aktion_gratis"]:hover {
background-color: #256428 !important;
border-color: #256428 !important;
}
/* Znacznik zdjecia, ktore nie miesci sie w pasku miniatur pozycji, ale ma
byc dostepne w okienku galerii. Nie pobiera zadnego obrazka - niesie sam
adres w data-src. */
.sortItem__thumbUkryty { display: none; }
/* =====================================================================
* PROPORCJE KADRU ZDJECIA: 16:10
*
* Wysokosci w px wyzej (119 / 125 / 130) sa tylko zapasem dla starych
* przegladarek i zgadzaja sie z proporcja przy PELNEJ szerokosci kolumny.
* Kolumna bywa jednak wezsza (max-width w procentach) - wtedy sztywna
* wysokosc psula proporcje. aspect-ratio trzyma 16:10 przy kazdej
* szerokosci. Blok stoi na KONCU pliku, zeby height:auto wygralo takze
* z wysokoscia z bloku mobilnego (rowna specyficznosc - decyduje
* kolejnosc). */
@supports (aspect-ratio: 16 / 10) {
#content .sortItem__media > a,
#content .sortTile__media > a {
height: auto;
aspect-ratio: 16 / 10;
}
}