/* Słoje — kierunek „Katalog wzorów”: druk dwiema farbami na jasnoszarym papierze. Druga farba to oliwka
   (#5c5700), akcent szałwiowy (#a6b465) — tylko do linii i znaczników.
   Ten plik: tokeny, podstawy, nagłówek, strona główna, strony treści, stopka. Sklep i konfigurator: sklep.css.
   Nazwy tokenów --green* zostają (są w całym CSS), wartości są oliwkowe. */

:root {
	--paper: #ebeae4;
	--paper-2: #f6f6f1;
	--ink: #1c1c18;
	--ink-2: #4b4a42;
	--green: #5c5700;
	--green-deep: #3a3700;
	--green-tint: #e0e3cb;
	--green-tint-2: #d3d8b4;
	--sage: #a6b465;
	--on-green: #f3f2e6;
	--on-green-2: #d6d6b1;
	--alert: #9b2b17;
	--rule: rgba(28, 28, 24, 0.16);
	/* Tony gradientów w tłach pól (oklab): światło za renderem, środek i noc oliwki, czerń stopki z oliwką. */
	--olive-light: #726d23;
	--olive-mid: #524d00;
	--olive-night: #2e2d0f;
	--ink-olive: #252415;
	--gut: clamp(16px, 3.4vw, 48px);
	--display: 'Familjen Grotesk', system-ui, sans-serif;
	--typed: 'Courier Prime', ui-monospace, monospace;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-padding-top: 16px; }
body { margin: 0; font: 400 17px/1.5 var(--display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--green); color: var(--on-green); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.cover :focus-visible, .sheet :focus-visible, .left-page :focus-visible { outline-color: var(--on-green); }
input, select, textarea, button { font: inherit; color: inherit; }
input::placeholder { color: #5c5f57; }
code { font: 700 0.92em var(--typed); color: var(--green); }
.typed { font-family: var(--typed); }
.typed-line { font: 400 14px/1.45 var(--typed); color: var(--ink-2); margin: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
input[type='radio'], input[type='checkbox'] { accent-color: var(--green); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { left: 8px; }

.btn {
	font: 600 16px/1.2 var(--display); background: var(--green); color: var(--on-green); border: 0; border-radius: 3px;
	padding: 15px 22px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; text-align: center;
	transition: background-color 0.18s ease-out;
}
.btn:hover { background: var(--green-deep); }
.btn:disabled { background: var(--ink-2); cursor: not-allowed; }

/* ---- Nagłówek: pasek na papierze nad okładką ---- */
.masthead {
	display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 32px;
	padding: 14px var(--gut); border-bottom: 1px solid var(--rule); background: var(--paper);
}
/* Znak sklepu „SŁOJE” (tools/znak.py: wersaliki EB Garamond, „O” jako przekrój pnia) + dopisek maszynopisem.
   Znak jako maska, żeby brał kolor z CSS: oliwka na papierze, jasny druk w stopce. */
.mark { text-decoration: none; display: flex; align-items: center; gap: 14px; margin: 0; color: var(--green); }
.znak { display: block; width: 150px; aspect-ratio: 2966 / 880; background: currentColor;
	-webkit-print-color-adjust: exact; print-color-adjust: exact; /* znak jest tłem z maską — bez tego znika z wydruku */
	-webkit-mask: url('../img/sloje-znak.svg') no-repeat center / contain; mask: url('../img/sloje-znak.svg') no-repeat center / contain; }
.mark-pod { font: 400 12.5px/1.2 var(--typed); color: var(--ink-2); border-left: 1px solid var(--rule); padding-left: 14px; }
.mark:hover .znak { opacity: 0.85; }
@media (forced-colors: active) { .znak { forced-color-adjust: none; background: CanvasText; } }
.nav { display: flex; gap: 28px; justify-content: center; font-weight: 500; font-size: 16px; }
.nav a { text-decoration: none; padding: 8px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover { border-bottom-color: var(--ink); }
.nav a[aria-current] { border-bottom: 2px solid var(--sage); font-weight: 700; } /* stan nie tylko kolorem linii */
.goto { display: flex; align-items: baseline; gap: 8px; font: 400 14px var(--typed); }
.goto input { font: 700 15px var(--typed); width: 76px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 4px 2px; text-transform: uppercase; }
.goto-btn { font: 700 13px var(--typed); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--green); }
.koszyk-link { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.koszyk-link b { background: var(--green); color: var(--on-green); min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 13px; }
.nav-toggle { display: none; font: 600 15px var(--display); background: none; border: 1.5px solid var(--ink); border-radius: 3px; padding: 7px 12px; cursor: pointer; }

/* ---- Okładka: pełne pole zieleni z kuponem zamówienia ---- */
.cover {
	background:
		radial-gradient(var(--swiatlo, 60% 75% at 70% 42%), var(--olive-light) 0%, rgba(92, 87, 0, 0.85) 42%, transparent 72%),
		linear-gradient(180deg, var(--green) 0%, var(--olive-mid) 70%, var(--green-deep) 100%);
	color: var(--on-green); isolation: isolate;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 var(--gut);
	padding: 56px var(--gut) 0; position: relative;
}
.cover h1 { font-weight: 700; font-size: clamp(46px, 6.2vw, 92px); line-height: 0.96; letter-spacing: -0.035em; margin: 0 0 28px; text-wrap: balance; }
.lede { font-size: 19px; line-height: 1.5; max-width: 36ch; color: var(--on-green); margin: 0 0 40px; }
.cover-plate { margin: 0; align-self: center; }
.cover-plate img { width: 106%; max-width: none; margin-left: -3%; filter: drop-shadow(0 38px 34px rgba(20, 18, 0, 0.45)); }
/* Podpis leży w poświacie i na słojach, więc ma własną tabliczkę z oliwki głębokiej (jak opis pod eksponatem). */
.cover-plate figcaption { font: 400 14px var(--typed); color: var(--on-green-2); margin: -14px 0 0 auto; width: fit-content; padding: 4px 10px; background: var(--green-deep); text-align: right; }
.cover-plate figcaption b { color: var(--on-green); }

.slip {
	grid-column: 1 / -1; margin: 40px 0 -64px; position: relative; z-index: 2;
	background: var(--paper-2); color: var(--ink); border-top: 3px solid var(--sage);
	box-shadow: 0 18px 40px -18px rgba(30, 28, 0, 0.55);
}
.slip::before { content: ''; position: absolute; left: 0; right: 0; top: 46px; border-top: 1.5px dashed rgba(28, 28, 24, 0.35); }
.slip-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 28px 0; height: 46px; font: 400 14px var(--typed); color: var(--ink-2); }
.slip-title { font: 700 14px var(--typed); color: var(--ink); margin: 0; }
.slip-row { display: grid; grid-template-columns: 1.5fr 1.1fr 0.8fr auto 0.8fr 1.3fr auto; gap: 20px; align-items: end; padding: 22px 28px 26px; }
.slip label { display: grid; gap: 6px; font: 400 13px var(--typed); color: var(--ink-2); }
.slip select, .slip input {
	font: 700 18px var(--typed); color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--ink);
	padding: 6px 2px; width: 100%; border-radius: 0; appearance: none; min-width: 0;
}
.slip select {
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
	background-size: 6px 6px; background-position: calc(100% - 10px) 55%, calc(100% - 4px) 55%; background-repeat: no-repeat; padding-right: 22px; text-overflow: ellipsis;
}
.slip .mm span { display: flex; align-items: baseline; border-bottom: 1.5px solid var(--ink); }
.slip .mm input { border: 0; text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; }
.slip .mm i { font: 400 14px var(--typed); font-style: normal; color: var(--ink-2); }
.times { font: 400 22px var(--display); padding-bottom: 8px; color: var(--ink-2); }
.slip-price { display: grid; margin: 0; font-weight: 700; font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.slip-price small { font: 400 13px/1.35 var(--typed); letter-spacing: 0; color: var(--ink-2); }
.slip.is-blad .slip-price small[data-kupon-fakty] { color: var(--alert); font-weight: 700; }

/* ---- Duch drewna: przekrój pnia w tle pól (tools/tlo-slojow.mjs) ----
   Maska w kolorze druku pod treścią (z-index −1 w izolowanym polu), obrót raz na kilka minut.
   Gradienty tylko w tłach pól — nigdy na przyciskach ani w tekście. */
.tlo-slojow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.tlo-slojow i { position: absolute; display: block; aspect-ratio: 1; background: var(--on-green);
	-webkit-mask: url('../img/tlo-przekroj-1.svg?v=2') center / contain no-repeat; mask: url('../img/tlo-przekroj-1.svg?v=2') center / contain no-repeat; }
/* Obrót tylko tam, gdzie się kręci; poza ekranem staje (sloje.js dokłada .is-poza). */
.cover .tlo-slojow i, .left-sticky .tlo-slojow i { will-change: transform; }
/* Wyższa specyficzność niż reguły z `animation:` (ten skrót przywraca running), także te w sklep.css. */
.cover .tlo-slojow.is-poza i, .left-sticky .tlo-slojow.is-poza i { animation-play-state: paused; }
.cover .tlo-slojow { -webkit-mask: radial-gradient(750px 750px at 70% 42%, #000 55%, transparent 100%); mask: radial-gradient(750px 750px at 70% 42%, #000 55%, transparent 100%); }
.cover .tlo-slojow i { width: 1500px; left: calc(70% - 750px); top: calc(42% - 750px); opacity: 0.21; animation: slojeObrot 360s linear infinite; }
.sheet .tlo-slojow i { width: 1100px; left: -560px; bottom: -620px; opacity: 0.13;
	-webkit-mask-image: url('../img/tlo-przekroj-2.svg?v=2'); mask-image: url('../img/tlo-przekroj-2.svg?v=2'); }
/* Papier: ledwie widoczny przekrój przypięty do okna, treść przewija się nad nim. */
html { background: radial-gradient(120% 80% at 50% 0%, var(--paper-2) 0%, var(--paper) 55%) fixed, var(--paper); }
body::before {
	content: ''; position: fixed; z-index: -1; width: 1400px; aspect-ratio: 1; right: -760px; top: 6vh; pointer-events: none;
	background: var(--green); opacity: 0.075;
	-webkit-mask: url('../img/tlo-przekroj-2.svg?v=2') center / contain no-repeat; mask: url('../img/tlo-przekroj-2.svg?v=2') center / contain no-repeat;
}
/* theme.json maluje body papierem — bez tego tło body przykrywa gradient html i przekrój za nim. */
html body { background: transparent; }
@keyframes slojeObrot { to { transform: rotate(360deg); } }

/* ---- Spis wzorów: strona katalogu ---- */
.index { padding: 120px var(--gut) 80px; }
.index--katalog { padding-top: 48px; }
.index--inne { padding-top: 56px; }
.page-head { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gut); align-items: end; border-bottom: 2px solid var(--ink); padding-bottom: 16px; margin-bottom: 36px; }
.page-head h1, .page-head h2 { font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.03em; line-height: 1; margin: 0; }
.page-head p { margin: 0; font: 400 15px/1.5 var(--typed); color: var(--ink-2); max-width: 60ch; }
.group + .group { margin-top: 56px; }
.group-head { display: flex; align-items: baseline; gap: 16px; font-size: 24px; letter-spacing: -0.02em; margin: 0 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.group-head a { text-decoration: none; }
.group-head a:hover { text-decoration: underline; }
.group-head .typed { font-size: 14px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gut); }
.entries--blaty { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Karta zajmuje dwa wiersze siatki (obraz z nazwą, specyfikacja) — w jednym rzędzie specyfikacje zaczynają się
   na tej samej wysokości, nawet gdy jedna nazwa ma dwie linie. */
.entry { min-width: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.entry-link { text-decoration: none; display: block; }
@property --plyta-swiatlo { syntax: '<color>'; inherits: false; initial-value: #f6f6f1; }
.entry-plate { display: block; --plyta-swiatlo: var(--paper-2); background: radial-gradient(75% 70% at 50% 40%, var(--plyta-swiatlo) 0%, var(--green-tint) 62%, var(--green-tint-2) 100%); aspect-ratio: 4 / 3; padding: 8%; transition: --plyta-swiatlo 0.2s ease-out; }
.entry-plate img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.35s var(--ease); filter: drop-shadow(0 14px 12px rgba(40, 36, 0, 0.22)); }
.entry-link:hover .entry-plate { --plyta-swiatlo: #fff; }
.entry-link:hover .entry-plate img { transform: translateY(-4px); }
.entry h3 { font-size: 20px; letter-spacing: -0.01em; margin: 12px 0 4px; display: flex; gap: 10px; align-items: baseline; line-height: 1.2; }
.entry h3 .nr { font: 700 15px var(--typed); color: var(--green); white-space: nowrap; }
.entry-link:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.entry-lede { margin: 0 0 6px; color: var(--ink-2); }
/* Specyfikacja wpisu jak w katalogu: maszynopis w dwóch kolumnach. */
.spec-rows { display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; margin: 6px 0 0; font: 400 13.5px/1.45 var(--typed); }
.spec-rows dt { color: var(--ink-2); }
.spec-rows dd { margin: 0; font-weight: 700; }

/* ---- Arkusz: płyta z sześcioma deskami ---- */
.sheet { display: grid; grid-template-columns: 4fr 8fr; gap: var(--gut); padding: 72px var(--gut) 88px; color: var(--on-green); position: relative; isolation: isolate;
	background: radial-gradient(70% 90% at 75% 45%, rgba(92, 87, 0, 0.45) 0%, transparent 70%), linear-gradient(160deg, var(--green-deep) 0%, var(--olive-night) 100%); }
.sheet h2 { font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 20px; }
.sheet p { color: var(--on-green-2); max-width: 42ch; }
.legend { padding-left: 1.8em; margin: 24px 0 0; display: grid; gap: 4px; }
.legend a { text-decoration: none; color: var(--on-green); }
.legend a:hover { text-decoration: underline; }
.legend b { color: #fff; }
.sheet-plate { margin: 0; align-self: center; }
.sheet-plate figcaption { font-size: 13px; color: var(--on-green-2); margin-top: 8px; text-align: right; }

/* ---- Warunki zamówienia ---- */
.terms { padding: 80px var(--gut) 96px; }
.terms-list { list-style: none; counter-reset: krok; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.terms-list li { counter-increment: krok; padding: 20px 24px 8px 0; display: grid; gap: 8px; align-content: start; }
.terms-list li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.terms-list li::before { content: counter(krok); font: 700 44px/1 var(--typed); color: var(--green); }
.terms-list b { font-size: 20px; letter-spacing: -0.01em; }
.terms-list span { color: var(--ink-2); font-size: 16px; }

/* ---- Strony treści, 404 ---- */
.strona { max-width: 820px; margin: 0 auto; padding: 56px var(--gut) 96px; }
.strona-tytul { font-size: clamp(38px, 4.4vw, 60px); letter-spacing: -0.035em; line-height: 1; margin: 0 0 28px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.strona-tresc { font-size: 18px; }
.strona-tresc h2 { font-size: 26px; letter-spacing: -0.02em; margin: 40px 0 10px; }
.strona-tresc p, .strona-tresc li { max-width: 68ch; }
.strona-tresc ul { padding-left: 1.2em; }
.strona-tresc li + li { margin-top: 6px; }
.strona--sklep, .woocommerce-account .strona { max-width: 1240px; }
.pusto { max-width: 820px; margin: 0 auto; padding: 96px var(--gut) 120px; }
.pusto h1 { font-size: clamp(40px, 5vw, 68px); letter-spacing: -0.035em; line-height: 1; margin: 12px 0 20px; }
.pusto p { max-width: 54ch; }
.pusto--krotko { padding: 24px 0; margin: 0; }

/* ---- Stopka ---- */
.colophon { background: linear-gradient(180deg, var(--ink-olive) 0%, var(--ink) 100%); color: #d9d8cf; padding: 56px var(--gut) 28px; border-top: 3px solid var(--sage); }
.colophon-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: var(--gut); }
.colophon .mark { color: #f1f1eb; }
.colophon .mark-pod { color: #a9aca2; border-left-color: rgba(255, 255, 255, 0.2); }
.colophon h2 { font: 700 14px var(--typed); color: #f1f1eb; margin: 0 0 12px; }
.colophon nav { display: grid; gap: 6px; align-content: start; }
.colophon nav a { text-decoration: none; color: #d6d8d0; }
.colophon nav a:hover { text-decoration: underline; color: #fff; }
.colophon-mark .typed, .colophon-note p { font-size: 14px; color: #a9aca2; margin: 14px 0 0; }
.colophon-note p { margin-top: 0; }
.colophon-small { font-size: 12px; color: #8d9087; margin: 48px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* ---- Telefon ---- */
@media (max-width: 1080px) {
	.masthead { grid-template-columns: 1fr auto auto; gap: 16px; }
	.nav-toggle { display: inline-block; }
	.nav { display: none; grid-column: 1 / -1; flex-direction: column; gap: 0; padding: 8px 0; }
	.nav.is-open { display: flex; }
	.nav a { padding: 12px 0; border-bottom: 1px solid var(--rule); }
	.goto { display: none; }
	.znak { width: 124px; }
	.mark-pod { display: none; }
	.slip-row { grid-template-columns: 1fr 1fr; }
	.slip-row > label:first-child { grid-column: 1 / -1; }
	.times { display: none; }
	.slip-price, .slip .btn { grid-column: 1 / -1; }
	.entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.terms-list { grid-template-columns: 1fr 1fr; }
	.terms-list li:nth-child(3) { padding-left: 0; border-left: 0; }
	.colophon-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.cover { grid-template-columns: 1fr; padding-top: 32px; --swiatlo: 90% 30% at 60% 92%; }
	.cover .tlo-slojow { -webkit-mask: radial-gradient(500px 500px at 55% 320px, #000 55%, transparent 100%); mask: radial-gradient(500px 500px at 55% 320px, #000 55%, transparent 100%); }
	.cover .tlo-slojow i { width: 1000px; left: calc(55% - 500px); top: -180px; opacity: 0.18; }
	body::before { width: 900px; right: -560px; }
	/* Na telefonie kupon z ceną idzie przed render, żeby cena była w pierwszym widoku. */
	.cover h1 { font-size: 40px; margin-bottom: 16px; }
	.lede { font-size: 16.5px; margin-bottom: 20px; }
	.slip { order: 2; margin: 0 0 24px; }
	.cover-plate { order: 3; }
	.cover-plate img { width: 100%; margin: 0; }
	.cover-plate figcaption { margin: 4px 0 24px; text-align: left; }
	.slip-head { padding: 12px 16px 0; }
	.slip-row { padding: 18px 16px 20px; gap: 16px; }
	.index { padding-top: 48px; }
	.page-head, .sheet { grid-template-columns: 1fr; }
	.entries, .entries--blaty { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
	.entry h3 { font-size: 17px; flex-wrap: wrap; gap: 2px 8px; }
	/* Dwie karty w rzędzie: etykieta nad wartością, żeby zakresy nie łamały się w środku. */
	.spec-rows { grid-template-columns: 1fr; gap: 0; font-size: 12.5px; }
	.spec-rows dd + dt { margin-top: 3px; }
	.terms-list { grid-template-columns: 1fr; }
	.terms-list li, .terms-list li + li { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
	.colophon-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}