/*
 * EcoBen — wspolne style podstron (ecoben-pages.css)
 * ============================================================
 * Jeden plik dla WSZYSTKICH stron budowanych z SZABLON-stron.html
 * (strona glowna, o nas, FAQ, opinie, kontakt, gwarancja).
 * Serwowany site-wide przez wtyczke ecoben-header-footer (po CSS motywu).
 *
 * SCOPE: .eco-page.eco-page (celowo podwojona klasa, specyficznosc 0,2,0):
 *  - przebija globalne reguly typu .entry-content p (0,1,1),
 *  - a page-specific reguly #ecoben-XXX (1,0,0+) ZAWSZE wygrywaja z tym plikiem.
 * Strona MUSI miec root: <section id="ecoben-XXX" class="eco-page">.
 *
 * ZRODLO PRAWDY: sekcje 1:1 z SZABLON-stron.html / STYLEGUIDE.md.
 * Strony NIE powielaja tych regul — w bloku HTML strony zostaje tylko
 * markup + CSS specyficzny dla strony (pod #ecoben-XXX).
 */

/* ============================================================
   RDZEŃ — zawsze zostaje (tokeny + reset + typografia + przyciski)
   ============================================================ */
.eco-page.eco-page{
	--eco:#4A7C59; --eco-d:#3C5E48; --eco-dd:#2F5239;
	--navy:#0A1F44; --navy-soft:#1F3563;
	--cream:#FAF8F4; --warm:#F2EEE5; --tint:#EEF4EF;
	--ink:#1A1A1A; --soft:#45433E; --faint:#7A7770;
	--line:#E8E5DE; --gold:#C19A4B; --paper:#fff;
	--r:22px; --r-lg:30px;
	font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
	max-width:1180px; margin:0 auto;
}
.eco-page.eco-page *{box-sizing:border-box;}
.eco-page.eco-page h1,.eco-page.eco-page h2,.eco-page.eco-page h3{
	font-family:'Instrument Serif',Georgia,serif; font-weight:400; line-height:1.08;
	color:var(--navy); margin:0; letter-spacing:-.01em;
}
.eco-page.eco-page p{margin:0;}
.eco-page.eco-page a{color:inherit; text-decoration:none;}
.eco-page.eco-page em{font-style:italic; color:var(--eco-dd);}
.eco-page.eco-page img{max-width:100%; display:block;}
.eco-page.eco-page svg{display:block;}
.eco-page.eco-page .ico{width:24px; height:24px; flex:0 0 auto;}
.eco-page.eco-page > * + *{margin-top:clamp(44px,7vw,88px);}

.eco-page.eco-page .eco-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
	padding:14px 26px; border-radius:999px; font-family:'Outfit',sans-serif;
	font-weight:600; font-size:15px; line-height:1; cursor:pointer;
	border:1.6px solid transparent; transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.eco-page.eco-page .eco-btn:hover{transform:translateY(-2px);}
.eco-page.eco-page .eco-btn--primary{background:var(--eco); color:#fff; box-shadow:0 12px 26px -14px rgba(74,124,89,.85);}
.eco-page.eco-page .eco-btn--primary:hover{background:var(--eco-d);}
.eco-page.eco-page .eco-btn--ghost{background:#fff; color:var(--navy); border-color:var(--line);}
.eco-page.eco-page .eco-btn--ghost:hover{border-color:var(--eco); color:var(--eco-dd);}
.eco-page.eco-page .eco-btn--light{background:#fff; color:var(--navy);}
.eco-page.eco-page .eco-btn--light:hover{background:var(--cream);}
.eco-page.eco-page .eco-btn--outline-l{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
.eco-page.eco-page .eco-btn--outline-l:hover{background:rgba(255,255,255,.12); border-color:#fff;}

.eco-page.eco-page .eco-eyebrow{
	display:inline-flex; align-items:center; gap:.5rem;
	font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
	color:var(--eco-dd);
}
.eco-page.eco-page .eco-head{max-width:660px; margin:0 auto; text-align:center;}
.eco-page.eco-page .eco-head h2{font-size:clamp(30px,4.4vw,44px); margin:14px 0 0;}
.eco-page.eco-page .eco-head p{margin:14px auto 0; color:var(--soft); font-size:17px; max-width:560px;}
.eco-page.eco-page .eco-stars{display:inline-flex; gap:1px; color:var(--gold);}
.eco-page.eco-page .eco-stars svg{width:15px; height:15px;}

/* ============================================================
   SEKCJA: HERO (2 kolumny — tekst + zdjęcie)
   Wariant bez zdjęcia: usuń .eco-hero-visual i daj grid-template-columns:1fr
   ============================================================ */
.eco-page.eco-page .eco-hero{
	display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,5vw,60px); align-items:center;
	background:linear-gradient(160deg,#fff 0%,var(--cream) 60%,var(--tint) 100%);
	border:1px solid var(--line); border-radius:var(--r-lg);
	padding:clamp(28px,5vw,60px); overflow:hidden;
}
.eco-page.eco-page .eco-hero h1{font-size:clamp(36px,6vw,60px); color:var(--navy); margin:16px 0 0;}
.eco-page.eco-page .eco-hero-lead{margin-top:20px; font-size:clamp(16px,2vw,19px); color:var(--soft); max-width:520px;}
.eco-page.eco-page .eco-hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.eco-page.eco-page .eco-hero-visual{position:relative;}
.eco-page.eco-page .eco-hero-photo{
	border-radius:26px; background:#fff; border:1px solid var(--line);
	box-shadow:0 30px 60px -34px rgba(10,31,68,.35); overflow:hidden;
	padding:clamp(18px,3vw,34px);
}
.eco-page.eco-page .eco-hero-photo img{width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;}

/* ============================================================
   SEKCJA: PASEK USP (4 kafelki zaufania)
   Lekcja: wiersz = grid auto|1fr + align-items:center (NIE flex — ikony uciekają
   do góry), ikona = grid place-items:center + jawny rozmiar SVG.
   Lekcja 2 (root cause): ikona-badge to <span> — goły selektor
   ".eco-trust-item span{display:block}" wygrywa specyficznością z
   ".eco-trust-ic{display:grid}" i wyłącza centrowanie. Teksty stylować
   WYŁĄCZNIE przez klasę wrappera (.eco-trust-txt), nigdy przez goły span/div.
   ============================================================ */
.eco-page.eco-page .eco-trust{
	display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
	margin-top:clamp(20px,3vw,28px);
}
.eco-page.eco-page .eco-trust-item{
	display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px;
	padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--r);
}
.eco-page.eco-page .eco-trust-ic{
	width:42px; height:42px; border-radius:12px; background:var(--tint);
	color:var(--eco-dd); display:grid; place-items:center;
}
.eco-page.eco-page .eco-trust-ic svg{width:22px; height:22px;}
.eco-page.eco-page .eco-trust-txt b{display:block; font-size:14.5px; color:var(--ink); font-weight:600; line-height:1.25;}
.eco-page.eco-page .eco-trust-txt span{display:block; font-size:12.5px; color:var(--faint); line-height:1.3; margin-top:2px;}

/* ============================================================
   SEKCJA: SIATKA KART (ikona + tytuł + opis + link)
   Uniwersalna: kategorie, benefity, usługi. Karta może być <a> lub <div>.
   ============================================================ */
.eco-page.eco-page .eco-cards-grid{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:18px; margin-top:46px;
}
.eco-page.eco-page .eco-card{
	display:flex; flex-direction:column; padding:24px; background:#fff;
	border:1px solid var(--line); border-radius:var(--r);
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.eco-page.eco-page a.eco-card:hover{transform:translateY(-4px); border-color:var(--eco); box-shadow:0 22px 40px -26px rgba(26,32,44,.4);}
.eco-page.eco-page .eco-card-ic{
	width:50px; height:50px; border-radius:14px; background:var(--tint); color:var(--eco-dd);
	display:grid; place-items:center; margin-bottom:16px;
}
.eco-page.eco-page .eco-card-ic svg{width:26px; height:26px;}
.eco-page.eco-page .eco-card h3{font-size:21px; color:var(--navy);}
.eco-page.eco-page .eco-card p{margin-top:8px; font-size:14.5px; color:var(--soft); line-height:1.55; flex:1;}
.eco-page.eco-page .eco-card-link{
	margin-top:16px; display:inline-flex; align-items:center; gap:6px;
	font-size:14px; font-weight:600; color:var(--eco-dd);
}
.eco-page.eco-page .eco-card-link svg{width:16px; height:16px; transition:transform .15s ease;}
.eco-page.eco-page a.eco-card:hover .eco-card-link svg{transform:translateX(4px);}

/* ============================================================
   SEKCJA: SIATKA PRODUKTÓW (statyczne karty, cała karta = link)
   Ceny wpisywane ręcznie — dopisz komentarz CENA-SNAPSHOT z datą.
   ============================================================ */
.eco-page.eco-page .eco-prods-grid{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:46px;
}
.eco-page.eco-page .eco-prod{
	position:relative; display:flex; flex-direction:column; padding:14px; background:#fff;
	border:1px solid var(--line); border-radius:18px;
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.eco-page.eco-page .eco-prod:hover{transform:translateY(-4px); border-color:var(--eco); box-shadow:0 22px 40px -26px rgba(26,32,44,.4);}
.eco-page.eco-page .eco-prod-img{border-radius:12px; background:var(--cream); overflow:hidden; margin-bottom:12px;}
.eco-page.eco-page .eco-prod-img img{width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; mix-blend-mode:multiply;}
.eco-page.eco-page .eco-prod-badge{
	position:absolute; top:22px; left:22px; z-index:1;
	background:var(--navy); color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.04em;
	border-radius:999px; padding:5px 11px; box-shadow:0 10px 20px -10px rgba(10,31,68,.5);
}
.eco-page.eco-page .eco-prod-tag{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--eco-dd); margin-bottom:5px;}
.eco-page.eco-page .eco-prod h3{font-family:'Outfit',sans-serif; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.35; letter-spacing:0;}
.eco-page.eco-page .eco-prod-desc{margin-top:6px; font-size:13px; color:var(--faint); line-height:1.5; flex:1;}
.eco-page.eco-page .eco-prod-price{margin:12px 0; font-size:18px; font-weight:700; color:var(--navy);}
.eco-page.eco-page .eco-prod-price small{font-size:13px; font-weight:500; color:var(--faint); margin-right:4px;}
.eco-page.eco-page .eco-prod-btn{
	display:block; text-align:center; background:var(--eco); color:#fff; border-radius:999px;
	padding:12px 16px; font-weight:600; font-size:14px; line-height:1.2; transition:background .2s ease;
}
.eco-page.eco-page .eco-prod:hover .eco-prod-btn{background:var(--eco-d);}

/* ============================================================
   SEKCJA: CIEMNY PANEL (granat) — „dlaczego my" / wyróżniki / misja
   ============================================================ */
.eco-page.eco-page .eco-dark{
	background:var(--navy); color:#fff; border-radius:var(--r-lg);
	padding:clamp(34px,5vw,64px);
}
.eco-page.eco-page .eco-dark .eco-eyebrow{color:#9CC6A8;}
.eco-page.eco-page .eco-dark h2{color:#fff; font-size:clamp(30px,4.4vw,44px); margin-top:14px;}
.eco-page.eco-page .eco-dark-lead{color:rgba(255,255,255,.75); margin-top:14px; max-width:560px; font-size:16.5px;}
.eco-page.eco-page .eco-dark-grid{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:40px;
}
.eco-page.eco-page .eco-dark-card{
	background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
	border-radius:18px; padding:24px;
}
.eco-page.eco-page .eco-dark-ic{
	width:46px; height:46px; border-radius:12px; background:rgba(156,198,168,.16);
	color:#BFE0C9; display:grid; place-items:center; margin-bottom:16px;
}
.eco-page.eco-page .eco-dark-ic svg{width:24px; height:24px;}
.eco-page.eco-page .eco-dark-card h3{color:#fff; font-size:20px;}
.eco-page.eco-page .eco-dark-card p{margin-top:8px; font-size:14px; color:rgba(255,255,255,.72); line-height:1.55;}
/* Info-box wewnątrz ciemnego panelu (np. gwarancja) */
.eco-page.eco-page .eco-dark-info{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
	margin-top:22px; padding:18px 24px; border:1px solid rgba(255,255,255,.16); border-radius:18px;
	background:rgba(156,198,168,.08);
}
.eco-page.eco-page .eco-dark-info p{color:rgba(255,255,255,.85); font-size:15px;}
.eco-page.eco-page .eco-dark-info p b{color:#fff;}
.eco-page.eco-page .eco-dark-info a{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#BFE0C9;}
.eco-page.eco-page .eco-dark-info a svg{width:16px; height:16px;}
.eco-page.eco-page .eco-dark-info a:hover{color:#fff;}

/* ============================================================
   SEKCJA: INFO-BOX (jasny) — wyróżniona informacja w treści
   Wzorzec z checkoutu/e-maili: tinted panel + border + ikona.
   ============================================================ */
.eco-page.eco-page .eco-info{
	display:grid; grid-template-columns:auto 1fr; align-items:start; gap:14px;
	background:var(--tint); border:1px solid var(--line); border-radius:var(--r);
	padding:20px 24px;
}
.eco-page.eco-page .eco-info-ic{
	width:42px; height:42px; border-radius:12px; background:#fff; color:var(--eco-dd);
	display:grid; place-items:center;
}
.eco-page.eco-page .eco-info-ic svg{width:22px; height:22px;}
.eco-page.eco-page .eco-info b{display:block; font-size:15.5px; color:var(--navy); font-weight:600;}
.eco-page.eco-page .eco-info p{margin-top:4px; font-size:14.5px; color:var(--soft); line-height:1.55;}

/* ============================================================
   SEKCJA: KROKI (numerowane kafelki 1-2-3)
   ============================================================ */
.eco-page.eco-page .eco-steps-grid{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:46px;
}
.eco-page.eco-page .eco-step{
	position:relative; padding:28px 24px; background:var(--cream);
	border:1px solid var(--line); border-radius:var(--r);
}
.eco-page.eco-page .eco-step-n{
	width:40px; height:40px; border-radius:50%; background:var(--eco); color:#fff;
	display:grid; place-items:center; font-family:'Instrument Serif',serif;
	font-size:22px; margin-bottom:16px;
}
.eco-page.eco-page .eco-step h3{font-size:20px; color:var(--navy);}
.eco-page.eco-page .eco-step p{margin-top:8px; font-size:14.5px; color:var(--soft); line-height:1.55;}

/* ============================================================
   SEKCJA: OPINIE (nagłówek z oceną + karty opinii)
   ============================================================ */
.eco-page.eco-page .eco-reviews-top{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
	margin-top:30px; text-align:center;
}
.eco-page.eco-page .eco-reviews-top .eco-big{font-family:'Instrument Serif',serif; font-size:40px; color:var(--navy); line-height:1;}
.eco-page.eco-page .eco-reviews-top span{color:var(--faint); font-size:14px;}
.eco-page.eco-page .eco-reviews-grid{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; margin-top:34px;
}
.eco-page.eco-page .eco-review{
	display:flex; flex-direction:column; padding:24px; background:#fff;
	border:1px solid var(--line); border-radius:var(--r);
}
.eco-page.eco-page .eco-review .eco-stars{margin-bottom:12px;}
.eco-page.eco-page .eco-review p{font-size:15px; color:var(--soft); line-height:1.6; flex:1;}
.eco-page.eco-page .eco-review-by{display:flex; align-items:center; gap:11px; margin-top:18px;}
.eco-page.eco-page .eco-avatar{
	width:38px; height:38px; border-radius:50%; background:var(--eco); color:#fff;
	display:grid; place-items:center; font-weight:600; font-size:15px; flex:0 0 auto;
}
.eco-page.eco-page .eco-review-by b{display:block; font-size:14px; color:var(--ink); font-weight:600;}
.eco-page.eco-page .eco-review-by small{display:flex; align-items:center; gap:4px; font-size:12px; color:var(--eco-dd); margin-top:1px;}
.eco-page.eco-page .eco-review-by small svg{width:13px; height:13px;}

/* ============================================================
   SEKCJA: FAQ (natywny <details>, zero JS)
   ============================================================ */
.eco-page.eco-page .eco-faq{max-width:780px; margin-left:auto; margin-right:auto;}
.eco-page.eco-page .eco-faq-list{margin-top:34px; display:flex; flex-direction:column; gap:12px;}
.eco-page.eco-page .eco-faq details{
	background:#fff; border:1px solid var(--line); border-radius:16px; padding:4px 22px;
	transition:border-color .18s ease;
}
.eco-page.eco-page .eco-faq details[open]{border-color:var(--eco);}
.eco-page.eco-page .eco-faq summary{
	list-style:none; cursor:pointer; padding:18px 0; font-weight:600; font-size:16.5px; color:var(--navy);
	display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.eco-page.eco-page .eco-faq summary::-webkit-details-marker{display:none;}
.eco-page.eco-page .eco-faq summary .eco-faq-plus{
	flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--eco-dd);
	display:grid; place-items:center; font-size:20px; line-height:1; transition:transform .2s ease;
}
.eco-page.eco-page .eco-faq details[open] summary .eco-faq-plus{transform:rotate(45deg);}
.eco-page.eco-page .eco-faq details p{padding:0 0 20px; color:var(--soft); font-size:15px; line-height:1.6;}

/* ============================================================
   SEKCJA: BANER CTA (gradient zielony → granat)
   ============================================================ */
.eco-page.eco-page .eco-cta{
	position:relative; overflow:hidden; text-align:center;
	background:linear-gradient(155deg,var(--eco) 0%,var(--eco-dd) 70%,var(--navy) 130%);
	color:#fff; border-radius:var(--r-lg); padding:clamp(40px,6vw,72px) clamp(24px,5vw,56px);
}
.eco-page.eco-page .eco-cta h2{color:#fff; font-size:clamp(30px,4.6vw,46px); max-width:640px; margin:0 auto;}
.eco-page.eco-page .eco-cta p{margin:16px auto 0; color:rgba(255,255,255,.82); font-size:17px; max-width:520px;}
.eco-page.eco-page .eco-cta-btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px;}
.eco-page.eco-page .eco-cta-leaf{position:absolute; right:-30px; bottom:-40px; width:230px; height:230px; color:rgba(255,255,255,.08);}

/* ============================================================
   SEKCJA: BLOK KONTAKTOWY (dane + kanały kontaktu)
   ============================================================ */
.eco-page.eco-page .eco-contact{
	display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px);
	background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:clamp(28px,5vw,56px);
}
.eco-page.eco-page .eco-contact h2{font-size:clamp(28px,4vw,40px); margin-top:14px;}
.eco-page.eco-page .eco-contact-lead{margin-top:14px; color:var(--soft); font-size:16px; max-width:440px;}
.eco-page.eco-page .eco-contact-list{display:flex; flex-direction:column; gap:12px;}
.eco-page.eco-page .eco-contact-item{
	display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px;
	background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px 22px;
	transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.eco-page.eco-page a.eco-contact-item:hover{transform:translateY(-3px); border-color:var(--eco); box-shadow:0 22px 40px -26px rgba(26,32,44,.4);}
.eco-page.eco-page .eco-contact-ic{
	width:44px; height:44px; border-radius:12px; background:var(--tint); color:var(--eco-dd);
	display:grid; place-items:center;
}
.eco-page.eco-page .eco-contact-ic svg{width:22px; height:22px;}
/* Teksty przez klasę wrappera — goły "span" nadpisałby display:grid ikony (patrz lekcja przy USP) */
.eco-page.eco-page .eco-contact-txt b{display:block; font-size:15px; color:var(--navy); font-weight:600;}
.eco-page.eco-page .eco-contact-txt span{display:block; font-size:13.5px; color:var(--faint); margin-top:2px;}

/* ============================================================
   UZUPELNIENIA WSPOLNE (uzywane na 2+ stronach)
   ============================================================ */
/* micro-dowody pod CTA hero (gwiazdki - 4,9/5 - dostawa) */
.eco-page.eco-page .eco-hero-micro{
	display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:26px;
	font-size:13.5px; color:var(--faint);
}
.eco-page.eco-page .eco-hero-micro .eco-dot{width:4px; height:4px; border-radius:50%; background:var(--line);}
.eco-page.eco-page .eco-hero-micro strong{color:var(--ink); font-weight:600;}
/* wycentrowany przycisk "zobacz wiecej" pod siatka (produkty, opinie) */
.eco-page.eco-page .eco-more{text-align:center; margin-top:28px;}
/* hero wariant: wycentrowany, bez wizuala (FAQ, opinie, kontakt, gwarancja) */
.eco-page.eco-page .eco-hero--center{
	display:block; text-align:center;
	padding:clamp(32px,5vw,64px) clamp(24px,5vw,60px);
}
.eco-page.eco-page .eco-hero--center h1{font-size:clamp(34px,5.4vw,54px); margin:16px auto 0; max-width:680px;}
.eco-page.eco-page .eco-hero--center .eco-hero-lead{margin:18px auto 0; font-size:clamp(16px,2vw,18px); max-width:560px;}
.eco-page.eco-page .eco-hero--center .eco-hero-cta{justify-content:center;}
.eco-page.eco-page .eco-hero--center .eco-hero-micro{justify-content:center;}

/* ============================================================
   RESPONSYWNOŚĆ — rdzeń (dostosuj do zostawionych sekcji)
   ============================================================ */
@media (max-width:860px){
	.eco-page.eco-page .eco-hero{grid-template-columns:1fr;}
	.eco-page.eco-page .eco-hero-visual{order:-1; max-width:420px; margin:0 auto; width:100%;}
	.eco-page.eco-page .eco-trust{grid-template-columns:repeat(2,1fr);}
	.eco-page.eco-page .eco-prods-grid{grid-template-columns:repeat(2,1fr);}
	.eco-page.eco-page .eco-contact{grid-template-columns:1fr;}
}
@media (max-width:480px){
	.eco-page.eco-page .eco-trust{grid-template-columns:1fr;}
	.eco-page.eco-page .eco-hero-cta .eco-btn{flex:1 1 100%;}
	.eco-page.eco-page .eco-prods-grid{grid-template-columns:1fr;}
}

/* ============================================================
   OPISY PRODUKTÓW (scope .eco-prodesc) — od wtyczki 1.5.0
   ============================================================
   Osobny system od stron (.eco-page). Opis produktu wkleja się w pole
   „Opis" produktu WooCommerce (blok wp:html) jako markup + ZERO CSS —
   wszystkie style tutaj. Scope podwojony .eco-prodesc.eco-prodesc (0,2,0)
   przebija motyw/.entry-content; tokeny definiowane lokalnie (opis nie jest
   dzieckiem .eco-page). Root opisu: <div class="eco-prodesc"> … </div>.
   ============================================================ */
.eco-prodesc.eco-prodesc{
	--eco:#4A7C59; --eco-d:#3C5E48; --eco-dd:#2F5239;
	--navy:#0A1F44; --cream:#FAF8F4; --warm:#F2EEE5; --tint:#EEF4EF;
	--ink:#1A1A1A; --soft:#45433E; --faint:#7A7770;
	--line:#E8E5DE; --gold:#C19A4B; --r:22px; --r-lg:30px;
	font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	color:var(--ink); line-height:1.6; max-width:1000px; margin:0 auto;
}
.eco-prodesc.eco-prodesc *{box-sizing:border-box;}
.eco-prodesc .epx-h2{
	font-family:'Instrument Serif',Georgia,serif; font-weight:400; line-height:1.1;
	letter-spacing:-.01em; color:var(--navy); font-size:clamp(26px,4vw,38px); margin:0;
}
.eco-prodesc .epx-h3{font-family:'Instrument Serif',Georgia,serif; font-weight:400; color:var(--navy); font-size:22px; line-height:1.1; margin:0;}
.eco-prodesc .epx-em{font-style:italic; color:var(--eco-dd);}
.eco-prodesc > * + *{margin-top:clamp(32px,5vw,52px);}

/* --- INTRO: nazwa + lead + badge'y --- */
.eco-prodesc .epx-intro{
	background:linear-gradient(160deg,#fff 0%,var(--cream) 70%,var(--tint) 100%);
	border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,4vw,44px);
}
.eco-prodesc .epx-eyebrow{
	display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
	font-weight:600; color:var(--eco-dd); margin-bottom:12px;
}
.eco-prodesc .epx-lead{margin-top:14px; font-size:clamp(15px,1.6vw,17px); color:var(--soft); max-width:640px; line-height:1.65;}
.eco-prodesc .epx-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.eco-prodesc .epx-badge{
	display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line);
	border-radius:999px; padding:8px 15px; font-size:13px; font-weight:600; color:var(--navy);
}
.eco-prodesc .epx-badge svg{width:16px; height:16px; color:var(--eco-dd); flex:0 0 auto;}

/* --- SEKCJA (nagłówek + treść) --- */
.eco-prodesc .epx-sec-head{max-width:640px; margin-bottom:24px;}
.eco-prodesc .epx-sec-head .epx-lead{margin-top:10px;}

/* --- KROKI (3× numer) --- */
.eco-prodesc .epx-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.eco-prodesc .epx-step{
	position:relative; padding:24px 20px; background:var(--cream);
	border:1px solid var(--line); border-radius:var(--r);
}
.eco-prodesc .epx-step-n{
	width:38px; height:38px; border-radius:50%; background:var(--eco); color:#fff;
	display:grid; place-items:center; font-family:'Instrument Serif',serif; font-size:21px; margin-bottom:14px;
}
.eco-prodesc .epx-step p{margin-top:6px; font-size:14px; color:var(--soft); line-height:1.55;}

/* --- PORÓWNANIE BioMe vs chemia --- */
.eco-prodesc .epx-compare{border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
.eco-prodesc .epx-compare table{width:100%; border-collapse:collapse; table-layout:fixed;}
.eco-prodesc .epx-compare th,.eco-prodesc .epx-compare td{padding:14px 16px; text-align:left; font-size:14px; vertical-align:top; border-top:1px solid var(--line);}
.eco-prodesc .epx-compare thead th{border-top:0; font-family:'Outfit',sans-serif; font-size:14.5px; font-weight:700;}
.eco-prodesc .epx-compare thead th:nth-child(2){color:var(--eco-dd);}
.eco-prodesc .epx-compare thead th:nth-child(3){color:var(--faint);}
.eco-prodesc .epx-compare td:first-child{font-weight:600; color:var(--navy); width:30%;}
.eco-prodesc .epx-compare tbody tr:nth-child(odd){background:var(--cream);}
.eco-prodesc .epx-compare td:nth-child(2){color:var(--soft);}
.eco-prodesc .epx-compare td:nth-child(3){color:var(--faint);}

/* --- FAQ (details) --- */
.eco-prodesc .epx-faq{display:flex; flex-direction:column; gap:10px;}
.eco-prodesc .epx-faq details{background:#fff; border:1px solid var(--line); border-radius:16px; padding:2px 20px; transition:border-color .18s ease;}
.eco-prodesc .epx-faq details[open]{border-color:var(--eco);}
.eco-prodesc .epx-faq summary{
	list-style:none; cursor:pointer; padding:16px 0; font-weight:600; font-size:15.5px; color:var(--navy);
	display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.eco-prodesc .epx-faq summary::-webkit-details-marker{display:none;}
.eco-prodesc .epx-faq .epx-faq-plus{
	flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--tint); color:var(--eco-dd);
	display:grid; place-items:center; font-size:19px; line-height:1; transition:transform .2s ease;
}
.eco-prodesc .epx-faq details[open] .epx-faq-plus{transform:rotate(45deg);}
.eco-prodesc .epx-faq details p{padding:0 0 18px; color:var(--soft); font-size:14.5px; line-height:1.6;}

/* --- BANER GWARANCJI --- */
.eco-prodesc .epx-guarantee{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
	background:var(--navy); color:#fff; border-radius:var(--r); padding:22px 26px;
}
.eco-prodesc .epx-guarantee-txt{display:flex; align-items:center; gap:14px;}
.eco-prodesc .epx-guarantee-ic{width:44px; height:44px; border-radius:12px; background:rgba(156,198,168,.16); color:#BFE0C9; display:grid; place-items:center; flex:0 0 auto;}
.eco-prodesc .epx-guarantee-ic svg{width:24px; height:24px;}
.eco-prodesc .epx-guarantee b{display:block; font-size:16px;}
.eco-prodesc .epx-guarantee span{display:block; font-size:13.5px; color:rgba(255,255,255,.72); margin-top:2px;}
.eco-prodesc .epx-guarantee a{
	display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--navy);
	border-radius:999px; padding:11px 20px; font-weight:600; font-size:14px; white-space:nowrap;
}
.eco-prodesc .epx-guarantee a svg{width:16px; height:16px;}

@media (max-width:720px){
	.eco-prodesc .epx-steps{grid-template-columns:1fr;}
	.eco-prodesc .epx-compare{overflow-x:auto;}
	.eco-prodesc .epx-compare table{min-width:520px;}
}