/* EVA Master - naglowek i stopka calego serwisu. */

:root {
	--bg: #0B0B0C;
	--surface: #141415;
	--surface-alt: #1C1C1D;
	--ink: #F4F3F1;
	--ink-soft: #D7D5D1;
	--muted: #9B9995;
	--line: #2A2A2B;
	--accent: #FF6B00;
	--accent-hover: #FF7D1F;
	--accent-deep: #C24E00;
	--error: #FF8A5C;
	--font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--font-body: 'Barlow', system-ui, sans-serif;
	--s-sm: 12px; --s-md: 20px; --s-lg: 36px; --s-xl: 64px; --s-xxl: 104px;
	--r-sm: 6px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px;
	--wrap: 1200px; --gutter: 20px;
	--head-h: 104px;
}

.eva-skip { position: absolute; left: -9999px; }
.eva-skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--accent); color: #0B0B0C; padding: 10px 18px; font-weight: 700; }

/* Motyw dokłada wlasny pusty naglowek i stopke - wszedzie zbedne. */
#masthead, #colophon, .site-header, .site-footer, a.skip-link { display: none !important; }

/* ---------- Naglowek ---------- */
.shead {
	position: sticky;
	top: 0;
	z-index: 95;
	background: rgba(11,11,12,.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
	font-family: var(--font-body);
}
.admin-bar .shead { top: 32px; }
@media (max-width: 782px) { .admin-bar .shead { top: 46px; } }

.shead a { text-decoration: none; color: inherit; }

.shead__strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-lg);
	padding: 7px var(--gutter);
	background: var(--accent);
	color: #0B0B0C;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.shead__inner {
	display: flex;
	align-items: center;
	gap: var(--s-lg);
	min-height: 68px;
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.shead__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 19px;
	color: var(--ink);
	flex: 0 0 auto;
}
.shead__brand img { width: 38px; height: 38px; border-radius: 50%; display: block; }

.shead__nav { display: flex; gap: 2px; margin-inline-start: auto; }
.shead__nav a {
	padding: 9px 13px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
	transition: color .15s ease, background-color .15s ease;
}
.shead__nav a:hover { color: var(--ink); background: rgba(244,243,241,.06); }

.shead__side { display: flex; align-items: center; gap: var(--s-sm); flex: 0 0 auto; }
.shead__phone { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--accent); white-space: nowrap; }

.shead__count {
	min-width: 22px; height: 22px;
	display: inline-grid; place-items: center;
	padding-inline: 6px;
	border-radius: var(--r-pill);
	background: var(--accent);
	color: #0B0B0C;
	font-size: 13px;
}
.shead__count.is-empty { background: var(--line); color: var(--muted); }

.shead__cta {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border-radius: var(--r-pill);
	background: var(--accent);
	color: #0B0B0C;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .08em;
	transition: background-color .15s ease;
}
.shead__cta:hover { background: var(--accent-hover); color: #0B0B0C; }

.shead__burger { display: none; }

/* ---------- Stopka ---------- */
.sfoot { border-top: 1px solid var(--line); background: var(--surface); padding-block: var(--s-xl) var(--s-md); font-family: var(--font-body); color: var(--muted); }
.sfoot .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sfoot a { color: inherit; text-decoration: none; }
.sfoot a:hover { color: var(--accent); }
.sfoot__inner { display: flex; flex-wrap: wrap; gap: var(--s-xl); justify-content: space-between; }
.sfoot p { margin: 0 0 4px; font-size: 15px; }
.sfoot__brand { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); font-size: 17px; margin-bottom: 8px; }
.sfoot__links { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.sfoot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-sm); margin-top: var(--s-lg); padding-top: var(--s-md); border-top: 1px solid var(--line); font-size: 14px; }
.sfoot__bottom a { color: var(--ink); border-bottom: 1px solid var(--line); }
.sfoot__bottom a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 980px) {
	.shead__burger {
		display: grid;
		gap: 5px;
		margin-inline-start: auto;
		padding: 12px;
		border: 1px solid var(--line);
		border-radius: var(--r-sm);
		background: transparent;
		cursor: pointer;
		order: 3;
	}
	.shead__burger span { display: block; width: 20px; height: 2px; background: var(--ink); }
	.shead__nav {
		display: none;
		order: 4;
		flex-basis: 100%;
		flex-direction: column;
		gap: 2px;
		margin: 0 0 var(--s-sm);
	}
	.shead__nav.is-open { display: flex; }
	.shead__nav a { padding: 12px 14px; font-size: 18px; }
	.shead__inner { flex-wrap: wrap; gap: var(--s-sm); }
	.shead__side { order: 2; margin-inline-start: auto; }
	.shead__phone { display: none; }
	.shead__strip { gap: var(--s-md); font-size: 11px; }
	.sfoot__inner { flex-direction: column; gap: var(--s-lg); }
}

@media (max-width: 420px) {
	.shead__strip span:nth-child(n+3) { display: none; }
	.shead__cta { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.shead *, .sfoot * { transition-duration: .01ms !important; }
}

/* Zaden element nie może rozpychać strony w poziomie na telefonie. */
.shead, .swrap, .sfoot { max-width: 100vw; }


/* ---------- Ikony w naglowku ---------- */
.shead__icon {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	padding: 0;
	transition: border-color .15s ease, background-color .15s ease;
}
.shead__icon:hover { border-color: var(--accent); }
.shead__icon .ico { width: 20px; height: 20px; }

.shead__cart .shead__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 19px;
	height: 19px;
	padding-inline: 5px;
	border-radius: var(--r-pill);
	background: var(--accent);
	color: #0B0B0C;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 11px;
	display: grid;
	place-items: center;
	border: 2px solid var(--bg);
}
.shead__cart .shead__count.is-empty { display: none; }

/* ---------- Menu konta ---------- */
.acc { position: relative; }
.acc__toggle[aria-expanded="true"] { border-color: var(--accent); }
.acc__menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 120;
	min-width: 232px;
	padding: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: 0 16px 36px rgba(11,11,12,.6);
	animation: accIn .16s ease;
}
.acc__menu[hidden] { display: none; }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.acc__hi { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.acc__hi b { color: var(--ink); }
.acc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.acc__list a {
	display: block;
	padding: 9px 10px;
	border-radius: var(--r-sm);
	font-size: 14px;
	color: var(--ink-soft);
	transition: background-color .12s ease, color .12s ease;
}
.acc__list a:hover { background: var(--surface-alt); color: var(--accent); }
.acc__note { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

@media (max-width: 520px) {
	.acc__menu { right: 0; left: auto; min-width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
}
/* ==========================================================
   STOPKA ZAWSZE PRZY DOLE
   Krotkie strony (puste konto, potwierdzenie, 404) konczyly sie
   w polowie ekranu i pod stopka zostawala pusta przestrzen.
   Body jest kolumna, tresc rosnie, stopka spycha sie na dol.
   ========================================================== */
body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* Glowne obszary tresci rosna do wysokosci ekranu. */
main.pdp,
main.sdoc,
main.swrap,
body > .site,
body > #wrapper { flex: 1 0 auto; }

/* Landing trzyma wlasna stopke wewnatrz swojego kontenera. */
body > .eva { flex: 1 0 auto; display: flex; flex-direction: column; }
body > .eva > .foot { margin-top: auto; }

.sfoot { flex-shrink: 0; margin-top: auto; }

/* Panel koszyka i nakladka sa poza przeplywem, wiec nie moga rozciagac kolumny. */
/* Na waskim ekranie napis marki nie miesci sie obok ikon konta, koszyka i menu. */
@media (max-width: 420px) {
	.shead__brand span { display: none; }
	.shead__inner { gap: 8px; }
	.shead__side { gap: 8px; }
}

/* overflow-x: clip nie tworzy kontenera przewijania, wiec nie psuje position: sticky
   (w przeciwienstwie do overflow-x: hidden, ktore raz juz to zrobilo). */
html { overflow-x: clip; }
body { overflow-x: clip; }