/* Amrit — system G+J+K+L. Mobile-first: bazowo telefon, potem 760 px (tablet) i 1024 px (desktop). */

/* ── 1. Tokeny ─────────────────────────────────────────────── */
:root {
	--bazalt: #1E1E1E;
	--wapien: #E9E1D3;
	--kosc: #F4EEE6;
	--papier: #FBF8F3;
	--linia: #D6CBBE;
	--szary: #5E574D;
	--ochra: #C78B2B;
	--czerwien: #B8282E;
	--ok: #0F6B4F;
	--czesciowo: #A0611A;
	--nie: #B8282E;

	--hub: #1E1E1E;
	--hub-2: #C78B2B;
	--hub-na: #F4EEE6;
	--wzor: repeating-linear-gradient(90deg, var(--hub) 0 22px, var(--hub-2) 22px 44px);

	--f-tekst: 'Alexandria', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--f-tytul: 'Rakkas', Georgia, serif;
	--f-hub: var(--f-tytul);
	--f-ar: 'Rakkas', 'Noto Naskh Arabic', serif;

	--w: 1180px;
	--w-tresc: 720px;
	--odstep: 16px;
	--promien: 2px;
}

/* Materiały działów (G+J+K+L). Te same zmienne dla klasy body, kart i kafli. */
.motyw-kebab, .karta--kebab, .kafel-dzialu--kebab, .glowa-dzialu--kebab, .lista-dzialow__el--kebab {
	--hub: #9E1B32; --hub-2: #B8364B; --hub-na: #F6E9E4; --f-hub: 'Lalezar', var(--f-tytul);
	--wzor: repeating-linear-gradient(135deg, #9E1B32 0 14px, #B8364B 14px 28px);
}
.motyw-mezze, .karta--mezze, .kafel-dzialu--mezze, .glowa-dzialu--mezze, .lista-dzialow__el--mezze {
	--hub: #0F6B4F; --hub-2: #13805F; --hub-na: #F4EEE6; --f-hub: 'Reem Kufi', var(--f-tytul); --f-ar: 'Reem Kufi', var(--f-tytul);
	--wzor: conic-gradient(from 90deg at 50% 50%, #0F6B4F 0 25%, #13805F 0 50%, #0B5A42 0 75%, #1A8C69 0) 0 0 / 44px 44px;
}
.motyw-pieczywo, .karta--pieczywo, .kafel-dzialu--pieczywo, .glowa-dzialu--pieczywo, .lista-dzialow__el--pieczywo {
	--hub: #B4532A; --hub-2: #C9693F; --hub-na: #FBF1E9;
	--wzor: radial-gradient(circle at 50% 50%, #C9693F 0 5px, transparent 6px) 0 0 / 22px 22px, #B4532A;
}
.motyw-sosy, .karta--sosy, .kafel-dzialu--sosy, .glowa-dzialu--sosy, .lista-dzialow__el--sosy {
	--hub: #2E3A23; --hub-2: #E2702B; --hub-na: #F1E8D2;
	--wzor: repeating-linear-gradient(90deg, #2E3A23 0 30px, #E2702B 30px 36px);
}
.motyw-atlas, .karta--atlas, .kafel-dzialu--atlas, .glowa-dzialu--atlas, .lista-dzialow__el--atlas {
	--hub: #2E3A23; --hub-2: #B8282E; --hub-na: #F1E8D2;
	--wzor: repeating-linear-gradient(90deg, #2E3A23 0 18px, #F1E8D2 18px 22px, #B8282E 22px 26px, #F1E8D2 26px 30px);
}
.motyw-miasto, .karta--miasto, .kafel-dzialu--miasto, .glowa-dzialu--miasto, .lista-dzialow__el--miasto {
	--hub: #1E1E1E; --hub-2: #C78B2B; --hub-na: #E9E1D3;
}
.motyw-slodycze, .karta--slodycze, .kafel-dzialu--slodycze, .glowa-dzialu--slodycze, .lista-dzialow__el--slodycze {
	--hub: #1D2A5B; --hub-2: #E8A33D; --hub-na: #EEE6DB;
	--wzor: repeating-linear-gradient(45deg, #1D2A5B 0 16px, #24336B 16px 32px);
}
.motyw-kuchnie, .karta--kuchnie, .kafel-dzialu--kuchnie, .glowa-dzialu--kuchnie, .lista-dzialow__el--kuchnie {
	--hub: #6B4A2B; --hub-2: #C78B2B; --hub-na: #F4EEE6;
}

/* Materiały kafli działów (sekcja 8.4): tło (--material), pas u góry (--pas, --pas-h), ramka (--material-ramka),
   kolory tekstu. Same gradienty i małe SVG w CSS, bez plików graficznych. */
.kafel-dzialu--kebab { /* G — bejrucki plakat: ukośne pasy u góry i rożen z warstwami mięsa */
	--pas: repeating-linear-gradient(135deg, #9E1B32 0 10px, #F6E9E4 10px 13px, #B8364B 13px 23px, #F6E9E4 23px 26px); --pas-h: 20px;
	--material: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 240'%3E%3Cdefs%3E%3CclipPath id='s'%3E%3Cpath d='M6 44h68l-14 150H20z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M40 0v240' stroke='%23F6E9E4' stroke-width='4'/%3E%3Ccircle cx='40' cy='16' r='7' fill='%23F6E9E4'/%3E%3Cg clip-path='url(%23s)'%3E%3Crect width='80' height='240' fill='%237E1528'/%3E%3Cpath d='M0 58h80M0 82h80M0 106h80M0 130h80M0 154h80M0 178h80' stroke='%23C24A5E' stroke-width='9'/%3E%3C/g%3E%3Cpath d='M22 216h36' stroke='%23F6E9E4' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") right 18px bottom 6px / auto calc(100% - 34px) no-repeat, #9E1B32;
	--material-na: #F6E9E4; --material-ar: #B8364B;
}
.kafel-dzialu--mezze { /* J — Fez: pas zellige, kość, szmaragdowa linia */
	--pas: repeating-linear-gradient(90deg, #F4EEE6 0 1px, transparent 1px 21px, #F4EEE6 21px 23px, transparent 23px 43px, #F4EEE6 43px 44px), repeating-linear-gradient(0deg, #F4EEE6 0 1px, transparent 1px 21px, #F4EEE6 21px 23px, transparent 23px 43px, #F4EEE6 43px 44px), conic-gradient(from 90deg at 50% 50%, #13805F 0 25%, #1A8C69 0 50%, #0B5A42 0 75%, #0F6B4F 0) 0 0 / 44px 44px;
	--pas-h: 88px; --material: #F4EEE6; --material-na: #0F6B4F; --material-podpis: #2B1E16; --material-ramka: inset 0 0 0 2px #0F6B4F;
}
.kafel-dzialu--pieczywo { /* terakota: nakłucia jak na cieście i łuk pieca z żarem */
	--material: radial-gradient(32px 38px at calc(100% - 58px) 100%, #F2B45A 0 30%, #D9772F 62%, #6E2E14 98%, transparent 100%), radial-gradient(54px 70px at calc(100% - 58px) 100%, #8F3F1D 0 97%, transparent 100%), radial-gradient(circle, rgba(251, 241, 233, .32) 0 1.6px, transparent 2.3px) 0 0 / 18px 18px, #B4532A;
	--material-na: #FBF1E9; --material-ar: #D98A5C;
}
.kafel-dzialu--sosy { /* oliwka: markiza w pasy pomarańczu i kości z falbaną */
	--pas: radial-gradient(circle 11px at 11px 0, #E2702B 98%, transparent 100%) 0 22px / 44px 12px repeat-x, radial-gradient(circle 11px at 33px 0, #F1E8D2 98%, transparent 100%) 0 22px / 44px 12px repeat-x, repeating-linear-gradient(90deg, #E2702B 0 22px, #F1E8D2 22px 44px) 0 0 / 100% 22px no-repeat;
	--pas-h: 34px; --material: #2E3A23; --material-na: #F1E8D2; --material-podpis: #E2702B; --material-ar: #4A5A38;
}
.kafel-dzialu--atlas { /* K — sklep z przyprawami: oliwkowa rama, kość, czerwona linia */
	--material: #F1E8D2; --material-na: #2A2016; --material-ar: #B8282E; --material-pad: 36px;
	--material-ramka: inset 0 0 0 14px #2E3A23, inset 0 0 0 20px #F1E8D2, inset 0 0 0 22px #B8282E;
}
.kafel-dzialu--miasto { /* L — bazalt: neonowa ramka w ochrze i żarówki szyldu */
	--material: radial-gradient(circle, #F6D58E 0 2.5px, rgba(199, 139, 43, .4) 3.5px, transparent 6px) 11px 10px / 22px 22px repeat-x, radial-gradient(circle, #F6D58E 0 2.5px, rgba(199, 139, 43, .4) 3.5px, transparent 6px) left 11px bottom 10px / 22px 22px repeat-x, #1E1E1E;
	--material-ramka: inset 0 0 0 2px #C78B2B, inset 0 0 16px rgba(199, 139, 43, .45);
	--material-na: #E9E1D3; --material-podpis: #C78B2B; --material-ar: #C78B2B; --material-pad: 30px;
}
.kafel-dzialu--slodycze { /* indygo: ośmioramienne gwiazdy i złota ramka */
	--material: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23E8A33D' stroke-opacity='.4' stroke-width='1.5'%3E%3Crect x='13' y='13' width='18' height='18'/%3E%3Crect x='13' y='13' width='18' height='18' transform='rotate(45 22 22)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 44px 44px, #1D2A5B;
	--material-ramka: inset 0 0 0 9px #1D2A5B, inset 0 0 0 11px #E8A33D;
	--material-na: #EEE6DB; --material-podpis: #E8A33D; --material-ar: #E8A33D; --material-pad: 32px;
}
.kafel-dzialu--kuchnie { /* brąz: pas kilimu */
	--pas: repeating-linear-gradient(90deg, #C78B2B 0 10px, #6B4A2B 10px 14px, #F4EEE6 14px 18px, #6B4A2B 18px 22px); --pas-h: 14px;
	--material: #6B4A2B; --material-na: #F4EEE6; --material-ar: #C78B2B;
}

/* ── 2. Podstawy ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--kosc);
	color: var(--bazalt);
	font-family: var(--f-tekst);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--hub, var(--bazalt)); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--bazalt); }
:focus-visible { outline: 3px solid var(--ochra); outline-offset: 2px; }
b, strong { font-weight: 700; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.08; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
[lang="ar"] { font-family: var(--f-ar); line-height: 1.3; }
.w { width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: var(--odstep); }
.w--waski { max-width: calc(var(--w-tresc) + 2 * var(--odstep)); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.pomin { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--bazalt); color: var(--kosc); padding: 10px 16px; font-weight: 600; }
.pomin:focus { top: 8px; }

/* ── 3. Rama ablaq ─────────────────────────────────────────── */
.ablaq { display: flex; flex-direction: column; }
.ablaq i { display: block; height: 10px; background: var(--bazalt); }
.ablaq i:nth-child(2) { background: var(--wapien); }
.ablaq i:nth-child(4) { height: 4px; background: var(--ochra); }
.ablaq--dol { flex-direction: column-reverse; }

/* ── 4. Nagłówek ───────────────────────────────────────────── */
.naglowek { background: var(--wapien); border-bottom: 2px solid var(--bazalt); position: relative; z-index: 10; }
/* Telefon: niski nagłówek przyklejony do góry; chowa się przy przewijaniu w dół, wraca przy przewinięciu w górę (amrit.js) */
@media (max-width: 759px) {
	.naglowek { position: sticky; top: 0; z-index: 30; transition: transform .25s ease; }
	.naglowek--ukryty { transform: translateY(-100%); }
	.naglowek__w { padding-block: 8px; }
	.znak__pieczec { width: 34px; height: 34px; font-size: 21px; }
	.znak__nazwa { font-size: 29px; }
	.naglowek__przycisk { min-height: 40px; padding: 0 10px; }
	.menu-dzialow { max-height: calc(100vh - 60px); }
	.tryb-gotowania .naglowek { transform: translateY(-100%); }
	html { scroll-padding-top: 72px; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) { .naglowek { transition: none; } }
.naglowek__w { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px 10px; padding-block: 12px; }
.znak { display: inline-flex; align-items: center; gap: 10px; color: var(--bazalt); text-decoration: none; }
.znak__pieczec { width: 40px; height: 40px; border-radius: 50%; background: var(--czerwien); color: #F1E8D2; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-tytul); font-size: 24px; line-height: 1; flex: none; }
.znak__nazwa { font-family: var(--f-tytul); font-size: 34px; line-height: 1; font-weight: 400; margin: 0; }
.custom-logo { max-height: 48px; width: auto; }

.dzialy { display: none; order: 3; grid-column: 1 / -1; margin-inline: calc(-1 * var(--odstep)); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dzialy::-webkit-scrollbar { display: none; }
.dzialy__lista, .dzialy ul { list-style: none; margin: 0; padding: 0 var(--odstep); display: flex; gap: 20px; white-space: nowrap; }
.dzialy a { display: block; padding: 10px 0 9px; font-size: 15px; font-weight: 600; color: var(--bazalt); text-decoration: none; border-bottom: 3px solid transparent; }
.dzialy a:hover, .dzialy .is-aktywny a, .dzialy .current-menu-item a, .dzialy a[aria-current] { border-bottom-color: var(--hub, var(--bazalt)); color: var(--hub, var(--bazalt)); }
.dzialy__el--kebab a:hover { border-bottom-color: #9E1B32; }
.dzialy__el--mezze a:hover { border-bottom-color: #0F6B4F; }

.naglowek__szukaj { position: static; }
.naglowek__przycisk { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 2px solid var(--bazalt); font-size: 15px; font-weight: 600; background: transparent; }
.naglowek__przycisk::-webkit-details-marker { display: none; }
.naglowek__etykieta { display: none; }
.naglowek__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--wapien); border-bottom: 2px solid var(--bazalt); padding: 14px var(--odstep); }
.naglowek__szukaj[open] .naglowek__przycisk, .naglowek__menu[open] .naglowek__przycisk { background: var(--bazalt); color: var(--kosc); }
.naglowek__menu { position: static; }
.naglowek__zamknij, .naglowek__menu[open] .naglowek__burger { display: none; }
.naglowek__menu[open] .naglowek__zamknij { display: inline; }
.menu-dzialow { max-height: calc(100vh - 90px); overflow-y: auto; padding-block: 4px 12px; }
.menu-dzialow__lista { list-style: none; margin: 0; padding: 0; }
.menu-dzialow__el a { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linia); color: var(--bazalt); text-decoration: none; }
.menu-dzialow__el:last-child a { border-bottom: 0; }
.menu-dzialow__znak { width: 44px; height: 44px; background: var(--wzor); box-shadow: inset 0 0 0 2px var(--hub); }
.menu-dzialow__nazwa { display: flex; flex-direction: column; font-family: var(--f-tytul); font-size: 24px; line-height: 1.05; }
.menu-dzialow__podpis { margin-top: 4px; font-family: var(--f-tekst); font-size: 13px; font-weight: 300; line-height: 1.3; color: var(--szary); }
.menu-dzialow__ar { font-family: var(--f-ar); font-size: 26px; line-height: 1; color: var(--hub); }
.menu-dzialow__el a:hover .menu-dzialow__nazwa { color: var(--hub); }
/* Pas pod nagłówkiem: kafle zellige 44 px (4 pola 20 px, fugi w kolorze kości) jak w makiecie; kolory z działu. */
.pas-dzialu {
	height: 44px;
	background:
		repeating-linear-gradient(90deg, var(--kosc) 0 1px, transparent 1px 21px, var(--kosc) 21px 23px, transparent 23px 43px, var(--kosc) 43px 44px),
		repeating-linear-gradient(0deg, var(--kosc) 0 1px, transparent 1px 21px, var(--kosc) 21px 23px, transparent 23px 43px, var(--kosc) 43px 44px),
		conic-gradient(from 90deg at 50% 50%, var(--z2, var(--hub-2)) 0 25%, var(--z4, var(--hub)) 0 50%, var(--z3, var(--hub)) 0 75%, var(--hub) 0) 0 0 / 44px 44px;
}
.motyw-kebab { --z2: #B8364B; --z3: #7E1528; --z4: #C24A5E; }
.motyw-mezze { --z2: #13805F; --z3: #0B5A42; --z4: #1A8C69; }
.motyw-pieczywo { --z2: #C9693F; --z3: #8F3F1D; --z4: #D98A5C; }
.motyw-sosy { --z2: #E2702B; --z3: #232D1A; --z4: #4A5A38; }
.motyw-atlas { --z2: #B8282E; --z3: #232D1A; --z4: #F1E8D2; }
.motyw-miasto { --z2: #C78B2B; --z3: #000; --z4: #3A3A3A; }
.motyw-slodycze { --z2: #E8A33D; --z3: #141E45; --z4: #24336B; }
.motyw-kuchnie { --z2: #C78B2B; --z3: #4E3520; --z4: #8A6640; }

/* ── 5. Przyciski, formularze ──────────────────────────────── */
.przycisk { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; font-weight: 800; font-size: 16px; text-decoration: none; border: 2px solid var(--bazalt); cursor: pointer; background: transparent; color: var(--bazalt); }
.przycisk--ciemny { background: var(--bazalt); color: var(--kosc); }
.przycisk--ciemny:hover { background: var(--hub); border-color: var(--hub); color: var(--hub-na); }
.przycisk--obrys:hover { background: var(--bazalt); color: var(--kosc); }
.szukaj { display: flex; gap: 0; max-width: 560px; }
.szukaj__pole { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 2px solid var(--bazalt); border-right: 0; background: var(--papier); }
.szukaj__przycisk { min-height: 48px; padding: 0 18px; border: 2px solid var(--bazalt); background: var(--bazalt); color: var(--kosc); font-weight: 800; cursor: pointer; }
.szukaj-duzy { margin-top: 18px; }

/* ── 6. Sekcje i siatki ────────────────────────────────────── */
.glowna { display: block; min-height: 50vh; }
.sekcja { padding-block: 40px 0; }
.sekcja__glowa { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid var(--bazalt); padding-bottom: 8px; margin-bottom: 20px; }
.sekcja__tytul { font-family: var(--f-tytul); font-size: 34px; }
.sekcja__dopisek { margin: 0; font-size: 15px; color: var(--szary); }
.sekcja__link { font-weight: 600; font-size: 15px; color: var(--bazalt); }
.siatka { display: grid; grid-template-columns: 1fr; gap: 28px 24px; }
.listing { padding-block: 28px 56px; }
.pusto { font-size: 18px; padding-block: 24px; }

/* Łuk podkowiasty (miejsce na zdjęcie) */
.luk { display: block; margin: 0; aspect-ratio: 4 / 5; border: 10px solid var(--hub); border-bottom-width: 0; border-radius: 50% 50% 0 0 / 38% 38% 0 0; overflow: hidden; background: #2A2420; }
.luk img, .luk .obraz { width: 100%; height: 100%; object-fit: cover; }
.obraz--brak { display: block; width: 100%; height: 100%; min-height: 160px; background: radial-gradient(ellipse at 50% 120%, rgba(199, 139, 43, .45), transparent 60%), var(--hub, #2A2420); }

/* ── 7. Karty ──────────────────────────────────────────────── */
.karta { display: grid; gap: 12px; align-content: start; }
.karta__obraz { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hub); border-bottom: 5px solid var(--hub); }
.karta__obraz img, .karta__obraz .obraz { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.karta:hover .karta__obraz img { transform: scale(1.03); }
.karta__dzial { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--hub); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.karta__pieczec { background: var(--czerwien); color: #fff; padding: 1px 8px; font-size: 12px; }
.karta__tytul { font-family: var(--f-tytul); font-size: 25px; line-height: 1.1; }
.karta__tytul a { color: var(--bazalt); text-decoration: none; }
.karta__tytul a:hover { color: var(--hub); }
.karta__zajawka { margin: 0; font-size: 16px; color: #3a352f; }
.karta__meta { margin: 0; font-size: 14px; font-weight: 600; color: var(--szary); }
.karta--duza { margin-bottom: 36px; }
.karta--duza .karta__tytul { font-size: 34px; }

/* ── 8. Strona główna (makieta A „Magazyn”) ────────────────── */
.home { background: var(--wapien); }
/* Zastępczy obraz w małych ramkach: bez minimalnej wysokości z sekcji 6 */
.mag .obraz--brak, .szybko .obraz--brak, .skladnik .obraz--brak, .z-dzialow .obraz--brak { min-height: 0; }
.nowe__foto img, .nowe__foto .obraz, .szybko__foto img, .szybko__foto .obraz, .skladnik__foto img, .skladnik__foto .obraz,
.dzial-glowna__foto img, .dzial-glowna__foto .obraz { width: 100%; height: 100%; object-fit: cover; }

/* 8.1. Czołówka: wpis wiodący (zdjęcie 4:3, panel w kolorze działu) i kolumna nowości */
.mag { padding-block: 20px 8px; }
.mag__w { display: grid; gap: 40px; }
.wiodacy { min-width: 0; }
.wiodacy__link { position: relative; display: block; color: var(--hub-na); text-decoration: none; }
.wiodacy__link:hover { color: var(--hub-na); }
.wiodacy__obraz { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hub); }
.wiodacy__obraz img, .wiodacy__obraz .obraz { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.wiodacy__link:hover .wiodacy__obraz img { transform: scale(1.025); }
.wiodacy__znaczek { position: absolute; left: 0; top: 0; z-index: 1; background: var(--czerwien); color: #F1E8D2; padding: 7px 14px; font-weight: 800; font-size: 14px; }
.wiodacy__panel { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 22px; background: var(--hub); color: var(--hub-na); border-top: 6px solid var(--hub-2); }
.wiodacy__panel::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: var(--wzor); }
.wiodacy__ar { position: absolute; right: 14px; top: -.62em; font-family: var(--f-hub); font-size: 72px; line-height: 1; color: var(--hub-na); text-shadow: 0 2px 0 var(--hub); pointer-events: none; }
.wiodacy__dzial { font-size: 14px; font-weight: 600; opacity: .85; }
.wiodacy__tytul { font-family: var(--f-hub); font-size: clamp(32px, 8.5vw, 56px); line-height: 1; color: var(--hub-na); overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .2s; }
.wiodacy__link:hover .wiodacy__tytul { text-decoration-color: currentColor; } /* hover: podkreślenie, kolor zostaje */
.wiodacy__opis { font-size: 17px; line-height: 1.55; max-width: 36em; color: var(--hub-na); }
.wiodacy__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.wiodacy__meta span { background: var(--hub-na); color: var(--hub); padding: 5px 12px; font-weight: 800; font-size: 15px; }

.nowe { min-width: 0; }
.nowe__glowa { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--bazalt); padding-bottom: 6px; margin-bottom: 4px; }
.nowe__tytul-sekcji { font-family: var(--f-tytul); font-size: 32px; }
.nowe__wszystkie { font-size: 15px; font-weight: 600; color: var(--bazalt); }
.nowe__lista { list-style: none; margin: 0; padding: 0; }
.nowe__el + .nowe__el { border-top: 1px solid var(--linia); }
.nowe__link { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding-block: 12px; color: var(--bazalt); text-decoration: none; }
.nowe__link:hover { color: var(--bazalt); }
.nowe__foto img { transition: transform .35s ease; }
.nowe__link:hover .nowe__foto img, .nowe__link:focus-visible .nowe__foto img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .nowe__foto img { transition: none; } }
.nowe__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hub); border-left: 5px solid var(--hub); }
.nowe__tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nowe__dzial { font-size: 13px; font-weight: 600; color: var(--hub); }
.nowe__krotki { font-family: var(--f-tytul); font-size: 21px; line-height: 1.08; overflow-wrap: anywhere; }
.nowe__link:hover .nowe__krotki { color: var(--hub); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.nowe__meta { font-size: 13px; font-weight: 600; color: var(--szary); }

/* 8.2. Pas „Na szybko”: bazalt, czasy pracy jak na tablicy; na telefonie przewijany palcem */
.szybko { margin-top: 48px; background: var(--bazalt); color: var(--wapien); padding-block: 28px 32px; }
.szybko__glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; border-bottom: 2px solid #3A3A3A; padding-bottom: 10px; margin-bottom: 20px; }
.szybko__tytul { font-family: var(--f-tytul); font-size: 36px; color: var(--wapien); }
.szybko__tytul span { color: var(--ochra); }
.szybko__dopisek { margin: 0; font-size: 15px; color: #BDB3A5; }
.szybko__lista { position: relative; list-style: none; margin: 0 calc(-1 * var(--odstep)); padding: 0 var(--odstep) 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--odstep); scrollbar-width: thin; scrollbar-color: var(--ochra) #2E2E2E; }
.szybko__lista > li { scroll-snap-align: start; min-width: 0; }
.szybko__el { display: grid; grid-template-rows: auto 1fr; height: 100%; color: var(--wapien); text-decoration: none; border: 2px solid #3A3A3A; }
.szybko__el:hover { color: var(--wapien); }
.szybko__el:hover { border-color: var(--ochra); }
.szybko__el:hover .szybko__krotki { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.szybko__foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hub); border-bottom: 4px solid var(--hub); }
.szybko__tekst { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.szybko__czas { font-family: var(--f-tytul); font-size: 52px; line-height: .9; color: var(--ochra); }
.szybko__czas small { font-size: 22px; margin-left: 4px; }
.szybko__krotki { font-family: var(--f-tytul); font-size: 23px; line-height: 1.05; overflow-wrap: anywhere; }
.szybko__uwaga { font-size: 14px; line-height: 1.45; color: #BDB3A5; }

/* 8.3. „Co zrobić z…”: panel w kolorze działu, okrągłe zdjęcie, trzy wpisy */
.skladniki-sekcja .sekcja__glowa { border-bottom: 0; margin-bottom: 8px; }
.skladniki-lista { display: grid; gap: 18px; }
.skladnik { background: var(--hub); padding: 10px; min-width: 0; }
.skladnik__ramka { height: 100%; background: #F1E8D2; color: #2A2016; padding: 18px 18px 14px; box-shadow: inset 0 0 0 2px var(--hub-2); }
.skladnik.karta--mezze .skladnik__ramka, .skladnik.karta--kebab .skladnik__ramka { box-shadow: inset 0 0 0 2px var(--hub); }
.skladnik__glowa { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; padding-bottom: 14px; border-bottom: 2px dashed var(--hub); }
.skladnik__foto { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--hub); box-shadow: 0 0 0 3px #F1E8D2, 0 0 0 5px var(--hub); }
.skladnik__ar { display: block; font-family: var(--f-ar); font-size: 28px; line-height: 1.1; color: var(--hub); }
.skladnik__nazwa { font-family: var(--f-tytul); font-size: 32px; line-height: 1; overflow-wrap: anywhere; }
.skladnik__nazwa small { display: block; font-family: var(--f-tekst); font-size: 14px; font-weight: 600; color: var(--szary); margin-bottom: 2px; }
.skladnik__lista { list-style: none; margin: 0; padding: 0; }
.skladnik__lista li + li { border-top: 1px solid #D9CDB4; }
.skladnik__lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 0; color: #2A2016; text-decoration: none; }
.skladnik__lista a:hover { color: #2A2016; }
.skladnik__wpis { font-family: var(--f-tytul); font-size: 20px; line-height: 1.1; overflow-wrap: anywhere; }
.skladnik__czas { font-size: 13px; font-weight: 600; color: var(--szary); white-space: nowrap; align-self: center; }
.skladnik__typ { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--hub); }
.skladnik__lista a:hover .skladnik__wpis { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* 8.4. Kafle działów: każdy dział ma własny materiał (zmienne --material… w sekcji 1), budowa wspólna */
.kafel-dzialu { position: relative; overflow: hidden; display: flex; min-height: 180px; text-decoration: none; background: var(--material, var(--hub)); color: var(--material-na, var(--hub-na)); box-shadow: var(--material-ramka, none); }
.kafel-dzialu:hover { color: var(--material-na, var(--hub-na)); }
.kafel-dzialu::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--pas-h, 0px); background: var(--pas, none); }
.kafel-dzialu__ramka { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: calc(var(--pas-h, 0px) + 20px) var(--material-pad, 24px) var(--material-pad, 24px); }
.kafel-dzialu__ar { position: absolute; right: var(--material-pad, 24px); top: calc(var(--pas-h, 0px) + 8px); font-family: var(--f-ar); font-size: 48px; line-height: 1; color: var(--material-ar, var(--hub-2)); }
.kafel-dzialu__nazwa { position: relative; font-family: var(--f-hub); font-size: 38px; line-height: .98; overflow-wrap: anywhere; }
.kafel-dzialu__podpis { position: relative; font-size: 15px; font-weight: 300; color: var(--material-podpis, inherit); }
.kafel-dzialu__ile { position: relative; align-self: flex-start; margin-top: 6px; font-size: 13px; font-weight: 800; padding: 3px 10px; border: 2px solid currentColor; }
.kafel-dzialu:hover .kafel-dzialu__nazwa { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } /* hover: podkreślenie, kolor zostaje */
/* G — Bejrut: wielkie كباب w Lalezar za rożnem */
.kafel-dzialu--kebab .kafel-dzialu__ar { font-family: 'Lalezar', var(--f-tytul); font-size: 130px; right: 64px; top: 10px; }
.kafel-dzialu--kebab .kafel-dzialu__nazwa { font-size: 44px; }
.kafel-dzialu--kebab .kafel-dzialu__ramka { padding-right: 96px; }
/* J — Fez: kafelki u góry zamiast napisu arabskiego */
.kafel-dzialu--mezze .kafel-dzialu__ar { display: none; }
.kafel-dzialu--mezze .kafel-dzialu__nazwa { font-weight: 700; }
/* Pieczywo: podpis i liczba wpisów nie wchodzą na łuk pieca (prawy dolny róg, ok. 110 × 70 px) */
.kafel-dzialu--pieczywo .kafel-dzialu__podpis { padding-right: 104px; }

/* 8.5. Nowe w działach: kafel działu i 3–4 najnowsze wpisy (na telefonie trzy) */
.z-dzialow { padding-bottom: 56px; }
.dzial-glowna { display: grid; margin-bottom: 28px; min-width: 0; }
.dzial-glowna:last-child { margin-bottom: 0; }
.dzial-glowna__kafel { min-height: 170px; }
.dzial-glowna__lista { list-style: none; margin: 0; padding: 0; display: grid; background: var(--papier); border: 2px solid var(--hub); border-top: 0; min-width: 0; }
.dzial-glowna__el { min-width: 0; }
.dzial-glowna__el + .dzial-glowna__el { border-top: 1px solid var(--linia); }
.dzial-glowna__el:nth-child(4) { display: none; }
.dzial-glowna__link:hover { color: var(--bazalt); }
.dzial-glowna__link { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; padding: 12px 14px; color: var(--bazalt); text-decoration: none; }
.dzial-glowna__el:first-child .dzial-glowna__link { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 14px; }
.dzial-glowna__foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hub); border-bottom: 4px solid var(--hub-2); }
.dzial-glowna__tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dzial-glowna__typ { font-size: 12px; font-weight: 800; color: var(--hub); }
.dzial-glowna__tytul { font-family: var(--f-tytul); font-size: 21px; line-height: 1.1; overflow-wrap: anywhere; }
.dzial-glowna__el:first-child .dzial-glowna__tytul { font-size: 25px; }
.dzial-glowna__meta { font-size: 13px; font-weight: 600; color: var(--szary); }
.dzial-glowna__link:hover .dzial-glowna__tytul { color: var(--hub); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* 8.6. Kafle atlasu przypraw (styl K) */
.kafle-przypraw { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.kafel-przyprawy { display: block; background: #F1E8D2; color: #2A2016; padding: 5px; text-decoration: none; }
.kafel-przyprawy__ramka { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border: 2px solid var(--ramka, #8E2B34); text-align: center; height: 100%; }
.kafel-przyprawy:nth-child(6n+2) { --ramka: #5C6A3B; }
.kafel-przyprawy:nth-child(6n+3) { --ramka: #6B4A2B; }
.kafel-przyprawy:nth-child(6n+4) { --ramka: #B8282E; }
.kafel-przyprawy:nth-child(6n+5) { --ramka: #C48A06; }
.kafel-przyprawy:nth-child(6n) { --ramka: #1D2A5B; }
.kafel-przyprawy__foto { display: block; width: 76%; max-width: 132px; aspect-ratio: 1; margin-bottom: 6px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #F1E8D2, 0 0 0 5px var(--ramka, #8E2B34); }
.kafel-przyprawy__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kafel-przyprawy__ar { font-family: var(--f-tytul); font-size: 30px; color: var(--ramka, #8E2B34); }
.kafel-przyprawy__nazwa { font-family: var(--f-tytul); font-size: 26px; line-height: 1.05; }
.kafel-przyprawy__smak { font-size: 13px; }
.kafel-przyprawy:hover .kafel-przyprawy__ramka { background: #FBF6EA; }

/* Łuk ablaq (amrit_luk_ablaq(), dawna czołówka) */
.luk-ablaq { width: 100%; height: auto; display: block; }


/* ── 9. Nagłówki listingów i działów ───────────────────────── */
.okruszki { font-size: 14px; padding-block: 14px 10px; color: var(--szary); }
.okruszki a { color: inherit; }
.okruszki__sep { margin-inline: 4px; }
.okruszki span[aria-current], .okruszki .breadcrumb_last { color: var(--bazalt); }
.glowa-listingu { border-bottom: 2px solid var(--bazalt); padding-bottom: 22px; }
.glowa-listingu__tytul { font-family: var(--f-tytul); font-size: clamp(38px, 9vw, 64px); }
.glowa-listingu__opis { margin-top: 10px; font-size: 18px; max-width: 40em; }

.glowa-dzialu { background: var(--hub); color: var(--hub-na); padding-bottom: 22px; }
.glowa-dzialu .okruszki, .glowa-dzialu .okruszki span[aria-current], .glowa-dzialu .okruszki .breadcrumb_last { color: var(--hub-na); }
.glowa-dzialu__siatka { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.glowa-dzialu__tytul { font-family: var(--f-hub); font-size: clamp(36px, 10vw, 76px); line-height: .95; overflow-wrap: anywhere; }
.glowa-listingu__tytul, .wpis__tytul { overflow-wrap: anywhere; }
.glowa-dzialu__opis { margin-top: 12px; font-size: 18px; max-width: 38em; }
.glowa-dzialu__opis p:last-child { margin-bottom: 0; }
.glowa-dzialu__ar { font-size: clamp(40px, 12vw, 150px); line-height: .9; color: var(--hub-2); }
.glowa-dzialu--atlas, .glowa-dzialu--miasto { color: #F1E8D2; }
.podkategorie { display: flex; gap: 8px; overflow-x: auto; margin-top: 18px; padding-bottom: 4px; scrollbar-width: none; }
.podkategorie a { flex: none; padding: 7px 14px; border: 2px solid currentColor; color: var(--hub-na); text-decoration: none; font-weight: 600; font-size: 14px; }
.podkategorie a[aria-current] { background: var(--hub-na); color: var(--hub); }

/* ── 10. Wpis (układ z makiet R6/R7) ───────────────────────── */
.wpis__glowa { padding-bottom: 8px; }
.wpis__glowa-siatka { display: grid; gap: 28px; position: relative; align-items: start; }
.wpis__glowa-tekst { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.nazwa-oryg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; color: var(--hub); font-weight: 600; font-size: 16px; }
.nazwa-oryg__ar { font-family: var(--f-ar); font-size: 30px; }
.motyw-kebab .nazwa-oryg__ar { font-family: 'Lalezar', var(--f-tytul); font-size: 34px; }
.wpis__tytul { font-family: var(--f-tytul); font-size: clamp(38px, 9vw, 64px); line-height: 1; }
.motyw-kebab .wpis__tytul { font-family: var(--f-hub); }
.wpis__lead p { margin: 0; font-size: 19px; line-height: 1.65; }
.etykiety { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.etykieta { background: var(--hub); color: var(--hub-na); padding: 9px 16px; font-weight: 800; font-size: 16px; line-height: 1.3; }
.etykieta--ciemna { background: var(--bazalt); color: var(--kosc); }
.etykieta--plakietka { background: transparent; color: var(--ok); box-shadow: inset 0 0 0 2px var(--ok); }
.etykieta--plakietka a { color: inherit; text-decoration: none; }
.spis { font-size: 15px; border: 2px solid var(--bazalt); background: var(--papier); margin-bottom: 24px; }
.spis__tytul { cursor: pointer; font-weight: 800; padding: 12px 14px; }
.spis__lista { margin: 0; padding: 0 14px 14px 34px; display: grid; gap: 6px; }
.spis__lista a { color: var(--bazalt); text-decoration: none; }
.spis__lista a:hover { color: var(--hub); text-decoration: underline; }
.wpis__stopka { margin-top: 40px; font-size: 14px; color: var(--szary); }
.wpis__stopka a { color: inherit; }

/* Łuk podkowiasty jak w makiecie: zewnętrzna warstwa w kolorze działu, ciemne wnętrze ze zdjęciem.
   Kształt = elipsa (górna część) + węższy prostokąt (podstawa), maską; proporcje figury 430 × 440. */
.podkowa { position: relative; margin: 0; width: 100%; max-width: 460px; justify-self: center; aspect-ratio: 430 / 440; }
.podkowa::before {
	content: ''; position: absolute; inset: 0; background: var(--hub-luk, #B4532A);
	-webkit-mask: radial-gradient(50% 43.2% at 50% 43.2%, #000 99%, #0000 100%), linear-gradient(#000 0 0) 50% 100% / 81.4% 40.9% no-repeat;
	mask: radial-gradient(50% 43.2% at 50% 43.2%, #000 99%, #0000 100%), linear-gradient(#000 0 0) 50% 100% / 81.4% 40.9% no-repeat;
}
.podkowa__wnetrze {
	position: absolute; inset: 0; display: block; background: #3A2418;
	-webkit-mask: radial-gradient(46.3% 39.5% at 50% 43.2%, #000 99%, #0000 100%), linear-gradient(#000 0 0) 50% 100% / 74% 40.9% no-repeat;
	mask: radial-gradient(46.3% 39.5% at 50% 43.2%, #000 99%, #0000 100%), linear-gradient(#000 0 0) 50% 100% / 74% 40.9% no-repeat;
}
.podkowa__wnetrze img, .podkowa__wnetrze .obraz { width: 100%; height: 100%; object-fit: cover; }
.podkowa__podpis { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--szary); text-align: center; }
.wpis__obraz.podkowa { margin-bottom: 24px; }
.wpis__przyprawa { display: grid; gap: 4px; align-content: start; }
.wpis__przyprawa .wpis__obraz.podkowa { margin-bottom: 44px; }
.podkowa .obraz--brak { background: radial-gradient(ellipse at 50% 85%, rgba(199, 139, 43, .35), transparent 60%), #3A2418; }
.motyw-kebab .podkowa { --hub-luk: #9E1B32; }
.motyw-kebab .podkowa__wnetrze { background: #2A2420; }
.motyw-sosy .podkowa, .motyw-atlas .podkowa { --hub-luk: #2E3A23; }
.motyw-slodycze .podkowa { --hub-luk: #1D2A5B; }
.motyw-miasto .podkowa { --hub-luk: #1E1E1E; }
.pieczec { position: static; justify-self: start; width: 96px; height: 96px; border-radius: 50%; background: var(--czerwien); color: #F1E8D2; box-shadow: 0 0 0 3px var(--kosc), 0 0 0 6px var(--czerwien); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-8deg); font-family: var(--f-tytul); font-size: 15px; line-height: 1.1; }
.pieczec [lang="ar"] { font-size: 26px; }

.wpis__uklad { padding-block: 4px 56px; }

/* Treść: tabele na całą szerokość kolumny, tekst do 46em (jak w makiecie) */
.tresc { min-width: 0; }
.tresc p, .tresc li, .tresc blockquote { font-size: 18px; line-height: 1.7; max-width: 46em; }
.tresc h2 { font-family: var(--f-tytul); font-size: clamp(30px, 7vw, 42px); line-height: 1.05; margin: 56px 0 16px; max-width: 24em; }
.motyw-kebab .tresc h2 { font-family: var(--f-hub); }
.tresc h3 { font-family: var(--f-tekst); font-weight: 800; font-size: 22px; margin: 30px 0 10px; color: var(--hub); }
.tresc ul, .tresc ol { padding-left: 22px; margin: 0 0 1.2em; display: flex; flex-direction: column; gap: 10px; }
.tresc li { margin: 0; }
.tresc li::marker { color: var(--hub); font-weight: 800; }
.tresc img { margin-block: 20px; }
.tresc blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 5px solid var(--hub); font-size: 19px; }
.tresc a { color: var(--hub); }
.tagi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; font-size: 14px; font-weight: 600; }

/* Tabele (makieta: nagłówek w kolorze działu, zebra) */
.tabela { overflow-x: auto; margin: 14px 0; -webkit-overflow-scrolling: touch; }
.tabela table, .tresc table { border-collapse: collapse; width: 100%; font-size: 16px; }
.tabela th, .tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linia); vertical-align: top; font-weight: 300; }
.tabela thead th { background: var(--hub); color: var(--hub-na); font-size: 14px; font-weight: 800; }
.tabela tbody tr:nth-child(even) td, .tabela tbody tr:nth-child(even) th { background: #F1E9DF; }
.tabela tbody th { font-weight: 600; }
.tabela .liczba { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela .wciecie th { padding-left: 24px; font-weight: 300; }
.tabela--waska { max-width: 640px; }
.ocena { font-weight: 800 !important; }
.ocena--ok { color: var(--ok); }
.ocena--czesciowo { color: var(--czesciowo); }
.ocena--nie { color: var(--nie); }

/* ── 11. Przepis ───────────────────────────────────────────── */
.karta-przepisu { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.karta-przepisu .przycisk { min-height: 44px; padding: 0 18px; }
.porcje { display: inline-flex; border: 2px solid var(--bazalt); }
.porcje__przycisk { min-height: 44px; padding: 0 14px; border: 0; background: transparent; cursor: pointer; font-size: 16px; }
.porcje__przycisk[aria-pressed="true"] { background: var(--hub); color: var(--hub-na); font-weight: 800; }
.porcje__wlasne { display: inline-flex; border-left: 2px solid var(--bazalt); }
.porcje__wlasne input { width: 64px; min-height: 44px; border: 0; padding: 0 8px; background: transparent; font-size: 16px; text-align: center; -moz-appearance: textfield; }
.porcje__wlasne input::-webkit-outer-spin-button, .porcje__wlasne input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.porcje__wlasne input.is-aktywne { background: var(--hub); color: var(--hub-na); font-weight: 800; }
[data-tryb-gotowania][aria-pressed="true"] { background: var(--hub); border-color: var(--hub); color: var(--hub-na); }
.no-js [data-tryb-gotowania], .no-js .porcje, .no-js .przelicz-skladnik { display: none; }
/* „Mam 650 g mięsa”: przeliczenie według ilości jednego składnika */
.przelicz-skladnik { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 16px; }
.przelicz-skladnik__mam { font-weight: 600; }
.przelicz-skladnik__pole { display: inline-flex; align-items: center; gap: 6px; }
.przelicz-skladnik input { width: 84px; min-height: 44px; border: 2px solid var(--bazalt); padding: 0 8px; background: transparent; font-size: 16px; text-align: center; -moz-appearance: textfield; }
.przelicz-skladnik input::-webkit-outer-spin-button, .przelicz-skladnik input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.przelicz-skladnik input.is-aktywne { background: var(--hub); border-color: var(--hub); color: var(--hub-na); font-weight: 800; }
.przelicz-skladnik select { min-height: 44px; max-width: 100%; border: 2px solid var(--bazalt); padding: 0 34px 0 10px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E1E1E' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; font-size: 16px; -webkit-appearance: none; appearance: none; }
.przelicz-skladnik__wynik { font-weight: 800; color: var(--hub, var(--bazalt)); }

.skladniki__pozycja { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.skladniki__pozycja input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--hub); flex: none; }
.skladniki__pozycja input:checked + span { text-decoration: line-through; color: var(--szary); }
.skladniki__grupa th { background: transparent !important; padding-top: 18px; font-weight: 800 !important; color: var(--hub); }
.skladniki__uwaga { font-size: 14px; color: var(--szary); }
.przeskalowane [data-g] { background: rgba(199, 139, 43, .22); padding: 0 3px; }

/* Kroki: zwykła lista numerowana jak w makiecie; w trybie gotowania karty do odhaczania */
.kroki > li { scroll-margin-top: 20px; }
.kroki > li.is-zrobiony { color: var(--szary); text-decoration: line-through; text-decoration-thickness: 1px; }

.tryb-gotowania .tresc p, .tryb-gotowania .tresc li { font-size: 21px; }
.tryb-gotowania .kroki { list-style: none; padding-left: 0; counter-reset: krok; gap: 12px; }
.tryb-gotowania .kroki > li { counter-increment: krok; position: relative; cursor: pointer; padding: 14px 14px 14px 64px; background: var(--papier); border: 2px solid var(--linia); text-decoration: none; }
.tryb-gotowania .kroki > li::before { content: counter(krok); position: absolute; left: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--hub); color: var(--hub-na); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.tryb-gotowania .kroki > li.is-zrobiony::before { content: '✓'; background: var(--linia); color: var(--bazalt); }
.tryb-gotowania .kroki > li.is-biezacy { border-color: var(--hub); }
.tryb-gotowania .powiazane { display: none; }

/* Pasek skrótów przepisu (telefon) */
.pasek-przepisu { position: sticky; bottom: 0; z-index: 9; display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--bazalt); border-top: 4px solid var(--hub); }
.pasek-przepisu a, .pasek-przepisu button { display: flex; align-items: center; justify-content: center; min-height: 52px; color: var(--kosc); text-decoration: none; font-weight: 800; font-size: 15px; background: transparent; border: 0; border-left: 1px solid #3a3a3a; cursor: pointer; }
.pasek-przepisu > :first-child { border-left: 0; }
.no-js .pasek-przepisu { grid-template-columns: 1fr 1fr; }
.no-js .pasek-przepisu button { display: none; }


/* Karta przyprawy (styl K) */
.karta-przyprawy { background: #2E3A23; padding: 12px; max-width: 420px; width: 100%; justify-self: center; }
.karta-przyprawy__ramka { background: #F1E8D2; color: #2A2016; padding: 18px; border: 2px solid #B8282E; outline: 6px solid #F1E8D2; }
.karta-przyprawy__ar { margin: 0; text-align: right; font-size: 44px; color: #B8282E; }
.karta-przyprawy__nazwa { margin: 0 0 12px; font-family: var(--f-tytul); font-size: 40px; line-height: 1; }
.karta-przyprawy dl { margin: 0; display: grid; gap: 8px; font-size: 15px; }
.karta-przyprawy dt { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8E2B34; }
.karta-przyprawy dd { margin: 0; }

/* Powiązane */
.powiazane { padding-bottom: 48px; }

/* ── 12. Paginacja, 404, komentarze, listy działów ─────────── */
.paginacja ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 40px 0 0; }
.paginacja a, .paginacja span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 2px solid var(--bazalt); color: var(--bazalt); text-decoration: none; font-weight: 600; }
.paginacja .current { background: var(--bazalt); color: var(--kosc); }
.paginacja .dots { border-color: transparent; }
.strona-404 { padding-block: 48px 64px; text-align: center; }
.strona-404__kod { font-family: var(--f-tytul); font-size: 120px; line-height: 1; color: var(--czerwien); margin: 0; }
.strona-404__tytul { font-family: var(--f-tytul); font-size: 48px; margin: 8px 0 12px; }
.strona-404 .szukaj { margin-inline: auto; }
.lista-dzialow { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lista-dzialow__el { display: inline-block; padding: 10px 16px; background: var(--hub); color: var(--hub-na); text-decoration: none; font-weight: 600; }
.lista-dzialow__el:hover { color: var(--hub-na); filter: brightness(1.1); }
.komentarze { padding-block: 24px 48px; border-top: 2px solid var(--bazalt); }
.komentarze__tytul, .comment-reply-title { font-family: var(--f-tytul); font-size: 32px; margin-bottom: 16px; }
.komentarze__lista { padding-left: 20px; }
.comment-form input:not([type="checkbox"]):not([type="submit"]), .comment-form textarea { width: 100%; padding: 10px; border: 2px solid var(--bazalt); background: var(--papier); }
.comment-form .submit { min-height: 48px; padding: 0 22px; border: 2px solid var(--bazalt); background: var(--bazalt); color: var(--kosc); font-weight: 800; cursor: pointer; }

/* ── 13. Stopka ────────────────────────────────────────────── */
.stopka { margin-top: 0; background: var(--wapien); border-top: 2px solid var(--bazalt); }
.stopka__w { display: grid; gap: 28px; padding-block: 32px 20px; font-size: 15px; }
.stopka__znak { margin: 0 0 8px; }
.stopka__ar { font-family: var(--f-tytul); color: var(--czerwien); font-size: 30px; }
.stopka__wydawca { font-size: 13px; color: var(--szary); }
.stopka__tytul { font-weight: 800; margin-bottom: 8px; }
.stopka ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.stopka a { color: var(--bazalt); }
.stopka__dol { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 14px 18px; font-size: 13px; color: var(--szary); border-top: 1px solid var(--linia); }

/* ── 14. Tablet ≥ 560 / 760 px ─────────────────────────────── */
@media (min-width: 560px) {
	.siatka { grid-template-columns: repeat(2, 1fr); }
	.kafle-przypraw { grid-template-columns: repeat(3, 1fr); }
	.szybko__lista { grid-auto-columns: 46%; }
}
@media (min-width: 760px) {
	.kafle-przypraw { grid-template-columns: repeat(6, 1fr); }
	.mag { padding-top: 32px; }
	.wiodacy__panel { margin: -48px 64px 0 0; padding: 24px 28px 26px; }
	.wiodacy__ar { font-size: 110px; right: 22px; }
	.szybko__lista { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
	.dzial-glowna__lista { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.dzial-glowna__el:nth-child(4) { display: block; }
	.dzial-glowna__el + .dzial-glowna__el { border-top: 0; border-left: 1px solid var(--linia); }
	.dzial-glowna__link, .dzial-glowna__el:first-child .dzial-glowna__link { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; padding: 14px; }
	.dzial-glowna__el:first-child .dzial-glowna__tytul { font-size: 21px; }
	.dzial-glowna__foto { aspect-ratio: 16 / 10; }
	:root { --odstep: 32px; }
	body { font-size: 18px; }
	.naglowek__w { padding-block: 16px 0; }
	.dzialy { display: block; margin: 0; border-top: 1px solid var(--linia); }
	.naglowek__menu { display: none; }
	.naglowek__w { gap: 8px 16px; }
	.dzialy__lista, .dzialy ul { padding: 0; gap: 28px; }
	.dzialy a { padding: 11px 0 10px; }
	.naglowek__etykieta { display: inline; }
	.znak__pieczec { width: 48px; height: 48px; font-size: 28px; }
	.znak__nazwa { font-size: 40px; }
	.naglowek__panel { left: auto; right: var(--odstep); top: calc(100% + 2px); width: 420px; border: 2px solid var(--bazalt); border-top: 0; }
	.pas-dzialu { height: 40px; }
	.kafle-przypraw--duze { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	.karta--duza { grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
	.karta--duza .karta__tytul { font-size: 44px; }
	.sekcja { padding-top: 56px; }
	.sekcja__tytul { font-size: 46px; }
	.stopka__w { grid-template-columns: 2fr 1fr 1fr; }
	.pieczec { width: 110px; height: 110px; }
}

/* ── 15. Desktop ≥ 1024 px ─────────────────────────────────── */
@media (min-width: 1024px) {
	.wpis__uklad--ze-spisem { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
	.wpis__boczny { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
	.spis { margin-bottom: 0; }
	.tryb-gotowania .wpis__boczny { display: none; }
	.tryb-gotowania .wpis__uklad--ze-spisem { grid-template-columns: minmax(0, 1fr); }
	.mag__w { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: start; }
	.wiodacy__obraz { aspect-ratio: 16 / 10; }
	.nowe__link { grid-template-columns: 120px minmax(0, 1fr); padding-block: 13px; }
	.skladniki-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dzial-glowna { grid-template-columns: 290px minmax(0, 1fr); }
	.dzial-glowna__lista { border-top: 2px solid var(--hub); border-left: 0; }
	.dzial-glowna__kafel { min-height: 0; }
	.siatka { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
	.siatka--3 { grid-template-columns: repeat(3, 1fr); }
	.wpis__glowa-siatka { grid-template-columns: 7fr 5fr; column-gap: 32px; }
	.wpis__glowa-siatka--bez-obrazu { grid-template-columns: 1fr; }
	.wpis__glowa-siatka--bez-obrazu .pieczec { position: static; }
	.pasek-przepisu { display: none; }
	.pieczec { position: absolute; left: calc(58% - 70px); top: -6px; }
	.wpis__glowa { padding-top: 8px; }
}

/* ── 16. Druk (przepis na kartce) ──────────────────────────── */
@media print {
	.ablaq, .naglowek, .pas-dzialu, .stopka, .spis, .powiazane, .pasek-przepisu, .karta-przepisu, .komentarze, .okruszki, .wpis__obraz { display: none !important; }
	body { background: #fff; font-size: 12pt; }
	.wpis__uklad { display: block; padding: 0; }
	.tresc { max-width: none; }
	a { color: inherit; text-decoration: none; }
}
.stopka__link-znaku { color: inherit; text-decoration: none; }