/* Style bloga i opisow kategorii Zolza. Zwykly CSS, poza kompilatorem LESS Shopera. Wgrac do /upload/blog.css */

/* linki w opisach kategorii i wpisach (zamiast style="color:#ff99cc" w kazdym linku) */
.categorydesc p a, .categorydesc li a, .article-content p a, .article-content li a, .article-content td a { color: #d82261; font-weight: 600; }
.categorydesc .subcategories-box li a, .categorydesc .squares h3 a { color: inherit; font-weight: inherit; }

/* wpis: okruszki, podpis, naglowek bez odstepu, bez zdjecia-banera */
.shop_news .article-breadcrumbs { padding: 10px 17px 0; }
.shop_news .article-breadcrumbs ol { list-style: none; margin: 0 0 2px; padding: 0; font-size: 12px; color: #b0b0b0; }
.shop_news .article-breadcrumbs li { display: inline; }
.shop_news .article-breadcrumbs li + li:before { content: "/"; margin: 0 5px; color: #d8d8d8; }
.shop_news .article-breadcrumbs a { color: inherit; }
.shop_news .article-header { padding-top: 0; }
.shop_news .article-header .px1 { display: none; }
.shop_news h1.article-name { margin-top: 6px; padding-top: 0; }
.shop_news .article-meta { font-size: 13px; color: #888; margin: 0 0 14px; }
.shop_news .article-meta a { color: inherit; }
.shop_news .article-meta-sep { margin: 0 6px; }
.shop_news .article-content > .article-image { display: none; }

/* lista wpisow */
.blog-intro { text-align: center; max-width: 720px; margin: 10px auto 30px; }
.blog-intro .blog-title { margin-bottom: 8px; }

/* tresc wpisu: sekcje */
.article-content h2 { margin-top: 40px; padding-bottom: 6px; border-bottom: 2px solid #FDB1D5; display: inline-block; }
.article-content ol li, .article-content ul li { margin-bottom: 6px; }

/* "W skrocie" */
.w-skrocie { background: #FFF6F7; border: 2px solid #FDB1D5; border-radius: 10px; padding: 16px 20px; margin: 22px 0; }
.w-skrocie-tytul { font-weight: 700; margin: 0 0 8px; font-size: 1.1em; }
.w-skrocie ul { margin: 0; padding-left: 20px; }

/* tabela podsumowania */
.top-tabela { overflow-x: auto; margin: 10px 0 30px; }
.top-tabela table { width: 100%; border-collapse: collapse; font-size: 15px; }
.top-tabela th { background: #FFF6F7; text-align: left; padding: 10px; border-bottom: 2px solid #FDB1D5; }
.top-tabela td { padding: 10px; border-bottom: 1px solid #f1e3e7; vertical-align: top; }

/* pozycja TOP: karta ze zdjeciem po lewej */
.top-pozycja { background: #fff; border: 2px solid #FDB1D5; border-radius: 10px; padding: 20px 24px 24px; margin: 28px 0; overflow: hidden; }
.top-pozycja h2 { margin-top: 0; border-bottom: 0; display: block; }
.top-pozycja-img { float: left; width: 200px; margin: 4px 22px 10px 0; }
.top-pozycja-img img { width: 100%; height: auto; border-radius: 8px; }
.top-pozycja ul { padding-left: 20px; }
.top-pozycja-cena { margin: 10px 0 14px; }
.article-content a.zestaw-cta, .categorydesc a.zestaw-cta, .article-content a.produkt-karta-cta { display: inline-block; background: #d82261; border: 1px solid #d82261; color: #fff; padding: 10px 25px; font-size: 15px; font-weight: 600; text-decoration: none; transition: opacity .2s ease; }
.article-content a.zestaw-cta:hover, .categorydesc a.zestaw-cta:hover, .article-content a.produkt-karta-cta:hover { opacity: .85; color: #fff; }

/* karta produktu w tresci */
.produkt-karta { display: flex; gap: 20px; align-items: center; background: #FFF6F7; border: 2px solid #FDB1D5; border-radius: 10px; padding: 16px; margin: 22px 0; }
.produkt-karta-img img { width: 150px; height: auto; border-radius: 8px; }
.produkt-karta-nazwa { font-weight: 700; margin: 0 0 2px; }
.produkt-karta-haslo { font-style: italic; margin: 0 0 4px; }
.produkt-karta-opis { margin: 0 0 4px; }
.produkt-karta-cena { font-weight: 700; margin: 0 0 8px; }

/* FAQ we wpisie: te same style co w kategoriach (.faq jest juz w user.css), tylko mniejszy odstep */
.article-content .faq { margin-top: 36px; }

/* podpis */
.autor-box { border-top: 1px solid #eee; margin-top: 28px; padding-top: 12px; font-size: 14px; }

@media (max-width: 600px) {
  .top-pozycja { padding: 16px; }
  .top-pozycja-img { float: none; width: 100%; max-width: 260px; margin: 0 auto 12px; }
  .produkt-karta { flex-direction: column; align-items: flex-start; }
  .produkt-karta-img img { width: 100%; }
}