/* ============================================================
   STRONA GŁÓWNA — custom layout (page-homepage.php)
   Zmienne lokalne mapują na tokeny z style.css
   ============================================================ */

.panika-site {
	--hp-bg:      #f5f5ef;
	--hp-border:  #e6e6e2;
	--hp-text:    #0a0a09;
	--hp-muted:   #8a8a86;
	--hp-surface: #f7f7f5;
	--hp-shadow:  0 6px 28px rgba(0,0,0,.07);
	--hp-font:    "Futura PT","Futura","Century Gothic","Avenir Next","Trebuchet MS",ui-sans-serif,system-ui,sans-serif;
	background: var(--hp-bg);
	color: var(--hp-text);
	font-family: var(--hp-font);
}

.panika-site *,
.panika-site *::before,
.panika-site *::after {
	box-sizing: border-box;
}

/* ── HEADER ─────────────────────────────── */
.panika-site .site-header {
	background: var(--hp-bg);
	border-bottom: 1px solid var(--hp-border);
	position: sticky;
	top: 0;
	z-index: 200;
	padding: 0;
	margin: 0;
}

.panika-site .header-top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 18px 36px;
}

/* Social */
.panika-site .social-links {
	display: flex;
	gap: 12px;
	align-items: center;
}
.panika-site .social-link {
	display: flex;
	color: var(--hp-text);
	text-decoration: none;
	opacity: 0.65;
	transition: opacity 0.2s;
}
.panika-site .social-link:hover,
.panika-site .social-link:focus { opacity: 1; }
.panika-site .social-link:focus { outline: 2px solid var(--hp-text); outline-offset: 3px; border-radius: 2px; }
.panika-site .social-link svg { display: block; width: 20px; height: 20px; }

/* Logo */
.panika-site .site-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}
.panika-site .site-logo:focus { outline: 2px solid var(--hp-text); outline-offset: 4px; }
.panika-site .wordmark {
	font-family: var(--hp-font);
	font-size: 1.9rem;
	font-weight: 300;
	letter-spacing: 0.35em;
	padding-left: 0.35em;
	color: var(--hp-text);
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
}

/* Prawa strona nagłówka: koszyk + EU badge */
.panika-site .header-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 22px;
}

/* Koszyk */
.panika-site .cart-link {
	position: relative;
	display: flex;
	color: var(--hp-text);
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.2s;
}
.panika-site .cart-link:hover,
.panika-site .cart-link:focus { opacity: 1; }
.panika-site .cart-link:focus { outline: 2px solid var(--hp-text); outline-offset: 3px; border-radius: 2px; }
.panika-site .cart-link svg { display: block; width: 21px; height: 21px; }
.panika-site .cart-link__count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--panika-accent, #6b7d5a);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 600;
	line-height: 1;
	border-radius: 50%;
}
.panika-site .cart-link__count:empty { display: none; }

/* EU badge */
.panika-site .eu-badge {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
}
.panika-site .eu-badge__text {
	font-size: 0.58rem;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: var(--hp-muted);
	text-align: right;
}
.panika-site .eu-flag { flex-shrink: 0; }

/* Nav row */
.panika-site .header-nav {
	border-top: 1px solid var(--hp-border);
	display: flex;
	justify-content: center;
}
.panika-site .nav-list {
	list-style: none;
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
}
.panika-site .nav-item { position: relative; }

.panika-site .nav-link {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 13px 30px;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hp-text);
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	transition: opacity 0.2s;
}
.panika-site .nav-link::after {
	content: '';
	position: absolute;
	bottom: 8px;
	left: 30px;
	right: 30px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.24s cubic-bezier(.4,0,.2,1);
}
.panika-site .nav-item:hover .nav-link::after,
.panika-site .nav-link:focus::after { transform: scaleX(1); }
.panika-site .nav-link:focus { outline: 2px solid var(--hp-text); outline-offset: -2px; }

.panika-site .chevron {
	display: inline-block;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.panika-site .nav-item:hover .chevron,
.panika-site .nav-item:focus-within .chevron,
.panika-site .nav-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* Dropdown */
.panika-site .dropdown {
	position: absolute;
	top: calc(100% + 1px);
	left: 50%;
	list-style: none;
	background: var(--hp-bg);
	border: 1px solid var(--hp-border);
	box-shadow: var(--hp-shadow);
	min-width: 260px;
	z-index: 300;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	translate: -50% -6px;
	transition: opacity .2s ease, translate .2s ease, visibility .2s;
	padding: 0;
	margin: 0;
}
.panika-site .nav-item:hover .dropdown,
.panika-site .nav-item:focus-within .dropdown,
.panika-site .nav-link[aria-expanded="true"] + .dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	translate: -50% 0;
}
.panika-site .dropdown a {
	display: block;
	padding: 12px 22px;
	font-size: 0.63rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hp-text);
	text-decoration: none;
	transition: background 0.14s;
}
.panika-site .dropdown a:hover,
.panika-site .dropdown a:focus { background: var(--hp-surface); outline: none; }
.panika-site .dropdown li + li { border-top: 1px solid var(--hp-border); }

/* ── HERO ───────────────────────────────── */
.panika-homepage .hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 5;
	overflow: hidden;
	background: #2a2e1e;
}
.panika-homepage .hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}
.panika-homepage .hero__placeholder {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 80% at 65% 30%, #5a6830 0%, #3d4a20 40%, #1c2212 100%);
}
.panika-homepage .hero__caption {
	position: absolute;
	top: 12%;
	right: 5%;
	color: #ffffff;
	font-family: var(--hp-font);
	text-align: right;
}
.panika-homepage .hero__caption-eyebrow {
	font-size: clamp(0.55rem, 1vw, 0.72rem);
	font-weight: 300;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	opacity: 0.88;
	margin-bottom: 0.3em;
}
.panika-homepage .hero__caption-title {
	font-size: clamp(0.75rem, 1.5vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* ── HERO SUB ───────────────────────────── */
.panika-homepage .hero-sub {
	width: 100%;
	line-height: 0;
}
.panika-homepage .hero-sub img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* ── MISJA ──────────────────────────────── */
.panika-homepage .misja {
	padding: 64px 5%;
	background: var(--hp-bg);
}
.panika-homepage .misja__label {
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--hp-text);
	margin-bottom: 22px;
}
.panika-homepage .misja__text {
	font-size: 0.95rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	line-height: 1.75;
	color: var(--hp-text);
}

/* ── ZASADY ─────────────────────────────── */
.panika-homepage .zasady {
	border-top: 1px solid var(--hp-border);
	padding: 0 17%;
}
.panika-homepage .zasady__item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 32px;
	padding: 40px 0;
	border-bottom: 1px solid var(--hp-border);
}
.panika-homepage .zasady__left {
	display: flex;
	align-items: center;
	gap: 20px;
}
.panika-homepage .zasady__num {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border: 1px solid var(--hp-text);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	color: var(--hp-text);
}
.panika-homepage .zasady__tag {
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	color: var(--hp-text);
}
.panika-homepage .zasady__desc {
	font-size: 0.82rem;
	font-weight: 300;
	letter-spacing: 0.07em;
	line-height: 1.75;
	color: var(--hp-text);
}

/* ── OPINIE ─────────────────────────────── */
.panika-homepage .opinie {
	background: #f0ece4;
	padding: 72px 5% 80px;
	text-align: center;
}
.panika-homepage .opinie__title {
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	font-weight: 400;
	color: var(--hp-text);
	letter-spacing: 0.01em;
	margin-bottom: 56px;
}
.panika-homepage .opinie__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	text-align: left;
}
.panika-homepage .opinie__card {
	display: flex;
	flex-direction: column;
}
.panika-homepage .opinie__stars {
	color: #c8ae6e;
	font-size: 1rem;
	letter-spacing: 2px;
	margin-bottom: 16px;
}
.panika-homepage .opinie__text {
	font-size: 0.78rem;
	font-style: italic;
	font-weight: 300;
	letter-spacing: 0.06em;
	line-height: 1.8;
	color: var(--hp-text);
	flex: 1;
	margin-bottom: 24px;
}
.panika-homepage .opinie__name {
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	color: var(--hp-text);
	text-align: center;
}

/* ── STOPKA ─────────────────────────────── */
.panika-site .stopka {
	background: var(--hp-bg);
	padding: 64px 8% 80px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
}
.panika-site .stopka__lewa {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.panika-site .stopka__link {
	font-size: 0.82rem;
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--hp-text);
	text-decoration: none;
}
.panika-site .stopka__link:hover { opacity: 0.6; }
.panika-site .stopka__btn {
	display: inline-block;
	margin-top: 12px;
	padding: 14px 32px;
	background: #b5a24a;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-decoration: none;
	border: none;
	cursor: pointer;
}
.panika-site .stopka__btn:hover { background: #9e8d3e; color: #fff; }
.panika-site .stopka__prawa {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 20px;
}
.panika-site .stopka__nav-link {
	font-size: 1.35rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--hp-text);
	text-decoration: none;
}
.panika-site .stopka__nav-link:hover { opacity: 0.6; }
.panika-site .stopka__social {
	display: flex;
	gap: 16px;
	margin-top: 4px;
}
.panika-site .stopka__social-link {
	color: var(--hp-text);
	text-decoration: none;
	opacity: 0.85;
	display: flex;
}
.panika-site .stopka__social-link:hover { opacity: 1; }
.panika-site .stopka__social-link svg { width: 24px; height: 24px; display: block; }

/* ── PASEK EU ───────────────────────────── */
.panika-site .eu-bar {
	border-top: 1px solid var(--hp-border);
	padding: 16px 5%;
	display: flex;
	justify-content: center;
	background: var(--hp-bg);
}
.panika-site .eu-bar img {
	height: 44px;
	width: auto;
	display: block;
	mix-blend-mode: multiply;
}

/* ── CZCIONKA TREŚCI: Montserrat wg specyfikacji z Canvy ────
   Tekst akapitów: 16px / interlinia 19px / odstęp liter 3px.
   Eyebrow hero: Montserrat Bold 20px / interlinia 24px / odstęp 6px.
   Nagłówki (opinie__title) zostają przy Fraunces — brak w Canvie.
   .header-nav (menu) bez zmian. ── */
.panika-homepage .misja__text,
.panika-homepage .zasady__desc,
.panika-homepage .opinie__text {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	line-height: 19px;
	letter-spacing: 3px;
	text-align: justify;
}
.panika-homepage .hero__caption-eyebrow,
.panika-homepage .hero__caption-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 6px;
}

/* ============================================================
   RESPONSYWNOŚĆ — tablet (≤860px) i telefon (≤600px)
   Header/nav (.panika-site) obowiązują na stronie głównej i na
   podstronach produktów — jedna zmiana, wszystkie widoki.
   ============================================================ */
@media (max-width: 860px) {
	.panika-site .header-top {
		padding: 14px 20px;
		column-gap: 12px;
	}
	.panika-site .wordmark {
		font-size: 1.3rem;
		letter-spacing: 0.22em;
	}
	.panika-site .header-right { gap: 14px; }
	.panika-site .social-links { gap: 8px; }
	.panika-site .eu-badge__text { font-size: 0.52rem; }

	.panika-site .nav-link { padding: 12px 16px; font-size: 0.62rem; }
	.panika-site .dropdown { min-width: 220px; }

	.panika-homepage .zasady { padding: 0 6%; }
	.panika-homepage .opinie__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }

	.panika-site .stopka { padding: 56px 6% 64px; }
}

@media (max-width: 600px) {
	.panika-site .header-top {
		padding: 12px 14px;
		column-gap: 8px;
	}
	.panika-site .wordmark {
		font-size: 1rem;
		letter-spacing: 0.14em;
		padding-left: 0;
	}
	.panika-site .social-link svg { width: 17px; height: 17px; }
	.panika-site .header-right { gap: 10px; }
	.panika-site .cart-link svg { width: 19px; height: 19px; }
	/* Tekst odznaki UE nie mieści się już obok flagi — zostaje sama flaga */
	.panika-site .eu-badge__text { display: none; }
	.panika-site .eu-flag { width: 36px; height: 24px; }

	.panika-site .nav-list { justify-content: flex-start; }
	.panika-site .nav-link { padding: 12px 12px; font-size: 0.6rem; gap: 3px; }
	.panika-site .dropdown { left: 0; translate: 0 -6px; min-width: 220px; }
	.panika-site .nav-item:hover .dropdown,
	.panika-site .nav-item:focus-within .dropdown,
	.panika-site .nav-link[aria-expanded="true"] + .dropdown { translate: 0 0; }

	.panika-homepage .hero__caption-eyebrow,
	.panika-homepage .hero__caption-title {
		font-size: 14px;
		line-height: 18px;
		letter-spacing: 3px;
	}
	.panika-homepage .misja,
	.panika-homepage .zasady,
	.panika-homepage .opinie {
		padding-left: 6%;
		padding-right: 6%;
	}
	.panika-homepage .zasady__item {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 28px 0;
	}
	.panika-homepage .opinie__grid { grid-template-columns: 1fr; gap: 40px; }
	.panika-homepage .opinie__title { margin-bottom: 36px; }

	.panika-site .stopka {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		padding: 48px 6% 56px;
	}
	.panika-site .stopka__prawa { align-items: flex-start; }
}