/* ==========================================================================
   Blue Adventure — "Złota godzina"
   1. Fonts  2. Tokens  3. Base  4. Layout & type  5. Buttons
   6. Header & mobile menu  7. Footer  8. Pages & prose  9. Utilities
   ========================================================================== */

/* 1. Fonts (self-hosted, OFL; Latin Extended covers Polish) ------------------ */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
	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: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
	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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-500-italic.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: "Cormorant Garamond";
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-ext-500-italic.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-latin-400-normal.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: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-latin-500-normal.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: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Tokens ------------------------------------------------------------------ */
:root {
	--font-sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-serif: "Cormorant Garamond", Georgia, serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

	--wrap: 1360px;
	--gutter: clamp(16px, 4vw, 40px);
	--header-h: 84px;
	/* Visible screen height: the WordPress admin bar (logged-in users) takes its share at the top. */
	--admin-bar: var(--wp-admin--admin-bar--height, 0px);
	--screen: calc(100vh - var(--admin-bar));
	--radius: 4px;
	--radius-lg: 24px;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--ease-out: cubic-bezier(.22, 1, .36, 1);

	/* Type scale: every font size in the theme is one of these. rem follows the browser's text-size setting. */
	--fs-micro: 0.6875rem; /* 11px · tiny labels, badges */
	--fs-caption: 0.75rem; /* 12px · eyebrows, small labels */
	--fs-small: 0.8125rem; /* 13px · notes, meta */
	--fs-ui: 0.875rem; /* 14px · buttons, chips, table text */
	--fs-body-s: 0.9375rem; /* 15px · secondary body text */
	--fs-body: 1rem; /* 16px · form fields (16px stops iOS zoom) */
	--fs-body-l: 1.0625rem; /* 17px · page body text */
	--fs-lead: 1.125rem; /* 18px · lead paragraphs */
	--fs-title-s: 1.25rem; /* 20px · card titles */
	--fs-title: 1.375rem; /* 22px · section titles */
	--fs-title-l: 1.5rem; /* 24px · large titles */
	--fs-heading-s: 1.625rem; /* 26px · small headings */
	--fs-heading: 1.75rem; /* 28px · headings */
	--fs-heading-l: 2rem; /* 32px · large headings */
	--fs-heading-xl: 2.125rem; /* 34px · extra large headings */
	--fs-display-s: 2.5rem; /* 40px · small display */
	--fs-display: 2.75rem; /* 44px · display */
	--fs-display-l: 3rem; /* 48px · large display */

	--acc: #f2c230;
	--acc-hover: #ffd65a;
	--on-acc: #0b1a2b;
	--footer-bg: #081523;
	--footer-text: #f4efe8;
	--footer-muted: #b9c8d6;
	--footer-faint: #8fa3b8;
	--footer-warm: #f3b58f;
	--focus: #f2c230;

	/* Dark (default) */
	--bg: #0b1a2b;
	--bg2: #0f2236;
	--surface: #132b44;
	--line: rgba(244, 239, 232, .14);
	--line2: rgba(244, 239, 232, .28);
	--text: #f4efe8;
	--muted: #a8bacb;
	--acc-text: #f2c230;
	--warm: #f3b58f;
	--header-bg: rgba(9, 22, 37, .78);
	--header-text: #ffffff;
	--header-line: rgba(255, 255, 255, .14);
	--header-cta-bg: #ffffff;
	--header-cta-text: #0b1a2b;
	--shadow: 0 40px 90px -40px rgba(0, 0, 0, .7);
	color-scheme: dark;
}

@supports (height: 100svh) {
	:root {
		--screen: calc(100svh - var(--admin-bar));
	}
}

:root[data-theme="light"] {
	--bg: #f4f6f8;
	--bg2: #ece8e1;
	--surface: #ffffff;
	--line: rgba(11, 26, 43, .12);
	--line2: rgba(11, 26, 43, .26);
	--text: #0b1a2b;
	--muted: #4b5e72;
	--acc-text: #7d5a00;
	/* The light accent is too faint on light backgrounds for a focus ring; its darker variant is not. */
	--focus: var(--acc-text);
	--warm: #a4461b;
	--header-bg: rgba(246, 248, 250, .86);
	--header-text: #0b1a2b;
	--header-line: rgba(11, 26, 43, .1);
	--header-cta-bg: #0b1a2b;
	--header-cta-text: #ffffff;
	--shadow: 0 40px 90px -50px rgba(11, 26, 43, .45);
	color-scheme: light;
}

/* 3. Base -------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--fs-body-l);
	line-height: 1.55;
	overflow-x: clip;
	transition: background-color .4s ease, color .4s ease;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

svg {
	flex: none;
}

a {
	color: var(--acc-text);
	text-underline-offset: .18em;
}

::selection {
	background: var(--acc);
	color: var(--on-acc);
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: var(--radius);
	background: var(--acc);
	color: var(--on-acc);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	top: 16px;
}

.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* 4. Layout & type ----------------------------------------------------------- */
.wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-main {
	padding-top: var(--header-h);
	min-height: 60vh;
}

.has-overlay-header .site-main {
	padding-top: 0;
}

.site-main--builder {
	padding-top: var(--header-h);
}

.display {
	margin: 0;
	font-weight: 500;
	letter-spacing: -.035em;
	line-height: 1.04; /* room for Ż, Ś, Ł when a heading wraps */
	text-wrap: balance;
}

.eyebrow {
	margin: 0;
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.eyebrow--warm {
	color: var(--warm);
}

.italic {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0;
}

.mono {
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	letter-spacing: .06em;
}

.lead {
	max-width: 560px;
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-lead);
}

.muted {
	color: var(--muted);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* 5. Buttons ----------------------------------------------------------------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 54px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--acc);
	color: var(--on-acc);
	font: 700 var(--fs-small)/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .45s var(--ease), background-color .25s ease, border-color .25s ease, color .25s ease;
}

.button:hover {
	background: var(--acc-hover);
	transform: translateY(-2px);
}

.button svg {
	transition: transform .45s var(--ease);
}

.button:hover svg {
	transform: translateX(4px);
}

.button--line {
	background: transparent;
	color: var(--text);
	border-color: var(--line2);
}

.button--line:hover {
	background: transparent;
	border-color: var(--text);
}

.button--lg {
	min-height: 58px;
	padding: 0 30px;
}

.button--block {
	width: 100%;
}

.button--header {
	min-height: 44px;
	margin-left: 8px;
	padding: 0 20px;
	background: var(--header-cta-bg);
	color: var(--header-cta-text);
	white-space: nowrap;
}

.button--header:hover {
	background: var(--header-cta-bg);
	transform: translateY(-1px);
}

.icon-button {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s ease;
}

.icon-button:hover {
	background: var(--header-line);
}

/* Icons sit in wrapper spans (e.g. sun/moon): centre them in the circle instead of on the text baseline. */
.icon-button > :where(span:not(.cart-link__badge)) {
	display: grid;
	place-items: center;
	line-height: 0;
}

.icon-button svg {
	display: block;
}

.icon-button--outline {
	border: 1px solid rgba(244, 239, 232, .24);
}

.icon-button--square {
	border: 1px solid rgba(244, 239, 232, .2);
	border-radius: 12px;
}

/* Glass button over photos (white in both schemes: photos stay dark-shaded). */
.button--glass {
	background: rgba(255, 255, 255, .1);
	color: #ffffff;
	border-color: rgba(255, 255, 255, .36);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.button--glass:hover {
	background: rgba(255, 255, 255, .2);
}

/* Toggle chips (filters). */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--text);
	font: 600 var(--fs-caption)/1 var(--font-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease;
}

.chip:hover {
	background: var(--line);
}

.chip[aria-pressed="true"] {
	background: var(--text);
	color: var(--bg);
}

.chip__bar {
	flex: none;
	width: 16px;
	height: 3px;
	border-radius: 2px;
	background: var(--c, var(--acc));
}

:root[data-theme="light"] .only-dark,
:root:not([data-theme="light"]) .only-light {
	display: none;
}

/* 6. Header & mobile menu ---------------------------------------------------- */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	color: var(--header-text);
	background: var(--header-bg);
	border-bottom: 1px solid var(--header-line);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
	transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* Over the hero: transparent with white text until scrolled. */
.has-overlay-header .site-header:not(.is-solid) {
	background: transparent;
	border-bottom-color: transparent;
	color: #ffffff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.has-overlay-header .site-header:not(.is-solid) .button--header {
	background: #ffffff;
	color: #0b1a2b;
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	height: var(--header-h);
	padding-inline: clamp(16px, 3vw, 44px);
}

.site-header__logo {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: inherit;
}

.site-header__wordmark {
	display: block;
	width: 162px;
	height: 15px;
}

.site-header__links {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3.2vw, 52px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	white-space: nowrap;
	color: inherit;
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: .86;
	transition: opacity .3s ease;
}

.site-header__link::after {
	content: "";
	position: absolute;
	inset: auto 0 8px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .55s cubic-bezier(.7, 0, .2, 1);
}

.site-header__link:hover,
.site-header__link[aria-current="page"] {
	opacity: 1;
}

.site-header__link:hover::after,
.site-header__link[aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.site-header__tools {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 6px;
}

.cart-link__badge {
	position: absolute;
	top: 5px;
	right: 3px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--acc);
	color: var(--on-acc);
	font-size: var(--fs-micro);
	font-weight: 800;
	line-height: 17px;
	text-align: center;
}

.site-header__menu-button {
	display: none;
}

@media (max-width: 1080px) {
	.site-header__nav {
		display: none;
	}

	.site-header__inner {
		grid-template-columns: 1fr auto;
	}

	.site-header__menu-button {
		display: inline-grid;
	}
}

@media (max-width: 620px) {
	:root {
		--header-h: 68px;
	}

	.button--header {
		display: none;
	}

	.site-header__wordmark {
		width: 130px;
		height: 12px;
	}
}

@media (max-width: 360px) {
	.site-header__wordmark {
		display: none;
	}
}

.site-menu {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #0b1a2b;
	color: #f4efe8;
	font-family: var(--font-sans);
}

.site-menu[open] {
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.site-menu::backdrop {
	background: rgba(6, 17, 29, .6);
}

.site-menu a {
	color: #f4efe8;
	text-decoration: none;
}

.site-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 68px;
	padding-inline: clamp(16px, 4vw, 40px);
}

.site-menu__wordmark {
	width: 140px;
	height: 13px;
}

.site-menu__nav {
	display: flex;
	flex-direction: column;
	padding: 12px clamp(16px, 4vw, 40px);
}

.site-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-menu__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(244, 239, 232, .14);
	font-size: clamp(2.125rem, 9vw, 3.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.03em;
}

.site-menu__list .site-menu__link::after {
	content: "";
	width: 22px;
	height: 22px;
	flex: none;
	background: var(--acc);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-menu__link .ba-icon {
	color: var(--acc);
}

.site-menu__link:hover {
	color: var(--acc);
}

.site-menu__bottom {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: auto;
	padding: 28px clamp(16px, 4vw, 40px) 32px;
}

.site-menu__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	font-size: var(--fs-body-s);
}

@media (prefers-reduced-motion: no-preference) {
	/* Opens fast and answers the tap at once: an ease-out reveal, links rising right behind it; all settled
	   by ~0.6s (it used to take ~1.2s). */
	.site-menu[open] {
		animation: menu-in .35s var(--ease-out) both;
	}

	.site-menu[open] .site-menu__link {
		animation: menu-rise .45s var(--ease-out) both;
	}

	.site-menu[open] li:nth-child(1) .site-menu__link { animation-delay: .1s; }
	.site-menu[open] li:nth-child(2) .site-menu__link { animation-delay: .15s; }
	.site-menu[open] li:nth-child(3) .site-menu__link { animation-delay: .2s; }
	.site-menu[open] li:nth-child(4) .site-menu__link { animation-delay: .25s; }

	/* Leaving: the sheet folds back up the way it opened, faster than it came. */
	.site-menu[open].is-closing {
		animation: menu-out .32s cubic-bezier(.4, 0, 1, 1) both;
	}

	.site-menu[open].is-closing .site-menu__link {
		animation: none;
	}

	.site-menu.is-closing::backdrop {
		animation: backdrop-out .32s ease both;
	}
}

@keyframes menu-out {
	from { clip-path: inset(0 0 0 0); }
	to { clip-path: inset(0 0 100% 0); }
}

@keyframes backdrop-out {
	to { opacity: 0; }
}

@keyframes menu-in {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes menu-rise {
	from { opacity: 0; transform: translateY(36px); }
	to { opacity: 1; transform: none; }
}

/* 7. Footer ------------------------------------------------------------------ */
.site-footer {
	position: relative;
	overflow: clip;
	background: var(--footer-bg);
	color: var(--footer-text);
}

.site-footer a {
	color: var(--footer-text);
	text-decoration: none;
	transition: color .25s ease;
}

.site-footer a:hover {
	color: var(--acc);
}

.site-footer .button--accent,
.site-footer .button--accent:hover {
	color: var(--on-acc);
}

.site-footer .button--line {
	color: var(--footer-text);
	border-color: rgba(244, 239, 232, .28);
}

.site-footer .muted {
	color: var(--footer-muted);
}

.site-footer .eyebrow--warm {
	color: var(--footer-warm);
}

.site-footer__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding-top: clamp(64px, 9vw, 120px);
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(244, 239, 232, .12);
}

.site-footer__cta-text {
	flex: 1 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.site-footer__title {
	font-size: clamp(2.75rem, 6.4vw, 5.75rem);
	line-height: 1.02;
	letter-spacing: -.02em;
}

.site-footer__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 40px 32px;
	padding-top: 56px;
	padding-bottom: 48px;
}

.site-footer__about {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* The logo never runs wider than its column (it used to overhang into the next one). */
.site-footer__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
}

.site-footer__logo .ba-logo-mark {
	flex: none;
	width: 46px;
	height: auto;
}

.site-footer__wordmark-small {
	flex: 0 1 165px;
	min-width: 0;
	width: 165px;
	height: auto;
	aspect-ratio: 2160 / 200;
}

.site-footer__lead {
	max-width: 300px;
	margin: 0;
	color: var(--footer-muted);
	font-size: var(--fs-body-s);
	line-height: 1.6;
}

.site-footer__social {
	display: flex;
	gap: 8px;
}

.site-footer__heading {
	margin: 0 0 18px;
	color: var(--footer-warm);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__list a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	font-size: var(--fs-body);
}

.dot-line {
	width: 18px;
	height: 3px;
	border-radius: 2px;
	background: var(--dot, var(--acc));
}

.site-footer__address {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: var(--fs-body);
	font-style: normal;
	line-height: 1.5;
}

.site-footer__phone {
	font-size: var(--fs-title-s);
	font-weight: 700;
}

.site-footer .accent-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--acc);
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 28px;
}

.site-footer__bar .muted {
	color: var(--footer-faint);
}

.site-footer__theme {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.segmented {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid rgba(244, 239, 232, .2);
	border-radius: 999px;
}

.segmented button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #c9d5e1;
	font-size: var(--fs-ui);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .3s, color .3s;
}

.segmented button[aria-pressed="true"] {
	background: #f4efe8;
	color: #0b1a2b;
}

.pill-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid rgba(244, 239, 232, .24);
	border-radius: 999px;
}

.site-footer__mark {
	padding-top: 8px;
	pointer-events: none; /* Decorative; it overlaps the legal line while it rises and must not take clicks. */
	color: rgba(244, 239, 232, .26);
}

.site-footer__wordmark {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.site-footer__wordmark {
			animation: footer-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 40%;
		}
	}
}

@keyframes footer-rise {
	from { opacity: 0; transform: translateY(60%); }
	to { opacity: 1; transform: none; }
}

.site-footer__consent {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.site-footer__consent:hover {
	color: var(--footer-text);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	padding-top: 20px;
	padding-bottom: 32px;
	border-top: 1px solid rgba(244, 239, 232, .1);
	color: var(--footer-faint);
	font-size: var(--fs-small);
	line-height: 1.5;
}

/* Legal documents: in the legal line between the copyright and "Ustawienia cookies", centred. */
.site-footer__docs {
	flex: 1 1 auto;
	min-width: 0;
}

.site-footer__docs ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
	line-height: 1.5;
}

.site-footer__docs a {
	display: inline-block;
	padding: 0;
	color: var(--footer-faint);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}

/* Product names are shown in capitals wherever the design lists them; the names themselves are typed in sentence
   case, so search engines, AI assistants and screen readers get normal text. */
.product-hero__title,
.voucher-card__name,
.cart-line__name,
.review-order__text > strong,
.voucher-row__name,
.other__text > strong,
#footer-vouchers + .site-footer__list a {
	text-transform: uppercase;
}

/* Touch screens: each document link at least 24 px tall, with room between wrapped rows (mouse layout unchanged). */
@media (pointer: coarse) {
	.site-footer__docs ul {
		row-gap: 8px;
	}

	.site-footer__docs a {
		padding-block: 3px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.site-footer__docs a:hover {
		color: var(--footer-text);
		text-decoration-color: currentColor;
	}
}

/* 8. Pages & prose ----------------------------------------------------------- */
.page-hero {
	padding-top: clamp(56px, 8vw, 112px);
	padding-bottom: clamp(32px, 5vw, 56px);
}

.page-hero__title {
	font-size: clamp(2.5rem, 5.6vw, 5.25rem);
}

.page-hero--center {
	text-align: center;
}

.page-hero--center .wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.prose {
	max-width: 760px;
	padding-bottom: clamp(64px, 9vw, 120px);
	font-size: var(--fs-body-l);
	line-height: 1.7;
}

.prose > * + * {
	margin-top: 1.1em;
}

.prose h2,
.prose h3 {
	margin-top: 2em;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.25;
}

.prose h2 {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.prose h3 {
	font-size: var(--fs-title);
}

.prose ul,
.prose ol {
	padding-left: 1.3em;
}

.prose li + li {
	margin-top: .4em;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-body-s);
}

.prose th,
.prose td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.prose blockquote {
	margin-inline: 0;
	padding-left: 20px;
	border-left: 2px solid var(--acc);
	color: var(--muted);
}

.post-list {
	display: grid;
	gap: 40px;
	padding-bottom: 64px;
}

.post-list__title {
	margin: 0 0 6px;
	font-size: var(--fs-heading-s);
	font-weight: 600;
}

.post-list__title a {
	color: var(--text);
	text-decoration: none;
}

/* WooCommerce notices (cart, checkout, product) */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	margin: 0 0 20px;
	padding: 16px 20px;
	border: 1px solid var(--line2);
	border-radius: 16px;
	background: var(--surface);
	color: var(--text);
	font-size: var(--fs-body-s);
	line-height: 1.5;
	list-style: none;
}

.woocommerce-message {
	border-color: rgba(111, 163, 74, .6);
}

.woocommerce-info {
	border-color: rgba(61, 143, 214, .6);
}

.woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
	border-color: #e5675a;
}

.woocommerce-error li + li {
	margin-top: 4px;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
	color: var(--acc-text);
	font-weight: 600;
}

.woocommerce-message .button,
.woocommerce-info .button {
	min-height: 40px;
	padding: 0 16px;
}

/* FAQ accordion (front page, O nas) */
.faq__item {
	border-top: 1px solid var(--line);
}

.faq__item:last-child {
	border-bottom: 1px solid var(--line);
}

.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 76px;
	padding-block: 12px;
	font-size: clamp(1.125rem, 1.7vw, 1.375rem);
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__icon {
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line2);
	border-radius: 50%;
	transition: transform .5s var(--ease), background-color .3s ease, border-color .3s ease;
}

.faq__icon::before,
.faq__icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 1.5px;
	margin: -.75px 0 0 -7px;
	background: currentColor;
}

.faq__icon::after {
	transform: rotate(90deg);
}

.faq__item[open] .faq__icon {
	transform: rotate(45deg);
	border-color: var(--acc);
	background: var(--acc);
	color: var(--on-acc);
}

.faq__answer {
	max-width: 640px;
	padding-bottom: 24px;
	color: var(--muted);
}

.faq__answer > :first-child {
	margin-top: 0;
}

.faq__answer > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.faq__item[open] .faq__answer {
		animation: ba-fade-up .6s var(--ease-out) both;
	}
}

@keyframes ba-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* 9. Utilities --------------------------------------------------------------- */

/* Scroll reveals (scroll-driven animations; content is fully visible where unsupported). */
@keyframes ba-reveal-up {
	from { opacity: 0; transform: translate3d(0, 48px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes ba-reveal-clip {
	from { clip-path: inset(10% 8% 10% 8%); }
	to { clip-path: inset(0); }
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.reveal {
			animation: ba-reveal-up linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 26%;
		}

		.reveal-clip {
			animation: ba-reveal-clip linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Glass fallbacks: solid chrome for less transparency or more contrast. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	.site-header,
	.button--glass {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.site-header {
		background: var(--bg);
	}

	.button--glass {
		background: var(--surface);
	}
}

/* Touch: feedback on the press itself, and hover lifts only where a pointer can hover (on phones they
   stuck after a tap). The tap highlight flash is replaced by the press state. */
a,
button,
label,
summary {
	-webkit-tap-highlight-color: transparent;
}

.button:active,
.button--header:active,
.icon-button:active,
.chip:active,
.seg__item:active,
.qty__btn:active,
.recipients__arrow:active {
	transform: scale(.96);
	transition-duration: 60ms;
}

@media (hover: none) {
	.button:hover,
	.button--header:hover {
		transform: none;
	}
}

/* Fixed word before a field's value ("Dla" before the recipient's name): it stays while typing, so customers
   write the name in the right form ("Dla Adama"). The word and the input share one grid cell, font and line
   height, so both sit on the same baseline; the input starts right after the word. Purely visual: the field
   keeps only the name. */
.field-affix {
	--affix-x: 16px;
	display: grid;
	align-items: center;
}

.field-affix:has(.field--sm) {
	--affix-x: 14px;
}

.field-affix > * {
	grid-area: 1 / 1;
}

.field-affix__text {
	z-index: 1;
	justify-self: start;
	margin-left: var(--affix-x);
	color: var(--muted);
	font: 500 var(--fs-body)/1.2 var(--font-sans);
	pointer-events: none;
}

.field-affix > input {
	width: 100%;
	padding-left: calc(var(--affix-x) + 1.9em);
	line-height: 1.2;
}

/* Footer: medium screens (small laptops, tablets). Large screens keep one row of five columns, phones one
   column. In between, the brand sits on its own row and the four lists share the width evenly. */
@media (min-width: 561px) and (max-width: 1240px) {
	.site-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.site-footer__about {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px 40px;
	}

	.site-footer__lead {
		flex: 1 1 280px;
		max-width: 440px;
	}
}

@media (min-width: 561px) and (max-width: 860px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* "Na górę" always on the right, also when it wraps to its own line. */
.site-footer__bar .pill-link {
	margin-left: auto;
}

@media (max-width: 700px) {
	.site-footer__signoff {
		display: none;
	}
}

/* Large screens: the sign-off sits exactly in the middle of the bar, between the theme switch and "Na górę". */
@media (min-width: 1241px) {
	.site-footer__bar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.site-footer__signoff {
		justify-self: center;
	}

	.site-footer__bar .pill-link {
		justify-self: end;
	}
}

/* Legal line on large screens: copyright | documents (centred, wrapping in their column) | "Ustawienia cookies". */
@media (min-width: 1241px) {
	.site-footer__legal {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: start;
	}

	.site-footer__consent {
		justify-self: end;
	}
}

/* Legal line on medium screens: the documents wrap beside "Ustawienia cookies", which stays on the right. */
@media (min-width: 701px) and (max-width: 1240px) {
	.site-footer__legal {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}

	.site-footer__legal > :first-child {
		grid-column: 1 / -1;
	}

	.site-footer__consent {
		justify-self: end;
	}
}

/* Keeps a phrase on one line (no break at spaces or hyphens). */
.nowrap {
	white-space: nowrap;
}