/* Zdrowotka Opinie. Kolory z motywu (--zdn-*), z bezpiecznymi wartościami zapasowymi; układ jak karuzela rolek. */
.zo-section{--zo-primary:var(--zdn-primary,#2e7d32);--zo-ink:var(--zdn-ink,#202920);--zo-muted:var(--zdn-muted,#626960);--zo-border:var(--zdn-border,#dfe4da);--zo-star:var(--zdn-star,#ffb800);--zo-tint:#f2eee3;max-width:1200px;margin:40px auto;padding:0 16px;box-sizing:border-box;color:var(--zo-ink)}
.zo-section *,.zo-section *::before,.zo-section *::after{box-sizing:border-box}
.zo-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.zo-eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--zo-primary);margin-bottom:2px}
.zo-title{margin:0;font-size:24px;line-height:1.2;font-weight:600;color:var(--zo-ink)}
.zo-score{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:8px 0 0;color:var(--zo-ink);text-decoration:none;min-height:32px}
a.zo-score:hover .zo-count{text-decoration:underline}
.zo-avg{font-size:20px;font-weight:700;line-height:1}
.zo-count{font-size:15px;color:var(--zo-muted)}
.zo-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.zo-all{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:8px;background:var(--zo-tint);color:var(--zo-primary);font-size:14px;font-weight:600;text-decoration:none}
.zo-all:hover{background:#eae4d5;color:var(--zo-primary)}
.zo-arrow{width:44px;height:44px;border-radius:22px;border:1px solid var(--zo-border);background:#fff;color:var(--zo-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.zo-arrow:disabled{opacity:.4;cursor:default}
.zo-arrow svg{width:18px;height:18px}
.zo-no-scroll .zo-arrow{display:none}

.zo-stars{position:relative;display:inline-block;line-height:0;vertical-align:middle;flex-shrink:0}
.zo-stars-base,.zo-stars-on{display:flex;gap:2px}
.zo-stars-on{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}
/* Motyw ustawia wszystkim ikonom fill:none i obrys, więc gwiazdki mają mocniejsze reguły. */
.zo-section .zo-stars svg{width:18px!important;height:18px!important;flex-shrink:0;stroke:none!important}
.zo-section .zo-stars-base svg{fill:#dde2d8!important}
.zo-section .zo-stars-on svg{fill:var(--zo-star)!important}

.zo-track{list-style:none;margin:0;padding:4px 0 10px;display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:none}
.zo-track::-webkit-scrollbar{display:none}
.zo-track:focus-visible{outline:3px solid var(--zdn-focus,#1b5e20);outline-offset:4px;border-radius:14px}
.zo-item{margin:0;padding:0;scroll-snap-align:start;display:flex;min-width:0}
.zo-card{display:flex;flex-direction:column;gap:12px;width:100%;margin:0;padding:20px;border:1px solid var(--zo-border);border-radius:14px;background:#fff}
.zo-section .zo-card .zo-stars svg{width:16px!important;height:16px!important}
.zo-text{margin:0;padding:0;border:0;flex-grow:1;quotes:none}
.zo-text::before,.zo-text::after{content:none}
.zo-text p{margin:0;font-size:16px;line-height:1.55;font-style:normal;color:var(--zo-ink);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.zo-who{display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid #ece7dc}
.zo-name{font-size:15px;font-weight:600;color:var(--zo-ink)}
.zo-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:13px;color:var(--zo-muted)}
.zo-ver{display:inline-flex;align-items:center;gap:4px;color:var(--zo-primary);font-weight:600}
.zo-ver svg{width:14px;height:14px}
.zo-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;padding:20px;border-radius:14px;background:var(--zo-tint);color:var(--zo-primary);font-size:15px;font-weight:600;text-align:center;text-decoration:none}
.zo-more b{font-size:32px;line-height:1;color:var(--zo-ink)}
.zo-more:hover{background:#eae4d5;color:var(--zo-primary)}
.zo-more:focus-visible,.zo-all:focus-visible,.zo-score:focus-visible{outline:3px solid var(--zdn-focus,#1b5e20);outline-offset:3px}
.zo-note{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--zo-muted)}
.zo-note a{color:var(--zo-primary);font-weight:600}

/* Koszyk: mniejsza wersja w lewej kolumnie, pod produktami (podsumowanie obok zostaje przyklejone). */
.zo-ctx-cart{margin:8px 0 0;padding:0;max-width:none}
.zo-ctx-cart .zo-head{margin-bottom:12px}
.zo-ctx-cart .zo-title{font-size:18px}
.zo-ctx-cart .zo-score{margin-top:4px}
.zo-ctx-cart .zo-all{min-height:40px;font-size:13px}
.zo-ctx-cart .zo-arrow{width:40px;height:40px}
.zo-ctx-cart .zo-track{grid-auto-columns:260px;gap:14px}
.zo-ctx-cart .zo-card{padding:16px;gap:10px}
.zo-ctx-cart .zo-text p{font-size:15px;-webkit-line-clamp:5}
.zdn-cp-grid>.zo-ctx-cart{grid-column:1;min-width:0}
/* Wszystkie trzy miejsca wprost: samo „span 2” przy podsumowaniu przestawiało kolumny. */
@media (min-width:901px){
.zdn-cp-grid.zo-has-reviews>.zdn-cp-items{grid-column:1;grid-row:1}
.zdn-cp-grid.zo-has-reviews>.zdn-cp-summary{grid-column:2;grid-row:1 / span 2}
.zdn-cp-grid.zo-has-reviews>.zo-ctx-cart{grid-column:1;grid-row:2}
}

@media (hover:hover){.zo-card{transition:border-color .2s ease}.zo-card:hover{border-color:var(--zdn-border-strong,#c9d6c1)}}
@media (max-width:767.98px){
.zo-section{margin:28px 0;padding:0}
.zo-head{padding:0 16px;align-items:flex-start}
.zo-title{font-size:22px}
.zo-all,.zo-arrow{display:none}
.zo-track{grid-auto-columns:82%;gap:10px;padding:4px 16px 10px;scroll-padding-inline:16px}
.zo-card{padding:16px}
.zo-text p{font-size:15px}
.zo-note{padding:0 16px}
.zo-ctx-cart{margin:4px 0 0}
.zo-ctx-cart .zo-head{padding:0}
.zo-ctx-cart .zo-track{grid-auto-columns:82%;padding:4px 0 10px;scroll-padding-inline:0}
}

/* Strona główna motywu: .zdh ma już boczne odstępy, więc sekcja bez własnego wcięcia (było 16 px w głąb względem
   reszty sekcji), a na telefonie tor do krawędzi ekranu i odstępy jak karuzele motywu (pomiar 28.10.2026). */
.zdh>.zo-section{padding-left:0;padding-right:0;margin:48px auto}
@media (max-width:767.98px){
.zdh>.zo-section{margin:36px 0}
.zdh>.zo-section .zo-head,.zdh>.zo-section .zo-note{padding-left:0;padding-right:0}
.zdh>.zo-section .zo-title{font-size:23px}
.zdh>.zo-section .zo-track{margin:0 -16px;padding:4px 16px 10px;scroll-padding-inline:16px}
}