/* ============================================================
   TS Front — warstwa wygladu frontu sklepu CGR.
   Paleta i kroj z ciemnego panelu karty produktu.
   ============================================================ */

/* ------------------------------------------------------------
   1. Nizszy naglowek — desktop i telefon.

   Wzorzec „Header 1" (blok 785) sklada sie z:
   padding + logo (205 px szerokosci daje ok. 111 px wysokosci)
   + spacer 50 px + padding.

   Desktop bylo ok. 225 px, po pierwszym cieciu 180 px,
   teraz padding 22 px, spacer 10 px i logo 170 px daje ok. 145 px.
   Telefon nie byl wczesniej ruszany: spacer 20 px i logo 160 px
   scinaja go z ok. 210 px do ok. 155 px.
   ------------------------------------------------------------ */

/* wszystkie szerokosci, wiec takze telefon */
.home-cover .wp-block-spacer{
	height:20px !important;
}
.home-cover .wp-block-site-logo img{
	width:160px !important;
	height:auto !important;
}

@media (min-width:782px){
	.home-cover{
		padding-top:22px !important;
		padding-bottom:22px !important;
	}
	.home-cover .wp-block-spacer{
		height:10px !important;
	}
	.home-cover .wp-block-site-logo img{
		width:170px !important;
	}
}
/* ------------------------------------------------------------
   2. Strony tresciowe: O nas, Kontakt, Regulamin, Pomoc.
   Szablony page-<slug> i single-post-<slug> renderuja ciemny naglowek
   (tytul + zajawka), pod nim tresc na bieli.
   ------------------------------------------------------------ */
.ts-strona{
	--panel:#191B1F;
	--panel-2:#23262C;
	--panel-line:#32363E;
	--panel-text:#F5F6F8;
	--panel-mute:#A9AFBA;
	--yellow:#FEDB32;
	--yellow-hover:#E3BD00;
	--p-ink:#101319;
	--p-body:#4B5361;
	--p-muted:#6B7383;
	--p-line:#E5E8ED;
	--p-soft:#EEF0F4;
	--ts-font:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

	font-family:var(--ts-font);
	color:var(--p-body);
	margin-top:0 !important;
}

/* --- ciemny naglowek jako box na szerokosc tresci --- */
.ts-strona__hero{
	background:transparent;
	padding:clamp(26px,3vw,40px) clamp(20px,4vw,44px) 0;
	margin:0;
}
.ts-strona__herobox{
	background:var(--panel);
	border-radius:18px;
	padding:clamp(32px,3.6vw,46px) clamp(26px,3.2vw,42px);
	max-width:var(--ts-kolumna);
	margin:0 auto;
}
.ts-strona__herobox > *{
	max-width:none;
	margin-left:0;
	margin-right:0;
}
.ts-strona__hero .wp-block-post-title{
	font-family:var(--ts-font);
	color:#fff;
	font-size:clamp(28px,3.8vw,38px);
	font-weight:800;
	line-height:1.1;
	letter-spacing:-.03em;
	margin:0;
	text-align:left;
	padding:0;
}
.ts-strona__hero .wp-block-post-excerpt{margin:14px 0 0}
.ts-strona__hero .wp-block-post-excerpt__excerpt{
	font-family:var(--ts-font);
	color:var(--panel-mute);
	font-size:16px;
	line-height:1.6;
	max-width:66ch;
	margin:0;
}
.ts-strona__hero .wp-block-post-excerpt__more-link{display:none}

/* --- tresc --- */
.ts-strona__body{
	padding:clamp(34px,4vw,52px) clamp(20px,4vw,44px) clamp(48px,6vw,72px);
	font-size:15px;
	line-height:1.7;
}
.ts-strona__body p{color:var(--p-body);margin:0 0 14px}
.ts-strona__body h2,
.ts-strona__body h3{
	font-family:var(--ts-font);
	color:var(--p-ink);
	letter-spacing:-.02em;
	line-height:1.25;
}
.ts-strona__body h2{font-size:24px;font-weight:700;margin:38px 0 14px}
.ts-strona__body h3{font-size:19px;font-weight:700;margin:30px 0 12px}
.ts-strona__body h2:first-child,
.ts-strona__body h3:first-child{margin-top:0}
.ts-strona__body a{color:var(--p-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ts-strona__body a:hover{color:var(--yellow-hover)}
.ts-strona__body ul,
.ts-strona__body ol{margin:0 0 18px;padding-left:22px}
.ts-strona__body li{margin:0 0 8px}
.ts-strona__body img{border-radius:14px}

/* --- Pomoc: FAQ na natywnych <details> ---
   Akordeon Essential Blocks zostal wymieniony na wlasny, bo wtyczka
   generowala arkusz i tlo bloku, ktorych nie dalo sie nadpisac.
   Dziala bez JS-a, otwiera sie tez przy wyszukiwaniu w przegladarce. */

.ts-strona__body .ts-faq__intro{
	max-width:74ch;
	margin:0 0 30px;
}

.ts-strona__body .ts-faq{
	border-top:1px solid var(--p-line);
	margin:0 0 34px;
}

.ts-strona__body .ts-faq__item{
	border-bottom:1px solid var(--p-line);
}

.ts-strona__body .ts-faq__q{
	list-style:none;
	cursor:pointer;
	position:relative;
	padding:20px 46px 20px 0;
	font-family:var(--ts-font);
	font-size:16px;
	font-weight:600;
	line-height:1.45;
	letter-spacing:-.01em;
	color:var(--p-ink);
	transition:color .16s ease;
}
.ts-strona__body .ts-faq__q::-webkit-details-marker{display:none}
.ts-strona__body .ts-faq__q::marker{content:""}
.ts-strona__body .ts-faq__q:hover{color:var(--yellow-hover)}
.ts-strona__body .ts-faq__q:focus-visible{
	outline:2px solid var(--yellow);
	outline-offset:3px;
	border-radius:3px;
}

/* Strzalka rysowana CSS-em, obraca sie po otwarciu. */
.ts-strona__body .ts-faq__q::after{
	content:"";
	position:absolute;
	right:10px;
	top:26px;
	width:9px;
	height:9px;
	border-right:2px solid var(--p-muted);
	border-bottom:2px solid var(--p-muted);
	transform:rotate(45deg);
	transition:transform .2s ease,border-color .16s ease;
}
.ts-strona__body .ts-faq__item[open] > .ts-faq__q::after{
	transform:rotate(225deg);
	top:30px;
}
.ts-strona__body .ts-faq__q:hover::after{border-color:var(--yellow-hover)}

.ts-strona__body .ts-faq__a{
	padding:0 46px 24px 0;
	max-width:76ch;
}
.ts-strona__body .ts-faq__a > *:first-child{margin-top:0}
.ts-strona__body .ts-faq__a > *:last-child{margin-bottom:0}
.ts-strona__body .ts-faq__a p{
	font-size:15px;
	line-height:1.7;
	color:var(--p-body);
	margin:0 0 12px;
}
.ts-strona__body .ts-faq__a ol,
.ts-strona__body .ts-faq__a ul{
	margin:0 0 12px;
	padding-left:20px;
	color:var(--p-body);
}
.ts-strona__body .ts-faq__a li{margin:0 0 7px}
.ts-strona__body .ts-faq__a strong{color:var(--p-ink);font-weight:600}

@media (prefers-reduced-motion:reduce){
	.ts-strona__body .ts-faq__q::after{transition:none}
}

/* --- Regulamin: rozdzialy i spis tresci --- */
.ts-strona__body .ts-reg__h{
	scroll-margin-top:24px;
	font-size:22px;
	font-weight:700;
	color:var(--p-ink);
	margin:44px 0 16px;
	padding-top:26px;
	border-top:1px solid var(--p-line);
}
.ts-strona__body .ts-reg__h:first-of-type{border-top:0;padding-top:0;margin-top:8px}
.ts-strona__body .ts-reg__toc{
	background:var(--p-soft);
	border-radius:16px;
	padding:24px 30px 24px 46px;
	margin:0 0 34px;
	columns:2;
	column-gap:34px;
}
.ts-strona__body .ts-reg__toc li{
	break-inside:avoid;
	margin:0 0 9px;
	font-size:14px;
	color:var(--p-muted);
}
.ts-strona__body .ts-reg__toc a{text-decoration:none;color:var(--p-body);font-weight:500}
.ts-strona__body .ts-reg__toc a:hover{color:var(--p-ink);text-decoration:underline}

/* --- pasek pomocy na koncu strony --- */
.ts-strona__body .ts-band{
	background:var(--p-ink);
	border-radius:16px;
	padding:30px 32px;
	display:flex;flex-wrap:wrap;gap:18px 24px;
	align-items:center;justify-content:space-between;
	margin:38px 0 0;
}
.ts-strona__body .ts-band h3{color:#fff;font-size:20px;margin:0 0 4px}
.ts-strona__body .ts-band p{color:var(--panel-mute);margin:0;font-size:14px}
.ts-strona__body .ts-band .ts-btn{margin:0}

/* --- przycisk: ten sam standard co „Kupuje i placę" w kasie --- */
.ts-strona__body .ts-btn{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:54px;
	background:var(--yellow);
	color:var(--p-ink);
	border-radius:11px;
	padding:16px 20px;
	font-family:var(--ts-font);
	font-size:15px;font-weight:800;letter-spacing:-.01em;
	text-decoration:none;
	transition:background .18s ease;
}
.ts-strona__body .ts-btn:hover{background:var(--yellow-hover);color:var(--p-ink)}
.ts-strona__body .ts-btn--ghost{
	background:transparent;
	border:1px solid var(--p-line);
	color:var(--p-ink);
}
.ts-strona__body .ts-btn--ghost:hover{background:var(--p-soft);border-color:var(--p-muted)}

/* --- O nas: liczby, kafelki, galeria --- */
.ts-strona__body .ts-lead{
	font-size:19px;
	line-height:1.55;
	color:var(--p-ink);
	font-weight:600;
	letter-spacing:-.015em;
	max-width:56ch;
	margin:0 0 26px;
}
.ts-strona__body .ts-stats{
	gap:1px !important;
	background:var(--p-line);
	border:1px solid var(--p-line);
	border-radius:14px;
	overflow:hidden;
	margin:0 0 30px;
}
.ts-strona__body .ts-stats .wp-block-column{
	background:#fff;
	padding:22px 20px;
	margin:0;
}
.ts-strona__body .ts-stat__n{
	font-size:32px;
	font-weight:800;
	color:var(--p-ink);
	letter-spacing:-.03em;
	line-height:1;
	margin:0;
}
.ts-strona__body .ts-stat__l{
	font-size:13px;
	color:var(--p-muted);
	margin:6px 0 0;
}
.ts-strona__body .ts-photo{margin:0 0 30px}
.ts-strona__body .ts-photo img{width:100%;height:auto;border-radius:14px}

.ts-strona__body .ts-listcard{
	background:var(--p-soft);
	border-radius:16px;
	padding:26px 28px;
	margin:26px 0 34px;
}
.ts-strona__body .ts-listcard__label{
	font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
	color:var(--p-muted);margin:0 0 14px;
}
.ts-strona__body ul.ts-ticks{list-style:none;margin:0;padding:0}
.ts-strona__body ul.ts-ticks li{
	position:relative;padding-left:26px;margin:0 0 10px;color:var(--p-body);
}
.ts-strona__body ul.ts-ticks li:last-child{margin-bottom:0}
.ts-strona__body ul.ts-ticks li::before{
	content:"";position:absolute;left:2px;top:9px;width:9px;height:5px;
	border-left:2px solid var(--yellow-hover);border-bottom:2px solid var(--yellow-hover);
	transform:rotate(-45deg);
}

.ts-strona__body .ts-gal{margin:26px 0 34px}
.ts-strona__body .ts-gal img{border-radius:12px}

.ts-strona__body .ts-tiles{gap:16px !important;margin:0 0 30px}
.ts-strona__body .ts-tile{
	border:1px solid var(--p-line);
	border-radius:14px;
	padding:24px;
	height:100%;
}
.ts-strona__body .ts-tile h3{margin:0 0 6px;font-size:17px}
.ts-strona__body .ts-tile p{margin:0 0 18px;font-size:14px;color:var(--p-muted)}
.ts-strona__body .ts-tile__cta{margin:0 !important}
.ts-strona__body .ts-band__cta{margin:0 !important}
.ts-strona__body .ts-band a.ts-btn{text-decoration:none}

/* --- Kontakt: karty dzialow --- */
.ts-strona__body .ts-cards{gap:16px !important;margin:0 0 40px}
.ts-strona__body .ts-card{
	border:1px solid var(--p-line);
	border-radius:14px;
	padding:22px 22px 20px;
	height:100%;
}
.ts-strona__body .ts-card__label{
	font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
	color:var(--p-muted);margin:0 0 10px;
}
.ts-strona__body .ts-card__tel{margin:0 0 2px}
.ts-strona__body .ts-card__tel a{
	font-size:20px;font-weight:700;color:var(--p-ink);
	letter-spacing:-.02em;text-decoration:none;
}
.ts-strona__body .ts-card__tel a:hover{color:var(--yellow-hover)}
.ts-strona__body .ts-card__tel--second{margin-top:16px}
.ts-strona__body .ts-card__micro{font-size:12.5px;color:var(--p-muted);margin:0 0 12px}
.ts-strona__body .ts-card p:last-child{margin-bottom:0}
.ts-strona__body .ts-kontakt__dol{gap:36px !important;align-items:start}
.ts-strona__body .ts-formbox{
	border:1px solid var(--p-line);
	border-radius:16px;
	padding:24px;
}

/* ------------------------------------------------------------
   3. Szerokosc kolumny tresci.

   Jedna miara dla naglowka i dla tresci, zeby lewa krawedz
   tytulu i tekstu pod nim byla ta sama. 1240 px to ok. 65%
   szerokosci ekranu 1920 px; na wezszych kolumna zwija sie sama.
   ------------------------------------------------------------ */

.ts-strona{
	--ts-kolumna:1240px;
}

.ts-strona__body{
	padding-left:clamp(20px,4vw,44px);
	padding-right:clamp(20px,4vw,44px);
}

.ts-strona__body > *{
	max-width:var(--ts-kolumna);
	margin-left:auto;
	margin-right:auto;
}

/* Bloki wewnatrz tresci wypelniaja kolumne i trzymaja sie lewej,
   zamiast zwezac sie do domyslnej miary motywu i uciekac na srodek. */
.ts-strona__body .wp-block-post-content > *{
	max-width:100%;
	margin-left:0;
	margin-right:0;
}

/* --- O nas: zdjecie obok tekstu, naprzemiennie --- */
.ts-strona__body .ts-media{
	gap:clamp(24px,3vw,44px) !important;
	align-items:center;
	margin:0 0 34px;
}
.ts-strona__body .ts-media .wp-block-column{margin:0}
.ts-strona__body .ts-media .ts-photo{margin:0}
.ts-strona__body .ts-media .ts-photo img{
	width:100%;
	height:auto;
	border-radius:16px;
	display:block;
}
.ts-strona__body .ts-media h2{margin-top:0}
.ts-strona__body .ts-media p:last-child{margin-bottom:0}

/* Na telefonie zdjecie zawsze nad tekstem, takze w blokach odwroconych. */
@media (max-width:781px){
	.ts-strona__body .ts-media--rev{
		display:flex;
		flex-direction:column-reverse;
	}
}