/* ==========================================================================
pages.css - Podstrony treściowe (jak-powstaje, o-merino, o-nas, faq, rozmiarówka)
Ładowany po main.css (is_page(), zob. functions.php) - może nadpisywać
klasy ogólne (np. .eyebrow) w obrębie .page-hero, bo kolejność wygrywa.
Editorial: duża typografia, cienkie linie zamiast kart, asymetria, światło.
========================================================================== */
/* --- Hero podstrony --- */
.page-hero { padding: 96px 0 44px; border-bottom: 1px solid rgba(132,127,118,.3); }
.page-hero .eyebrow { color: var(--c-accent-em); opacity: 1; margin-bottom: 18px; }
.page-hero h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; max-width: 18ch; text-wrap: balance; }
.page-hero h1 .hl .squig { color: var(--c-accent); }
.page-lead { margin-top: 22px; font-size: 19px; color: var(--c-muted); max-width: 58ch; }
/* --- Kontener treści --- */
.page-shell { padding: 64px 0 132px; }
.page-content { max-width: var(--layout-content); }
/* Treściowe strony (podstrony, blog - lista i wpis) węższe niż layout wizualny:
przy 1720px tekst był za bardzo rozciągnięty (uwaga Tomasza 25.08).
Header/stopka zostają na --layout-max, bo ich .wrap jest poza tymi kontenerami. */
.page-hero .wrap, .page-shell .wrap, .blog-post .wrap { max-width: var(--layout-content); }
/* wpautop wstrzykuje puste między elementy - w gridach (.num-row itp.)
taki pusty akapit staje się elementem siatki i spycha treść do wąskiej
kolumny (rozjechane "O merino"). Chowamy wszystkie puste akapity. */
.page-content p:empty { display: none; }
/* wpautop wstawia też
między itemy gridów (m.in. .price-row na jak-powstaje) -
w gridzie staje się osobnym trackiem i robi 50-100px dziury między etykietą
a kwotą. Chowamy, analogicznie do p:empty wyżej. */
.price-row > br, .price-total > br, .num-row > br, .split > br { display: none; }
.page-content > *:first-child { margin-top: 0; }
/* Typografia treści */
.page-content h2 { margin: 76px 0 22px; max-width: 20ch; text-wrap: balance; }
.page-content > .page-section:first-child h2:first-child,
.page-content h2:first-child { margin-top: 0; }
.page-content h3 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h5); color: var(--c-plum); letter-spacing: -0.01em; margin: 0 0 10px; }
.page-content p { color: var(--c-graphite); max-width: 68ch; margin: 0 0 18px; font-size: var(--fs-body); }
.page-content p:last-child { margin-bottom: 0; }
.page-content p.lead-p { font-size: 20px; color: var(--c-muted); font-style: italic; max-width: 62ch; }
.page-content a { color: var(--c-accent-em); text-decoration: underline; text-underline-offset: 3px; }
.page-content a:hover { color: var(--c-accent); }
/* Wyjątek: przyciski w treści (np. "Przejdź do sklepu" w .page-cta) - reguła
linków wygrywała kolejnością arkuszy z .btn-solid i tekst robił się
bordowy + podkreślony na ciemnej pigułce (nieczytelne, Tomasz 25.08). */
.page-content a.btn { text-decoration: none; }
.page-content a.btn-solid { color: var(--c-cream); }
.page-content a.btn-solid:hover { color: var(--c-cream); }
.page-content a.btn-ghost { color: var(--c-plum); }
.page-content a.btn-ghost:hover { color: var(--c-cream); }
.page-content strong { color: var(--c-plum); }
.section-kicker { display: block; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--c-muted); margin-bottom: 12px; }
/* Sekcja treści - cienka linia zamiast karty, rytm pionowy */
.page-section { padding: 60px 0; border-top: 1px solid rgba(132,127,118,.25); }
.page-section:first-child { border-top: 0; padding-top: 0; }
/* Numerowana lista z cienkimi liniami (bez kart, bez cieni) - komponent reużywalny.
Układ 3-kolumnowy na pełną szerokość (numer | tytuł | tekst po prawej), jak
rzędy benefitów na home - bez pustego pola po prawej (uwaga Tomasza 19.08).
Markup ma treść w - display:contents wciąga h3/p/ul wprost do grida. */
/* Kreski (audyt d1, quick win): kontener bez własnej linii, ostatni rząd bez
border-bottom - znika podwójna hairline (ostatni rząd + border-top następnej
.page-section). Linie MIĘDZY rzędami zostają bez zmian. */
.num-rows { margin-top: 12px; }
.num-row { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 12px 48px; padding: 34px 0; border-bottom: 1px solid rgba(132,127,118,.3); }
.num-row:last-child { border-bottom: 0; }
.num-row > div { display: contents; }
.num-row > div > h3 { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.num-row > div > *:not(h3) { grid-column: 2; }
.num-row h3 { margin-bottom: 8px; }
.num-row p { color: var(--c-muted); font-size: var(--fs-body); max-width: 62ch; margin-bottom: 0; }
.num-row ul { margin: 0; padding-left: 18px; color: var(--c-muted); font-size: var(--fs-body); max-width: 62ch; }
.num-row li { margin-bottom: 7px; }
.num-row li:last-child { margin-bottom: 0; }
/* Numerowane kroki (tylko /zwroty/ - klasa z filtra w inc/strony.php):
kolumna numeru 76px wraca. Mobile: blok @media niżej (ta sama specyficzność). */
.num-row-nr { grid-template-columns: 76px minmax(220px, 340px) minmax(0, 1fr); }
.num-row-index { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--c-accent); padding-top: 5px; grid-column: 1; grid-row: 1; }
.num-row-nr > div > h3 { grid-column: 2; }
.num-row-nr > div > *:not(h3) { grid-column: 3; }
/* Split: tekst + zdjęcie, asymetryczny grid w obrębie .wrap */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
/* Grid item ma domyślnie min-width:auto - tabela z min-width 460px (rozmiarówka)
rozpychała wtedy cały dokument na mobile zamiast scrollować w .size-table-wrap. */
.split > * { min-width: 0; }
.split.split-flip { grid-template-columns: .95fr 1.05fr; }
.split.split-flip .split-photo { order: -1; }
.split-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: linear-gradient(160deg, var(--c-card), var(--c-taupe)); }
.split-copy h2, .split-copy h3 { margin-top: 0; }
/* Kadr z podpisem (jak-powstaje, od 25.09 w miejscu sekcji "Zero odpadów
z krojenia"): siatka num-rows (nagłówki / tekst), więc podpis stoi
na osi nagłówków punktów, a zdjęcie 4:5 startuje z osi tekstu - kadr
trzyma się rytmu łańcucha produkcji nad nim (krytyk 25.09, P3-5). */
.page-figure { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 12px 48px; align-items: end; margin: 0; }
.page-figure > br { display: none; }
.page-figure img { grid-column: 2; grid-row: 1; width: 100%; max-width: 420px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: linear-gradient(160deg, var(--c-card), var(--c-taupe)); }
.page-figure figcaption { grid-column: 1; grid-row: 1; justify-self: start; color: var(--c-muted); font-size: var(--fs-support); border-top: 1px solid rgba(132,127,118,.3); padding-top: 14px; }
/* Ceny bez ściemy - paski proporcji */
/* Bez border-top kontenera (d1 quick win); border-bottom ostatniego .price-row
zostaje celowo - pełni rolę kreski sumy nad "Razem" (.price-total). */
.price-breakdown { margin-top: 28px; }
.price-row { padding: 24px 0; border-bottom: 1px solid rgba(132,127,118,.3); display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; align-items: baseline; }
.price-row-label { font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--c-plum); }
.price-row-amount { font-family: var(--font-head); font-weight: 700; font-size: 21px; color: var(--c-accent-em); }
.price-row-desc { grid-column: 1 / -1; color: var(--c-muted); font-size: var(--fs-body); max-width: 64ch; margin: 2px 0 0; }
.price-bar-track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: rgba(192,173,157,.35); overflow: hidden; margin-top: 6px; }
.price-bar-fill { height: 100%; background: var(--c-accent); border-radius: 999px; }
.price-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 26px; font-family: var(--font-head); }
.price-total strong { font-size: 26px; color: var(--c-plum); }
/* Dopisek roboczy / compliance */
.page-note { margin-top: 30px; padding: 18px 22px; border-left: 3px solid var(--c-taupe); background: var(--c-card); color: var(--c-muted); font-size: 14px; font-style: italic; max-width: 68ch; }
/* Cytat/manifest wyśrodkowany - do UVP na o-nas */
.page-manifest { text-align: center; padding: 24px 0 12px; }
.page-manifest p { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); color: var(--c-plum); letter-spacing: -0.02em; line-height: 1.25; max-width: 26ch; margin: 0 auto; }
.page-manifest p em { font-family: var(--font-body); font-style: italic; font-weight: 400; color: var(--c-accent-em); }
.page-manifest span { display: block; margin-top: 16px; font-family: var(--font-body); font-style: italic; color: var(--c-muted); font-size: 16px; }
/* FAQ - akordeony (details/summary natywne, bez JS) */
.faq-group { margin-bottom: 56px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--c-accent-em); margin-bottom: 18px; }
/* Kontener bez border-top, ostatnie pytanie bez border-bottom (d1 quick win) -
FAQ ekran 2 spada z ~11 do ~6 linii. Linie między pytaniami bez zmian. */
.faq-list { border-top: 0; }
.faq-item { border-bottom: 1px solid rgba(132,127,118,.3); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--c-plum); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--c-accent); flex-shrink: 0; font-weight: 600; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--c-accent-em); }
.faq-a { padding: 0 2px 26px; }
.faq-a p { color: var(--c-muted); font-size: var(--fs-body); max-width: 66ch; margin-bottom: 10px; }
.faq-a p:last-child { margin-bottom: 0; }
/* Rozmiarówka - tabele */
.size-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.size-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 460px; }
table.size-table caption { text-align: left; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-label); color: var(--c-accent-em); margin-bottom: 14px; text-transform: uppercase; letter-spacing: var(--ls-meta); }
table.size-table th, table.size-table td { padding: 14px 18px 14px 0; text-align: left; border-bottom: 1px solid rgba(132,127,118,.3); }
table.size-table th { font-family: var(--font-head); font-weight: 600; color: var(--c-plum); border-bottom: 2px solid var(--c-plum); }
table.size-table tbody tr:hover { background: rgba(155,86,106,.05); }
.size-note { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; background: var(--c-card); border-radius: 4px; margin: 36px 0 0; }
.size-note strong { display: block; color: var(--c-plum); margin-bottom: 4px; }
.size-note p { margin: 0; color: var(--c-muted); font-size: var(--fs-support); }
/* CTA na dole strony */
/* Bez border-top (d1 #12: CTA i tak jest ostatnie, linia dublowała odstęp). */
.page-cta { margin-top: 76px; padding-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-cta h3 { margin: 0; max-width: 34ch; }
/* CTA z przyciskiem głównym + cichym linkiem pobocznym (o-merino: sklep + rozmiarówka) */
.page-cta-actions { display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; }
.page-content a.page-cta-side { display: inline-block; padding: 9px 0; font-size: 15px; color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }
.page-content a.page-cta-side:hover { color: var(--c-accent-em); }
/* --- Strony prawne i kontakt (regulamin, polityka-prywatnosci, zwroty, kontakt) --- */
.page-content ul, .page-content ol { max-width: 68ch; margin: 0 0 18px; padding-left: 22px; color: var(--c-graphite); font-size: 17px; }
.page-content ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content li { margin-bottom: 8px; }
.page-content li:last-child { margin-bottom: 0; }
.page-content li > ul, .page-content li > ol { margin-top: 8px; margin-bottom: 0; }
.legal-updated { display: block; font-size: 14px; color: var(--c-muted); margin: -6px 0 0; }
/* Bez border-top (d1 #13): dublował się z border-top .page-section - dwie linie
z samym paddingiem pomiędzy wyglądały jak błąd renderowania (m5, kontakt). */
.contact-block { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid rgba(132,127,118,.3); margin: 8px 0 30px; }
.contact-block dt { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--c-muted); margin: 0 0 4px; }
.contact-block dd { margin: 0; font-size: 18px; color: var(--c-plum); }
.contact-block dd a { font-weight: 600; }
.faq-pointer { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 26px; background: var(--c-card); border-radius: 4px; margin-top: 8px; }
.faq-pointer p { margin: 0; color: var(--c-graphite); font-size: var(--fs-body); max-width: 46ch; }
/* Mobile */
@media (max-width: 860px) {
.contact-block { flex-direction: column; gap: 18px; }
.faq-pointer { flex-direction: column; align-items: flex-start; }
.page-hero { padding: 56px 0 36px; }
.page-shell { padding: 44px 0 88px; }
.page-content h2 { margin: 52px 0 18px; }
.page-section { padding: 44px 0; }
.split, .split.split-flip { grid-template-columns: 1fr; gap: 26px; }
.split.split-flip .split-photo { order: 0; }
.page-figure { grid-template-columns: 1fr; gap: 16px; }
/* max 480px: plik ma 560px - bez rozciągania na tablecie; podpis równo ze zdjęciem */
.page-figure img, .page-figure figcaption { grid-column: 1; grid-row: auto; justify-self: start; max-width: 480px; width: 100%; }
.num-row, .num-row-nr { grid-template-columns: 1fr; gap: 8px; }
.num-row-index { padding-top: 0; grid-row: auto; }
.num-row > div > h3, .num-row > div > *:not(h3), .num-row-nr > div > h3, .num-row-nr > div > *:not(h3) { grid-column: 1; grid-row: auto; }
.price-row { grid-template-columns: 1fr; }
.price-total { flex-direction: column; align-items: flex-start; gap: 6px; }
/* Mniejszy oddech przed CTA na mobile - na FAQ robiła się ~200px dziura
(padding sekcji + margin-top 76 + padding-top 48). */
.page-cta { flex-direction: column; align-items: flex-start; margin-top: 40px; padding-top: 20px; }
/* iOS Safari auto-zoomuje przy fokusie na polach z font-size < 16px.
Zasięg: formularze w treści podstron (kontakt/newsletter, gdyby doszły). */
.page-content input, .page-content select, .page-content textarea { font-size: 16px; }
}
/* ==========================================================================
O-merino - układ "magazynowy" (propozycje-design-2026-08-25, sekcja 6 wariant A)
Markup w DB to wciąż num-rows - transformacja klasą body .page-o-merino
+ filtrem the_content (inc/strony.php: merinoshe_o_merino_magazyn).
Naprzemienne wyrównanie (wielkie numery w tle usunięte - Tomasz 12.10.2026),
przeplatanki kadr 4:5 + pull-quote, zero hairlines między sekcjami.
========================================================================== */
.page-o-merino .page-section { border-top: 0; }
.page-o-merino .num-rows { margin-top: 0; }
.page-o-merino .num-row { display: block; position: relative; border-bottom: 0; padding: clamp(36px, 4.5vw, 64px) 0; }
.page-o-merino .num-row > div { display: block; position: relative; max-width: 58ch; }
.page-o-merino .num-row > div > h3 { margin-bottom: 12px; }
.page-o-merino .num-row p { max-width: 58ch; margin-bottom: 14px; }
.page-o-merino .num-row p:last-child { margin-bottom: 0; }
/* Co drugi rząd (num-row-r, klasa z filtra) - tekst po prawej */
.page-o-merino .num-row-r > div { margin-left: auto; }
/* Przeplatanka: kadr 4:5 + pull-quote (rytm jak quote band na o-nas) */
.page-o-merino .mag-split {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: clamp(32px, 5vw, 80px);
align-items: center;
padding: clamp(40px, 5vw, 72px) 0;
}
.page-o-merino .mag-photo { margin: 0; }
.page-o-merino .mag-photo img {
width: 100%;
max-width: 400px;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 4px;
background: linear-gradient(160deg, var(--c-card), var(--c-taupe));
}
.page-o-merino .mag-split-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.page-o-merino .mag-split-flip .mag-photo { order: 2; justify-self: end; }
.page-o-merino .pullq {
margin: 0;
font-family: var(--font-head);
font-weight: 700;
font-size: var(--fs-h3);
line-height: 1.22;
letter-spacing: -0.02em;
color: var(--c-accent-em);
text-wrap: balance;
}
/* Animacje wjazdu na o-merino: rząd wjeżdża z boku, do którego jest wyrównany,
przeplatanka rozjeżdża się na boki (kadr i cytat z przeciwnych stron),
wielki numer w tle dołącza z opóźnieniem. Mechanizm .reveal/.is-visible
z ui.js bez zmian; html ma overflow-x: clip, więc boczne starty nie robią
poziomego scrolla. */
.page-o-merino .num-row.reveal { transform: translateX(-64px); }
.page-o-merino .num-row-r.reveal { transform: translateX(64px); }
.page-o-merino .num-row.reveal.is-visible { transform: none; }
.page-o-merino .mag-split.reveal { transform: none; }
.page-o-merino .mag-split.reveal .mag-photo,
.page-o-merino .mag-split.reveal .pullq { opacity: 0; transition: opacity .8s ease, transform .8s ease; }
.page-o-merino .mag-split.reveal .mag-photo { transform: translateX(-56px); }
.page-o-merino .mag-split.reveal .pullq { transform: translateX(56px); transition-delay: .15s; }
.page-o-merino .mag-split-flip.reveal .mag-photo { transform: translateX(56px); }
.page-o-merino .mag-split-flip.reveal .pullq { transform: translateX(-56px); }
.page-o-merino .mag-split.reveal.is-visible .mag-photo,
.page-o-merino .mag-split.reveal.is-visible .pullq { opacity: 1; transform: none; }
/* Nić merino - z kłębka w prawym górnym rogu odwija się jedna ciągła nić,
wije się po pustej przestrzeni obok rzędów 01-06, przez szczeliny
przeplatanek i wolne pole sekcji "Dlaczego to się opłaca", rysuje się
scrollem i kończy POD przyciskiem CTA "Przejdź do sklepu" (assets/js/
nic-merino.js buduje ścieżkę z geometrii layoutu; bez JS nici nie ma).
Warstwa POD całą treścią artykułu: .page-content izoluje kontekst, svg na
z-index -1 - dotyka tylko pustki, nigdy tekstu i zdjęć. Kłębek wypełniony
płótnem, żeby zakryć nić pod sobą. Do 860px zamiast nici: krótkie zawijasy
przy numerach w tle (.mt-squig, w każdym .num-row). */
.page-o-merino .page-content { position: relative; isolation: isolate; }
.merino-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; color: var(--c-accent); }
.merino-thread .mt-klebek, .merino-thread .mt-tip { color: var(--c-accent-em); }
.merino-thread .mt-klebek circle { fill: var(--kv-canvas); stroke: currentColor; }
.merino-thread .mt-klebek path { stroke: currentColor; }
.merino-thread .mt-tip { opacity: 0; transition: opacity .3s ease; }
/* przycisk CTA "odbiera" nić - jeden krótki puls, gdy nić do niego dociera */
@keyframes mt-arrive { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
.page-o-merino .page-cta .btn-solid.is-threaded { animation: mt-arrive .6s ease; }
@media (prefers-reduced-motion: reduce) {
.page-o-merino .page-cta .btn-solid.is-threaded { animation: none; }
}
@media (max-width: 860px) { .merino-thread { display: none; } }
/* zawijasy mobilne: w pasie na prawo od numeru, nad nagłówkiem */
.page-o-merino .num-row .mt-squig { position: absolute; display: block; overflow: visible; pointer-events: none; color: var(--c-accent); }
@media (min-width: 861px) { .page-o-merino .num-row .mt-squig { display: none; } }
/* Rzędy przed reveal stoją na translateX(±64px) poza kontenerem - html ma
overflow-x: clip, więc nie da się przewinąć w bok, ale scrollWidth był
większy od clientWidth (audyt 10.09: 1490/1440, mobile 434/390). Klip na
samym .page-shell zdejmuje nadmiar u źródła; nić i kłębek mieszczą
się w kontenerze (PAD_EDGE 24px). */
.page-o-merino .page-shell { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
.page-o-merino .num-row.reveal,
.page-o-merino .mag-split.reveal .mag-photo,
.page-o-merino .mag-split.reveal .pullq { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 860px) {
.page-o-merino .num-row { padding: 28px 0; }
/* Na wąskim ekranie asymetria lewo/prawo robi zygzak bez oddechu - wyłączamy */
.page-o-merino .num-row-r > div { margin-left: 0; }
.page-o-merino .mag-split, .page-o-merino .mag-split-flip { grid-template-columns: 1fr; gap: 24px; }
.page-o-merino .mag-split-flip .mag-photo { order: 0; justify-self: start; }
.page-o-merino .mag-photo img { max-width: 320px; }
}
/* ==========================================================================
Blog "Merino 101" (markup: home.php, single.php, inc/blog.php)
Editorial: karty bez cieni, cienkie linie, zdjęcia 3:2.
========================================================================== */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px 40px;
margin-top: 8px;
}
.blog-card-link { display: block; text-decoration: none; color: inherit; }
.blog-card-img { display: block; overflow: hidden; border-radius: 6px; margin-bottom: 16px; }
.blog-card-img img {
width: 100%;
height: auto; /* nadpisz atrybut height z WP - inaczej aspect-ratio nie działa */
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 6px;
background: linear-gradient(160deg, var(--c-card), var(--c-taupe));
transition: transform .35s ease;
}
.blog-card-link:hover .blog-card-img img { transform: scale(1.03); }
.blog-card-meta {
display: block;
font-family: var(--font-head);
font-weight: 600;
font-size: var(--fs-label);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
color: var(--c-muted);
margin-bottom: 8px;
}
.blog-card-title {
font-family: var(--font-head);
font-weight: 700;
font-size: 21px;
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--c-plum);
margin: 0 0 8px;
transition: color .18s ease;
}
.blog-card-link:hover .blog-card-title { color: var(--c-accent-em); }
.blog-card-excerpt { font-size: var(--fs-support); color: var(--c-muted); margin: 0 0 12px; }
.blog-card-more {
font-family: var(--font-head);
font-weight: 600;
font-size: 14px;
color: var(--c-accent-em);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Lista bloga: featured + wiersze (sekcja 7 pkt 2 - koniec rządka 3 równych kart).
Markup w home.php. .blog-grid zostaje dla "Warto przeczytać również" (single). */
.blog-feat { margin-top: 8px; }
.blog-feat-link {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 64px);
align-items: center;
text-decoration: none;
color: inherit;
}
.blog-feat-img { display: block; overflow: hidden; border-radius: 6px; }
.blog-feat-img img {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 6px;
background: linear-gradient(160deg, var(--c-card), var(--c-taupe));
transition: transform .35s ease;
}
.blog-feat-link:hover .blog-feat-img img { transform: scale(1.03); }
.blog-feat-copy { display: block; min-width: 0; }
.blog-feat-title {
font-family: var(--font-head);
font-weight: 700;
font-size: var(--fs-h3);
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--c-plum);
margin: 0 0 14px;
text-wrap: balance;
transition: color .18s ease;
}
.blog-feat-link:hover .blog-feat-title { color: var(--c-accent-em); }
.blog-feat-excerpt { font-size: var(--fs-body); color: var(--c-muted); margin: 0 0 18px; max-width: 46ch; }
/* Pozostałe wpisy: wiersze z miniaturą 4:5 po lewej, bez hairlines - sam odstęp */
.blog-rows { margin-top: clamp(48px, 6vw, 84px); display: grid; gap: clamp(36px, 4vw, 56px); }
.blog-row-link {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: clamp(24px, 3vw, 48px);
align-items: center;
text-decoration: none;
color: inherit;
}
.blog-row-img { display: block; overflow: hidden; border-radius: 6px; }
.blog-row-img img {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 6px;
background: linear-gradient(160deg, var(--c-card), var(--c-taupe));
transition: transform .35s ease;
}
.blog-row-link:hover .blog-row-img img { transform: scale(1.03); }
.blog-row-copy { display: block; min-width: 0; }
.blog-row-title {
font-family: var(--font-head);
font-weight: 700;
font-size: 23px;
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--c-plum);
margin: 0 0 8px;
transition: color .18s ease;
}
.blog-row-link:hover .blog-row-title { color: var(--c-accent-em); }
.blog-row-copy .blog-card-excerpt { max-width: 58ch; }
/* Pre-footerowe CTA listy bloga (poza .page-content - kolory btn wprost) */
.blog-cta a.btn-solid { color: var(--c-cream); text-decoration: none; }
@media (max-width: 860px) {
.blog-feat-link { grid-template-columns: 1fr; gap: 18px; }
.blog-row-link { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
.blog-row-title { font-size: 19px; }
.blog-row-copy .blog-card-excerpt { display: none; }
.blog-cta { flex-direction: column; align-items: flex-start; margin-top: 40px; padding-top: 20px; }
}
/* Okruszki bloga (SEO etap 2, 16.09.2026; markup: inc/blog.php -> hero
home.php i single.php). Lustro .product-breadcrumbs z product.css: ten sam
krój, wersaliki, kolory muted / taupe (separator) / accent-em (hover).
Stopień pisma i tracking z zestawu fine (--fs-fine + --ls-fine) - dokładnie
jak okruszki PDP i mapa w tokens.css; kicker hero (--fs-label) zostaje
wyraźnie większy, żeby obie linie meta nie zlewały się w jedną (krytyk 16.09,
P2-1/P2-2). Czytelność 50+ załatwia przyciemniony --c-muted. */
.page-breadcrumbs {
display: flex;
align-items: baseline;
flex-wrap: nowrap;
min-width: 0;
font-family: var(--font-head);
font-size: var(--fs-fine);
letter-spacing: var(--ls-fine);
text-transform: uppercase;
color: var(--c-muted);
margin-bottom: 28px;
}
.page-breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.page-breadcrumbs a:hover { color: var(--c-accent-em); }
.page-breadcrumbs a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.page-breadcrumbs .bc-sep { margin: 0 8px; color: var(--c-taupe); flex: 0 0 auto; }
.page-breadcrumbs a { flex: 0 0 auto; white-space: nowrap; }
/* Tytuł wpisu bywa długi - jedna linia z wielokropkiem zamiast trzech linii
wersalików nad kickerem (miara w ch, więc skaluje się z fontem). */
.page-breadcrumbs .bc-current {
min-width: 0;
max-width: 60ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 1023px) {
.page-breadcrumbs .bc-current { max-width: 40ch; }
}
@media (max-width: 720px) {
.page-breadcrumbs .bc-current { max-width: 18ch; }
}
/* Wpis */
.post-meta {
font-family: var(--font-head);
font-weight: 600;
font-size: var(--fs-label);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
color: var(--c-muted);
margin-top: 14px;
}
.post-hero .page-lead { margin-top: 16px; }
.post-hero-img { margin: 0; }
.post-hero-img img {
width: 100%;
height: auto;
aspect-ratio: 21 / 9;
object-fit: cover;
border-radius: 6px;
background: linear-gradient(160deg, var(--c-card), var(--c-taupe));
}
/* Dwie kolumny wpisu: treść + sticky sidebar (spis treści, polecane) */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px 72px; align-items: start; }
.post-main { min-width: 0; }
.post-aside { position: sticky; top: 96px; display: grid; gap: 40px; }
.post-aside-title {
font-family: var(--font-head);
font-weight: 700;
font-size: 16px;
color: var(--c-plum);
margin: 0 0 14px;
padding-top: 16px;
border-top: 1px solid rgba(132,127,118,.35);
}
.post-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.post-toc-list li { counter-increment: toc; margin-bottom: 2px; }
.post-toc-list a {
display: flex;
gap: 10px;
padding: 7px 0;
font-size: 15px;
line-height: 1.4;
color: var(--c-muted);
text-decoration: none;
transition: color .15s ease;
}
.post-toc-list a::before {
content: counter(toc) ".";
font-family: var(--font-head);
font-weight: 600;
color: var(--c-accent);
flex: 0 0 auto;
min-width: 18px;
}
.post-toc-list a:hover { color: var(--c-plum); }
.post-toc-list a.is-active { color: var(--c-plum); font-weight: 600; }
.post-content h2[id] { scroll-margin-top: 96px; }
/* Karty "Warto przeczytać również" w sidebarze */
.side-card { margin-bottom: 28px; }
.side-card:last-child { margin-bottom: 0; }
.side-card-link { display: block; text-decoration: none; color: inherit; }
.side-card-title {
font-family: var(--font-head);
font-weight: 700;
font-size: 16px;
line-height: 1.3;
color: var(--c-plum);
margin: 0 0 6px;
transition: color .15s ease;
}
.side-card-link:hover .side-card-title { color: var(--c-accent-em); }
.side-card-meta {
display: block;
font-family: var(--font-head);
font-weight: 600;
font-size: var(--fs-label); /* było 11.5px - poniżej progu czytelności na mobile (audyt m5) */
letter-spacing: var(--ls-meta);
text-transform: uppercase;
color: var(--c-muted);
margin-bottom: 10px;
}
.side-card-img { display: block; overflow: hidden; border-radius: 6px; margin-bottom: 10px; }
.side-card-img img {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 6px;
background: linear-gradient(160deg, var(--c-card), var(--c-taupe));
transition: transform .35s ease;
}
.side-card-link:hover .side-card-img img { transform: scale(1.03); }
.side-card-more {
font-family: var(--font-head);
font-weight: 600;
font-size: 13px;
color: var(--c-accent-em);
text-decoration: underline;
text-underline-offset: 3px;
}
.post-content { max-width: 760px; font-size: var(--fs-body); }
.post-content h2 { margin: 56px 0 18px; }
.post-content h2:first-child { margin-top: 0; }
/* „Z tego wpisu do szafy" (SEO etap 2, 16.09.2026; markup: inc/blog.php ->
merinoshe_post_products_block). Kafle to natywna pętla Woo, więc wygląd
dziedziczą z ul.products li.product (main.css + shop.css, doładowany na
wpisie w functions.php) - tutaj tylko domknięcie sekcji: cienka linia,
kicker z lewej i liczba kolumn dopasowana do węższej kolumny .post-main.
Rytm (linia, 96/44px, 56/28px na mobile) jak .shop-about w shop.css. */
.post-products { margin-top: 96px; padding-top: 44px; border-top: 1px solid rgba(132, 127, 118, .3); }
.post-products-kicker {
margin: 0 0 24px;
font-family: var(--font-head);
font-weight: 600;
font-size: var(--fs-label);
line-height: 1.6;
letter-spacing: var(--ls-kicker);
text-transform: uppercase;
color: var(--c-muted);
}
/* Kolumna wpisu jest węższa niż listing i od 1024px dzieli się jeszcze
z sidebarem - trzy kafle mieszczą się dopiero od 1280px (pomiar krytyka
16.09: przy 1024px trzy kolumny dawały kafel 175px, dwie dają 274px).
Domyślnie dwie kolumny, trzy od 1280px; poniżej 720px siatka Woo
z main.css schodzi sama do jednej. */
.post-products ul.products { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1280px) {
.post-products ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.post-products { margin-top: 56px; padding-top: 28px; }
}
.post-cta { margin-top: 64px; }
/* Bez border-top (d1 #15: linia dublowała odstęp 88px); padding-top ścięty,
bo istniał głównie jako oddech od usuniętej kreski. */
.blog-related { margin-top: 88px; padding-top: 0; }
.blog-related-title { margin-bottom: 32px; }
/* Paginacja listy */
.pagination { margin-top: 56px; }
.pagination .nav-links { display: flex; gap: 14px; flex-wrap: wrap; }
.pagination .page-numbers {
display: inline-flex;
align-items: center;
padding: 9px 18px;
border: 1.5px solid var(--c-taupe);
border-radius: 999px;
font-family: var(--font-head);
font-weight: 600;
font-size: 14px;
color: var(--c-plum);
text-decoration: none;
}
.pagination .page-numbers.current { background: var(--c-plum); border-color: var(--c-plum); color: var(--c-cream); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--c-plum); }
@media (max-width: 960px) {
.blog-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
/* Wpis: sidebar schodzi pod artykuł; spis treści bez sensu na dole - chowamy */
.post-layout { grid-template-columns: 1fr; }
.post-aside { position: static; }
.post-toc { display: none; }
}
@media (max-width: 640px) {
.blog-grid { grid-template-columns: 1fr; }
.post-hero-img img { aspect-ratio: 3 / 2; }
}
/* Rysowane ikony przy tytułach num-rows (O merino, O nas) - animacja kreski
wspólna dla motywu: .ico-line w main.css (rysuje się z .is-visible na rzędzie). */
.num-row h3 { transition: color .18s ease; }
.num-row h3 .num-ico { display: inline-block; width: 34px; height: 34px; vertical-align: -9px; margin-right: 12px; color: var(--c-plum); transition: color .25s ease, transform .25s ease; }
.num-row:hover h3 { color: var(--c-accent-em); }
.num-row:hover h3 .num-ico { color: var(--c-accent-em); transform: rotate(-6deg) scale(1.08); }
/* ============================================================
Owca-maskotka: hero podstron/bloga, sidebar wpisu, strona 404
============================================================ */
.hero-has-owca { position: relative; }
/* niskie hero (zwroty: sam tytuł) - owca ma z czego brać wysokość; tylko desktop, na mobile owca jest ukryta i min-height robiłby pusty pas */
@media (min-width: 901px) { .hero-has-owca { min-height: 140px; } }
.hero-owca { position: absolute; right: 24px; bottom: 0; width: clamp(150px, 16vw, 240px); }
/* Docelowe pozy mają różne proporcje (spi leży, suszy szeroka, reszta ~0.7),
więc skalujemy je WYSOKOŚCIĄ: max 300px, ale nigdy więcej niż hero
(+84px może wejść w górny padding hero, który ma 96px) - na krótkim hero (zwroty: sam
tytuł) owca nie wystaje pod nagłówek strony. */
.hero-owca.owca-kolor { width: auto; height: min(300px, 22vw, calc(100% + 84px)); }
.hero-owca.owca-kolor svg { width: auto; height: 100%; }
.hero-owca.owca-p-suszy { right: 48px; }
@media (max-width: 900px) { .hero-owca { display: none; } }
/* Thank-you (klasyczny szablon Woo): owca z paczką nad "Dziękujemy" */
.thankyou-owca.owca-kolor { display: block; margin: 0 0 18px; width: max-content; height: 200px; }
.thankyou-owca.owca-kolor svg { width: auto; height: 100%; }
/* Thank-you: zaproszenie do Instagrama/Facebooka (inc/social.php) */
.thankyou-social { margin: 40px 0 8px; padding-top: 26px; border-top: 1px solid rgba(132,127,118,.3); max-width: 620px; }
.thankyou-social p { margin: 8px 0 0; }
.thankyou-social-links { font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--c-plum); }
.thankyou-social-links a { color: inherit; }
/* Owca przy "Warto przeczytać również" (sidebar wpisu) */
.aside-owca { display: block; margin-bottom: 14px; width: 120px; }
/* 404 */
.err-404 { padding: 110px 0 100px; border-bottom: 0; }
.err-owca { display: block; margin-bottom: 26px; width: min(300px, 70vw); }
.err-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
/* Reguła wyżej stoi w pliku ZA głównym media query mobile (kolejność wygrywa przy
równej specyficzności), więc mobilny padding 404 musi być zadeklarowany tutaj. */
@media (max-width: 860px) {
.err-404 { padding: 56px 0 64px; }
}
/* --- SEO: poziomy nagłówków (inc/seo-tech.php, merinoshe_seo_heading_levels) ---
Zmienione są TYLKO tagi (h3->h2 w rzędach /o-merino/, span->h2 etykiet grup
/faq/). Poniższe reguły neutralizują style h2 z main.css (.fs-h2, 700,
line-height 1.08) i .page-content h2 (marginesy 76/22, max-width 20ch,
text-wrap balance), żeby wygląd był identyczny jak przed zmianą. */
.page-o-merino .page-content .num-row h2 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h5); color: var(--c-plum); letter-spacing: -0.01em; line-height: 1.6; margin: 0 0 12px; max-width: none; text-wrap: wrap; transition: color .18s ease; }
.page-o-merino .num-row h2 .num-ico { display: inline-block; width: 34px; height: 34px; vertical-align: -9px; margin-right: 12px; color: var(--c-plum); transition: color .25s ease, transform .25s ease; }
.page-o-merino .num-row:hover h2 { color: var(--c-accent-em); }
.page-o-merino .num-row:hover h2 .num-ico { color: var(--c-accent-em); transform: rotate(-6deg) scale(1.08); }
.page-content h2.faq-group-title { display: inline; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--c-accent-em); line-height: 1.6; margin: 0 0 18px; max-width: none; text-wrap: wrap; }
/* Strona /opinia/ - link do formularza opinii na prośbę (inc/opinie.php, 25.09.2026) */
.opinia-form { margin: 8px 0 28px; max-width: 560px; }
.opinia-form__etykieta { display: block; font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--c-graphite); margin: 0 0 10px; }
.opinia-form .opinia-form__rzad { justify-content: flex-start; max-width: none; margin: 0; }
.opinia-form input { font-size: 17px; }
.opinia-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.opinia-blad { color: var(--c-accent-em); font-weight: 600; margin: 0 0 12px; }
.opinia-wynik { background: var(--c-card); border-radius: 20px; padding: 24px 28px; margin: 8px 0 28px; max-width: 62ch; }
.opinia-wynik__tytul { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--c-graphite); margin: 0 0 8px; }
.opinia-wynik p:last-child, .opinia-info:last-child { margin-bottom: 0; }
.opinia-info { font-size: var(--fs-body); color: var(--c-graphite); max-width: 62ch; }
.opinia-wynik a, .opinia-info a, .opinia-blad a { color: var(--c-accent); text-decoration: underline; }
/* Tabele w treści wpisów (Tomasz 02.10.2026: „mało czytelnie”). Język jak
table.size-table z /rozmiarowka/: lewe wyrównanie, cienkie linie między
wierszami, nagłówek League Spartan z kreską 2px, pierwsza kolumna jako
etykieta wiersza. Poniżej 720px wiersz = karta z podpisami kolumn
(data-label dokłada inc/blog.php -> merinoshe_post_table_labels). */
.post-content table {
width: 100%;
margin: 32px 0 36px;
border-collapse: collapse;
font-size: 16px;
line-height: 1.55;
}
.post-content th,
.post-content td {
padding: 14px 20px 14px 0;
text-align: left;
vertical-align: top;
border-bottom: 1px solid rgba(132, 127, 118, .3);
}
.post-content th:last-child,
.post-content td:last-child { padding-right: 0; }
.post-content thead th {
font-family: var(--font-head);
font-weight: 600;
font-size: var(--fs-label);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
color: var(--c-muted);
border-bottom: 2px solid var(--c-plum);
padding-top: 0;
}
.post-content tbody td:first-child {
font-family: var(--font-head);
font-weight: 600;
color: var(--c-plum);
min-width: 8em;
}
.post-content tbody tr:hover { background: rgba(155, 86, 106, .05); }
.post-content table + p { margin-top: 0; }
@media (max-width: 719px) {
.post-content table,
.post-content tbody,
.post-content tr,
.post-content td { display: block; width: 100%; }
.post-content thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.post-content tbody tr {
padding: 16px 0;
border-bottom: 1px solid rgba(132, 127, 118, .3);
}
.post-content tbody tr:first-child { border-top: 2px solid var(--c-plum); }
.post-content tbody tr:hover { background: none; }
.post-content tbody td { padding: 4px 0; border: 0; white-space: normal; }
.post-content tbody td:first-child { font-size: 18px; padding-bottom: 6px; }
.post-content tbody td[data-label]:not(:first-child)::before {
content: attr(data-label);
display: block;
font-family: var(--font-head);
font-weight: 600;
font-size: var(--fs-label);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
color: var(--c-muted);
}
}