/*
 * MOTYWY — five candidate looks, each vivid (brand book Vol.1) or matte
 * (Vol.2). See inc/skins.php for how they are chosen.
 *
 * Built only from tokens: the two palettes below are the brand books' colours,
 * word for word; every skin maps them onto the theme's own tokens (--bw-bg,
 * --bw-text, --bw-navy, --bw-accent …, used throughout style.css) and adds its
 * own shapes and decorations. Matte vs vivid is therefore nothing but a
 * palette swap — no skin names a colour of its own.
 *
 * Light only: the logo is navy on light, so the header always stays light.
 *
 * Contrast (WCAG AA): text sits on white, the light tints, yellow or pink
 * (dark ink), or on navy (white ink). Crayola Blue carries white text only
 * where it is large (≥ 24px, or bold ≥ 19px); Dodger Blue (matte), green and
 * red never carry text — they are fills, frames and decoration.
 */

/* =========================================================================
   Fonts — self-hosted (SIL Open Font License), latin + latin-ext for Polish.
   Outfit: geometric, closest to the logo's lettering — headings.
   Inter: body text. Fredoka: rounded — skin 5's headings.
   ========================================================================= */

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/outfit-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/fredoka-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/fredoka-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   The brand books' palettes. Primary = backgrounds, secondary = frames.
   ========================================================================= */

:root,
:root[data-tone='vivid'] {
	--bw-p-navy: #090446;   /* Deep Twilight */
	--bw-p-blue: #0074ff;   /* Crayola Blue */
	--bw-p-pink: #ff9fe5;   /* Plum */
	--bw-p-yellow: #ffc857; /* Golden Pollen */
	--bw-p-red: #fb4b4e;    /* Strawberry Red */
	--bw-s-green: #20bf55;  /* Jade Green */
	--bw-s-white: #fefefe;  /* Almost White */
	--bw-s-black: #191919;  /* Carbon Black */
	/* Text placed on the blue fill: white on Crayola Blue (large text only). */
	--bw-on-blue: #fefefe;
}

:root[data-tone='matte'] {
	--bw-p-navy: #26206c;   /* Midnight Blue */
	--bw-p-blue: #519efa;   /* Dodger Blue */
	--bw-p-pink: #f7aee3;   /* Blush Pop */
	--bw-p-yellow: #ffce69; /* Golden Pollen (matte) */
	--bw-p-red: #fc6668;    /* Vibrant Coral */
	--bw-s-green: #35c665;  /* Emerald */
	--bw-s-white: #fefefe;  /* Almost White */
	--bw-s-black: #191919;  /* Carbon Black */
	/* Dodger Blue is too light for white text; dark ink instead. */
	--bw-on-blue: #191919;
}

/* =========================================================================
   Shared by every skin
   ========================================================================= */

:root[data-skin] {
	color-scheme: light;
	--bw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--bw-font-head: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--bw-danger: #b42318;
	--bw-danger-bg: #fdecec;
	--bw-success: #15803d;
	--bw-success-bg: #e9f8ef;
}

:root[data-skin] h1,
:root[data-skin] h2,
:root[data-skin] h3,
:root[data-skin] h4,
:root[data-skin] .bw-btn,
:root[data-skin] .bw-nav,
:root[data-skin] .bw-eyebrow {
	font-family: var(--bw-font-head);
}

:root[data-skin] h1 {
	font-weight: 800;
	letter-spacing: -.02em;
}

/* The moon button and the old "BW" square are gone for the light skins. */
.bw-theme-toggle {
	display: none !important;
}

/* --- the logo: the one matching the tone is shown ----------------------- */

.bw-logo {
	display: inline-flex;
	flex: 0 0 auto;
}

.bw-logo__img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
}

:root[data-tone='vivid'] .bw-logo__img--matte,
:root[data-tone='matte'] .bw-logo__img--vivid {
	display: none;
}

.bw-brand .bw-brand__logo {
	width: auto;
	height: 46px;
}

.bw-brand__name {
	font-family: var(--bw-font-head);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bw-muted);
	max-width: 9em;
	line-height: 1.2;
}

@media (max-width: 479px) {
	.bw-brand__name {
		display: none;
	}

	.bw-brand .bw-brand__logo {
		height: 40px;
	}
}

/* The big hero logo and the decorations exist on every front page; each
   skin decides whether to show them. */
.bw-hero {
	position: relative;
	overflow: hidden;
}

.bw-hero > .bw-wrap {
	position: relative;
	z-index: 1;
}

.bw-hero__logo {
	display: none;
	height: clamp(120px, 18vw, 200px);
	margin: 0 auto 18px;
}

.bw-hero__art {
	display: none;
}

/* A full-width colour band from an element inside .bw-wrap — no markup
   changes: the shadow paints the sides, the clip keeps it a band. */
.bw-band {
	box-shadow: 0 0 0 100vmax var(--band);
	clip-path: inset(0 -100vmax);
	background: var(--band);
}

/* --- the temporary switcher ---------------------------------------------- */

.bw-skinbar {
	position: fixed;
	left: 14px;
	bottom: calc(14px + var(--bw-footer-peek, 0px));
	z-index: 160;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px;
	background: #fefefe;
	color: #191919;
	border: 1px solid rgba(25, 25, 25, .14);
	border-radius: 999px;
	box-shadow: 0 6px 24px rgba(9, 4, 70, .16);
	font: 600 .8rem/1 'Inter', system-ui, sans-serif;
	max-width: calc(100vw - 100px);
}

.bw-skinbar__chip {
	flex: none;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #f1f0f6;
	font-size: 1rem;
	cursor: pointer;
}

.bw-skinbar__body {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	padding-right: 8px;
}

.bw-skinbar.is-folded .bw-skinbar__body {
	display: none;
}

.bw-skinbar.is-folded {
	padding: 6px;
}

.bw-skinbar__label {
	color: #5b5970;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .68rem;
}

.bw-skinbar__skins,
.bw-skinbar__tones {
	display: inline-flex;
	gap: 3px;
	padding: 3px;
	background: #f1f0f6;
	border-radius: 999px;
}

.bw-skinbar button[data-bw-skin],
.bw-skinbar button[data-bw-tone] {
	min-width: 30px;
	height: 28px;
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #191919;
	font: inherit;
	cursor: pointer;
}

.bw-skinbar button[aria-pressed='true'] {
	background: #090446;
	color: #fefefe;
}

.bw-skinbar button:focus-visible,
.bw-skinbar__chip:focus-visible {
	outline: 2px solid #0074ff;
	outline-offset: 2px;
}

.bw-skinbar__name {
	color: #5b5970;
	font-weight: 500;
}

@media (max-width: 639px) {
	.bw-skinbar {
		left: 8px;
		bottom: calc(8px + var(--bw-footer-peek, 0px));
		max-width: calc(100vw - 84px);
		border-radius: 18px;
	}

	.bw-skinbar__label,
	.bw-skinbar__name {
		display: none;
	}
}

@media print {
	.bw-skinbar,
	.bw-hero__art {
		display: none;
	}
}

/* Hover lifts and tilts, wherever a skin uses them, sit still for anyone who
   asks the system for less motion. */
@media (prefers-reduced-motion: reduce) {
	:root[data-skin] * {
		transition: none !important;
	}
}

/* =========================================================================
   1. KLASYCZNY — the brand book as written: Almost White, Deep Twilight
      text, Crayola Blue as the working colour, Golden Pollen for the call to
      action, Jade Green frames, the swatches' 24px corners.
   ========================================================================= */

:root[data-skin='1'] {
	--bw-bg: color-mix(in srgb, var(--bw-p-navy) 3%, var(--bw-s-white));
	--bw-surface: var(--bw-s-white);
	--bw-surface-2: color-mix(in srgb, var(--bw-p-navy) 6%, var(--bw-s-white));
	--bw-text: var(--bw-p-navy);
	--bw-muted: color-mix(in srgb, var(--bw-p-navy) 72%, var(--bw-s-white));
	--bw-line: color-mix(in srgb, var(--bw-p-navy) 12%, var(--bw-s-white));
	--bw-navy: var(--bw-p-navy);
	--bw-navy-dark: var(--bw-s-black);
	--bw-navy-soft: color-mix(in srgb, var(--bw-p-blue) 10%, var(--bw-s-white));
	--bw-accent: var(--bw-p-yellow);
	--bw-accent-ink: var(--bw-p-navy);
	--bw-link: var(--bw-p-navy);
	--bw-radius: 24px;
	--bw-radius-sm: 12px;
	--bw-shadow: 0 1px 2px color-mix(in srgb, var(--bw-p-navy) 6%, transparent), 0 10px 30px color-mix(in srgb, var(--bw-p-navy) 7%, transparent);
	--bw-shadow-sm: 0 1px 2px color-mix(in srgb, var(--bw-p-navy) 8%, transparent);
}

:root[data-skin='1'] a {
	text-decoration-color: var(--bw-p-blue);
	text-decoration-thickness: 2px;
}

:root[data-skin='1'] .bw-nav > ul > li.current-menu-item > .bw-nav__row > a,
:root[data-skin='1'] .bw-nav > ul > li.current-menu-item > a,
:root[data-skin='1'] .bw-nav > ul > li.current-menu-ancestor > .bw-nav__row > a {
	box-shadow: inset 0 -3px 0 var(--bw-p-blue);
}

:root[data-skin='1'] .bw-hero {
	background: var(--bw-s-white);
	padding: 44px 0 56px;
}

:root[data-skin='1'] .bw-hero__logo {
	display: flex;
	justify-content: center;
}

:root[data-skin='1'] .bw-hero h1 {
	font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--bw-muted);
}

:root[data-skin='1'] .bw-section__title::after,
:root[data-skin='1'] .bw-page-header h1::after {
	content: '';
	display: block;
	width: 56px;
	height: 4px;
	margin: 14px auto 0;
	border-radius: 4px;
	background: var(--bw-p-blue);
}

:root[data-skin='1'] .bw-eyebrow {
	color: var(--bw-p-navy);
}

:root[data-skin='1'] .bw-btn--accent:hover,
:root[data-skin='1'] .bw-btn--accent:focus {
	background: color-mix(in srgb, var(--bw-p-yellow) 85%, var(--bw-p-navy));
	color: var(--bw-p-navy);
}

/* Secondary colours as frames: a Jade Green line on top of every card. */
:root[data-skin='1'] :is(.bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-lektor, .bw-signup-card, .bw-placeholder, .bw-contract__doc, .bw-form) {
	border-top: 4px solid var(--bw-s-green);
}

:root[data-skin='1'] .bw-footer {
	background: var(--bw-p-navy);
	border-top: 0;
	color: color-mix(in srgb, var(--bw-s-white) 80%, var(--bw-p-navy));
}

:root[data-skin='1'] .bw-footer a {
	color: var(--bw-s-white);
}

/* =========================================================================
   2. BLOKI KOLORÓW — every page opens on a full-width band of a primary
      colour; white cards framed in Jade Green; a navy footer.
   ========================================================================= */

:root[data-skin='2'] {
	--bw-bg: var(--bw-s-white);
	--bw-surface: var(--bw-s-white);
	--bw-surface-2: color-mix(in srgb, var(--bw-p-navy) 6%, var(--bw-s-white));
	--bw-text: var(--bw-s-black);
	--bw-muted: color-mix(in srgb, var(--bw-s-black) 72%, var(--bw-s-white));
	--bw-line: color-mix(in srgb, var(--bw-s-black) 14%, var(--bw-s-white));
	--bw-navy: var(--bw-p-navy);
	--bw-navy-dark: var(--bw-s-black);
	--bw-navy-soft: color-mix(in srgb, var(--bw-s-green) 14%, var(--bw-s-white));
	--bw-accent: var(--bw-p-yellow);
	--bw-accent-ink: var(--bw-s-black);
	--bw-link: var(--bw-p-navy);
	--bw-radius: 16px;
	--bw-radius-sm: 10px;
	--bw-shadow: none;
	--bw-shadow-sm: none;
}

/* The hero: Golden Pollen, the logo on it (navy reads on yellow). */
:root[data-skin='2'] .bw-hero {
	background: var(--bw-p-yellow);
	border-bottom: 0;
	padding: 48px 0 64px;
}

:root[data-skin='2'] .bw-hero__logo {
	display: flex;
	justify-content: center;
}

:root[data-skin='2'] .bw-hero h1,
:root[data-skin='2'] .bw-hero__lead {
	color: var(--bw-s-black);
}

:root[data-skin='2'] .bw-hero .bw-btn--accent {
	background: var(--bw-p-navy);
	color: var(--bw-s-white);
}

:root[data-skin='2'] .bw-hero .bw-btn--ghost {
	border-color: var(--bw-s-black);
	color: var(--bw-s-black);
}

/* The news on a pink band below it. */
:root[data-skin='2'] .home .bw-main {
	padding-top: 0;
}

/* Bands sit edge to edge: each pads itself by the site's one gap (Krok 11.3)
   instead of the stack spacing them apart. */
:root[data-skin='2'] .home .bw-stack {
	gap: 0;
}

:root[data-skin='2'] .home .bw-stack > .bw-section {
	padding: var(--bw-stack) 0;
}

:root[data-skin='2'] .home .bw-section {
	--band: var(--bw-p-pink);
	box-shadow: 0 0 0 100vmax var(--band);
	clip-path: inset(0 -100vmax);
	background: var(--band);
	margin-bottom: 0;
}

/* Every inner page: the title on a navy band (white ink). */
:root[data-skin='2'] .bw-main > .bw-wrap > .bw-page-header,
:root[data-skin='2'] .bw-main > .bw-wrap > article > .bw-page-header,
:root[data-skin='2'] .bw-entry > .bw-page-header {
	--band: var(--bw-p-navy);
	box-shadow: 0 0 0 100vmax var(--band);
	clip-path: inset(0 -100vmax);
	background: var(--band);
	padding: 34px 0 30px;
	margin-top: -32px;
	margin-bottom: var(--bw-stack);
}

:root[data-skin='2'] .bw-page-header h1,
:root[data-skin='2'] .bw-page-header .bw-eyebrow,
:root[data-skin='2'] .bw-page-header p {
	color: var(--bw-s-white);
}

:root[data-skin='2'] .bw-page-header .bw-eyebrow {
	opacity: .85;
}

/* Cards: white, framed in Jade Green; each row of offers gets a coloured
   top in the brand order. */
:root[data-skin='2'] :is(.bw-card, .bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-lektor, .bw-signup-card, .bw-placeholder, .bw-contract__doc, .bw-form, .bw-news__item, .bw-empty) {
	border: 2px solid var(--bw-s-green);
	box-shadow: none;
}

:root[data-skin='2'] :is(.bw-offer, .bw-course):nth-child(5n+1) { border-top: 10px solid var(--bw-p-blue); }
:root[data-skin='2'] :is(.bw-offer, .bw-course):nth-child(5n+2) { border-top: 10px solid var(--bw-p-pink); }
:root[data-skin='2'] :is(.bw-offer, .bw-course):nth-child(5n+3) { border-top: 10px solid var(--bw-p-yellow); }
:root[data-skin='2'] :is(.bw-offer, .bw-course):nth-child(5n+4) { border-top: 10px solid var(--bw-p-red); }
:root[data-skin='2'] :is(.bw-offer, .bw-course):nth-child(5n+5) { border-top: 10px solid var(--bw-p-navy); }

:root[data-skin='2'] .bw-news__item {
	background: var(--bw-s-white);
	border-radius: var(--bw-radius);
	padding: 18px;
}

:root[data-skin='2'] .bw-header {
	border-bottom: 4px solid var(--bw-s-green);
	box-shadow: none;
}

:root[data-skin='2'] .bw-nav > ul > li.current-menu-item > .bw-nav__row > a,
:root[data-skin='2'] .bw-nav > ul > li.current-menu-item > a,
:root[data-skin='2'] .bw-nav > ul > li.current-menu-ancestor > .bw-nav__row > a {
	box-shadow: none;
	background: var(--bw-p-yellow);
}

:root[data-skin='2'] .bw-footer {
	background: var(--bw-p-navy);
	color: color-mix(in srgb, var(--bw-s-white) 80%, var(--bw-p-navy));
	border-top: 8px solid var(--bw-p-red);
}

:root[data-skin='2'] .bw-footer a {
	color: var(--bw-s-white);
}

/* =========================================================================
   3. PASTELOWY — soft washes of Plum and Golden Pollen, very round cards,
      pill buttons, gentle coloured shadows. Friendly and quiet.
   ========================================================================= */

:root[data-skin='3'] {
	--bw-bg: color-mix(in srgb, var(--bw-p-pink) 12%, var(--bw-s-white));
	--bw-surface: var(--bw-s-white);
	--bw-surface-2: color-mix(in srgb, var(--bw-p-pink) 18%, var(--bw-s-white));
	--bw-text: var(--bw-p-navy);
	--bw-muted: color-mix(in srgb, var(--bw-p-navy) 70%, var(--bw-s-white));
	--bw-line: color-mix(in srgb, var(--bw-p-pink) 40%, var(--bw-s-white));
	--bw-navy: var(--bw-p-navy);
	--bw-navy-dark: var(--bw-s-black);
	--bw-navy-soft: color-mix(in srgb, var(--bw-p-yellow) 30%, var(--bw-s-white));
	--bw-accent: var(--bw-p-yellow);
	--bw-accent-ink: var(--bw-p-navy);
	--bw-link: var(--bw-p-navy);
	--bw-radius: 32px;
	--bw-radius-sm: 18px;
	--bw-shadow: 0 14px 40px color-mix(in srgb, var(--bw-p-pink) 45%, transparent);
	--bw-shadow-sm: 0 6px 18px color-mix(in srgb, var(--bw-p-pink) 35%, transparent);
}

:root[data-skin='3'] .bw-header {
	background: color-mix(in srgb, var(--bw-s-white) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 0;
	box-shadow: 0 4px 20px color-mix(in srgb, var(--bw-p-pink) 30%, transparent);
}

:root[data-skin='3'] .bw-hero {
	background:
		radial-gradient(60% 80% at 15% 20%, color-mix(in srgb, var(--bw-p-yellow) 55%, transparent), transparent 70%),
		radial-gradient(55% 75% at 85% 30%, color-mix(in srgb, var(--bw-p-pink) 60%, transparent), transparent 70%),
		radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--bw-p-blue) 18%, transparent), transparent 70%),
		var(--bw-s-white);
	border-bottom: 0;
	padding: 52px 0 70px;
}

:root[data-skin='3'] .bw-hero__logo {
	display: flex;
	justify-content: center;
}

:root[data-skin='3'] .bw-hero h1 {
	font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem);
	font-weight: 600;
	color: var(--bw-muted);
}

/* Headings get a Golden Pollen highlighter stroke. */
:root[data-skin='3'] .bw-section__title,
:root[data-skin='3'] .bw-page-header h1 {
	display: table;
	margin-left: auto;
	margin-right: auto;
	padding: 0 .2em;
	background: linear-gradient(transparent 62%, color-mix(in srgb, var(--bw-p-yellow) 75%, transparent) 62%, color-mix(in srgb, var(--bw-p-yellow) 75%, transparent) 92%, transparent 92%);
}

:root[data-skin='3'] .bw-eyebrow {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--bw-p-pink);
	color: var(--bw-p-navy);
}

:root[data-skin='3'] :is(.bw-card, .bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-lektor, .bw-signup-card, .bw-placeholder, .bw-contract__doc, .bw-form, .bw-empty) {
	border: 0;
	box-shadow: var(--bw-shadow);
}

:root[data-skin='3'] .bw-btn {
	padding-left: 30px;
	padding-right: 30px;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--bw-p-navy) 22%, transparent);
}

:root[data-skin='3'] .bw-btn--ghost {
	background: var(--bw-s-white);
	border-color: transparent;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--bw-p-pink) 40%, transparent);
}

:root[data-skin='3'] .bw-icon,
:root[data-skin='3'] .bw-tile__icon,
:root[data-skin='3'] .bw-doc__icon {
	color: var(--bw-p-blue);
}

:root[data-skin='3'] .bw-footer {
	background: color-mix(in srgb, var(--bw-p-blue) 12%, var(--bw-s-white));
	border-top: 0;
}

/* =========================================================================
   4. GRAFICZNY — Carbon Black outlines, offset "sticker" shadows in the
      primary colours, big headings, uppercase labels. Bold but clean.
   ========================================================================= */

:root[data-skin='4'] {
	--bw-bg: var(--bw-s-white);
	--bw-surface: var(--bw-s-white);
	--bw-surface-2: color-mix(in srgb, var(--bw-p-yellow) 22%, var(--bw-s-white));
	--bw-text: var(--bw-s-black);
	--bw-muted: color-mix(in srgb, var(--bw-s-black) 74%, var(--bw-s-white));
	--bw-line: var(--bw-s-black);
	--bw-navy: var(--bw-p-navy);
	--bw-navy-dark: var(--bw-s-black);
	--bw-navy-soft: color-mix(in srgb, var(--bw-p-pink) 30%, var(--bw-s-white));
	--bw-accent: var(--bw-p-yellow);
	--bw-accent-ink: var(--bw-s-black);
	--bw-link: var(--bw-s-black);
	--bw-radius: 14px;
	--bw-radius-sm: 10px;
	--bw-shadow: 6px 6px 0 var(--bw-s-black);
	--bw-shadow-sm: 4px 4px 0 var(--bw-s-black);
	--bw-stick: var(--bw-p-yellow);
}

:root[data-skin='4'] h1,
:root[data-skin='4'] h2 {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.01em;
}

:root[data-skin='4'] h1 {
	font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
	line-height: 1.02;
}

:root[data-skin='4'] .bw-eyebrow,
:root[data-skin='4'] .bw-nav > ul > li > a,
:root[data-skin='4'] .bw-nav > ul > li > .bw-nav__row > a,
:root[data-skin='4'] .bw-sub-toggle--label {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
}

:root[data-skin='4'] .bw-header {
	border-bottom: 2px solid var(--bw-s-black);
	box-shadow: none;
}

:root[data-skin='4'] .bw-nav > ul > li.current-menu-item > .bw-nav__row > a,
:root[data-skin='4'] .bw-nav > ul > li.current-menu-item > a,
:root[data-skin='4'] .bw-nav > ul > li.current-menu-ancestor > .bw-nav__row > a {
	box-shadow: none;
	background: var(--bw-p-yellow);
	outline: 2px solid var(--bw-s-black);
}

/* Hero: left-aligned big headline; the logo on a tilted Golden Pollen
   sticker on the right. */
:root[data-skin='4'] .bw-hero {
	background: var(--bw-s-white);
	border-bottom: 2px solid var(--bw-s-black);
	text-align: left;
	padding: 56px 0 64px;
}

:root[data-skin='4'] .bw-hero > .bw-wrap {
	display: grid;
	gap: 24px 40px;
	align-items: center;
}

@media (min-width: 860px) {
	:root[data-skin='4'] .bw-hero > .bw-wrap {
		grid-template-columns: 1.3fr 1fr;
	}

	:root[data-skin='4'] .bw-hero__logo {
		grid-column: 2;
		grid-row: 1 / span 3;
	}
}

:root[data-skin='4'] .bw-hero__logo {
	display: flex;
	justify-content: center;
	height: auto;
	padding: 26px 30px;
	background: var(--bw-p-yellow);
	border: 2px solid var(--bw-s-black);
	border-radius: 18px;
	box-shadow: 8px 8px 0 var(--bw-s-black);
	transform: rotate(-2deg);
	margin: 0;
}

:root[data-skin='4'] .bw-hero__logo .bw-logo__img {
	height: clamp(110px, 14vw, 170px);
}

:root[data-skin='4'] .bw-hero h1,
:root[data-skin='4'] .bw-hero__lead,
:root[data-skin='4'] .bw-hero__actions {
	grid-column: 1;
	margin-left: 0;
	justify-content: flex-start;
}

:root[data-skin='4'] .bw-hero__lead {
	color: var(--bw-text);
	font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
}

:root[data-skin='4'] .bw-btn {
	border: 2px solid var(--bw-s-black);
	border-radius: 12px;
	box-shadow: 4px 4px 0 var(--bw-s-black);
	text-transform: uppercase;
	letter-spacing: .04em;
	transition: transform .12s ease, box-shadow .12s ease;
}

:root[data-skin='4'] .bw-btn:hover,
:root[data-skin='4'] .bw-btn:focus {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--bw-s-black);
}

:root[data-skin='4'] .bw-btn--ghost {
	background: var(--bw-s-white);
	color: var(--bw-s-black);
}

:root[data-skin='4'] :is(.bw-card, .bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-lektor, .bw-signup-card, .bw-placeholder, .bw-contract__doc, .bw-form, .bw-news__item, .bw-empty, .bw-map) {
	border: 2px solid var(--bw-s-black);
	box-shadow: 6px 6px 0 var(--bw-stick);
}

:root[data-skin='4'] .bw-news__item {
	background: var(--bw-s-white);
	border-radius: var(--bw-radius);
	padding: 18px;
}

/* The sticker colour changes from card to card, in the brand order. */
:root[data-skin='4'] :is(.bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(4n+1) { --bw-stick: var(--bw-p-yellow); }
:root[data-skin='4'] :is(.bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(4n+2) { --bw-stick: var(--bw-p-pink); }
:root[data-skin='4'] :is(.bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(4n+3) { --bw-stick: var(--bw-p-blue); }
:root[data-skin='4'] :is(.bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(4n+4) { --bw-stick: var(--bw-s-green); }

:root[data-skin='4'] .bw-form input,
:root[data-skin='4'] .bw-form textarea,
:root[data-skin='4'] .bw-form select {
	border: 2px solid var(--bw-s-black);
	background: var(--bw-s-white);
}

:root[data-skin='4'] .bw-footer {
	background: var(--bw-s-black);
	color: color-mix(in srgb, var(--bw-s-white) 78%, var(--bw-s-black));
	border-top: 0;
}

:root[data-skin='4'] .bw-footer a {
	color: var(--bw-s-white);
	text-decoration: underline;
	text-decoration-color: var(--bw-s-green);
	text-decoration-thickness: 3px;
}

/* =========================================================================
   5. ZABAWOWY — creative liberty: organic blobs of every primary colour
      behind the hero, a wave under it, rounded Fredoka headings, cards that
      tilt a little and lift on hover. Still light, still the same content.
   ========================================================================= */

:root[data-skin='5'] {
	--bw-font-head: 'Fredoka', 'Outfit', system-ui, sans-serif;
	--bw-bg: var(--bw-s-white);
	--bw-surface: var(--bw-s-white);
	--bw-surface-2: color-mix(in srgb, var(--bw-p-blue) 8%, var(--bw-s-white));
	--bw-text: var(--bw-p-navy);
	--bw-muted: color-mix(in srgb, var(--bw-p-navy) 72%, var(--bw-s-white));
	--bw-line: color-mix(in srgb, var(--bw-p-navy) 12%, var(--bw-s-white));
	--bw-navy: var(--bw-p-navy);
	--bw-navy-dark: var(--bw-s-black);
	--bw-navy-soft: color-mix(in srgb, var(--bw-p-pink) 22%, var(--bw-s-white));
	--bw-accent: var(--bw-p-yellow);
	--bw-accent-ink: var(--bw-p-navy);
	--bw-link: var(--bw-p-navy);
	--bw-radius: 28px;
	--bw-radius-sm: 16px;
	--bw-shadow: 0 10px 0 color-mix(in srgb, var(--bw-p-navy) 8%, transparent);
	--bw-shadow-sm: 0 4px 0 color-mix(in srgb, var(--bw-p-navy) 8%, transparent);
	--bw-tilt: 0deg;
	--bw-top: var(--bw-p-blue);
}

:root[data-skin='5'] body {
	background-image: radial-gradient(color-mix(in srgb, var(--bw-p-navy) 7%, transparent) 1.2px, transparent 1.4px);
	background-size: 22px 22px;
}

:root[data-skin='5'] h1,
:root[data-skin='5'] h2,
:root[data-skin='5'] h3 {
	font-weight: 600;
	letter-spacing: 0;
}

:root[data-skin='5'] .bw-header {
	border-bottom: 0;
	box-shadow: 0 6px 0 color-mix(in srgb, var(--bw-p-yellow) 70%, transparent);
}

/* Hero: four blobs of the palette, the logo big in the middle, a wave out. */
:root[data-skin='5'] .bw-hero {
	background: color-mix(in srgb, var(--bw-p-yellow) 22%, var(--bw-s-white));
	border-bottom: 0;
	padding: 56px 0 110px;
}

:root[data-skin='5'] .bw-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 60px;
	background: var(--bw-s-white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C150 0 300 60 450 30 S750 0 900 30 S1100 55 1200 30 V60 H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C150 0 300 60 450 30 S750 0 900 30 S1100 55 1200 30 V60 H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

:root[data-skin='5'] .bw-hero__art {
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
}

:root[data-skin='5'] .bw-blob {
	position: absolute;
	display: block;
	opacity: .9;
}

:root[data-skin='5'] .bw-blob--1 {
	width: 260px; height: 220px; left: -60px; top: -40px;
	background: var(--bw-p-pink);
	border-radius: 58% 42% 63% 37% / 45% 55% 45% 55%;
}

:root[data-skin='5'] .bw-blob--2 {
	width: 200px; height: 180px; right: -40px; top: 20px;
	background: var(--bw-p-blue);
	border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%;
	opacity: .55;
}

:root[data-skin='5'] .bw-blob--3 {
	width: 150px; height: 130px; right: 14%; bottom: 40px;
	background: var(--bw-p-red);
	border-radius: 50% 50% 38% 62% / 60% 45% 55% 40%;
	opacity: .5;
}

:root[data-skin='5'] .bw-blob--4 {
	width: 120px; height: 110px; left: 12%; bottom: 50px;
	background: var(--bw-s-green);
	border-radius: 62% 38% 46% 54% / 48% 62% 38% 52%;
	opacity: .45;
}

@media (max-width: 639px) {
	:root[data-skin='5'] .bw-blob--3,
	:root[data-skin='5'] .bw-blob--4 {
		display: none;
	}
}

:root[data-skin='5'] .bw-hero__logo {
	display: flex;
	justify-content: center;
	height: clamp(140px, 22vw, 230px);
}

:root[data-skin='5'] .bw-hero h1 {
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
	font-weight: 500;
}

:root[data-skin='5'] .bw-hero__lead {
	color: var(--bw-text);
}

/* Headings: a wavy Plum underline. */
:root[data-skin='5'] .bw-section__title::after,
:root[data-skin='5'] .bw-page-header h1::after {
	content: '';
	display: block;
	width: 96px;
	height: 12px;
	margin: 10px auto 0;
	background: var(--bw-p-pink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'%3E%3Cpath d='M2 6 Q14 0 26 6 T50 6 T74 6 T94 6' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'%3E%3Cpath d='M2 6 Q14 0 26 6 T50 6 T74 6 T94 6' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root[data-skin='5'] .bw-eyebrow {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--bw-p-yellow);
	color: var(--bw-p-navy);
	transform: rotate(-2deg);
}

:root[data-skin='5'] :is(.bw-card, .bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-lektor, .bw-signup-card, .bw-placeholder, .bw-contract__doc, .bw-form, .bw-news__item, .bw-empty) {
	border: 2px solid var(--bw-line);
	border-top: 8px solid var(--bw-top);
	box-shadow: var(--bw-shadow);
	transform: rotate(var(--bw-tilt));
	transition: transform .18s ease, box-shadow .18s ease;
}

:root[data-skin='5'] .bw-news__item {
	background: var(--bw-s-white);
	border-radius: var(--bw-radius);
	padding: 18px;
}

:root[data-skin='5'] :is(.bw-offer, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(odd) { --bw-tilt: -.6deg; }
:root[data-skin='5'] :is(.bw-offer, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(even) { --bw-tilt: .6deg; }
:root[data-skin='5'] :is(.bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(5n+1) { --bw-top: var(--bw-p-blue); }
:root[data-skin='5'] :is(.bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(5n+2) { --bw-top: var(--bw-p-pink); }
:root[data-skin='5'] :is(.bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(5n+3) { --bw-top: var(--bw-p-yellow); }
:root[data-skin='5'] :is(.bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(5n+4) { --bw-top: var(--bw-p-red); }
:root[data-skin='5'] :is(.bw-offer, .bw-course, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):nth-child(5n+5) { --bw-top: var(--bw-s-green); }

@media (hover: hover) {
	:root[data-skin='5'] :is(.bw-offer, .bw-tile, .bw-doc, .bw-news__item, .bw-lektor):hover {
		transform: rotate(0deg) translateY(-4px);
		box-shadow: 0 14px 0 color-mix(in srgb, var(--bw-p-navy) 10%, transparent);
	}
}

:root[data-skin='5'] .bw-btn {
	box-shadow: 0 4px 0 var(--bw-s-black);
	border: 2px solid var(--bw-s-black);
}

:root[data-skin='5'] .bw-btn:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--bw-s-black);
}

:root[data-skin='5'] .bw-btn--ghost {
	background: var(--bw-s-white);
	color: var(--bw-p-navy);
}

:root[data-skin='5'] .bw-footer {
	background: var(--bw-p-navy);
	color: color-mix(in srgb, var(--bw-s-white) 82%, var(--bw-p-navy));
	border-top: 0;
	position: relative;
	padding-top: 40px;
}

:root[data-skin='5'] .bw-footer::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -30px;
	height: 31px;
	background: var(--bw-p-navy);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 15 C200 0 400 30 600 15 S1000 0 1200 15 V30 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 15 C200 0 400 30 600 15 S1000 0 1200 15 V30 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

:root[data-skin='5'] .bw-footer a {
	color: var(--bw-s-white);
}

/* =========================================================================
   Krok 11.28 — Co o nas mówią, one design per theme (1 classic … 5 playful).
   ========================================================================= */

/* 1 — Klasyczny: white cards framed in Jade Green, a big Crayola Blue
   quotation mark, Golden Pollen stars. */
:root[data-skin='1'] .bw-review figure {
	position: relative;
	border: 1px solid var(--bw-line);
	border-top: 4px solid var(--bw-s-green);
	padding-top: 40px;
}

:root[data-skin='1'] .bw-review figure::before {
	content: '“';
	position: absolute;
	top: 2px;
	left: 20px;
	font-family: var(--bw-font-head);
	font-size: 3.6rem;
	line-height: 1;
	color: var(--bw-p-blue);
}

:root[data-skin='1'] .bw-review__stars {
	color: var(--bw-p-yellow);
}

/* 2 — Bloki kolorów: the section on a Deep Twilight band between the yellow
   hero and the pink news; white cards with a colour top in brand order. */
:root[data-skin='2'] .home .bw-reviews {
	--band: var(--bw-p-navy);
}

:root[data-skin='2'] .home .bw-reviews .bw-section__title {
	color: var(--bw-s-white);
}

:root[data-skin='2'] .bw-review figure {
	border: 0;
	border-top: 10px solid var(--bw-p-blue);
	border-radius: 6px;
	box-shadow: none;
	background: var(--bw-s-white);
}

:root[data-skin='2'] .bw-review:nth-child(3n+2) figure { border-top-color: var(--bw-p-pink); }
:root[data-skin='2'] .bw-review:nth-child(3n+3) figure { border-top-color: var(--bw-p-yellow); }

:root[data-skin='2'] .bw-review__stars {
	color: var(--bw-p-red);
}

/* 3 — Pastelowy: speech bubbles in soft washes of the brand colours, with a
   little tail; the name sits under the bubble. */
:root[data-skin='3'] .bw-review figure {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	gap: 18px;
}

:root[data-skin='3'] .bw-review__stars,
:root[data-skin='3'] .bw-review__text {
	position: relative;
	padding: 0 26px;
	background: color-mix(in srgb, var(--bw-tint, var(--bw-p-pink)) 30%, var(--bw-s-white));
}

:root[data-skin='3'] .bw-review__stars {
	padding-top: 22px;
	border-radius: 32px 32px 0 0;
	color: var(--bw-p-navy);
}

:root[data-skin='3'] .bw-review__text {
	margin-top: -18px;
	padding-bottom: 24px;
	border-radius: 0 0 32px 32px;
}

:root[data-skin='3'] .bw-review__text::after {
	content: '';
	position: absolute;
	left: 34px;
	bottom: -14px;
	border: 14px solid transparent;
	border-top-color: color-mix(in srgb, var(--bw-tint, var(--bw-p-pink)) 30%, var(--bw-s-white));
	border-bottom: 0;
}

:root[data-skin='3'] .bw-review__who {
	padding: 0 26px;
}

:root[data-skin='3'] .bw-review:nth-child(3n+2) { --bw-tint: var(--bw-p-yellow); }
:root[data-skin='3'] .bw-review:nth-child(3n+3) { --bw-tint: var(--bw-p-blue); }

/* 4 — Graficzny: black outlines, offset "sticker" shadows cycling through the
   palette, a huge Strawberry Red quotation mark, names in capitals. */
:root[data-skin='4'] .bw-review figure {
	position: relative;
	border: 2px solid var(--bw-s-black);
	border-radius: 4px;
	box-shadow: 8px 8px 0 var(--bw-stick, var(--bw-p-yellow));
	background: var(--bw-s-white);
	padding-top: 56px;
}

:root[data-skin='4'] .bw-review:nth-child(3n+2) figure { --bw-stick: var(--bw-p-pink); transform: rotate(1deg); }
:root[data-skin='4'] .bw-review:nth-child(3n+3) figure { --bw-stick: var(--bw-p-blue); transform: rotate(-1deg); }
:root[data-skin='4'] .bw-review:nth-child(3n+1) figure { transform: rotate(-.6deg); }

:root[data-skin='4'] .bw-review figure::before {
	content: '“';
	position: absolute;
	top: -6px;
	left: 16px;
	font-family: var(--bw-font-head);
	font-weight: 800;
	font-size: 5.5rem;
	line-height: 1;
	color: var(--bw-p-red);
}

:root[data-skin='4'] .bw-review__stars {
	color: var(--bw-s-black);
}

:root[data-skin='4'] .bw-review__name {
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--bw-s-black);
}

/* 5 — Zabawowy: each review is a chat bubble from a little brand hero,
   tilted, in rounded type, and it lifts when you point at it. */
:root[data-skin='5'] .bw-review {
	padding-top: 34px; /* room for the hero above the bubble */
}

:root[data-skin='5'] .bw-review figure {
	position: relative;
	padding: 44px 22px 22px;
	border: 0;
	border-radius: 28px;
	background: color-mix(in srgb, var(--bw-tint, var(--bw-p-blue)) 22%, var(--bw-s-white));
	box-shadow: none;
	transform: rotate(-1.5deg);
	transition: transform .2s ease;
}

:root[data-skin='5'] .bw-review:nth-child(3n+2) figure { --bw-tint: var(--bw-p-pink); transform: rotate(1.2deg); }
:root[data-skin='5'] .bw-review:nth-child(3n+3) figure { --bw-tint: var(--bw-p-yellow); transform: rotate(-.8deg); }

:root[data-skin='5'] .bw-review figure:hover {
	transform: rotate(0) translateY(-4px);
}

:root[data-skin='5'] .bw-review figure::before {
	content: '';
	position: absolute;
	top: -30px;
	left: 20px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 3px solid var(--bw-s-white);
	background: #f2f2f2 url('../img/chat-avatar.png') center / cover no-repeat;
}

:root[data-skin='5'] .bw-review__text p {
	font-family: 'Fredoka', var(--bw-font-head);
	font-size: 1.12rem;
}

:root[data-skin='5'] .bw-review__stars {
	padding-left: 66px;
	color: var(--bw-p-red);
}

@media (prefers-reduced-motion: reduce) {
	:root[data-skin='5'] .bw-review figure {
		transition: none;
	}
}