/* ==========================================================
   dlamlodejmamy.pl — editorial stylesheet (2026-05-20)
   Paleta: deep emerald + warm cream, awards multi-tone
   Typografia: Fraunces (heading, variable serif) + Inter (body)
   Vibe: editorial magazine, hard edges, mniej rounded, więcej oddychania
   ========================================================== */

:root {
    /* === Editorial palette — coral pink jako primary (przywrócone 2026-05-20) === */
    --bg: #FFF8F5;               /* warm cream */
    --bg-alt: #FFEDE5;
    --surface: #FFFFFF;
    --primary: #F4847A;          /* CORAL PINK — głowny akcent, żywy */
    --primary-dark: #D85C5A;     /* hover / strong text */
    --primary-soft: #FFE5E0;     /* tła soft sekcji */
    --primary-tint: #FFF1ED;     /* jeszcze lżej */

    /* secondary accent — dusty blue do kontrastu / Editor's Choice */
    --accent: #7BA4C7;
    --accent-dark: #4D7FA3;
    --accent-soft: #DCE9F4;

    /* === Awards palette (multi-tone, semantyczne) === */
    --award-gold: #C8A047;       /* Best Overall */
    --award-gold-soft: #F3E8CC;
    --award-green: #5BA37D;      /* Best Value */
    --award-green-soft: #DCEDD6;
    --award-purple: #7B5EA3;     /* Editor's Choice */
    --award-purple-soft: #E6DBEF;
    --award-red: #C8443D;        /* Najbezpieczniejszy / Safety */
    --award-red-soft: #F4D8D6;
    --award-sage: #8AA98A;       /* Najlepszy dla noworodka */
    --award-sage-soft: #E0E9DF;
    --award-blue: #4D7FA3;       /* Best dla auta z ISOFIX */
    --award-blue-soft: #DCE9F4;

    /* === Semantic legacy mapowanie (zachowuje kompatybilność z poprzednim kodem) === */
    --success: var(--award-green);
    --success-dark: var(--award-green);
    --success-soft: var(--award-green-soft);
    --warning: var(--award-gold);
    --warning-dark: var(--award-gold);
    --warning-soft: var(--award-gold-soft);

    --text: #1F1A14;             /* ciepły almost-black */
    --text-soft: #6B6660;
    --border: #E8E2DA;           /* warm gray */
    --border-strong: #C9C0B3;    /* mocniejszy dla editorial separation */

    /* Editorial shadows — mocniejsze, bardziej "magazinowe" niż "soft web" */
    --shadow-sm: 0 1px 2px rgba(31, 26, 20, 0.06);
    --shadow-md: 0 4px 12px rgba(31, 26, 20, 0.08);
    --shadow-lg: 0 10px 30px rgba(31, 26, 20, 0.10);

    /* Hard edges — radius mniejsze niż w typowych SaaS layoutach */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 22px;

    /* Typografia editorial */
    --font-heading: 'Fraunces', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', Georgia, serif;  /* dla H1 z większym opt-size */

    --container: 1180px;
    --container-narrow: 760px;   /* dla editorial reading-width */
    --gap: clamp(1rem, 2vw, 1.5rem);
    --section-gap: clamp(2.5rem, 5vw, 4.5rem);  /* większe odstępy między sekcjami */
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    font-size: 17px;
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
    color: var(--primary-dark);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--accent-dark); }
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--text);
    margin: 0 0 .6em;
    line-height: 1.15;
    letter-spacing: -0.015em;
    /* Fraunces opt-size axis: pozwala fontowi dostosowac sie do rozmiaru */
    font-variation-settings: "opsz" 14, "SOFT" 0, "WONK" 0;
}

h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;  /* display size */
}
h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
}
h3 {
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 600;
    font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
}
h4 {
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
}

p { margin: 0 0 1em; }

ul { padding: 0; margin: 0; list-style: none; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 1.75rem);
}

.eyebrow {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin: 0 0 .8em;
}

.accent { color: var(--accent-dark); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px; left: 1rem;
    background: var(--text);
    color: var(--bg);
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    z-index: 1000;
    transition: top .2s ease;
}
.skip-link:focus { top: 1rem; color: var(--bg); }

/* ---------- BUTTONS (editorial — hard edges, less rounded) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    border-radius: var(--radius-sm);   /* 4px - hard edges */
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .98rem;
    line-height: 1;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.005em;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.btn--primary:hover {
    background: var(--primary-dark);
    color: #fff;
    border-color: var(--primary-dark);
}
.btn--ghost {
    background: transparent;
    color: var(--primary-dark);
    border-color: var(--primary);
}
.btn--ghost:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Editorial inline link button — alternatywa do guzików */
.btn--link {
    background: transparent;
    color: var(--primary-dark);
    border: none;
    padding: .3rem 0;
    border-bottom: 2px solid var(--primary);
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .82rem;
}
.btn--link:hover {
    color: var(--primary);
    background: transparent;
    transform: none;
}

/* ---------- TOPBAR ---------- */
.topbar {
    background: var(--primary-dark);
    color: var(--bg);
    font-size: .85rem;
    padding: .55rem 0;
}
.topbar__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.topbar__msg { letter-spacing: .03em; }

/* ---------- HEADER + NAV ---------- */
.header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 1rem;
}
.header__logo { display: inline-flex; }

.logo {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-weight: 600;
    color: var(--text);
}
.logo__mark {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
.logo__text {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 500;
    color: var(--text);
}
.logo--light .logo__text { color: var(--bg); }

.nav__list {
    display: none;
    gap: 1.75rem;
    align-items: center;
}
.nav__list a {
    color: var(--text);
    font-weight: 500;
    font-size: .97rem;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
}
.nav__list a:hover { color: var(--primary-dark); border-bottom-color: var(--accent); }

.nav__toggle {
    background: transparent;
    border: 0;
    width: 44px; height: 44px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.nav__toggle span {
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav__list.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg);
    padding: 1.25rem clamp(1rem, 3vw, 1.75rem);
    border-bottom: 1px solid var(--border);
    gap: 1.1rem;
    align-items: flex-start;
    box-shadow: var(--shadow-md);
}

@media (min-width: 880px) {
    .nav__list { display: flex; }
    .nav__toggle { display: none; }
}

/* ---------- HERO ---------- */
.hero {
    padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
    position: relative;
    overflow: hidden;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
}
.hero__content { max-width: 640px; }
.hero__title { margin-bottom: .6em; }
.hero__lead {
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
    color: var(--text-soft);
    margin-bottom: 2rem;
    max-width: 56ch;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 2rem;
}
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    font-size: .9rem;
    color: var(--text-soft);
}
.hero__trust li {
    position: relative;
    padding-left: 1.1rem;
}
.hero__trust li::before {
    content: "";
    position: absolute;
    left: 0; top: .5em;
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

.hero__visual {
    position: relative;
    min-height: 280px;
    display: none;
}
.hero__blob {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 35%, var(--primary-soft) 0%, transparent 60%),
                radial-gradient(circle at 30% 70%, var(--accent-soft) 0%, transparent 55%);
    border-radius: 50% 45% 55% 50%;
    transform: rotate(-3deg);
}
.hero__card {
    position: absolute;
    background: var(--surface);
    padding: 1rem 1.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text);
    border: 1px solid var(--border);
}
.hero__card--1 { top: 12%; left: 5%; }
.hero__card--2 { top: 45%; right: 8%; }
.hero__card--3 { bottom: 12%; left: 22%; }

@media (min-width: 900px) {
    .hero__inner { grid-template-columns: 1.1fr .9fr; }
    .hero__visual { display: block; min-height: 420px; }
}

/* ---------- SECTION SHARED ---------- */
section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section-head__lead { color: var(--text-soft); font-size: 1.05rem; }
.section-cta { text-align: center; margin-top: 2.5rem; }

/* ---------- CATEGORIES ---------- */
.categories { background: var(--surface); }

.cat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }

.cat-card a {
    display: block;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.6rem;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    color: var(--text);
}
.cat-card a:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-soft);
    color: var(--text);
}
.cat-card__icon {
    display: inline-flex;
    width: 54px; height: 54px;
    align-items: center; justify-content: center;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}
.cat-card__icon svg { width: 28px; height: 28px; }
.cat-card h3 { margin-bottom: .4em; }
.cat-card p { color: var(--text-soft); font-size: .98rem; margin-bottom: 1rem; }
.cat-card__more {
    font-weight: 600;
    color: var(--accent-dark);
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.cat-card__more::after { content: "→"; transition: transform .2s ease; }
.cat-card a:hover .cat-card__more::after { transform: translateX(4px); }

/* ---------- RANKINGS ---------- */
.rankings { background: var(--bg); }

.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.2rem, 2vw, 1.8rem);
}
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(4, 1fr); } }

.post-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: transform .2s ease, box-shadow .2s ease;
    color: var(--text);
}
.post-card a:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}
.post-card__media {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));
    position: relative;
}
.post-card__media--alt { background: linear-gradient(135deg, var(--accent-soft), #F4E7DC); }
.post-card__media--alt2 { background: linear-gradient(135deg, #E5E9DA, var(--primary-soft)); }
.post-card__media--alt3 { background: linear-gradient(135deg, #F0E0CC, var(--primary-soft)); }

.badge {
    position: absolute;
    top: 1rem; left: 1rem;
    background: var(--surface);
    color: var(--text);
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .8rem;
    border-radius: 999px;
    letter-spacing: .04em;
}
.post-card__body { padding: 1.3rem 1.4rem 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.post-card__body h3 { font-size: 1.15rem; margin-bottom: .5em; }
.post-card__body p { color: var(--text-soft); font-size: .95rem; flex-grow: 1; }
.post-card__meta {
    font-size: .82rem;
    color: var(--text-soft);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    letter-spacing: .02em;
}

/* ---------- GUIDES ---------- */
.guides { background: var(--bg-alt); }

.guide-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .guide-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .guide-list { grid-template-columns: repeat(3, 1fr); } }

.guide-list a {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.4rem;
    height: 100%;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    color: var(--text);
}
.guide-list a:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    color: var(--text);
}
.guide-list h3 { font-size: 1.1rem; margin-bottom: .4em; }
.guide-list p { color: var(--text-soft); font-size: .93rem; margin: 0; }

/* ---------- TRUST ---------- */
.trust { background: var(--surface); }
.trust__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}
@media (min-width: 900px) {
    .trust__inner { grid-template-columns: 1fr 1.2fr; }
}
.trust__copy p { color: var(--text-soft); font-size: 1.02rem; }
.trust__points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}
@media (min-width: 640px) {
    .trust__points { grid-template-columns: repeat(2, 1fr); }
}
.trust__points li {
    background: var(--bg);
    padding: 1.4rem 1.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.trust__points h3 { font-size: 1.05rem; margin-bottom: .35em; color: var(--primary-dark); }
.trust__points p { font-size: .94rem; color: var(--text-soft); margin: 0; }

/* ---------- NEWSLETTER ---------- */
.newsletter {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #6a7d69 100%);
    color: var(--bg);
}
.newsletter__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 900px) {
    .newsletter__inner { grid-template-columns: 1fr 1fr; }
}
.newsletter__copy h2 { color: var(--bg); margin-bottom: .5em; }
.newsletter__copy p { color: rgba(250, 247, 242, .82); }

.newsletter__form {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    background: var(--surface);
    padding: .65rem;
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    position: relative;
}
.newsletter__form input {
    flex: 1 1 220px;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text);
    padding: .8rem 1.2rem;
    outline: none;
    min-width: 0;
}
.newsletter__form input::placeholder { color: var(--text-soft); }
.newsletter__legal {
    width: 100%;
    margin: .8rem 0 0;
    padding: 0 1.2rem;
    font-size: .8rem;
    color: var(--text-soft);
}
.newsletter__legal a { color: var(--primary-dark); text-decoration: underline; }

/* ---------- FOOTER ---------- */
.footer {
    background: var(--text);
    color: rgba(250, 247, 242, .82);
    padding-top: 4rem;
}
.footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
}
@media (min-width: 640px) { .footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer__brand p { font-size: .95rem; max-width: 320px; }
.footer__brand .logo { margin-bottom: 1rem; }
.footer__brand .logo__mark { background: var(--accent); }

.footer__nav h2 {
    color: var(--bg);
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 1.2rem;
}
.footer__nav ul { display: flex; flex-direction: column; gap: .6rem; }
.footer__nav a {
    color: rgba(250, 247, 242, .82);
    font-size: .95rem;
}
.footer__nav a:hover { color: var(--accent); }

.footer__bottom {
    border-top: 1px solid rgba(250, 247, 242, .12);
    padding: 2rem 0 2.5rem;
    font-size: .85rem;
}
.footer__disclaimer {
    color: rgba(250, 247, 242, .68);
    max-width: 880px;
    margin: 0 0 1.2rem;
    line-height: 1.6;
}
.footer__disclaimer strong { color: var(--bg); }
.footer__copy { color: rgba(250, 247, 242, .55); margin: 0; }

/* ==========================================================
   ARTICLE / RANKING PAGE
   ========================================================== */

.article-page { padding-top: 1rem; padding-bottom: 4rem; background: var(--bg); }

/* ---------- BREADCRUMB ---------- */
.breadcrumb { padding: 1.25rem 0 .5rem; }
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .87rem;
    color: var(--text-soft);
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: .5rem;
    color: var(--text-soft);
    opacity: .6;
}
.breadcrumb a { color: var(--text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary-dark); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 500; }

/* ---------- ARTICLE HEAD ---------- */
.article__head {
    padding: 2rem 1rem 2.5rem;
    text-align: left;
    max-width: 920px;
    margin: 0 auto;
}
.article__head h1 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -.015em;
}
.article__lead {
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    color: var(--text-soft);
    line-height: 1.65;
    margin-bottom: 1.3rem;
    max-width: 70ch;
}
.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: .88rem;
    color: var(--text-soft);
    align-items: center;
}
.article__meta time { font-weight: 600; color: var(--primary-dark); }

/* ===== EDITORIAL BYLINE (autor pod H1) ===== */
.article__byline {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.byline {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-shrink: 0;
}
.byline__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-alt);
    flex-shrink: 0;
}
.byline__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
}
.byline__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.byline__name {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
}
.byline__role {
    font-size: .82rem;
    color: var(--text-soft);
    letter-spacing: .005em;
}
.byline__article-meta {
    margin-left: auto;
}
.byline__article-meta .dot { opacity: .5; }
@media (max-width: 600px) {
    .article__byline { gap: .8rem; }
    .byline__article-meta { margin-left: 0; width: 100%; padding-top: .5rem; border-top: 1px solid var(--border); }
}

/* ===== METHODOLOGY DISCLOSURE (pod byline) ===== */
.article__methodology {
    margin-top: 1.4rem;
    padding: 1rem 1.3rem;
    background: var(--bg-alt);
    border-left: 3px solid var(--primary);
    border-radius: 0;
    font-size: .94rem;
    line-height: 1.6;
    color: var(--text);
}
.article__methodology strong {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary-dark);
    display: inline-block;
    margin-right: .5rem;
}
.article__methodology p {
    display: inline;
    margin: 0;
}

/* ===== DECISION TREE (Szybka decyzja - decyzja-tree) ===== */
.decision-tree {
    counter-reset: decision-counter;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border);
}
.decision-tree__item {
    counter-increment: decision-counter;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    padding-left: 3.2rem;
}
@media (min-width: 720px) {
    .decision-tree__item {
        grid-template-columns: 1fr 1.4fr;
        gap: 2rem;
        align-items: start;
    }
}
.decision-tree__item::before {
    content: counter(decision-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1.4rem;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
    font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
    letter-spacing: -0.02em;
}
.decision-tree__q {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
    font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
    letter-spacing: -0.01em;
}
.decision-tree__a {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.decision-tree__pick {
    display: inline-flex;
    align-items: baseline;
    gap: .55rem;
    color: var(--primary-dark);
    text-decoration: none;
    font-size: 1rem;
    border-bottom: 1px dashed var(--primary);
    align-self: flex-start;
    padding-bottom: .15rem;
    transition: color .15s ease;
}
.decision-tree__pick:hover { color: var(--primary); }
.decision-tree__pick-arrow {
    color: var(--primary);
    font-size: 1.15rem;
    font-weight: 600;
}
.decision-tree__pick strong {
    font-weight: 600;
    color: inherit;
}
.decision-tree__why {
    font-size: .92rem;
    color: var(--text-soft);
    line-height: 1.55;
    margin: 0;
}

/* ---------- ARTICLE HERO IMAGE ---------- */
.article__hero {
    margin: 0 auto 2rem;
    max-width: 1100px;
}
.article__hero figcaption {
    margin-top: .7rem;
    font-size: .85rem;
    color: var(--text-soft);
    text-align: center;
    font-style: italic;
}
.hero-img {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 2rem;
}
.hero-img--gradient {
    background:
        radial-gradient(circle at 70% 30%, var(--primary-soft) 0%, transparent 55%),
        radial-gradient(circle at 25% 75%, var(--accent-soft) 0%, transparent 50%),
        linear-gradient(135deg, var(--bg-alt) 0%, #E9E4DA 100%);
}
.hero-img__badge {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background: var(--accent-dark);
    color: var(--bg);
    font-size: .85rem;
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 999px;
    letter-spacing: .03em;
}
.hero-img__caption {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    color: var(--text);
    background: rgba(255, 255, 255, .85);
    padding: .6rem 1.1rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* ---------- IN-CONTENT DISCLAIMER ---------- */
.disclaimer-inline {
    max-width: 920px;
    margin: 0 auto 2.5rem;
    padding: 1rem 1.5rem;
    background: var(--accent-soft);
    border-left: 4px solid var(--accent-dark);
    border-radius: var(--radius-sm);
}
.disclaimer-inline p {
    margin: 0;
    font-size: .92rem;
    color: var(--text);
    line-height: 1.55;
}
.disclaimer-inline strong { color: var(--accent-dark); }

/* ---------- ARTICLE LAYOUT (TOC + CONTENT) ---------- */
.article__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 1100px;
}
@media (min-width: 1024px) {
    .article__layout { grid-template-columns: 240px 1fr; gap: 3rem; }
}

/* ---------- TOC (editorial — left rail, minimal borders) ---------- */
.toc {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    padding: 0 0 0 1.2rem;
    height: fit-content;
}
@media (min-width: 1024px) {
    .toc {
        position: sticky;
        top: 6rem;
    }
}
.toc__title {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-soft);
    margin: 0 0 1rem;
}
.toc__list {
    counter-reset: toc-counter;
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc__list li {
    counter-increment: toc-counter;
    margin-bottom: .6rem;
}
.toc__list a {
    display: flex;
    gap: .55rem;
    font-size: .92rem;
    color: var(--text);
    text-decoration: none;
    line-height: 1.4;
    transition: color .15s ease;
}
.toc__list a::before {
    content: counter(toc-counter, decimal-leading-zero);
    color: var(--primary);
    font-weight: 600;
    font-size: .78rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.toc__list a:hover { color: var(--primary); }

/* ---------- ARTICLE CONTENT (editorial — wider, more breathing) ---------- */
.article__content { max-width: 760px; }
.article__content section {
    padding: var(--section-gap) 0;
    border-bottom: 0;  /* editorial = brak separator linii, oddychanie wystarczy */
}
.article__content section:first-child { padding-top: 1.5rem; }
.article__content section:last-child { padding-bottom: 1.5rem; }
.article__content section + section {
    border-top: 1px solid var(--border);
}

.article__content h2 {
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    margin-bottom: 1.2rem;
    scroll-margin-top: 5rem;
}
.article__content h3 {
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    margin-top: 1.8rem;
    margin-bottom: .7rem;
    color: var(--text);
}
.article__content p { line-height: 1.7; margin-bottom: 1.1em; }
.article__content p strong { color: var(--text); }
.article__content em { color: var(--text-soft); }

/* ---------- DIRECT ANSWER BLOCK ---------- */
.direct-answer {
    background: var(--primary-soft);
    padding: 1rem 1.3rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-dark);
    font-size: 1.02rem;
    margin-bottom: 1.6rem;
}

/* ---------- CALLOUT (TL;DR) ---------- */
.callout {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.8rem;
    margin: 1.5rem 0 2rem;
    box-shadow: var(--shadow-sm);
}
.callout--primary {
    background: linear-gradient(135deg, var(--surface) 0%, var(--primary-soft) 120%);
    border-color: var(--primary-soft);
}
.callout__lead { font-size: 1.08rem; margin-bottom: 1rem; }
.callout__lead strong { color: var(--primary-dark); }
.callout__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.2rem;
}

/* ---------- RICH LISTS ---------- */
.rich-list { margin: 1rem 0 1.5rem; }
.rich-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: .7rem;
    line-height: 1.65;
}
.rich-list li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
}
.rich-list--numbered { counter-reset: rl-counter; }
.rich-list--numbered li {
    counter-increment: rl-counter;
    padding-left: 2.4rem;
}
.rich-list--numbered li::before {
    content: counter(rl-counter);
    width: auto; height: auto;
    background: transparent;
    color: var(--accent-dark);
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    top: 0;
}

/* ---------- CHECK / WARN LISTS ---------- */
.check-list li, .warn-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: .55rem;
    line-height: 1.55;
}
.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0; top: 0;
    color: #5A8A5C;
    font-weight: 700;
    font-size: 1.05rem;
}
.warn-list li::before {
    content: "⚠";
    position: absolute;
    left: 0; top: 0;
    color: var(--accent-dark);
    font-weight: 700;
}

/* ---------- PRODUCT CARD (editorial 2026 — hard edges, more breathing) ---------- */
.product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary);  /* editorial accent bar — emerald default */
    border-radius: var(--radius-md);       /* 8px - editorial */
    margin: 2.5rem 0;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease;
}
.product-card:hover { box-shadow: var(--shadow-md); }
.product-card[id] { scroll-margin-top: 5rem; }

.product-card__head {
    padding: 1.6rem 2rem 1.6rem;
    border-bottom: 0;
    display: flex;
    align-items: baseline;
    gap: .9rem;
    flex-wrap: nowrap;
}
.product-card__rank {
    /* Editorial — serif liczba wyrównana baseline z tytułem, sporo mniejsza */
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border-radius: 0;
    margin: 0;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: none;
    min-width: auto;
    height: auto;
    padding: 0;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
    font-feature-settings: "lnum" 1;  /* lining numbers, bardziej "magazinowe" */
}
.product-card--akcent .product-card__rank { color: var(--accent); }
.product-card--sukces .product-card__rank { color: var(--award-green); }
.product-card--uwaga .product-card__rank { color: var(--award-red); }

/* Top 3 boost: mocniejszy border-top, lekko więcej shadow */
.product-card--top3 {
    border-top-width: 6px;
    box-shadow: var(--shadow-md);
}
.product-card--top3:hover {
    box-shadow: var(--shadow-lg);
}
.product-card__head h3 {
    margin: 0 !important;
    font-size: 1.7rem !important;
    line-height: 1.15;
    flex: 1;
    min-width: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
}
/* Banner kategorii (pelna szerokosc, editorial style) */
.product-card__angle {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 2rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.35;
    color: #fff;
    background: var(--primary);
    letter-spacing: -0.005em;
    font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
}
.product-card__angle--akcent  { background: var(--accent); }
.product-card__angle--sukces  { background: var(--award-green); }
.product-card__angle--uwaga   { background: var(--award-red); }
.product-card__angle--neutral { background: var(--text); }
.product-card__angle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 0;  /* editorial - hard edge square */
    flex-shrink: 0;
}
.product-card__angle-icon svg {
    width: 17px;
    height: 17px;
    color: #fff;
}
.product-card__angle-text {
    flex: 1;
    min-width: 0;
}

.product-card__media {
    aspect-ratio: 16 / 9;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 1.2rem 1.5rem;
    overflow: hidden;
}
/* Dekoracyjna ikonka w placeholderze (silhoutte fotelika/wozka) */
.product-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-opacity='0.55' stroke-linecap='round' stroke-linejoin='round'><circle cx='50' cy='50' r='32'/><circle cx='50' cy='50' r='18'/><path d='M50 18v10M50 72v10M18 50h10M72 50h10'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% auto;
    pointer-events: none;
    opacity: .6;
}
.product-card__media--with-image::after { display: none; }
.product-card__media--with-image {
    padding: 0;
    background: var(--bg-alt);
    align-items: stretch;
}
.product-card__media-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
}
.product-card__media .badge {
    position: absolute;
    top: 1rem; left: 1rem;
    background: var(--surface);
    color: var(--text);
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .8rem;
    border-radius: 999px;
    letter-spacing: .04em;
    box-shadow: var(--shadow-sm);
}
/* Gradient placeholdery - mom-blog palette (coral / blue / mint / sand) */
.product-card__media--1 { background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft)); }
.product-card__media--2 { background: linear-gradient(135deg, var(--accent-soft), var(--success-soft)); }
.product-card__media--3 { background: linear-gradient(135deg, var(--success-soft), var(--warning-soft)); }
.product-card__media--4 { background: linear-gradient(135deg, var(--warning-soft), var(--primary-soft)); }
.product-card__media--5 { background: linear-gradient(135deg, var(--primary-soft), var(--success-soft)); }
.product-card__media--6 { background: linear-gradient(135deg, var(--accent-soft), var(--warning-soft)); }
.product-card__media--7 { background: linear-gradient(135deg, var(--success-soft), var(--primary-soft)); }

.product-card__specs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1.5rem 2rem;
    background: var(--bg);
    margin: 0;
    border-bottom: 1px dashed var(--border);
}
@media (min-width: 640px) {
    .product-card__specs { grid-template-columns: repeat(2, 1fr); gap: .5rem 2rem; }
}
.product-card__specs > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: .92rem;
}
.product-card__specs > div:last-child,
.product-card__specs > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.product-card__specs dt {
    color: var(--text-soft);
    font-weight: 500;
    flex-shrink: 0;
}
.product-card__specs dd {
    margin: 0;
    color: var(--text);
    font-weight: 600;
    text-align: right;
}
.product-card__specs dd small { color: var(--text-soft); font-weight: 400; }
.product-card__specs .warn { color: var(--primary-dark); font-weight: 700; }

/* === SKALA ADAC — kolory zielony→czerwony === */
/* Paleta semantyczna dla 5 stopni oceny */
.adac-best  { background: #C8E5BD; color: #2A5F26; }  /* bardzo dobry (0.6-1.5) */
.adac-good  { background: #DCEDD0; color: #4A6B2E; }  /* dobry (1.6-2.5) */
.adac-ok    { background: #F4E3B8; color: #6B5424; }  /* zadowalający (2.6-3.5) */
.adac-poor  { background: #F2CFA8; color: #7A4920; }  /* dostateczny (3.6-4.5) */
.adac-bad   { background: #F0BFB8; color: #7A2C26; }  /* niedostateczny (4.6-5.5) */

/* Chip wartości ADAC w specs karty produktu */
.adac-score {
    display: inline-block;
    padding: .25rem .55rem;
    font-weight: 700;
    font-feature-settings: "lnum" 1, "tnum" 1;
    border-radius: 3px;
    line-height: 1.4;
    font-size: .9rem;
}

/* Widget "Jak czytamy ADAC" przed listą produktów */
.adac-scale-section {
    background: var(--bg-alt);
    padding: 1.8rem 2rem !important;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.adac-scale-section h2 {
    font-size: 1.35rem !important;
    margin: 0 0 .6rem !important;
}
.adac-scale-section .direct-answer {
    color: var(--text);
    margin-bottom: 1.3rem;
}
.adac-scale {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .4rem;
    counter-reset: none;
}
@media (min-width: 720px) {
    .adac-scale { grid-template-columns: repeat(5, 1fr); }
}
.adac-scale__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: .9rem 1.1rem;
    border-radius: 3px;
    gap: .15rem;
    text-align: left;
}
@media (min-width: 720px) {
    .adac-scale__row {
        align-items: center;
        text-align: center;
    }
}
.adac-scale__row::before { display: none !important; content: none !important; }
.adac-scale__range {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    font-feature-settings: "lnum" 1, "tnum" 1;
    letter-spacing: -0.01em;
}
.adac-scale__label {
    font-size: .82rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: .02em;
    line-height: 1.2;
}

/* Tag „Test ADAC" obok wartości — source-of-truth signal */
.spec-source-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .15rem .5rem;
    background: var(--primary-dark);
    color: #fff;
    border-radius: 2px;
    vertical-align: middle;
    line-height: 1.3;
}

/* Footnote pod specs — źródło danych */
.product-card__specs-source {
    margin: 0;
    padding: .7rem 2rem 0;
    background: var(--bg);
    border-bottom: 1px dashed var(--border);
    padding-bottom: 1rem;
    font-size: .78rem;
    color: var(--text-soft);
    font-style: italic;
    line-height: 1.5;
    letter-spacing: .005em;
}
.product-card__specs-source::before {
    content: "ⓘ ";
    font-style: normal;
    opacity: .7;
    margin-right: .2rem;
}

.product-card__body { padding: 2rem 2rem 2.2rem; }
.product-card__body > p { line-height: 1.75; color: var(--text); }
.product-card__body > p:first-of-type { font-size: 1.02rem; }

.pros-cons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin: 2rem 0;
}
@media (min-width: 640px) {
    .pros-cons { grid-template-columns: 1fr 1fr; }
}
.pros-cons h4 {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 .9rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.pros {
    background: transparent;
    border: 0;
    border-top: 2px solid var(--award-green);
    border-radius: 0;
    padding: 1rem 0 0;
}
.pros h4 { color: var(--award-green); }
.pros h4::before { content: "Co nas przekonało"; display: none; }
.cons {
    background: transparent;
    border: 0;
    border-top: 2px solid var(--award-red);
    border-radius: 0;
    padding: 1rem 0 0;
}
.cons h4 { color: var(--award-red); }
.cons h4::before { display: none; }
.pros ul, .cons ul { padding: 0; margin: 0; list-style: none; }
.pros li, .cons li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: .65rem;
    line-height: 1.55;
    font-size: .94rem;
}
.pros li::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--award-green); font-weight: 700; font-size: 1.1rem; }
.cons li::before { content: "−"; position: absolute; left: 0; top: 0; color: var(--award-red); font-weight: 700; font-size: 1.1rem; }

/* ===== 3 NARRACJE w karcie produktu (editorial babygearlab style) ===== */
.product-card__narrative {
    margin: 2.2rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.narrative-block {
    padding-left: 1.2rem;
    border-left: 3px solid var(--border);
}
.narrative-block__label {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-soft);
    margin: 0 0 .55rem;
}
.narrative-block p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 .8rem;
}
.narrative-block p:last-child { margin-bottom: 0; }

/* Kolory border-left per typ narracji */
.narrative-block--audience  { border-left-color: var(--accent); }
.narrative-block--audience .narrative-block__label { color: var(--accent-dark); }

.narrative-block--why       { border-left-color: var(--award-green); }
.narrative-block--why .narrative-block__label { color: var(--award-green); }

.narrative-block--verdict   { border-left-color: var(--primary); }
.narrative-block--verdict .narrative-block__label { color: var(--primary-dark); }

/* Lead opisu (introducja produktu - jeden mocny pierwszy akapit) */
.product-card__lead p {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.55;
    font-weight: 400;
    color: var(--text);
    font-variation-settings: "opsz" 18, "SOFT" 0, "WONK" 0;
    letter-spacing: -0.005em;
}
.product-card__lead p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 600;
    float: left;
    line-height: 0.9;
    padding: .35rem .55rem 0 0;
    color: var(--primary);
    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}

/* zostawiam .for-whom dla wstecznej kompatybilności (jak ktoś nadal użyje) */
.for-whom {
    background: var(--primary-tint);
    padding: 1.2rem 1.5rem;
    border-radius: 0;
    border-left: 3px solid var(--primary);
    margin: 1.8rem 0 !important;
    font-size: .96rem;
    line-height: 1.65;
    font-family: var(--font-heading);
    font-variation-settings: "opsz" 14, "SOFT" 0, "WONK" 0;
    font-style: italic;
}
.for-whom strong {
    color: var(--primary-dark);
    font-style: normal;
    font-family: var(--font-body);
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: .35rem;
}

.product-card__cta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--border);
}

/* ===== WINNER HIGHLIGHTS — „Liderzy w kategoriach" (zamiast tabeli) ===== */
.winners-section { /* zwykła sekcja, dziedziczy padding z .article__content section */ }

.winners-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin: 1.5rem 0 0;
}
@media (min-width: 720px) {
    .winners-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}
@media (min-width: 1100px) {
    .winners-grid { grid-template-columns: repeat(3, 1fr); }
}

.winner-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 1.3rem 1.4rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, border-left-color .2s ease;
}
.winner-card:hover {
    box-shadow: var(--shadow-md);
}

/* Mała etykieta kategorii (np. „Najlepszy wynik ADAC") */
.winner-card__label {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--primary-dark);
}

/* Duża wartość highlight (np. „1.7 ogólnie" lub „2.5 kg") */
.winner-card__value {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--text);
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
    font-feature-settings: "lnum" 1, "tnum" 1;
    margin: .15rem 0 .4rem;
}

/* Link do produktu */
.winner-card__product {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    border-bottom: 1px dashed var(--primary);
    align-self: flex-start;
    padding-bottom: .15rem;
    transition: color .15s ease, border-color .15s ease;
}
.winner-card__product:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
}
.winner-card__arrow {
    color: var(--primary);
    font-weight: 700;
}

/* Opis pod linkiem */
.winner-card__desc {
    font-size: .9rem;
    color: var(--text-soft);
    line-height: 1.55;
    margin: .5rem 0 0;
}

/* ---------- COMPARE TABLE TRANSPOSED (features w wierszach, produkty w kolumnach) ---------- */
.table-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    /* Min-width skaluje się z liczbą produktów: 220 (feature col) + 200 per produkt */
    min-width: 100%;
}
.compare-table--transposed {
    table-layout: auto;
}

/* Wszystkie komórki — base */
.compare-table th,
.compare-table td {
    text-align: left;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    min-width: 170px;
}

/* Pierwsza kolumna (Cecha) — sticky, mocniejsza */
.compare-table__feature-head,
.compare-table__feature-row {
    position: sticky;
    left: 0;
    min-width: 160px;
    max-width: 200px;
    background: var(--bg-alt);
    z-index: 1;
    box-shadow: 2px 0 0 var(--border);
    font-weight: 600;
    color: var(--text);
}
.compare-table__feature-head {
    background: var(--primary-soft);
    z-index: 2;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    color: var(--primary-dark);
}
.compare-table__feature-row {
    font-family: var(--font-body);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-soft);
    font-weight: 700;
}

/* Header produktów (kolumny) */
.compare-table__product-head {
    background: var(--primary-soft);
    vertical-align: top;
    min-width: 200px;
    font-family: var(--font-heading);
}
.compare-table__product-head .compare-table__product-rank {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
    margin-right: .35rem;
    font-feature-settings: "lnum" 1;
    font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
}
.compare-table__product-head a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px dashed var(--primary);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.3;
    font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
}
.compare-table__product-head a:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
}

/* Alternating rows — zebra dla czytelności (skanowanie wierszy) */
.compare-table--transposed tbody tr:nth-child(even) td,
.compare-table--transposed tbody tr:nth-child(even) th[scope="row"] {
    background: var(--bg);
}

/* Brak danych w komórce */
.compare-table__cell-empty {
    color: var(--text-soft);
    text-align: center;
}

/* Hover całego wiersza */
.compare-table--transposed tbody tr:hover td { background: var(--primary-tint); }
.compare-table--transposed tbody tr:hover .compare-table__feature-row { background: var(--primary-soft); }

.table-note {
    font-size: .82rem;
    color: var(--text-soft);
    margin: 0 0 1rem;
    line-height: 1.55;
}

/* ---------- GUIDE STEPS ---------- */
.guide-steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}
.guide-steps li {
    counter-increment: step;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.6rem 1.4rem 4.5rem;
    position: relative;
    margin-bottom: 1rem;
}
.guide-steps li::before {
    content: counter(step);
    position: absolute;
    left: 1.5rem; top: 1.4rem;
    width: 2.2rem; height: 2.2rem;
    background: var(--primary-dark);
    color: var(--bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
}
.guide-steps h3 { margin-top: 0 !important; font-size: 1.1rem !important; }
.guide-steps p { margin-bottom: 0; font-size: .96rem; }

/* ---------- HIGHLIGHTED SECTION (FOTELIK) ---------- */
.section--highlight {
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-alt) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem 2rem 2.5rem !important;
    margin: 2rem 0;
    border: 1px solid var(--accent-soft);
}
.section--highlight h2 { color: var(--accent-dark); }

/* ---------- FAQ ITEMS ---------- */
.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: .8rem;
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item summary {
    padding: 1.1rem 1.4rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 3rem;
    line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--primary-dark);
    font-weight: 400;
    transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--accent-dark); }
.faq-item__body {
    padding: 0 1.4rem 1.3rem;
    border-top: 1px solid var(--border);
    padding-top: 1.1rem;
}
.faq-item__body p { margin: 0; line-height: 1.65; }

/* ---------- COLLAPSIBLE META (Aktualizacja i źródła) ---------- */
.article__sources {
    padding-top: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 0 !important;
}
.faq-item--meta summary {
    font-family: var(--font-body);
    font-size: .85rem !important;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .85rem 1.2rem !important;
    padding-right: 2.6rem !important;
}
.faq-item--meta summary::after {
    color: var(--text-soft) !important;
    font-size: 1.2rem !important;
}
.faq-item--meta .faq-item__body p {
    font-size: .88rem;
    color: var(--text-soft);
    line-height: 1.65;
    margin-bottom: .9em;
}
.faq-item--meta .faq-item__body p:last-child { margin-bottom: 0; }
.faq-item--meta .faq-item__body strong { color: var(--text); }

/* ---------- ARTICLE OUTRO ---------- */
.article__outro {
    background: var(--bg-alt);
    border-radius: var(--radius-md);
    padding: 1.8rem 2rem !important;
    border-bottom: 0 !important;
    margin-top: 2rem;
}
.article__outro h2 { font-size: 1.3rem !important; margin-bottom: 1rem !important; }
.article__outro p {
    font-size: .92rem;
    line-height: 1.65;
    margin-bottom: .9em;
}
.article__outro strong { color: var(--text); }
.article__cross-sell {
    margin-top: 1.4rem !important;
    padding-top: 1.4rem;
    border-top: 1px solid var(--border);
    font-style: italic;
}

/* ---------- WARN INLINE ---------- */
.warn { color: var(--accent-dark); font-weight: 600; }

/* ---------- RELATED POSTS (na dole artykułu) ---------- */
.related-posts {
    background: var(--bg-alt);
    padding: 3.5rem 0 4rem;
    margin-top: 2.5rem;
    border-top: 1px solid var(--border);
}
.section-head--left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: 720px;
}
.post-grid--3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.2rem, 2vw, 1.8rem);
}
@media (min-width: 640px) { .post-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .post-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.post-card__media--rel1 { background: linear-gradient(135deg, var(--primary-soft), #DDE4D9); }
.post-card__media--rel2 { background: linear-gradient(135deg, var(--accent-soft), #F4E0CC); }
.post-card__media--rel3 { background: linear-gradient(135deg, #E8E3D5, var(--primary-soft)); }

/* ---------- STICKY CTA (mobile-first) ---------- */
.sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(45, 42, 38, 0.08);
    padding: .8rem 0;
    z-index: 50;
    transform: translateY(100%);
    transition: transform .25s ease;
    visibility: hidden;
}
.sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
}
.sticky-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.sticky-cta__label {
    font-size: .9rem;
    color: var(--text);
    font-weight: 500;
    line-height: 1.3;
}
.sticky-cta .btn {
    padding: .65rem 1.2rem;
    font-size: .92rem;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .sticky-cta__label {
        font-size: .82rem;
        max-width: 50%;
    }
}

/* ==========================================================
   TOP PICKS — 3-5 kart na górze rankingu (mom-blog styl 2026)
   Wszystkie karty równej szerokości.
   ========================================================== */
.top-picks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin: 1.5rem 0 3rem;
}
@media (min-width: 720px) {
    .top-picks-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}
@media (min-width: 980px) {
    .top-picks-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.top-pick {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary);
    border-radius: var(--radius-sm);  /* editorial 4px */
    padding: 1.6rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease;
    overflow: hidden;
}
.top-pick::before {
    /* dekoracyjny blob w tle */
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    opacity: .25;
    z-index: 0;
    pointer-events: none;
}
.top-pick > * { position: relative; z-index: 1; }
.top-pick:hover { box-shadow: var(--shadow-md); }

.top-pick__head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}
.top-pick__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
}
.top-pick__icon svg {
    width: 22px;
    height: 22px;
}
.top-pick__badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .35rem .8rem;
    border-radius: 999px;
}
.top-pick__name {
    font-family: var(--font-heading);
    font-size: 1.22rem;
    line-height: 1.3;
    margin: 0 0 1rem;
    color: var(--text);
    font-weight: 600;
}
.top-pick__specs {
    list-style: none;
    padding: 0;
    margin: 0 0 1.3rem;
    flex-grow: 1;
}
.top-pick__specs li {
    font-size: .92rem;
    padding: .45rem 0;
    color: var(--text-soft);
    line-height: 1.45;
    border-bottom: 1px dashed var(--border);
}
.top-pick__specs li:last-child { border-bottom: 0; }
.top-pick__specs strong { color: var(--text); font-weight: 600; }
.top-pick__actions {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

/* Warianty kolorów top-pick (editorial — awards palette) */
.top-pick--primary { border-top-color: var(--primary); }
.top-pick--primary::before { background: var(--primary-soft); }
.top-pick--primary .top-pick__icon { background: var(--primary); color: #fff; border-radius: 0; }
.top-pick--primary .top-pick__badge { background: var(--primary); color: #fff; }

.top-pick--akcent { border-top-color: var(--accent); }
.top-pick--akcent::before { background: var(--accent-soft); }
.top-pick--akcent .top-pick__icon { background: var(--accent); color: #fff; border-radius: 0; }
.top-pick--akcent .top-pick__badge { background: var(--accent); color: #fff; }

.top-pick--sukces { border-top-color: var(--award-green); }
.top-pick--sukces::before { background: var(--award-green-soft); }
.top-pick--sukces .top-pick__icon { background: var(--award-green); color: #fff; border-radius: 0; }
.top-pick--sukces .top-pick__badge { background: var(--award-green); color: #fff; }

.top-pick--uwaga { border-top-color: var(--award-red); }
.top-pick--uwaga::before { background: var(--award-red-soft); }
.top-pick--uwaga .top-pick__icon { background: var(--award-red); color: #fff; border-radius: 0; }
.top-pick--uwaga .top-pick__badge { background: var(--award-red); color: #fff; }

/* Top-pick badge i icon - editorial square edges */
.top-pick__icon { border-radius: 0 !important; }
.top-pick__badge { border-radius: 0 !important; padding: .35rem .7rem !important; font-weight: 600 !important; }


/* ==========================================================
   BADGE VARIANTS (na kartach produktów + product-card__tag)
   ========================================================== */
.badge--primary { background: var(--primary-dark); color: #fff; }
.badge--akcent  { background: var(--accent-dark);  color: #fff; }
.badge--sukces  { background: var(--success-dark); color: #fff; }
.badge--uwaga   { background: var(--warning-dark); color: #fff; }
.badge--neutral { background: var(--bg-alt);       color: var(--text); }

.product-card__tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .25rem .7rem;
    border-radius: 999px;
    margin-left: .8rem;
    vertical-align: middle;
    background: var(--bg-alt);
    color: var(--text);
}
.product-card__tag--primary { background: var(--primary-dark); color: #fff; }
.product-card__tag--akcent  { background: var(--accent-dark);  color: #fff; }
.product-card__tag--sukces  { background: var(--success-dark); color: #fff; }
.product-card__tag--uwaga   { background: var(--warning-dark); color: #fff; }

/* Akcentowy border-top dla kart produktów wg wariantu */
.product-card--akcent { border-top: 4px solid var(--accent-dark); }
.product-card--sukces { border-top: 4px solid var(--success-dark); }
.product-card--uwaga  { border-top: 4px solid var(--warning-dark); }

/* ==========================================================
   MULTI-SHOP CTA — lista przycisków sklepów w karcie produktu
   ========================================================== */
.product-card__cta-label {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-soft);
    margin: 0 0 .8rem;
}
.product-card__shops {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.btn--shop {
    flex: 1 1 auto;
    min-width: 140px;
    text-align: center;
    font-size: .92rem;
    padding: .6rem 1rem;
}
.btn--sm {
    font-size: .85rem;
    padding: .55rem .9rem;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}