/*
Theme Name: WyBawialnia
Description: Motyw WyBawialni — kawiarnio-bawialnia w Poznaniu. Kolory i typografia zgodne z brand bookiem (Varela Round, Pantone 109U / 5463U / 5513U / 7605U). Zbudowany mobile-first, z menu pod kod QR.
Version: 1.1.1
Author: WyBawialnia
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: wybawialnia
*/

/* ============================================================
   1. Kolory i typografia z brand booka
   ============================================================ */
:root {
	--zolty: #FBE34D;          /* Pantone 109U */
	--zolty-jasny: #FDF3B8;
	--granat: #3B4E55;         /* Pantone 5463U */
	--granat-ciemny: #2A3A40;
	--blekit: #BAD2D4;         /* Pantone 5513U */
	--bez: #E8CCBA;            /* Pantone 7605U */
	--krem: #FFFCEF;
	--biel: #FFFFFF;
	--tekst: #2A3A40;
	--tekst-mniej: #5B7076;
	--linia: #E4DFCE;

	--font-naglowek: "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

	--radius: 20px;
	--wrap: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--krem);
	color: var(--tekst);
	font-family: var(--font-tekst);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .wb-cena, .wb-kwota, .wb-data, .wb-logo, .wb-btn, .wb-nr {
	font-family: var(--font-naglowek);
	font-weight: 400;
}
h1, h2, h3 { line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2rem, 8vw, 4.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 5vw, 2.5rem); margin-bottom: 0.6em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.wb-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }
.wb-sekcja { padding: 56px 0; }
:focus-visible { outline: 3px solid var(--granat); outline-offset: 3px; border-radius: 4px; }
.wb-skip { position: absolute; left: -9999px; }
.wb-skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--granat); color: var(--krem); padding: 10px 16px; border-radius: 999px; }

/* Falbanka — motyw z logotypu i brand booka */
.wb-falbanka { height: 22px; background-repeat: repeat-x; background-size: 44px 44px; }
.wb-falbanka-dol { background-image: radial-gradient(circle at 22px 0, var(--krem) 22px, transparent 22px); }
.wb-falbanka-gora { background-image: radial-gradient(circle at 22px 44px, var(--krem) 22px, transparent 22px); }

/* Tła kafelków */
.wb-tlo-zolty { background: var(--zolty); }
.wb-tlo-zolty-jasny { background: var(--zolty-jasny); }
.wb-tlo-blekit { background: var(--blekit); }
.wb-tlo-bez { background: var(--bez); }
.wb-tlo-granat { background: var(--granat); color: var(--krem); }

/* ============================================================
   2. Nagłówek
   ============================================================ */
.wb-header { position: sticky; top: 0; z-index: 30; background: var(--zolty); }
.wb-nav {
	display: flex; align-items: center; gap: 14px;
	max-width: var(--wrap); margin: 0 auto; padding: 10px 18px;
}
.wb-logo { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; font-size: 1.15rem; letter-spacing: -0.02em; }
.wb-logo img { width: 38px; height: 38px; border-radius: 50%; }
.wb-nav-linki { display: none; gap: 18px; }
.wb-nav-lista { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.wb-nav-linki a { text-decoration: none; font-size: 0.95rem; padding: 4px 2px; border-bottom: 2px solid transparent; }
.wb-nav-linki a:hover, .wb-nav-linki a:focus { border-bottom-color: var(--granat); }

.wb-btn {
	display: inline-block; background: var(--granat); color: var(--krem);
	padding: 11px 22px; border-radius: 999px; text-decoration: none;
	font-size: 0.95rem; border: 0; cursor: pointer;
}
.wb-btn:hover { background: var(--granat-ciemny); }
.wb-btn-jasny { background: var(--krem); color: var(--granat); }
.wb-btn-ramka { background: transparent; color: var(--granat); box-shadow: inset 0 0 0 2px var(--granat); }
.wb-btn-ramka:hover { background: rgba(0, 0, 0, 0.06); }

.wb-tylko-duze { display: none; }
.wb-menu-toggle { display: inline-flex; background: none; border: 0; font: inherit; cursor: pointer; padding: 8px; }

/* ============================================================
   3. Hero
   ============================================================ */
.wb-hero { background: var(--zolty); padding: 40px 0 0; text-align: center; }
.wb-hero .wb-logo-hero { width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%; }
.wb-hero .wb-lead { font-size: 1.05rem; max-width: 34ch; margin: 1.1em auto 1.5em; }
.wb-tagi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; font-size: 0.88rem; }
.wb-tagi span { background: rgba(255, 255, 255, 0.55); padding: 6px 14px; border-radius: 999px; }
.wb-hero-akcje { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wb-adres { margin-top: 16px; font-size: 0.9rem; }

.wb-godziny {
	background: var(--granat); color: var(--krem); text-align: center;
	padding: 12px 18px; font-size: 0.92rem;
}
.wb-godziny .wb-sep { opacity: 0.5; margin: 0 8px; }

/* ============================================================
   4. Strefy
   ============================================================ */
.wb-strefy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.wb-strefa { text-align: center; }
.wb-luk {
	height: 120px; border-radius: 999px 999px 16px 16px;
	display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px;
	font-family: var(--font-naglowek); font-size: 1.05rem; color: var(--granat-ciemny); margin-bottom: 10px;
}
.wb-strefa p { font-size: 0.9rem; color: var(--tekst-mniej); margin: 0; }

/* ============================================================
   5. Pakiety urodzinowe
   ============================================================ */
.wb-urodziny { background: var(--granat); color: var(--krem); position: relative; padding-top: 0; }
.wb-urodziny .wb-wrap { padding-top: 40px; padding-bottom: 20px; }
.wb-urodziny h2, .wb-urodziny h3 { color: var(--krem); }
.wb-wstep { max-width: 52ch; }
.wb-przelacznik { display: inline-flex; background: rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 5px; margin-bottom: 28px; flex-wrap: wrap; }
.wb-przelacznik button {
	font: inherit; font-size: 0.9rem; color: var(--krem); background: none; border: 0;
	padding: 9px 18px; border-radius: 999px; cursor: pointer;
}
.wb-przelacznik button[aria-pressed="true"] { background: var(--zolty); color: var(--granat-ciemny); }
.wb-pakiety { display: grid; gap: 16px; }
.wb-pakiet { background: rgba(255, 255, 255, 0.07); border-radius: var(--radius); padding: 24px; }
.wb-pakiet.wb-wyroznik { background: var(--zolty); color: var(--granat-ciemny); }
.wb-pakiet.wb-wyroznik h3 { color: var(--granat-ciemny); }
.wb-cena { font-family: var(--font-naglowek); font-size: 2.2rem; margin: 12px 0 2px; }
.wb-cena-opis { font-size: 0.85rem; opacity: 0.75; margin-bottom: 16px; }
.wb-pakiet ul { list-style: none; padding: 0; margin: 0; font-size: 0.94rem; }
.wb-pakiet li { padding: 7px 0 7px 20px; position: relative; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.wb-pakiet.wb-wyroznik li { border-top-color: rgba(42, 58, 64, 0.18); }
.wb-pakiet li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.45; }
.wb-nota { font-size: 0.9rem; opacity: 0.75; margin-top: 20px; }

/* ============================================================
   6. Menu
   ============================================================ */
.wb-menu-siatka { display: grid; gap: 18px; }
.wb-menu-grupa h3 { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--bez); }
.wb-pozycja { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px dotted var(--linia); }
.wb-pozycja .wb-nazwa { flex: 1; }
.wb-pozycja .wb-opis { display: block; font-size: 0.84rem; color: var(--tekst-mniej); line-height: 1.4; }
.wb-pozycja b { font-family: var(--font-naglowek); font-weight: 400; white-space: nowrap; }
.wb-znacznik {
	display: inline-block; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
	background: var(--blekit); color: var(--granat-ciemny); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px;
}
.wb-znacznik-polecane { background: var(--zolty); }

/* ============================================================
   7. Promocje
   ============================================================ */
.wb-promocje { display: grid; gap: 14px; }
.wb-promo { border-radius: var(--radius); padding: 22px; }
.wb-promo .wb-dzien { font-size: 0.82rem; letter-spacing: 0.06em; margin-bottom: 8px; text-transform: uppercase; }
.wb-promo .wb-kwota { font-family: var(--font-naglowek); font-size: 2rem; line-height: 1; }
.wb-promo p { margin: 8px 0 0; font-size: 0.94rem; }

/* ============================================================
   8. Kalendarz
   ============================================================ */
.wb-kalendarz-sekcja { background: var(--zolty-jasny); }
.wb-kalendarz { background: var(--krem); border-radius: 22px; padding: 18px; }
.wb-kal-nag { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wb-kal-nag h3 { font-size: 1.3rem; }
.wb-kal-nag .wb-info { font-size: 0.82rem; color: var(--tekst-mniej); display: none; }
.wb-kal-siatka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wb-kal-tydzien { font-size: 0.68rem; color: var(--tekst-mniej); text-align: center; }
.wb-kal-dzien {
	min-height: 52px; border-radius: 10px; padding: 5px; background: var(--biel);
	border: 1.5px solid #EFE9D6; text-align: left; font: inherit; font-size: 0.7rem; color: var(--tekst);
}
.wb-kal-dzien.wb-pusty { background: transparent; border-color: transparent; }
.wb-kal-dzien .wb-nr { font-family: var(--font-naglowek); font-size: 0.95rem; display: block; }
.wb-kal-dzien .wb-etykieta { display: none; line-height: 1.25; margin-top: 2px; }
.wb-kal-dzien.wb-promo-dzien { background: var(--blekit); border-color: transparent; }
.wb-kal-dzien.wb-kal-zapis { background: var(--bez); border-color: transparent; cursor: pointer; width: 100%; }
.wb-kal-dzien.wb-kal-zapis:hover { background: #DEB9A2; }
.wb-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; margin-top: 14px; color: var(--tekst-mniej); }
.wb-legenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: 6px; vertical-align: -1px; }

/* ============================================================
   9. Warsztaty i zapisy
   ============================================================ */
.wb-warsztaty-sekcja { background: var(--zolty-jasny); padding-top: 0; }
.wb-warsztaty { display: grid; gap: 16px; }
.wb-warsztat { background: var(--krem); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.wb-warsztat .wb-data { font-family: var(--font-naglowek); font-size: 1.5rem; line-height: 1; }
.wb-warsztat .wb-data small { font-size: 0.72rem; display: block; color: var(--tekst-mniej); letter-spacing: 0.04em; }
.wb-warsztat h3 { margin: 10px 0 6px; }
.wb-szczegoly { font-size: 0.9rem; color: var(--tekst-mniej); margin-bottom: 12px; }
.wb-tresc { font-size: 0.92rem; margin-bottom: 12px; }
.wb-stopka { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-cena-mala { font-family: var(--font-naglowek); font-size: 1.2rem; }
.wb-miejsca { font-size: 0.84rem; padding: 4px 12px; border-radius: 999px; background: var(--blekit); }
.wb-miejsca.wb-malo { background: var(--bez); }
.wb-miejsca.wb-brak { background: #E8E4DA; color: var(--tekst-mniej); }
.wb-warsztat button { font: inherit; font-size: 0.95rem; border: 0; cursor: pointer; background: var(--granat); color: var(--krem); padding: 11px 20px; border-radius: 999px; flex: 1; }
.wb-warsztat button:hover { background: var(--granat-ciemny); }
.wb-warsztat button:disabled { background: #D8D2BE; color: var(--tekst-mniej); cursor: not-allowed; }
.wb-pusto { border: 2px dashed #C9BE8A; border-radius: var(--radius); padding: 28px; text-align: center; color: var(--tekst-mniej); }

/* Okno zapisu */
dialog#wb-okno {
	border: 0; border-radius: 22px 22px 0 0; padding: 0; background: var(--biel);
	width: 100%; max-width: none; max-height: 92vh; overflow-y: auto; margin: auto auto 0;
}
dialog#wb-okno::backdrop { background: rgba(42, 58, 64, 0.55); }
.wb-okno { padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); }
.wb-okno h3 { margin-bottom: 4px; }
.wb-kontekst { font-size: 0.9rem; color: var(--tekst-mniej); margin-bottom: 18px; }
.wb-pole { margin-bottom: 14px; }
.wb-pole label { display: block; font-size: 0.88rem; margin-bottom: 5px; }
.wb-pole input, .wb-pole select, .wb-pole textarea {
	width: 100%; font: inherit; font-size: 16px; padding: 11px 12px;
	border: 1.5px solid var(--linia); border-radius: 12px; background: var(--krem); color: var(--tekst);
}
.wb-pole input:focus, .wb-pole select:focus, .wb-pole textarea:focus { border-color: var(--granat); outline: none; }
.wb-pole input.wb-niepoprawne { border-color: #B33A2B; }
.wb-pole-zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--tekst-mniej); margin-bottom: 16px; }
.wb-pole-zgoda input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.wb-www { position: absolute; left: -9999px; }
.wb-blad { color: #B33A2B; font-size: 0.86rem; min-height: 1.2em; margin: 0 0 8px; }
.wb-okno-przyciski { display: flex; gap: 10px; position: sticky; bottom: 0; background: var(--biel); padding-top: 10px; }
.wb-okno-przyciski button { font: inherit; font-size: 0.95rem; border: 0; cursor: pointer; padding: 13px 18px; border-radius: 999px; flex: 1; }
.wb-anuluj { background: none; color: var(--tekst-mniej); }
.wb-wyslij { background: var(--granat); color: var(--krem); }
.wb-potwierdzenie { text-align: center; padding: 36px 24px; }
.wb-potwierdzenie .wb-znak { font-family: var(--font-naglowek); font-size: 2rem; color: var(--granat); }

/* ============================================================
   10. Kontakt i stopka
   ============================================================ */
.wb-kontakt { background: var(--granat); color: var(--krem); padding-top: 0; }
.wb-kontakt .wb-wrap { padding-top: 40px; padding-bottom: 40px; }
.wb-kontakt h2 { color: var(--krem); }
.wb-kontakt-siatka { display: grid; gap: 26px; }
.wb-kontakt a { color: var(--zolty); }
.wb-kontakt dl { margin: 0; }
.wb-kontakt dt { font-size: 0.82rem; opacity: 0.7; margin-top: 14px; }
.wb-kontakt dd { margin: 2px 0 0; font-size: 1.02rem; }
.wb-mapa iframe { width: 100%; height: 220px; border: 0; border-radius: var(--radius); }
.wb-mapa-pusto { border: 2px dashed rgba(255, 255, 255, 0.3); border-radius: var(--radius); padding: 30px; text-align: center; color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; }

.wb-footer { background: var(--granat-ciemny); color: rgba(255, 255, 255, 0.6); font-size: 0.84rem; text-align: center; padding: 20px 18px 84px; }
.wb-footer a { color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   11. Pasek akcji na telefonie
   ============================================================ */
.wb-pasek {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	display: grid; grid-template-columns: repeat(3, 1fr);
	background: var(--krem); border-top: 1px solid var(--linia);
	padding-bottom: env(safe-area-inset-bottom);
}
.wb-pasek a {
	text-align: center; padding: 11px 4px; text-decoration: none;
	font-size: 0.76rem; color: var(--granat-ciemny); line-height: 1.3;
}
.wb-pasek a span { display: block; font-size: 1.1rem; }

/* ============================================================
   12. Menu pod kod QR
   ============================================================ */
.wb-qr-body { background: var(--krem); }
.wb-qr-header { background: var(--zolty); padding: 16px 18px 12px; text-align: center; position: sticky; top: 0; z-index: 20; }
.wb-qr-header img { width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 50%; }
.wb-qr-header h1 { font-size: 1.6rem; }
.wb-qr-stolik { display: inline-block; background: var(--granat); color: var(--krem); border-radius: 999px; padding: 4px 14px; font-size: 0.82rem; margin-top: 8px; }
.wb-menu-nav {
	display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px;
	background: var(--krem); position: sticky; top: 0; z-index: 19;
	border-bottom: 1px solid var(--linia); -webkit-overflow-scrolling: touch;
}
.wb-menu-nav a {
	white-space: nowrap; text-decoration: none; font-size: 0.86rem;
	background: var(--zolty-jasny); border-radius: 999px; padding: 7px 14px;
}
.wb-menu-qr .wb-menu-grupa { scroll-margin-top: 64px; }
.wb-menu-qr .wb-pozycja { padding: 12px 0; font-size: 1rem; }
.wb-menu-qr .wb-pozycja b { font-size: 1.1rem; }
.wb-qr-akcje { display: grid; gap: 10px; padding: 0 18px 30px; }

/* ============================================================
   13. Treść stron (edytor blokowy)
   ============================================================ */
.wb-tresc-strony { padding: 40px 0 56px; }
.wb-tresc-strony h2 { margin-top: 1.4em; }
.wb-tresc-strony ul, .wb-tresc-strony ol { padding-left: 22px; }
.wb-tresc-strony img { border-radius: var(--radius); }
.wb-tresc-strony table { width: 100%; border-collapse: collapse; }
.wb-tresc-strony td, .wb-tresc-strony th { border-bottom: 1px solid var(--linia); padding: 8px; text-align: left; }

/* ============================================================
   14b. Bloki WordPressa na stronie głównej
   ============================================================ */
main > p { margin: 0; }
main > p:empty { display: none; }

.wb-tresc-glowna > *:not(.alignfull):not(.wb-sekcja):not(.wb-godziny):not(.wb-hero) {
	max-width: var(--wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: 18px;
	padding-right: 18px;
}
.wb-tresc-glowna > .alignfull { margin-left: 0; margin-right: 0; max-width: none; }

.wb-blok-hero { text-align: center; }
.wb-blok-hero .wp-block-cover__inner-container > * { margin-bottom: 14px; }
.wb-blok-hero .wp-block-image img { border-radius: 50%; }

.wp-block-button__link { font-family: var(--font-naglowek); }
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--granat); color: var(--granat); background: transparent;
}
.wp-block-media-text__content { padding: 0 24px; }
.wp-block-gallery img { border-radius: 14px; }
.wp-block-columns { gap: 18px; }
.wb-blok-urodziny h2, .wb-blok-urodziny h3 { color: var(--krem); }
.wb-blok-urodziny .has-zolty-background-color h3,
.wb-blok-urodziny .has-zolty-background-color p { color: var(--granat-ciemny); }
.wb-blok-urodziny ul { list-style: none; padding: 0; }
.wb-blok-urodziny li { padding: 6px 0; border-top: 1px solid rgba(255,255,255,.15); font-size: .95rem; }
.wb-blok-urodziny .has-zolty-background-color li { border-top-color: rgba(42,58,64,.18); }

/* ============================================================
   14. Większe ekrany
   ============================================================ */
@media (min-width: 640px) {
	body { font-size: 17px; }
	.wb-tylko-duze { display: inline; }
	.wb-sekcja { padding: 72px 0; }
	.wb-wrap { padding: 0 24px; }
	.wb-strefy { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
	.wb-luk { height: 170px; font-size: 1.2rem; padding-bottom: 20px; }
	.wb-pakiety { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
	.wb-menu-siatka { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 40px; }
	.wb-promocje { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
	.wb-warsztaty { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
	.wb-kontakt-siatka { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
	.wb-kal-dzien { min-height: 74px; font-size: 0.75rem; padding: 7px; }
	.wb-kal-dzien .wb-etykieta { display: block; }
	.wb-kal-nag .wb-info { display: block; }
	.wb-hero { padding: 64px 0 0; }
	.wb-hero .wb-logo-hero { width: 100px; height: 100px; }
	dialog#wb-okno { max-width: 480px; width: calc(100% - 32px); border-radius: 22px; margin: auto; }
	.wb-okno { padding: 28px; }
	.wb-okno-przyciski { justify-content: flex-end; }
	.wb-okno-przyciski button { flex: 0 0 auto; padding: 11px 22px; }
	.wb-mapa iframe { height: 260px; }
}

@media (min-width: 900px) {
	.wb-nav-linki { display: flex; }
	.wb-menu-toggle { display: none; }
	.wb-pasek { display: none; }
	.wb-footer { padding-bottom: 20px; }
	.wb-menu-nav { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation: none !important; transition: none !important; }
}

/* Druk karty menu */
@media print {
	.wb-header, .wb-pasek, .wb-menu-nav, .wb-qr-akcje, .wb-footer { display: none; }
	body { background: #fff; font-size: 12px; }
	.wb-menu-siatka { grid-template-columns: repeat(2, 1fr); }
}

/* Falbanki pod naglowkiem w kolorze sekcji ponizej */
body .wb-po-hero::before { background-image: radial-gradient(circle at 15px 15px, #fffcef 15px, transparent 15.5px), linear-gradient(#fffcef, #fffcef); }
@media (min-width: 900px) { body .wb-po-hero::before { background-image: radial-gradient(circle at 22px 22px, #fffcef 22px, transparent 22.5px), linear-gradient(#fffcef, #fffcef); } }
body.page-id-73 .wb-blok-cennik::before, body.page-id-379 .wb-blok-cennik::before, body.page-id-381 .wb-blok-cennik::before { background-image: radial-gradient(circle at 15px 15px, #fffcef 15px, transparent 15.5px), linear-gradient(#fffcef, #fffcef); }
body.page-id-305 .wb-hero-strony + .wb-sekcja::before, body.page-id-383 .wb-hero-strony + .wb-sekcja::before, body.page-id-385 .wb-hero-strony + .wb-sekcja::before { background-image: radial-gradient(circle at 15px 15px, #fdf3b8 15px, transparent 15.5px), linear-gradient(#fdf3b8, #fdf3b8); }

/* Ten sam ksztalt falbanki co na stronie glownej (wieksze kolka od 900px) */
@media (min-width: 900px) {
	body.page-id-73 .wb-blok-cennik::before, body.page-id-379 .wb-blok-cennik::before, body.page-id-381 .wb-blok-cennik::before { top: -43px; height: 44px; background-image: radial-gradient(circle at 22px 22px, #fffcef 22px, transparent 22.5px), linear-gradient(#fffcef, #fffcef); background-size: 44px 44px, 100% 23px; }
	body.page-id-305 .wb-hero-strony + .wb-sekcja::before, body.page-id-383 .wb-hero-strony + .wb-sekcja::before, body.page-id-385 .wb-hero-strony + .wb-sekcja::before { top: -43px; height: 44px; background-image: radial-gradient(circle at 22px 22px, #fdf3b8 22px, transparent 22.5px), linear-gradient(#fdf3b8, #fdf3b8); background-size: 44px 44px, 100% 23px; }
}

/* Link do Glovo w stopce — bialy przycisk z logo */
.wb-glovo { margin: 14px 0 10px; }
.wb-glovo a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 7px 16px; background: #fff; color: #2a3a40; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; transition: transform .15s, background .15s; }
.wb-glovo a:hover { transform: translateY(-1px); background: #fffcef; color: #2a3a40; }
.wb-glovo img { height: 22px; width: auto; display: block; }
footer .wb-glovo a, footer .wb-glovo a:hover, footer .wb-glovo a span { color: #2a3a40 !important; }

/* Glovo w naglowku (komputer) */
.wb-glovo-nav { display: none; align-items: center; gap: 7px; background: #fff; color: #2a3a40; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: .88rem; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 0 rgba(42,58,64,.08); transition: transform .15s; }
.wb-glovo-nav:hover { transform: translateY(-1px); color: #2a3a40; }
.wb-glovo-nav img { height: 20px; width: auto; display: block; }
@media (min-width: 900px) { .wb-glovo-nav { display: inline-flex; } }

/* Glovo w dolnym pasku (telefon) */
.wb-pasek { grid-template-columns: repeat(4, 1fr); }
.wb-pasek a.wb-pasek-glovo { background: #fff; font-weight: 600; }
.wb-pasek a.wb-pasek-glovo .wb-pasek-ikona { display: flex; justify-content: center; align-items: center; height: 24px; }
.wb-pasek a.wb-pasek-glovo img { height: 19px; width: auto; display: block; }

/* Podtytul pod H1 na stronie glownej — zawsze mniejszy niz H1 */
.wb-blok-hero h1 + p.has-large-font-size { font-size: clamp(1.05rem, 2.4vw, 1.45rem) !important; line-height: 1.35; margin-top: .4em; }

/* Glovo: za przelacznikiem jezykow + napis "Glovo" na linii tekstu */
.wb-glovo-nav { order: 3; }
.wb-header .wb-nav .wb-glovo-nav { order: 3; }
.wb-header .wb-nav .wb-jezyki { order: 4; }
.wb-glovo-nav img, .wb-glovo img { transform: translateY(-12%); }

/* Przelacznik jezykow z flagami */
.wb-jezyki a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; font-weight: 600; line-height: 1; transition: background .15s, transform .15s; }
.wb-jezyki a::before, .wb-szuflada-jezyki a::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background-position: center; background-size: auto 100%; background-repeat: no-repeat; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(42,58,64,.18); }
.wb-jezyki a[lang^="pl"]::before, .wb-szuflada-jezyki a[lang^="pl"]::before { background-image: linear-gradient(#fff 50%, #dc143c 50%); }
.wb-jezyki a[lang="uk"]::before, .wb-jezyki a[lang^="uk-"]::before, .wb-szuflada-jezyki a[lang="uk"]::before { background-image: linear-gradient(#0057b7 50%, #ffd700 50%); }
.wb-jezyki a[lang^="en"]::before, .wb-szuflada-jezyki a[lang^="en"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.wb-jezyki a[lang="uk"], .wb-jezyki a[lang^="uk-"], .wb-szuflada-jezyki a[lang="uk"] { font-size: 0 !important; gap: 0; }
.wb-jezyki a[lang="uk"]::after, .wb-jezyki a[lang^="uk-"]::after, .wb-szuflada-jezyki a[lang="uk"]::after { margin-left: 6px; }
.wb-jezyki a[lang="uk"]::after, .wb-jezyki a[lang^="uk-"]::after, .wb-szuflada-jezyki a[lang="uk"]::after { content: "UA"; font-size: 11.2px; }
.wb-jezyki-stopka a[lang="uk"]::after, .wb-jezyki-stopka a[lang^="uk-"]::after { font-size: 16.8px; }
.wb-header .wb-jezyki a { background: rgba(255,255,255,.6); border-color: transparent; }
.wb-header .wb-jezyki a:hover, .wb-header .wb-jezyki a:focus { background: #fff; transform: translateY(-1px); }
.wb-jezyki-stopka a::before { width: 20px; height: 20px; }

/* Telefon i maly laptop: w naglowku same flagi */
@media (max-width: 1199px) {
	.wb-header .wb-jezyki { gap: 6px; }
	.wb-header .wb-jezyki a { font-size: 0 !important; gap: 0; padding: 4px; }
	.wb-header .wb-jezyki a::after { display: none; }
	.wb-header .wb-jezyki a::before, .wb-szuflada-jezyki a::before { width: 22px; height: 22px; }
}

/* Stopka: przyciski jezykow z flagami (nadpisuje dodatkowy CSS z Customizera) */
.wb-footer .wb-jezyki.wb-jezyki-stopka a { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: auto !important; padding: 8px 18px 8px 8px !important; min-width: 0 !important; line-height: 1; }
.wb-footer .wb-jezyki.wb-jezyki-stopka a::before { display: block; width: 24px; height: 24px; }
.wb-footer .wb-jezyki.wb-jezyki-stopka a[lang="uk"] { gap: 0; }
.wb-footer .wb-jezyki.wb-jezyki-stopka a[lang="uk"]::after { margin-left: 8px; font-size: 1rem; font-weight: 600; letter-spacing: .06em; }
.wb-nav > .wb-btn, .wb-glovo-nav { white-space: nowrap; flex: none; }

/* ===== Blok zapowiedzi warsztatow na stronie glownej — wlasne tlo przez cala szerokosc ===== */
.wb-zapowiedz-warsztaty{
  background:var(--blekit,#BAD2D4);
  box-shadow:0 0 0 100vmax var(--blekit,#BAD2D4);
  clip-path:inset(0 -100vmax);
  padding-top:84px;
  padding-bottom:64px;
  margin-top:56px;
  position:relative;
}
.wb-zapowiedz-warsztaty h2,
.wb-zapowiedz-warsztaty p{color:var(--granat-ciemny,#2A3A40)}
.wb-zapowiedz-warsztaty img{border-radius:20px}
.wb-zapowiedz-warsztaty .wp-block-button__link{background:var(--zolty,#FBE34D);color:var(--granat-ciemny,#2A3A40)}
.wb-zapowiedz-warsztaty .wp-block-button__link:hover{background:var(--granat,#3B4E55);color:#fff}

/* ===== Falbanki bloku warsztatow: kremowa u gory, blekitna pod spodem (nad kontaktem) ===== */
.wb-zapowiedz-warsztaty::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  height:22px;
  transform:translateX(-50%);
  background-image:radial-gradient(circle at 22px 0, var(--krem,#FFFCEF) 22px, transparent 22.5px);
  background-size:44px 22px;
  background-repeat:repeat-x;
  pointer-events:none;
}
.wb-tresc-glowna{overflow-x:clip}
.wb-tresc-glowna:has(.wb-zapowiedz-warsztaty) #kontakt .wb-falbanka-gora{
  background-image:radial-gradient(circle at 22px 0, var(--blekit,#BAD2D4) 22px, transparent 22.5px);
}

/* ===== Pasek akcji z przyciskiem Zadzwon (5 przyciskow) ===== */
.wb-pasek:has(.wb-pasek-tel){grid-template-columns:repeat(5,1fr)}
.wb-pasek a.wb-pasek-tel{font-weight:700}
.wb-pasek a.wb-pasek-tel svg{color:var(--granat-ciemny,#2A3A40)}

/* ===== Wersja mobilna — praktyczne poprawki (telefon do 719px) ===== */
@media (max-width:719px){
  /* Pakiety urodzinowe: przewijane w bok zamiast 3 kart jedna pod druga */
  .wb-pakiety{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:4px 16px 12px;scrollbar-width:none}
  .wb-pakiety::-webkit-scrollbar{display:none}
  .wb-pakiet{flex:0 0 84%;scroll-snap-align:center;box-sizing:border-box}

  /* Menu na stronie glownej: 4 zdjecia w jednym rzedzie */
  .wb-mg-siatka{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:6px !important}
  .wb-mg-kafel figcaption{font-size:10px;letter-spacing:.04em}

  /* Naglowek: wieksze linki, Menu jest w dolnym pasku */
  .wb-nav-lista{gap:2px}
  .wb-nav-lista a{display:inline-flex;align-items:center;min-height:44px;padding:0 5px;font-size:13px}
  .wb-nav-lista li:has(> a[href$="/menu/"]){display:none}

  /* Stopka: godziny sa juz w sekcji kontaktu */
  body:has(#kontakt) .wb-footer-kol:nth-child(3){display:none}
}

/* ===== Status w naglowku + menu mobilne (hamburger) ===== */
.wb-status{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:6px 12px;border-radius:999px;background:#fff;border:1.5px solid rgba(42,58,64,.18);color:var(--granat-ciemny,#2A3A40);font-size:13px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap}
.wb-status-tekst{overflow:hidden;text-overflow:ellipsis}
.wb-status-kropka{width:9px;height:9px;border-radius:50%;background:#B85C4B;flex-shrink:0}
.wb-status-otwarte .wb-status-kropka{background:#2E8B57}
.wb-status-info{border-color:var(--granat-ciemny,#2A3A40)}
.wb-status-info .wb-status-kropka{background:#E0A100}
.wb-status-impreza{background:#E8CCBA;border-color:#2A3A40}
.wb-status-impreza .wb-status-kropka{background:#B85C4B}
.wb-status-zamkniete{background:#fff}
.wb-status-wynos{background:#FDF3B8;border-color:#2A3A40}
.wb-status-wynos .wb-status-kropka{background:#E0A100}
.wb-burger{display:none}
.wb-szuflada[hidden]{display:none !important}
@media (max-width:719px){
  .wb-header .wb-nav-linki,.wb-header .wb-jezyki,.wb-header .wb-glovo-nav,.wb-header .wb-nav > .wb-btn{display:none !important}
  .wb-header .wb-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .wb-header .wb-logo span{display:none}
  .wb-status{flex:0 1 auto;max-width:calc(100vw - 150px)}
  .wb-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;flex-shrink:0;padding:0 13px;border:0;border-radius:50%;background:var(--granat-ciemny,#2A3A40);cursor:pointer}
  .wb-burger span{display:block;height:2.5px;border-radius:2px;background:var(--zolty,#FBE34D)}
  .wb-szuflada{position:fixed;inset:0;z-index:1000;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:16px 20px calc(28px + env(safe-area-inset-bottom));background:var(--zolty,#FBE34D);color:var(--granat-ciemny,#2A3A40)}
  .admin-bar .wb-szuflada{top:46px}
  .wb-szuflada-top{display:flex;align-items:center;justify-content:space-between}
  .wb-szuflada-tytul{font-family:"Varela Round",system-ui,sans-serif;font-size:22px}
  .wb-szuflada-x{width:46px;height:46px;border:0;border-radius:50%;background:var(--granat-ciemny,#2A3A40);color:var(--zolty,#FBE34D);font-size:30px;line-height:1;cursor:pointer}
  .wb-szuflada-lista{list-style:none;margin:0;padding:0}
  .wb-szuflada-lista a{display:flex;align-items:center;min-height:56px;border-bottom:1.5px solid rgba(42,58,64,.15);font-family:"Varela Round",system-ui,sans-serif;font-size:22px;color:var(--granat-ciemny,#2A3A40);text-decoration:none}
  .wb-szuflada-akcje{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .wb-szuflada-akcje a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none}
  .wb-sz-tel{background:var(--granat-ciemny,#2A3A40);color:#fff}
  .wb-sz-glovo{background:#fff}
  .wb-sz-glovo img{height:22px;width:auto}
  .wb-szuflada-jezyki{display:flex;justify-content:center;gap:8px}
  .wb-szuflada-jezyki a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.65);color:var(--granat-ciemny,#2A3A40);font-weight:700;text-transform:uppercase;text-decoration:none}
  .wb-szuflada-jezyki a.wb-jezyk-aktywny{background:var(--granat-ciemny,#2A3A40);color:var(--zolty,#FBE34D)}
  html.wb-szuflada-otwarta,html.wb-szuflada-otwarta body{overflow:hidden}
}
@media (min-width:720px){ .wb-status{font-size:15px;padding:9px 18px;gap:8px;border-width:2px} .wb-status-kropka{width:11px;height:11px} }

/* Flagi w menu mobilnym */
.wb-szuflada-jezyki a{gap:8px;padding-left:8px}
.wb-szuflada-jezyki a[lang="uk"]::after{font-size:16px;font-weight:700}

/* Falbanki warsztatow na telefonie — ten sam rozmiar co reszta falbanek (28x14) */
@media (max-width:719px){
  .wb-zapowiedz-warsztaty::before{height:14px;background-image:radial-gradient(circle at 14px 0, var(--krem,#FFFCEF) 14px, transparent 14.5px);background-size:28px 14px}
  .wb-tresc-glowna:has(.wb-zapowiedz-warsztaty) #kontakt .wb-falbanka-gora{background-image:radial-gradient(circle at 14px 0, var(--blekit,#BAD2D4) 14px, transparent 14.5px)}
}