/* ------------------------------------------------------------------
   Szekla4x4 — style treści artykułów bloga (klasy s4x4-*) v3
   Miejsce docelowe: theme bloga seo-blog-2026 (plik ładowany na stronie
   wpisu i listy). Do czasu przeniesienia działa też dopisany na końcu
   /themes/OTP128_01/assets/css/custom.css.
   Kolejność przy zmianie: zapis pliku -> wyczyszczenie cache PrestaShop.
   Zmiany względem v2: skala nagłówków, odstępy h3, kolor linków w treści,
   przewijanie wszystkich tabel na telefonie, pełny zestaw słupków Ref,
   działanie leadu i opisów także na liście wpisów.
   ------------------------------------------------------------------ */

/* --- zakres i zmienne --------------------------------------------- */
#module-pshowblog-entry,
#module-pshowblog-blog{
  --s4x4-red:#c8102e;
  --s4x4-ink:#1a1a1a;
  --s4x4-muted:#555;
  --s4x4-line:#e5e5e5;
  --s4x4-soft:#f5f5f5;
  --s4x4-zebra:#fafafa;
}

/* --- typografia treści --------------------------------------------- */
#module-pshowblog-entry .s4x4-lead,
#module-pshowblog-blog .s4x4-lead{font-size:1.12em;line-height:1.6;color:var(--s4x4-ink)}
#module-pshowblog-entry .s4x4-h2{font-size:1.55em;line-height:1.25;color:var(--s4x4-ink);border-left:5px solid var(--s4x4-red);padding-left:14px;margin:40px 0 14px}
#module-pshowblog-entry .s4x4-h2:first-child{margin-top:8px}
#module-pshowblog-entry [itemprop="description"] h3,
#module-pshowblog-entry .s4x4-art h3{font-size:1.18em;line-height:1.3;color:var(--s4x4-ink);margin:28px 0 8px}
#module-pshowblog-entry [itemprop="description"] p,
#module-pshowblog-entry .s4x4-art p{line-height:1.7}
#module-pshowblog-entry [itemprop="description"] p a,
#module-pshowblog-entry .s4x4-art p a,
#module-pshowblog-entry table.s4x4-t a,
#module-pshowblog-entry table.s4x4-l a{color:var(--s4x4-red)}
#module-pshowblog-entry [itemprop="description"] p a:hover,
#module-pshowblog-entry .s4x4-art p a:hover{text-decoration:underline}
#module-pshowblog-entry .s4x4-small,
#module-pshowblog-blog .s4x4-small{font-size:.9em;color:var(--s4x4-muted)}
#module-pshowblog-entry .s4x4-meta,
#module-pshowblog-blog .s4x4-meta{color:var(--s4x4-muted);font-size:.93em}
#module-pshowblog-entry .s4x4-red{color:var(--s4x4-red)}

/* --- bloki ---------------------------------------------------------- */
#module-pshowblog-entry .s4x4-toc,
#module-pshowblog-entry .s4x4-box{background:var(--s4x4-soft);border-left:4px solid var(--s4x4-red);padding:16px 20px;margin:24px 0}
#module-pshowblog-entry .s4x4-toc-t{margin:0 0 8px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.85em}
#module-pshowblog-entry .s4x4-toc ol{margin:0;padding-left:20px;line-height:1.8}
#module-pshowblog-entry .s4x4-box p:last-child,#module-pshowblog-entry .s4x4-toc p:last-child{margin-bottom:0}
#module-pshowblog-entry .s4x4-box ol{margin:0 0 8px;padding-left:20px;line-height:1.7}
#module-pshowblog-entry .s4x4-quote{margin:24px 0;padding:14px 20px;border-left:4px solid var(--s4x4-ink);background:#fafafa}
#module-pshowblog-entry .s4x4-quote p{margin:0}
#module-pshowblog-entry .s4x4-cols{columns:2 260px;column-gap:32px;line-height:1.8;padding-left:22px}
#module-pshowblog-entry .s4x4-check{line-height:1.8;padding-left:22px}
#module-pshowblog-entry .s4x4-check li{list-style:disc}

/* --- tabele --------------------------------------------------------- */
#module-pshowblog-entry table.s4x4-t,
#module-pshowblog-entry table.s4x4-l,
#module-pshowblog-entry table.s4x4-ref{margin:20px 0 28px}
#module-pshowblog-entry table.s4x4-t th{background:var(--s4x4-ink);color:#fff;border-color:var(--s4x4-ink);font-weight:700}
#module-pshowblog-entry table.s4x4-t tbody tr:nth-child(even) td{background:var(--s4x4-zebra)}
#module-pshowblog-entry table.s4x4-t td:first-child,#module-pshowblog-entry table.s4x4-l td:first-child{width:96px}
#module-pshowblog-entry table.s4x4-l td{border:0;border-bottom:1px solid var(--s4x4-line);padding:10px 12px 10px 0}
#module-pshowblog-entry table.s4x4-l tr:first-child td{border-top:1px solid var(--s4x4-line)}
#module-pshowblog-entry img.s4x4-th{display:block;width:80px!important;height:80px!important;max-width:none!important;border:1px solid var(--s4x4-line);border-radius:4px;background:#fff;object-fit:contain}

/* --- wykres słupkowy (np. suma Ref) --------------------------------- */
#module-pshowblog-entry table.s4x4-ref td{border:0;padding:6px 10px 6px 0;vertical-align:middle}
#module-pshowblog-entry table.s4x4-ref td.s4x4-bar{width:45%;padding:0;background-color:transparent!important;background-repeat:no-repeat!important;background-position:left center!important;background-size:100% 12px!important;background-image:linear-gradient(90deg,var(--s4x4-barc,var(--s4x4-ink)) var(--s4x4-barw,0%),#ececec var(--s4x4-barw,0%))!important}
#module-pshowblog-entry td.s4x4-b5{--s4x4-barw:5%}
#module-pshowblog-entry td.s4x4-b10{--s4x4-barw:10%}
#module-pshowblog-entry td.s4x4-b15{--s4x4-barw:15%}
#module-pshowblog-entry td.s4x4-b20{--s4x4-barw:20%}
#module-pshowblog-entry td.s4x4-b25{--s4x4-barw:25%}
#module-pshowblog-entry td.s4x4-b30{--s4x4-barw:30%}
#module-pshowblog-entry td.s4x4-b35{--s4x4-barw:35%}
#module-pshowblog-entry td.s4x4-b40{--s4x4-barw:40%}
#module-pshowblog-entry td.s4x4-b45{--s4x4-barw:45%}
#module-pshowblog-entry td.s4x4-b50{--s4x4-barw:50%}
#module-pshowblog-entry td.s4x4-b55{--s4x4-barw:55%}
#module-pshowblog-entry td.s4x4-b60{--s4x4-barw:60%}
#module-pshowblog-entry td.s4x4-b65{--s4x4-barw:65%}
#module-pshowblog-entry td.s4x4-b70{--s4x4-barw:70%}
#module-pshowblog-entry td.s4x4-b75{--s4x4-barw:75%}
#module-pshowblog-entry td.s4x4-b80{--s4x4-barw:80%}
#module-pshowblog-entry td.s4x4-b85{--s4x4-barw:85%}
#module-pshowblog-entry td.s4x4-b90{--s4x4-barw:90%}
#module-pshowblog-entry td.s4x4-b95{--s4x4-barw:95%}
#module-pshowblog-entry td.s4x4-b100{--s4x4-barw:100%}
#module-pshowblog-entry td.s4x4-bar-r{--s4x4-barc:var(--s4x4-red)}
/* zgodność wstecz z wpisami 130/131 */
#module-pshowblog-entry td.s4x4-b100r{--s4x4-barw:100%;--s4x4-barc:var(--s4x4-red)}

/* --- zdjęcia i podpisy ---------------------------------------------- */
#module-pshowblog-entry figure img{max-width:100%!important;height:auto!important}
#module-pshowblog-entry [itemprop="description"] figcaption,
#module-pshowblog-entry .s4x4-art figcaption,
#module-pshowblog-entry .pse-figure figcaption{font-size:.9em;color:#666;margin-top:8px;text-align:center}

/* --- karty produktów (Product Block) -------------------------------- */
#module-pshowblog-entry .s4x4-cards-t{margin:28px 0 12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.85em;color:var(--s4x4-muted)}
#module-pshowblog-entry .s4x4-cards [data-product-id]{display:block;height:100%;border:1px solid var(--s4x4-line);border-radius:6px;padding:12px;text-align:center;background:#fff;color:inherit;text-decoration:none}
#module-pshowblog-entry .s4x4-cards [data-product-id]:hover{border-color:var(--s4x4-red)}
#module-pshowblog-entry .s4x4-cards b{color:var(--s4x4-ink)}
#module-pshowblog-entry .s4x4-cards .pse-figure{margin:0 0 8px}
#module-pshowblog-entry .s4x4-cards img{max-height:170px;width:auto!important;margin:0 auto}
#module-pshowblog-entry .s4x4-cards p{margin:0 0 8px;font-size:.92em;line-height:1.35}
#module-pshowblog-entry .s4x4-cards .flex-btn-n-price{display:flex;flex-direction:column-reverse;align-items:center;gap:8px;margin:0}
#module-pshowblog-entry .s4x4-cards .btn{width:100%}

/* --- telefon -------------------------------------------------------- */
@media (max-width:767px){
  #module-pshowblog-entry table.s4x4-t,
  #module-pshowblog-entry table.s4x4-l,
  #module-pshowblog-entry table.s4x4-ref{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #module-pshowblog-entry .s4x4-h2{font-size:1.35em;margin-top:32px}
  #module-pshowblog-entry .s4x4-cols{columns:1}
}
@media (max-width:640px){
  #module-pshowblog-entry .s4x4-cards{grid-row-gap:10px}
  #module-pshowblog-entry .s4x4-cards [data-product-id]{display:grid;grid-template-columns:84px 1fr;column-gap:12px;align-items:center;text-align:left;padding:10px}
  #module-pshowblog-entry .s4x4-cards .pse-figure{grid-row:span 2;margin:0}
  #module-pshowblog-entry .s4x4-cards img{max-height:84px}
  #module-pshowblog-entry .s4x4-cards p{margin:0 0 6px}
  #module-pshowblog-entry .s4x4-cards .flex-btn-n-price{align-items:flex-start;gap:6px}
  #module-pshowblog-entry .s4x4-cards .btn{width:auto;padding:6px 14px;font-size:.85em}
}