/* =============================================================================
ds_blog — front
-----------------------------------------------------------------------------
Reguła: blog ma wyglądać jak reszta motywu, nie jak wtyczka doklejona z boku.
Dlatego kolory, promienie i cienie bierzemy z custom properties Bootstrapa
(hummingbird = BS5, classic 1.7.x = BS4 bez tych zmiennych) i KAŻDA ma
fallback — na classic po prostu wchodzi wartość zapasowa.
Wysokości/odstępy w rem, żeby skalowały się z typografią motywu.
========================================================================== */
/* Zmienne na :root, nie na .ds-blog — te same karty renderują się też poza
kontenerem bloga (karuzela na home, widżet w kolumnie, powiązane wpisy pod
produktem) i tam musiałyby lecieć bez wartości. */
:root{
--ds-blog-border: var(--bs-border-color, #e3e3e3);
--ds-blog-muted: var(--bs-secondary-color, #6c757d);
--ds-blog-surface: var(--bs-body-bg, #fff);
--ds-blog-surface-alt: var(--bs-tertiary-bg, #f7f7f9);
--ds-blog-radius: var(--bs-border-radius, .5rem);
--ds-blog-gap: 1.5rem;
}
/* Odstęp pod całą sekcją bloga. Motyw stawia zaraz za `page_content` kolejne
hooki (baner z displayFooterBefore, newsletter) i bez tego formularz komentarza
dokleja się do banera. */
.ds-blog{margin-block-end:3rem}
/* --- Nagłówek sekcji (listing, kategoria, tag, autor, szukajka) ------------- */
.ds-blog__header{margin:0 0 2rem}
.ds-blog__title{margin:0 0 .5rem;line-height:1.2}
.ds-blog__description{max-width:46rem;color:var(--ds-blog-muted);margin:0}
.ds-blog__count{margin:.25rem 0 0;font-size:.875rem;color:var(--ds-blog-muted)}
.ds-blog__empty{padding:2rem;text-align:center;color:var(--ds-blog-muted);
border:1px dashed var(--ds-blog-border);border-radius:var(--ds-blog-radius)}
/* --- Layout listingu: treść + kolumna boczna ------------------------------- */
.ds-blog__layout{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:992px){
.ds-blog__layout{grid-template-columns:minmax(0,1fr) 17rem;gap:2.5rem}
}
/* --- Siatka kart ----------------------------------------------------------- */
.ds-blog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
gap:var(--ds-blog-gap);margin:0}
.ds-blog-card{display:flex;flex-direction:column;height:100%;overflow:hidden;
background:var(--ds-blog-surface);border:1px solid var(--ds-blog-border);
border-radius:var(--ds-blog-radius);transition:box-shadow .2s ease,transform .2s ease}
.ds-blog-card:hover{box-shadow:0 .5rem 1.5rem rgba(0,0,0,.08);transform:translateY(-2px)}
.ds-blog-card__image{display:block;overflow:hidden}
/* width/height w ![]()
+ aspect-ratio rezerwują miejsce: zero CLS */
.ds-blog-card__image img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.ds-blog-card__body{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;flex:1 1 auto}
.ds-blog-card__title{margin:0;font-size:1.0625rem;line-height:1.35;font-weight:600}
.ds-blog-card__title a{color:inherit;text-decoration:none}
.ds-blog-card__title a:hover{text-decoration:underline}
.ds-blog-card__excerpt{margin:0;font-size:.9375rem;line-height:1.55;color:var(--ds-blog-muted)}
.ds-blog-card__more{margin-top:auto;align-self:flex-start;font-weight:600;font-size:.9375rem}
/* --- Etykieta kategorii ---------------------------------------------------- */
.ds-blog-eyebrow{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;text-decoration:none;color:var(--bs-primary,#2fb5d2)}
.ds-blog-eyebrow:hover{text-decoration:underline}
/* --- Metryczka (autor · data · czas czytania) ------------------------------ */
.ds-blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
margin:0;font-size:.8125rem;line-height:1.4;color:var(--ds-blog-muted)}
/* Separator doklejony do elementu POPRZEDZAJĄCEGO (::after, nie ::before):
przy zawijaniu kropka zostaje na końcu linii, zamiast otwierać następną. */
.ds-blog-meta > *:not(:last-child)::after{content:"·";margin-inline-start:.5rem;opacity:.6}
.ds-blog-meta a{color:inherit;text-decoration:none}
.ds-blog-meta a:hover{text-decoration:underline}
/* =============================================================================
Pojedynczy wpis
Kolumna o czytelnej szerokości (ok. 70 znaków) wyśrodkowana w kontenerze
motywu — bez tego tekst rozjeżdża się na całą szerokość i klei do zdjęcia.
========================================================================== */
.ds-blog-post{max-width:48rem;margin-inline:auto}
.ds-blog-post__header{margin:0 0 1.75rem}
.ds-blog-post__title{margin:.5rem 0 1rem;line-height:1.2}
.ds-blog-post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
padding-block:.75rem;border-block:1px solid var(--ds-blog-border);
font-size:.875rem;color:var(--ds-blog-muted)}
.ds-blog-post__meta-avatar{width:2rem;height:2rem;border-radius:50%;object-fit:cover;flex:0 0 auto}
.ds-blog-post__meta-author{font-weight:600;color:var(--bs-body-color,#232323);text-decoration:none}
.ds-blog-post__meta-author:hover{text-decoration:underline}
.ds-blog-post__meta-sep{opacity:.5}
.ds-blog-post__cover{display:block;width:100%;height:auto;margin:0 0 1.75rem;
border-radius:var(--ds-blog-radius);object-fit:cover}
.ds-blog-post__lead{margin:0 0 1.5rem;font-size:1.125rem;line-height:1.6;font-weight:500}
/* Treść: rytm pionowy wewnątrz artykułu ustawiamy raz, na kontenerze */
.ds-blog-post__content,
.ds-blog-post__content2{font-size:1rem;line-height:1.7}
.ds-blog-post__content > * + *,
.ds-blog-post__content2 > * + *{margin-block-start:1.15rem}
.ds-blog-post__content h2,
.ds-blog-post__content2 h2{margin-block-start:2.25rem;font-size:1.5rem;line-height:1.3}
.ds-blog-post__content h3,
.ds-blog-post__content2 h3{margin-block-start:1.75rem;font-size:1.25rem;line-height:1.35}
.ds-blog-post__content img,
.ds-blog-post__content2 img{max-width:100%;height:auto;border-radius:var(--ds-blog-radius)}
.ds-blog-post__content blockquote,
.ds-blog-post__content2 blockquote{margin-inline:0;padding:.25rem 0 .25rem 1.25rem;
border-inline-start:3px solid var(--bs-primary,#2fb5d2);font-style:italic;color:var(--ds-blog-muted)}
.ds-blog-post__content ul,.ds-blog-post__content ol,
.ds-blog-post__content2 ul,.ds-blog-post__content2 ol{padding-inline-start:1.25rem}
.ds-blog-post__content li + li,
.ds-blog-post__content2 li + li{margin-block-start:.35rem}
.ds-blog-post__content table,
.ds-blog-post__content2 table{width:100%;border-collapse:collapse}
.ds-blog-post__content td,.ds-blog-post__content th,
.ds-blog-post__content2 td,.ds-blog-post__content2 th{padding:.5rem .75rem;border:1px solid var(--ds-blog-border)}
/* --- Spis treści ----------------------------------------------------------- */
.ds-blog-toc{margin:0 0 1.75rem;padding:1rem 1.25rem;background:var(--ds-blog-surface-alt);
border:1px solid var(--ds-blog-border);border-radius:var(--ds-blog-radius)}
.ds-blog-toc__title{display:block;margin:0 0 .5rem;font-size:.8125rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;color:var(--ds-blog-muted)}
/* Spis zagnieżdżony wg poziomu nagłówka (DsBlogToc): numeracja 1 / 1.1 / 1.1.1 z liczników,
każdy poziom wcięty i mniejszy - od razu widać, co jest podrozdziałem. */
.ds-blog-toc ol{margin:0;padding:0;list-style:none;counter-reset:ds-toc}
.ds-blog-toc li{counter-increment:ds-toc;margin-block-start:.35rem}
.ds-blog-toc li::before{content:counters(ds-toc,".") ". ";color:var(--ds-blog-muted);font-variant-numeric:tabular-nums}
.ds-blog-toc .ds-blog-toc-sublist{padding-inline-start:1.25rem;font-size:.9375em}
.ds-blog-toc .ds-blog-toc-item--d1{font-weight:600}
.ds-blog-toc .ds-blog-toc-item--d1 .ds-blog-toc-item{font-weight:400}
/* --- Powiązane produkty pod wpisem (karuzela) -------------------------------
Ten sam mechanizm co karuzela wpisów na home: overflow + scroll-snap w CSS,
JS dokłada tylko strzałki. Wpis podpięty pod całą kategorię potrafi wyciągnąć
kilkanaście produktów — w siatce rozpychałyby stronę na kilka ekranów. */
.ds-blog-crosssell{margin-block-start:2.5rem;padding-block-start:2rem;border-block-start:1px solid var(--ds-blog-border)}
.ds-blog-crosssell__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-block-end:1.25rem}
.ds-blog-crosssell__title{margin:0;font-size:1.25rem}
.ds-blog-crosssell__nav{display:flex;gap:.5rem;flex:0 0 auto}
.ds-blog-crosssell__arrow{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;
font-size:1.25rem;line-height:1;cursor:pointer;color:inherit;background:var(--ds-blog-surface);
border:1px solid var(--ds-blog-border);border-radius:50%}
.ds-blog-crosssell__arrow:hover{background:var(--ds-blog-surface-alt)}
.ds-blog-crosssell__arrow[disabled]{opacity:.35;cursor:default}
.ds-blog-crosssell__track{display:flex;gap:1rem;margin:0;padding:0 2px 2px;list-style:none;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ds-blog-crosssell__track::-webkit-scrollbar{display:none}
.ds-blog-crosssell__carousel--static .ds-blog-crosssell__track{overflow-x:visible}
.ds-blog-crosssell__item{scroll-snap-align:start;display:flex;
flex:0 0 calc((100% - (var(--ds-blog-prod-per-row) - 1) * 1rem) / var(--ds-blog-prod-per-row))}
@media (max-width:767px){
.ds-blog-crosssell__item{flex-basis:calc((100% - 1rem) / 2)}
.ds-blog-crosssell__nav{display:none} /* na telefonie wystarczy swipe */
}
@media (prefers-reduced-motion:reduce){
.ds-blog-crosssell__track{scroll-behavior:auto}
}
.ds-blog-product-card{display:flex;flex-direction:column;gap:.5rem;width:100%;padding:1rem;text-align:center;
background:var(--ds-blog-surface);border:1px solid var(--ds-blog-border);border-radius:var(--ds-blog-radius)}
.ds-blog-product-card__image{display:block}
.ds-blog-product-card img{width:100%;max-width:8rem;height:auto;margin-inline:auto;display:block}
.ds-blog-product-card__body{display:flex;flex-direction:column;gap:.375rem;flex:1 1 auto}
.ds-blog-product-card__name{font-size:.875rem;line-height:1.4;color:inherit;text-decoration:none}
.ds-blog-product-card__name:hover{text-decoration:underline}
.ds-blog-product-card__price{margin-block-start:auto;font-weight:700}
/* Karta wstawiona w tekst skrótowcem [ds_product] stoi samotnie, a nie w siatce —
pionowy układ rozciąga ją wtedy na całą szerokość kolumny i zostaje dziura wokół
małego obrazka. Samotna karta idzie więc poziomo: obraz z lewej, treść z prawej. */
.ds-blog-post__content > .ds-blog-product-card,
.ds-blog-post__content2 > .ds-blog-product-card{
display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1.25rem;align-items:center;
text-align:left;padding:1rem 1.25rem;background:var(--ds-blog-surface-alt)}
.ds-blog-post__content > .ds-blog-product-card .ds-blog-product-card__image,
.ds-blog-post__content2 > .ds-blog-product-card .ds-blog-product-card__image{margin:0}
.ds-blog-post__content > .ds-blog-product-card img,
.ds-blog-post__content2 > .ds-blog-product-card img{max-width:7rem;margin:0}
.ds-blog-post__content > .ds-blog-product-card .ds-blog-product-card__body,
.ds-blog-post__content2 > .ds-blog-product-card .ds-blog-product-card__body{
display:flex;flex-direction:column;gap:.375rem;align-items:flex-start}
.ds-blog-post__content > .ds-blog-product-card .ds-blog-product-card__name,
.ds-blog-post__content2 > .ds-blog-product-card .ds-blog-product-card__name{
margin:0;font-size:1rem;line-height:1.35}
.ds-blog-post__content > .ds-blog-product-card .ds-blog-product-card__price,
.ds-blog-post__content2 > .ds-blog-product-card .ds-blog-product-card__price{
margin:0;font-size:1.125rem}
/* --- Tagi pod wpisem ------------------------------------------------------- */
.ds-blog-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:2rem}
.ds-blog-tag{display:inline-block;padding:.25rem .625rem;font-size:.8125rem;text-decoration:none;
color:var(--ds-blog-muted);background:var(--ds-blog-surface-alt);
border:1px solid var(--ds-blog-border);border-radius:2rem}
.ds-blog-tag:hover{color:var(--bs-body-color,#232323);border-color:var(--ds-blog-muted)}
/* --- Udostępnianie --------------------------------------------------------- */
.ds-blog-share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
margin-block-start:2rem;padding-block-start:1.5rem;border-block-start:1px solid var(--ds-blog-border)}
.ds-blog-share__label{margin:0 .25rem 0 0;font-size:.8125rem;font-weight:600;
letter-spacing:.04em;text-transform:uppercase;color:var(--ds-blog-muted)}
.ds-blog-share__btn{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;
font-size:.875rem;line-height:1.4;text-decoration:none;color:var(--bs-body-color,#232323);
background:var(--ds-blog-surface);border:1px solid var(--ds-blog-border);border-radius:2rem;
cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.ds-blog-share__btn:hover{background:var(--ds-blog-surface-alt);border-color:var(--ds-blog-muted);
color:var(--bs-body-color,#232323)}
.ds-blog-share__btn svg{width:1rem;height:1rem;flex:0 0 auto;fill:currentColor}
.ds-blog-share__btn.is-copied{border-color:var(--bs-success,#4cbb6c);color:var(--bs-success,#4cbb6c)}
/* --- Ramka autora ---------------------------------------------------------- */
.ds-blog-author-box{display:flex;gap:1rem;align-items:flex-start;
margin-block-start:2.5rem;padding:1.25rem;background:var(--ds-blog-surface-alt);
border:1px solid var(--ds-blog-border);border-radius:var(--ds-blog-radius)}
.ds-blog-author-box__avatar{width:4rem;height:4rem;flex:0 0 auto;border-radius:50%;object-fit:cover}
.ds-blog-author-box__label{margin:0 0 .125rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--ds-blog-muted)}
.ds-blog-author-box__name{display:inline-block;margin:0 0 .375rem;font-size:1.0625rem;font-weight:600;
color:inherit;text-decoration:none}
.ds-blog-author-box__name:hover{text-decoration:underline}
.ds-blog-author-box__bio{margin:0;font-size:.9375rem;line-height:1.6;color:var(--ds-blog-muted)}
.ds-blog-author-box__bio p:last-child{margin-bottom:0}
/* --- Poprzedni / następny --------------------------------------------------- */
.ds-blog-adjacent{display:grid;grid-template-columns:1fr;gap:1rem;margin-block-start:2.5rem}
@media (min-width:576px){.ds-blog-adjacent{grid-template-columns:1fr 1fr}}
.ds-blog-adjacent__link{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.25rem;
text-decoration:none;color:inherit;background:var(--ds-blog-surface);
border:1px solid var(--ds-blog-border);border-radius:var(--ds-blog-radius);
transition:border-color .15s ease,box-shadow .15s ease}
.ds-blog-adjacent__link:hover{border-color:var(--ds-blog-muted);box-shadow:0 .25rem .75rem rgba(0,0,0,.06)}
.ds-blog-adjacent__label{font-size:.75rem;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--ds-blog-muted)}
.ds-blog-adjacent__title{font-size:.9375rem;line-height:1.45;font-weight:600}
.ds-blog-adjacent__link--next{text-align:right}
/* gdy istnieje tylko „następny", ma zostać w prawej kolumnie */
.ds-blog-adjacent__link--next:only-child{grid-column:2}
@media (max-width:575.98px){.ds-blog-adjacent__link--next{text-align:left}}
/* =============================================================================
Komentarze
========================================================================== */
.ds-blog-comments{margin-block-start:3rem;padding-block-start:2rem;border-block-start:1px solid var(--ds-blog-border)}
.ds-blog-comments__title{margin:0 0 1.5rem;font-size:1.25rem}
.ds-blog-comments__count{font-weight:400;color:var(--ds-blog-muted)}
.ds-blog-comments__empty{margin:0 0 1.5rem;color:var(--ds-blog-muted)}
.ds-blog-comments__list{display:flex;flex-direction:column;gap:1rem;margin:0 0 2.5rem;padding:0;list-style:none}
.ds-blog-comment{display:flex;gap:.875rem;padding:1rem 1.25rem;background:var(--ds-blog-surface-alt);
border:1px solid var(--ds-blog-border);border-radius:var(--ds-blog-radius)}
.ds-blog-comment__avatar{width:2.5rem;height:2.5rem;flex:0 0 auto;display:flex;
align-items:center;justify-content:center;border-radius:50%;font-weight:700;font-size:.9375rem;
color:#fff;background:var(--bs-primary,#2fb5d2);text-transform:uppercase}
.ds-blog-comment__body{min-width:0;flex:1 1 auto}
.ds-blog-comment__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:0 0 .375rem}
.ds-blog-comment__author{font-weight:600}
.ds-blog-comment__date{font-size:.8125rem;color:var(--ds-blog-muted)}
.ds-blog-comment__content{margin:0;line-height:1.6;overflow-wrap:anywhere}
/* --- Formularz ------------------------------------------------------------- */
.ds-blog-comment-form{padding:1.5rem;background:var(--ds-blog-surface);
border:1px solid var(--ds-blog-border);border-radius:var(--ds-blog-radius)}
.ds-blog-comment-form__title{margin:0 0 .375rem;font-size:1.125rem}
.ds-blog-comment-form__hint{margin:0 0 1.25rem;font-size:.875rem;color:var(--ds-blog-muted)}
.ds-blog-comment-form__grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-block-end:1rem}
@media (min-width:576px){.ds-blog-comment-form__grid{grid-template-columns:1fr 1fr}}
.ds-blog-field{display:flex;flex-direction:column;gap:.375rem}
.ds-blog-field__label{font-size:.875rem;font-weight:600}
.ds-blog-field__required{color:var(--bs-danger,#ff4c4c)}
/* Pola korzystają z .form-control motywu; to tylko siatka i awaryjny wygląd
dla motywów, które .form-control nie stylują. */
.ds-blog-comment-form input:not([type=submit]),
.ds-blog-comment-form textarea{width:100%;max-width:100%}
.ds-blog-comment-form textarea{min-height:8rem;resize:vertical}
.ds-blog-comment-form__honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ds-blog-comment-form__footer{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-block-start:1.25rem}
.ds-blog-comment-form__consent{margin:0;font-size:.8125rem;color:var(--ds-blog-muted)}
/* =============================================================================
Kolumna boczna listingów
========================================================================== */
.ds-blog__sidebar{display:flex;flex-direction:column;gap:1.5rem}
.ds-blog-widget-box{padding:1.25rem;background:var(--ds-blog-surface);
border:1px solid var(--ds-blog-border);border-radius:var(--ds-blog-radius)}
.ds-blog-widget-box__title{margin:0 0 .875rem;font-size:.8125rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;color:var(--ds-blog-muted)}
.ds-blog-cat-list{margin:0;padding:0;list-style:none}
.ds-blog-cat-list li + li{border-block-start:1px solid var(--ds-blog-border)}
.ds-blog-cat-list a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
padding-block:.5rem;color:inherit;text-decoration:none}
.ds-blog-cat-list a:hover{color:var(--bs-primary,#2fb5d2)}
.ds-blog-cat-list__count{font-size:.75rem;color:var(--ds-blog-muted)}
.ds-blog-cat-list li.is-active > a{font-weight:700;color:var(--bs-primary,#2fb5d2)}
.ds-blog-tag-cloud__list{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.ds-blog-tag-cloud__count{font-size:.75rem;opacity:.7}
.ds-blog-side-search{display:flex;gap:.5rem}
.ds-blog-side-search input{min-width:0;flex:1 1 auto}
/* --- Paginacja ------------------------------------------------------------- */
.ds-blog-pagination{display:flex;flex-wrap:wrap;gap:.375rem;justify-content:center;align-items:center;
margin-block-start:2.5rem}
.ds-blog-pagination__item,
.ds-blog-pagination__prev,
.ds-blog-pagination__next{display:inline-flex;align-items:center;justify-content:center;
min-width:2.25rem;height:2.25rem;padding-inline:.625rem;font-size:.9375rem;text-decoration:none;
color:inherit;background:var(--ds-blog-surface);border:1px solid var(--ds-blog-border);
border-radius:var(--ds-blog-radius)}
.ds-blog-pagination__item:hover,
.ds-blog-pagination__prev:hover,
.ds-blog-pagination__next:hover{border-color:var(--ds-blog-muted)}
.ds-blog-pagination__item--current{color:#fff;background:var(--bs-primary,#2fb5d2);
border-color:var(--bs-primary,#2fb5d2);font-weight:600}
/* --- Strona autora --------------------------------------------------------- */
.ds-blog-author__header{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center}
.ds-blog-author__avatar{width:6rem;height:6rem;border-radius:50%;object-fit:cover;flex:0 0 auto}
.ds-blog-author__bio{max-width:46rem;margin:.5rem 0 0;color:var(--ds-blog-muted)}
/* --- Wyszukiwarka bloga ---------------------------------------------------- */
.ds-blog-search__form{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem;max-width:32rem}
.ds-blog-search__input{flex:1 1 12rem;min-width:0}
.ds-blog-search__count{margin:0 0 1.25rem;color:var(--ds-blog-muted)}
/* --- Widżet w kolumnie / stopce -------------------------------------------- */
.ds-blog-widget{padding:1.25rem;background:var(--ds-blog-surface);
border:1px solid var(--ds-blog-border);border-radius:var(--ds-blog-radius)}
.ds-blog-widget__title{margin:0 0 .875rem;font-size:.8125rem;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;color:var(--ds-blog-muted)}
.ds-blog-widget__list{margin:0;padding:0;list-style:none}
.ds-blog-widget__item{display:flex;gap:.75rem;align-items:flex-start}
.ds-blog-widget__item + .ds-blog-widget__item{margin-block-start:.875rem;padding-block-start:.875rem;
border-block-start:1px solid var(--ds-blog-border)}
.ds-blog-widget__item img{width:3.5rem;height:3.5rem;object-fit:cover;border-radius:.25rem;flex:0 0 auto}
.ds-blog-widget__link{display:block;font-size:.9375rem;line-height:1.4;color:inherit;text-decoration:none}
.ds-blog-widget__link:hover{text-decoration:underline}
.ds-blog-widget__date{display:block;margin-block-start:.25rem;font-size:.75rem;color:var(--ds-blog-muted)}
/* --- Powiązane wpisy pod produktem ----------------------------------------- */
.ds-blog-related{margin-block-start:2.5rem;padding-block-start:2rem;
border-block-start:1px solid var(--ds-blog-border)}
.ds-blog-related__title{margin:0 0 1.25rem;font-size:1.25rem}
/* --- Karuzela wpisów na stronie głównej (Z-008, Z-009, Z-010) -----------------
Karuzela na scroll-snap: przesuwanie palcem to natywny scroll przeglądarki,
strzałki tylko przewijają tor. Bez biblioteki JS, bez skoków layoutu.
Sekcja siedzi w kontenerze motywu — szerokość i marginesy dziedziczy po .container. */
.ds-blog-home{margin:40px 0}
.ds-blog-home__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.ds-blog-home__title{margin:0;font-size:24px;font-weight:700}
.ds-blog-home__head-right{display:flex;align-items:center;gap:16px}
.ds-blog-home__all{white-space:nowrap}
.ds-blog-home__nav{display:flex;gap:8px}
.ds-blog-home__arrow{width:40px;height:40px;border:1px solid #ddd;border-radius:50%;background:#fff;
font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ds-blog-home__arrow:hover{background:#f5f5f5}
.ds-blog-home__arrow[disabled]{opacity:.35;cursor:default}
/* tor karuzeli */
.ds-blog-home__track{display:flex;gap:24px;margin:0;padding:0 4px 4px;list-style:none;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ds-blog-home__track::-webkit-scrollbar{display:none}
.ds-blog-home__carousel--static .ds-blog-home__track{overflow-x:visible}
/* szerokość kafelka = (100% - odstępy) / liczba w wierszu z konfiguracji */
.ds-blog-home__item{flex:0 0 calc((100% - (var(--ds-blog-per-row) - 1) * 24px) / var(--ds-blog-per-row));
scroll-snap-align:start;display:flex}
.ds-blog-home__card{display:flex;flex-direction:column;width:100%;background:#fff;
border:1px solid #eee;border-radius:8px;overflow:hidden}
.ds-blog-home__image{display:block}
/* width/height w ![]()
+ aspect-ratio trzymają miejsce na obraz: zero CLS */
.ds-blog-home__image img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.ds-blog-home__body{padding:16px;display:flex;flex-direction:column;gap:8px}
.ds-blog-home__category{font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.ds-blog-home__post-title{margin:0;font-size:18px;line-height:1.35;font-weight:700}
.ds-blog-home__excerpt{margin:0;font-size:14px;line-height:1.5}
.ds-blog-home__more{align-self:flex-start;font-weight:600;margin-top:auto}
/* na węższych ekranach liczba widocznych kafelków schodzi niezależnie od ustawienia */
@media (max-width:1199px){
.ds-blog-home__item{flex-basis:calc((100% - 24px) / 2)}
}
@media (max-width:767px){
.ds-blog-home{margin:28px 0}
.ds-blog-home__head{flex-wrap:wrap;gap:8px}
.ds-blog-home__item{flex-basis:85%}
.ds-blog-home__nav{display:none} /* na telefonie wystarczy swipe */
}
/* użytkownik z ograniczoną animacją nie dostaje płynnego przewijania */
@media (prefers-reduced-motion:reduce){
.ds-blog-home__track{scroll-behavior:auto}
}
/* --- Linki wejściowe (Z-006) ------------------------------------------------
Blok w stopce dostaje klasy motywu (hummingbird: .footer-block; classic: .links
.wrapper), bo bez nich linki lecą domyślnym kolorem odnośnika — niebieskim na
ciemnej stopce (Z-015). Własnych kolorów tu NIE ustawiamy. */
.ds-blog-footer-links__list{list-style:none;margin:0;padding:0}
.ds-blog-nav-link{display:inline-block}
/* Podkategorie w widżecie kategorii (DN-3 runda 2 pkt 12a).
Zagnieżdżenie niesie struktura listy; CSS dokłada tylko wcięcie i delikatną
kreskę prowadzącą, żeby na pierwszy rzut oka było widać, co jest czyim dzieckiem. */
.ds-blog-cat-list--pod{margin:0;padding:0;list-style:none;border-inline-start:2px solid var(--ds-blog-border);margin-inline-start:.85rem}
.ds-blog-cat-list--pod > .ds-blog-cat-list__item > a{padding-inline-start:.85rem;font-size:.95em}
.ds-blog-cat-list--pod > .ds-blog-cat-list__item:first-child{border-block-start:1px solid var(--ds-blog-border)}