/* czyjto.com: świat marki „Las o zmierzchu” w motywie blokowym. Tokeny (kolory, font, rozmiary) są w theme.json,
   tu jest to, czego theme.json nie wyrazi: logo z pinezką, separator rozdziałów, porównanie „przed i po”, telefony,
   kroki, FAQ, morelowe zakończenie i stany przeglądarki. Źródło: static/css/brand.css i home.css portalu czyjto.app. */

:root {
	--ground: var(--wp--preset--color--forest);
	--forest-950: var(--wp--preset--color--forest-950);
	--forest-900: var(--wp--preset--color--forest-900);
	--forest-700: var(--wp--preset--color--forest-700);
	--forest-600: var(--wp--preset--color--forest-600);
	--ink: var(--wp--preset--color--ink);
	--muted: var(--wp--preset--color--muted);
	--accent: var(--wp--preset--color--apricot);
	--on-accent: var(--wp--preset--color--on-apricot);
	--accent-ink: var(--wp--preset--color--apricot-ink);
	--signal: var(--wp--preset--color--mint);
	--alarm: var(--wp--preset--color--alarm);
	--line: var(--wp--custom--line);
	--line-strong: var(--wp--custom--line-strong);
	--gutter: var(--wp--custom--gutter);
	--ease: var(--wp--custom--ease);
	--display: var(--wp--preset--font-family--bricolage);
	--pin-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill-rule='evenodd' d='M12 31.2C12 31.2 2 19.8 2 12a10 10 0 0 1 20 0c0 7.8-10 19.2-10 19.2zm0-14.7a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z'/%3E%3C/svg%3E");
	color-scheme: dark;
}

/* Podstawy i stany przeglądarki */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-color: var(--forest-600) var(--forest-900); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; font-optical-sizing: auto; }
::selection { background: var(--accent); color: var(--on-accent); }
a { text-underline-offset: 0.22em; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: var(--wp--custom--radius--focus); }
em { font-style: normal; color: var(--accent); }
input, textarea, select { caret-color: var(--accent); accent-color: var(--accent); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main, .wp-site-blocks > .wp-block-group:has(> main) { flex: 1 0 auto; }

/* Przyciski: pigułka, uniesienie po najechaniu (tylko wskaźnik), wciśnięcie */
.wp-block-button__link,
.wp-element-button { min-height: 3.6rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-align: center;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s, border-color 0.2s; }
@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link:hover, .wp-element-button:hover { transform: translateY(-2px); box-shadow: 0 0.6rem 1.4rem rgb(0 0 0 / 0.25); }
}
.wp-block-button__link:active, .wp-element-button:active { transform: translateY(1px); box-shadow: none; }
.wp-block-button.is-style-outline > .wp-block-button__link { border-color: currentColor; }

/* Pola formularzy (karta produktu, koszyk, kasa): jak pola panelu czyjto.app, czyli forest-900, ciepła biel, obwódka 1.5px
   i promień 14px. Bazowa reguła ma zerową specyficzność (:where), żeby komponenty WooCommerce Blocks mogły ją nadpisać. */
:where(select, textarea, input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="search"], [type="password"], [type="url"])) {
	min-height: 3.2rem; padding: 0.7rem 0.95rem; border: 1.5px solid var(--line-strong); border-radius: var(--wp--custom--radius--field);
	background-color: var(--forest-900); color: var(--ink); font: 400 1.05rem/1.5 var(--display); }
:where(select) { appearance: none; padding-right: 2.8rem; cursor: pointer;
	background: var(--forest-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff8ef' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0.95rem center / 1.1rem no-repeat; }
/* Rozwinięta lista rysuje się poza stroną: bez jawnego tła opcje dostają systemowe białe tło pod jasnym tekstem motywu. */
select option, select optgroup { background-color: var(--forest-900); color: var(--ink); }
:where(select, textarea, input):focus { border-color: var(--accent); }
::placeholder { color: rgb(255 248 239 / 0.55); opacity: 1; }

/* Karta produktu w klasycznym formularzu wariantów: WooCommerce daje tu przezroczyste tło i ciemną strzałkę. */
html .woocommerce div.product form.cart .variations select {
	min-width: min(100%, 16rem); min-height: 3.2rem; height: auto; padding: 0.7rem 2.8rem 0.7rem 0.95rem; border: 1.5px solid var(--line-strong);
	border-radius: var(--wp--custom--radius--field); color: var(--ink); font: 400 1.05rem/1.5 var(--display);
	background: var(--forest-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff8ef' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0.95rem center / 1.1rem no-repeat; }
html .woocommerce div.product form.cart .variations select:focus { border-color: var(--accent); }
html .woocommerce .quantity input.qty { width: 4.6rem; min-height: 3.6rem; padding: 0.5rem; border: 1.5px solid var(--line-strong); border-radius: var(--wp--custom--radius--field);
	background: var(--forest-900); color: var(--ink); font: 700 1.1rem/1 var(--display); font-variant-numeric: tabular-nums; text-align: center; }
html .woocommerce .quantity input.qty:focus { border-color: var(--accent); }
/* Nieaktywny przycisk (np. „Dodaj do koszyka” przed wyborem rozmiaru): przygaszony, bez uniesienia */
.wp-element-button:is(.disabled, :disabled), .wp-block-button__link:is(.disabled, :disabled) { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Logo: „czyjt” z pinezką lokalizacji jako „o” */
.logo { display: inline-flex; align-items: baseline; gap: 0.02em; font: 800 1.75rem/1 var(--display); letter-spacing: -0.04em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo-pin { display: inline-block; width: 0.66em; height: 0.88em; transform: translateY(0.2em); }
.logo-pin svg { display: block; width: 100%; height: 100%; fill: var(--signal); }

/* Nagłówek */
.site-top.wp-block-group { gap: 1rem; padding: 1.5rem var(--gutter); }
/* Wysokość wiersza nagłówka jak z przyciskiem koszyka (3rem), także tam, gdzie WooCommerce koszyk chowa (koszyk, kasa, zamówienie) */
.site-top.wp-block-group > * { min-height: 3rem; }
.site-actions.wp-block-group { gap: 1.4rem; }
.site-nav .wp-block-navigation__container { gap: 0.4rem 1.6rem; }
.site-nav .wp-block-navigation-item__content { font-weight: 600; font-size: 1.05rem; text-decoration: none; padding: 0.4rem 0; }
.site-nav .wp-block-navigation-item__content:hover { text-decoration: underline; }

/* Koszyk w nagłówku: okrągły przycisk z obwódką, licznik w moreli (licznik prowadzi do działania) */
.site-cart .wc-block-mini-cart__button { display: inline-grid; place-items: center; min-width: 3rem; min-height: 3rem; padding: 0 0.85rem; border: 2px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; transition: border-color 0.2s; }
.site-cart .wc-block-mini-cart__button:hover { border-color: var(--ink); }
.site-cart .wc-block-mini-cart__icon { width: 1.5rem; height: 1.5rem; color: var(--ink); fill: currentColor; }
.site-cart .wc-block-mini-cart__badge { background: var(--accent) !important; color: var(--on-accent) !important; font: 800 0.75rem/1 var(--display); border: 0; }
.site-cart .wc-block-mini-cart__amount { display: none; }

/* Pierwszy ekran */
.hero.wp-block-group { padding-bottom: 2rem; }
.hero-title.wp-block-heading { margin: 0.4rem 0 1.6rem; font-size: var(--wp--preset--font-size--display); line-height: 0.93; text-wrap: balance; }
.hero-row.wp-block-group { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch; }
.hero-row.wp-block-group > * { margin-block: 0; }
.side-info.wp-block-group { display: flex; flex-direction: column; justify-content: center; gap: 2rem; }
.side-info.wp-block-group > * { margin-block: 0; }
.side-info .lead { max-width: 34ch; color: var(--muted); font-size: var(--wp--preset--font-size--lead); }
/* Przyciski jeden pod drugim na całą szerokość kolumny. WordPress daje wariantowi 100% `flex-basis: 100%`, co w kolumnie
   z zawijaniem rozciąga każdy przycisk na całą wysokość, więc podstawa wraca do auto. */
.wp-block-buttons.stack { flex-wrap: nowrap; gap: 0.9rem; }
.wp-block-buttons.stack > .wp-block-button { flex-basis: auto; width: 100%; }
.sample, p.sample { margin-block: 0.9rem 0; color: var(--muted); font-size: 0.9rem; }

/* Porównanie: plakat na słupie i strona zwierzaka w telefonie, suwak odsłania „po” */
.compare { --h: clamp(380px, 61vh, 560px); --cut: 50%; position: relative; height: var(--h); margin: 0; border-radius: var(--wp--custom--radius--plate); overflow: hidden; background: #2e3a35; }
/* Plakat stoi na środku lewej połowy, telefon na środku prawej: przy suwaku w połowie oba są widoczne w całości */
.compare .side { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; }
.compare .side > * { grid-row: 1; }
.compare .before > * { grid-column: 1; justify-self: center; }
.compare .after > * { grid-column: 2; justify-self: center; }
/* Prawdziwy słup ze zszywkami po starych ogłoszeniach (CC0, assets/img/CREDITS.md), lekko przygaszony pod plakatem */
.compare .before { background: linear-gradient(rgb(20 18 14 / 0.28), rgb(20 18 14 / 0.28)), url("../img/slup.webp") center / cover; }
.poster { position: relative; width: 270px; height: 360px; padding: 18px; background: #f1efe9; color: #111; transform: rotate(-4deg); box-shadow: 0 0.6rem 1.2rem rgb(0 0 0 / 0.35); }
.poster b { display: block; font: 900 34px/1 system-ui, sans-serif; letter-spacing: -0.02em; }
.poster img { display: block; width: 100%; height: 150px; margin-top: 10px; object-fit: cover; filter: contrast(1.25); }
.poster small { display: block; margin-top: 8px; font: 700 14px system-ui, sans-serif; color: #333; }
.poster .tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; display: flex; border-top: 2px dashed #666; }
.poster .tabs span { flex: 1; border-right: 2px dashed #666; }
.poster .tabs span:nth-child(odd) { visibility: hidden; }
.compare .after { background: radial-gradient(70% 90% at 60% 55%, var(--forest-600), var(--ground)); clip-path: inset(0 0 0 var(--cut)); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 4px; margin-left: -2px; background: var(--accent); pointer-events: none; }
.compare .handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f160f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 26px no-repeat;
	box-shadow: 0 0.4rem 0.9rem rgb(0 0 0 / 0.3); }
.compare input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 3px; }
.compare .cap { position: absolute; bottom: 18px; z-index: 2; padding: 0.5rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; }
.compare .cap.b { left: 18px; background: #f1efe9; color: #222; }
.compare .cap.a { right: 18px; background: var(--ink); color: var(--ground); }
.compare .after .phone { width: auto; height: calc(var(--h) - 8rem); }  /* zostaje miejsce na podpis „Po” pod telefonem */

/* Telefon z przykładową stroną zwierzaka: domyślny układ „pełny ekran” (motyw rudy, tło las) w miniaturze */
.phone { position: relative; width: 230px; aspect-ratio: 300 / 620; border-radius: 40px; padding: 10px; background: #0d0f12;
	box-shadow: 0 1.6rem 3rem rgb(0 0 0 / 0.32), inset 0 0 0 2px rgb(255 255 255 / 0.08); }
.phone .screen { position: relative; height: 100%; overflow: hidden; border-radius: 31px; background: var(--ground); color: var(--ink); font-family: var(--display); }
.phone .screen::after {  /* cieniowanie pod imieniem, jak na stronie zwierzaka: przechodzi w leśne tło */
	content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 58%; pointer-events: none;
	background: linear-gradient(to bottom, rgb(15 61 51 / 0), rgb(15 61 51 / 0.86) 42%, rgb(15 61 51 / 0.96)); }
.phone .notch { position: absolute; top: 7px; left: 50%; z-index: 3; width: 74px; height: 20px; margin-left: -37px; border-radius: 20px; background: #0d0f12; }
.phone .photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 71% 30%; }
.phone .pills { position: absolute; top: 34px; left: 10px; z-index: 2; display: flex; gap: 5px; }
.phone .pills span { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 99px; background: rgb(255 255 255 / 0.95); color: #10241e; font: 800 10px/1.2 var(--display); }
.phone .pills .brand { letter-spacing: -0.04em; }
.phone .pills .brand svg { width: 0.62em; height: 0.82em; margin-left: 0.03em; fill: var(--forest-600); }
.phone .pills .state { background: var(--accent); color: var(--on-accent); }
.phone .intro { position: absolute; left: 12px; right: 12px; bottom: 64px; z-index: 2; }
.phone .name { font: 800 34px/0.95 var(--display); letter-spacing: -0.04em; text-shadow: 0 1px 10px rgb(0 0 0 / 0.35); }
.phone .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.phone .chips span { padding: 4px 9px; border-radius: 99px; background: rgb(255 248 239 / 0.18); font: 700 10px/1.2 var(--display); }
.phone .bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 8px 12px; background: var(--forest-900); border-top: 1px solid var(--line); }
.phone .act { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; border: 2.5px solid var(--accent); border-radius: 99px; font: 800 11.5px/1.1 var(--display); text-align: center; }
.phone .act small { font: 600 10px/1.2 var(--display); }
.phone .call { background: var(--accent); color: var(--on-accent); }
.phone .alt { border-color: var(--line-strong); }
/* Tryb alarmowy: personalizacja wyłączona, wszędzie ta sama czerwień z białym tekstem */
.phone.alarm .pills .state { background: var(--alarm); color: #fff; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.95); }
.phone.alarm .call { background: var(--alarm); border-color: var(--alarm); color: #fff; }
.phone .banner { margin-bottom: 8px; padding: 6px 9px; border-radius: 10px; background: var(--alarm); color: #fff; font: 800 10.5px/1.25 var(--display); text-shadow: none; }

/* Rozdziały: linia przez całą szerokość z pinezką na środku, pod nią wyśrodkowane hasło */
.chapter.wp-block-group { padding-top: var(--wp--custom--chapter); }
.chapter-head.wp-block-group { margin-bottom: clamp(2.2rem, 5vw, 3.6rem); text-align: center; }
.chapter-head.wp-block-group > * { margin-block: 0; }
.chapter-head h2.wp-block-heading { max-width: 16ch; margin-inline: auto; line-height: 0.95; letter-spacing: -0.04em; text-wrap: balance; }
.chapter-head .lead { max-width: 44ch; margin: 1.4rem auto 0; color: var(--muted); font-size: var(--wp--preset--font-size--lead); }
.wp-block-separator.is-style-pin { --rule: var(--line); --pin: var(--signal);
	position: relative; width: 100%; max-width: none; height: 38px; margin: 0 0 2rem; border: 0; opacity: 1; color: transparent;
	background: linear-gradient(var(--rule), var(--rule)) left center / calc(50% - 14px - 1.2rem) 2px no-repeat,
		linear-gradient(var(--rule), var(--rule)) right center / calc(50% - 14px - 1.2rem) 2px no-repeat; }
.wp-block-separator.is-style-pin::after { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 38px; margin-left: -14px; background: var(--pin);
	-webkit-mask: var(--pin-mask) center / contain no-repeat; mask: var(--pin-mask) center / contain no-repeat; }
.statement { margin: 0 0 1rem; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }

/* Jak to działa: cztery kroki z morelowym numerem i linią do następnego */
.wp-block-list.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; counter-reset: step; }
.wp-block-list.steps > li { position: relative; margin: 0; padding-top: 4.2rem; counter-increment: step; color: var(--muted); }
.wp-block-list.steps > li::before { content: counter(step); position: absolute; top: 0; left: 0; font: 800 3.4rem/1 var(--display); color: var(--accent); letter-spacing: -0.04em; }
.wp-block-list.steps > li::after { content: ""; position: absolute; top: 1.6rem; left: 3rem; right: -1.4rem; height: 2px; background: var(--line); }
.wp-block-list.steps > li:last-child::after { display: none; }
.wp-block-list.steps strong { display: block; margin-bottom: 0.4rem; color: var(--ink); font-size: 1.3rem; line-height: 1.2; }

/* Co widzi znalazca: lista przełączników obok telefonu */
.finder.wp-block-group { display: grid; grid-template-columns: minmax(0, 36rem) auto; justify-content: center; gap: clamp(2rem, 8vw, 8rem); align-items: center; }
.finder.wp-block-group > *, .finder-text.wp-block-group > *, .lost.wp-block-group > *, .lost-text.wp-block-group > * { margin-block: 0; }
.finder-text.wp-block-group .lead { max-width: 44ch; margin-top: 0.4rem; color: var(--muted); font-size: var(--wp--preset--font-size--lead); }
.finder-text.wp-block-group .toggles { margin-top: 2rem; }
.toggles { list-style: none; max-width: 36rem; margin: 2rem 0 0; padding: 0; }
.toggles li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); font-weight: 600; }
.toggles li:last-child { border-bottom: 1px solid var(--line); }
.sw { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.95rem; }
.sw i { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: rgb(255 255 255 / 0.18); }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: var(--ink); }
.sw.on { color: var(--signal); }
.sw.on i { background: var(--forest-600); }
.sw.on i::after { transform: translateX(1.1rem); background: var(--signal); }

/* Gdy zwierzę zaginie: telefon w trybie alarmowym obok listy na liniach */
.lost.wp-block-group { display: grid; grid-template-columns: auto minmax(0, 40rem); justify-content: center; gap: clamp(2rem, 8vw, 8rem); align-items: center; }
.lost-text.wp-block-group .wp-block-list.ruled { margin: 1.6rem 0 2rem; }
.wp-block-list.ruled { list-style: none; margin: 1.6rem 0 2rem; padding: 0; }
.wp-block-list.ruled > li { margin: 0; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.wp-block-list.ruled > li:last-child { border-bottom: 1px solid var(--line); }

/* Wybierz tag: sam rozdział; zakładki, płyta i kolumna zakupu są w blocks/pick/style.css */
.pick .wp-block-czyjto-pick { margin-top: 0; }

/* Zakup modelu tagu (inc/buy.php): wspólny dla sekcji „Wybierz tag” i karty produktu. Rozmiary to pigułki z literą i opisem;
   wybrany ma morelową obwódkę na morelowym tle 14% (jak wybór w panelu). Mięta = „dodano do koszyka”, jasna morela = brak rozmiaru. */
.czyjto-buy { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; }
.czyjto-buy > * { margin: 0; }
.buy-name { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; }
h1.buy-name { font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 0.95; }
.buy-desc { color: var(--muted); font-size: 1.15rem; max-width: 36ch; }
.buy-sizes { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; border: 0; }
.buy-sizes label { position: relative; cursor: pointer; }
.buy-sizes input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.buy-sizes span { display: grid; place-items: center; min-width: 3.2rem; min-height: 3.2rem; padding: 0.3rem 0.95rem; border: 2px solid var(--line-strong); border-radius: 999px;
	font-weight: 800; font-size: 1.05rem; line-height: 1.15; transition: border-color 0.2s, background-color 0.2s; }
.buy-sizes small { display: block; color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.buy-sizes label:hover span { border-color: var(--ink); }
.buy-sizes input:checked + span { border-color: var(--accent); background: rgb(255 154 82 / 0.14); }
.buy-sizes input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 3px; }
.buy-sizes input:disabled + span { border-style: dashed; color: rgb(255 248 239 / 0.45); text-decoration: line-through; }
.buy-sizes input:disabled, .buy-sizes label:has(input:disabled) { cursor: not-allowed; }
.buy-price { font-weight: 800; font-size: 2.2rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.buy-price del { opacity: 0.6; font-size: 0.6em; }
.buy-price ins { text-decoration: none; }
.buy-add.wp-element-button { width: 100%; }
.buy-out { color: var(--muted); font-weight: 700; }
.buy-status:empty { display: none; }
.buy-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.98rem; }
.buy-status.is-ok { color: var(--signal); }
.buy-status.is-warn { color: #ffd6b5; }
.buy-status svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.buy-status a { color: var(--ink); }
.buy-box { list-style: none; padding: 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; }
.buy-box li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.buy-box b { color: var(--ink); font-weight: 700; }
.buy-box a, .buy-more { color: var(--ink); }
.buy-more { align-self: flex-start; font-weight: 600; font-size: 0.98rem; }
@media (prefers-reduced-motion: reduce) { .buy-sizes span { transition: none; } }

/* Pytania: wiersze na liniach, morelowy plus obraca się w krzyżyk */
.faq.wp-block-group { max-width: 52rem; margin-inline: auto; }
.faq.wp-block-group > * { margin-block: 0; }
.faq .wp-block-details { border-top: 1px solid var(--line); }
.faq .wp-block-details:last-child { border-bottom: 1px solid var(--line); }
.faq .wp-block-details summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.6rem; padding-block: 0.9rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; cursor: pointer; list-style: none; }
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after { content: ""; flex: none; width: 1.35rem; height: 1.35rem; background: var(--accent); transition: transform 0.25s var(--ease);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E") center / contain no-repeat; }
.faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.faq .wp-block-details > p { max-width: 60ch; margin: 0 0 1.3rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .faq .wp-block-details summary::after { transition: none; } }

/* Zakończenie: jedyny pełny rozdział w moreli; przycisk, pinezka i wyróżnienie przechodzą w forest-900 */
.finale.wp-block-group { margin-top: var(--wp--custom--chapter); padding-block: var(--wp--custom--chapter); background: var(--accent); color: var(--on-accent); text-align: center; }
.finale .wp-block-separator.is-style-pin { --rule: rgb(31 22 15 / 0.22); --pin: var(--forest-900); }
.finale em { color: var(--forest-900); }
.finale .statement { color: var(--on-accent); }
.finale .lead { max-width: 44ch; margin: 0 auto 2rem; color: var(--accent-ink); font-size: 1.3rem; }
.finale .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--forest-900); color: var(--ink); }
.finale .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--on-accent); }
.finale :focus-visible { outline-color: var(--forest-900); }
.finale ::selection { background: var(--forest-900); color: var(--ink); }

/* Stopka */
.site-foot.wp-block-group { padding-block: 3rem; color: var(--muted); font-size: 0.98rem; }
.foot-row.wp-block-group { gap: 1.4rem 3rem; }
.foot-about { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; max-width: 40rem; margin: 0; }
.foot-about .logo { font-size: 1.3rem; }
.foot-about a { color: var(--ink); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.6rem 3rem; }
.foot-nav ul { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.foot-nav a { color: var(--ink); }
/* Na finale stopka siedzi tuż pod morelą: bez górnej linii, sam odstęp */
.home + .wp-block-template-part .site-foot, .home ~ footer .site-foot { padding-top: 3rem; }

/* Strony treści (regulamin, prywatność, kontakt) i 404: wąska kolumna do czytania */
.page-main.wp-block-group { padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); }
.page-title { margin: 0 0 1.6rem; text-wrap: balance; }
.page-main .lead { color: var(--muted); font-size: var(--wp--preset--font-size--lead); }  /* szerokość z kolumny strony, żeby wstęp zaczynał się przy tej samej krawędzi co tytuł */
.prose p, .prose li { max-width: 65ch; }
.prose h2 { margin-top: 2.4rem; }
/* Regulamin, polityka, zwroty: wersja dokumentu pod wstępem i oddech między numerowanymi punktami */
.prose .legal-meta { max-width: none; color: var(--muted); font-size: 0.95rem; }  /* bez 65ch: mniejszy krój dawał węższy, wyśrodkowany akapit */
.prose ol li, .prose ul li { margin-block: 0.45rem; }

/* Tablet i telefon */
@media (max-width: 900px) {
	.site-nav .wide-only { display: none; }
	.site-nav .wp-block-navigation__container { column-gap: 1rem; }
	.site-nav .wp-block-navigation-item__content { font-size: 1rem; }
	.site-actions.wp-block-group { gap: 1rem; }
	.hero-row.wp-block-group { grid-template-columns: 1fr; }
	.compare { height: 460px; }
	/* Plakat jest pomniejszony w całości, a telefon ma własne, czytelne rozmiary tekstu (bez zmniejszania transformacją) */
	.compare .before .poster { transform: rotate(-4deg) scale(0.5); }
	.compare .after .phone { width: 170px; height: auto; padding: 7px; border-radius: 30px; justify-self: end; margin-right: 12px; }
	.compare .handle::after { width: 44px; height: 44px; margin: -22px; background-size: 20px; }
	.compare .after .phone .screen { border-radius: 24px; }
	.compare .after .phone .notch { top: 5px; width: 54px; height: 15px; margin-left: -27px; }
	.compare .after .phone .pills { top: 24px; left: 7px; }
	.compare .after .phone .pills span { padding: 3px 7px; font-size: 9px; }
	.compare .after .phone .intro { left: 9px; right: 9px; bottom: 52px; }
	.compare .after .phone .name { font-size: 25px; }
	.compare .after .phone .chips { margin-top: 5px; gap: 4px; }
	.compare .after .phone .chips span { padding: 3px 7px; font-size: 9.5px; }
	.compare .after .phone .bar { gap: 4px; padding: 6px 6px 9px; }
	.compare .after .phone .act { min-height: 34px; font-size: 10.5px; border-width: 2px; }
	.compare .after .phone .act small { font-size: 9.5px; }
	.side-info .lead { max-width: 44ch; }
	.wp-block-list.steps { grid-template-columns: 1fr 1fr; }
	.wp-block-list.steps > li::after { display: none; }
	.finder.wp-block-group, .lost.wp-block-group { grid-template-columns: 1fr; }
	.finder .phone, .lost .phone { justify-self: center; }
	.lost .phone { order: 2; }
}
@media (max-width: 560px) {
	.site-nav .tablet-up { display: none; }
	.wp-block-list.steps { grid-template-columns: 1fr; }
	.compare .cap { font-size: 0.8rem; }
	.compare .cap.b { top: 14px; bottom: auto; }
	.foot-nav { flex-direction: column; }
}