/* =========================================================
UNIWERSALNY STYL OPISÓW PRODUKTÓW
Klasa nadrzędna: .product-description
Cel: niezależnie co przyjdzie w opisie (obcy HTML, inline
style, stare tagi <font>, <b>, <center> itp.), wszystko ma
wyglądać spójnie z resztą sklepu.
========================================================= */
.product-description {
font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
font-size: 16px !important;
line-height: 1.6 !important;
color: #222222 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.product-description ::selection {
background: #d6e6ff;
color: #111111;
}
/* Resetujemy WSZYSTKO w środku do wspólnej bazy,
żeby np. inline font-size="30" czy color="red" nie przebiły stylu */
.product-description * {
font-family: inherit !important;
color: inherit !important;
background: transparent !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
/* ---------- NAGŁÓWKI ---------- */
.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5,
.product-description h6 {
font-family: inherit !important;
font-weight: 700 !important;
color: #111111 !important;
line-height: 1.3 !important;
margin: 1.4em 0 0.6em !important;
}
.product-description h1 { font-size: 26px !important; }
.product-description h2 {
font-size: 22px !important;
padding-bottom: 0.3em !important;
border-bottom: 2px solid #e8e8e8 !important;
}
.product-description h3 { font-size: 19px !important; }
.product-description h4,
.product-description h5,
.product-description h6 { font-size: 17px !important; }
/* ---------- PARAGRAFY ---------- */
.product-description p {
font-size: 16px !important;
line-height: 1.6 !important;
margin: 0 0 1em !important;
color: #222222 !important;
}
/* ---------- POGRUBIENIE / KURSYWA / PODKREŚLENIE ---------- */
.product-description b,
.product-description strong {
font-weight: 700 !important;
color: inherit !important;
}
.product-description i,
.product-description em {
font-style: italic !important;
}
.product-description u {
text-decoration: underline !important;
}
/* Stare/śmieciowe tagi z importowanych opisów */
.product-description font,
.product-description center {
font: inherit !important;
text-align: inherit !important;
}
/* ---------- LISTY ---------- */
.product-description ul,
.product-description ol {
margin: 0 0 1em 0 !important;
padding-left: 1.4em !important;
}
.product-description ul { list-style: disc !important; }
.product-description ol { list-style: decimal !important; }
.product-description li {
margin: 0 0 0.4em !important;
line-height: 1.6 !important;
}
/* ---------- LISTY TYPU "ETYKIETA: WARTOŚĆ" (np. dane techniczne) ----------
Wzorzec: <li><span><b>Etykieta:</b></span><span>Wartość</span></li>
Wykrywany po tym, że <li> ma co najmniej dwa sąsiadujące <span>.
Zwykłe listy punktowane (pojedynczy tekst w <li>) zostają bez zmian. */
.product-description li:has(> span + span) {
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
column-gap: 8px !important;
list-style: none !important;
padding: 8px 10px !important;
margin: 0 !important;
border-bottom: 1px solid #eeeeee !important;
border-radius: 6px !important;
transition: background-color 0.15s ease !important;
}
.product-description li:has(> span + span):hover {
background: #f7f9fc !important;
}
.product-description li:has(> span + span):last-child {
border-bottom: none !important;
}
/* pierwszy span w parze = etykieta */
.product-description li:has(> span + span) > span:first-child {
font-weight: 700 !important;
color: #333333 !important;
flex: 0 0 35% !important;
box-sizing: border-box !important;
}
/* drugi span = wartość */
.product-description li:has(> span + span) > span:last-child {
color: #222222 !important;
flex: 1 1 60% !important;
}
/* rodzic takich <li> traci wcięcie i padding listy - kolumny same się równają */
.product-description ul:has(> li > span + span),
.product-description ol:has(> li > span + span) {
padding-left: 0 !important;
}
/* na wąskich ekranach etykieta i wartość układają się jedna pod drugą,
zamiast ściskać się w dwie wąskie kolumny */
@media (max-width: 480px) {
.product-description li:has(> span + span) {
flex-direction: column !important;
align-items: flex-start !important;
row-gap: 2px !important;
}
.product-description li:has(> span + span) > span:first-child,
.product-description li:has(> span + span) > span:last-child {
flex: 1 1 100% !important;
}
}
/* ---------- LINKI ----------
Linki są klikalne i wyglądają spójnie z resztą sklepu.
Bezpieczne otwieranie w nowej karcie (target/rel) ustawia
skrypt normalize-description.js - CSS samo tego nie zrobi. */
.product-description a {
color: #1a6cff !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
font-weight: inherit !important;
cursor: pointer !important;
display: inline !important;
margin: 0 !important;
padding: 0 !important;
transition: color 0.15s ease !important;
}
.product-description a:hover {
color: #0d4fbf !important;
}
/* Obszar klikalny linku = tylko jego tekst.
Jeśli w importowanym HTML link zawiera w środku element blokowy
(<div>, <p>, <span style="display:block">), ten blok normalnie
rozciąga obszar kliknięcia na całą szerokość/wiersz. Wymuszamy
"inline" na WSZYSTKICH potomkach linku, żeby link nigdy nie
"rozlewał się" na sąsiednie fragmenty opisu. */
.product-description a * {
display: inline !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* ---------- TABELE (częste w opisach z importu) ---------- */
.product-description table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
margin: 1.2em 0 !important;
font-size: 15px !important;
border-radius: 10px !important;
overflow: hidden !important;
border: 1px solid #e5e5e5 !important;
}
.product-description th,
.product-description td {
border: none !important;
border-bottom: 1px solid #eeeeee !important;
padding: 10px 14px !important;
text-align: left !important;
vertical-align: top !important;
}
.product-description tr:last-child td {
border-bottom: none !important;
}
.product-description th {
background: #f5f5f5 !important;
font-weight: 700 !important;
}
.product-description tbody tr:nth-child(even) {
background: #fafafa !important;
}
.product-description tbody tr {
transition: background-color 0.15s ease !important;
}
.product-description tbody tr:hover {
background: #f0f5ff !important;
}
/* ---------- RAMKI / BOXY Z IMPORTU ----------
Wzorzec częsty w opisach: element z inline border-style/border-width
(np. wyróżniona ramka z linkiem do strony producenta). Zamiast
surowej, cienkiej ramki - efektowna "karta" z zaokrągleniem,
delikatnym cieniem i tłem. */
.product-description [style*="border-style"],
.product-description [style*="border-width"],
.product-description [style*="border:"] {
border: 1px solid #e2e2e2 !important;
border-radius: 12px !important;
padding: 16px 20px !important;
background: #fafbfc !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
width: auto !important;
max-width: 100% !important;
}
/* ---------- CYTATY ---------- */
.product-description blockquote {
position: relative !important;
margin: 1.2em 0 !important;
padding: 0.8em 1.2em 0.8em 2.4em !important;
border-left: 3px solid #cccccc !important;
background: #fafafa !important;
border-radius: 0 8px 8px 0 !important;
color: #555555 !important;
font-style: italic !important;
}
.product-description blockquote::before {
content: "\201C" !important;
position: absolute !important;
left: 0.5em !important;
top: 0.1em !important;
font-size: 1.8em !important;
font-style: normal !important;
color: #cccccc !important;
line-height: 1 !important;
}
/* ---------- OBRAZKI ---------- */
.product-description img {
max-width: 100% !important;
height: auto !important;
display: block !important;
margin: 1em 0 !important;
border-radius: 8px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.product-description img:hover {
transform: scale(1.01) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}
/* ---------- LINIE / ODSTĘPY ---------- */
.product-description hr {
border: none !important;
height: 1px !important;
background: linear-gradient(
to right,
transparent,
#d5d5d5,
transparent
) !important;
margin: 1.8em 0 !important;
}
.product-description br {
line-height: inherit !important;
}
/* ---------- SPAN / DIV (nośniki inline-stylów z importu) ---------- */
.product-description span,
.product-description div {
font: inherit !important;
color: inherit !important;
display: inline !important;
}
/* Ostatni element bez marginesu na dole, żeby nie było
dziury pod opisem */
.product-description > *:last-child {
margin-bottom: 0 !important;
}