/**
 * Aura Mega Menu v2 — panel nawigacji budowany z danych sklepu.
 *
 * Desktop: master–detail (szyna → szczegół → kolumna z promo i bestsellerami).
 * Mobile: nawigacja push (lista kategorii → szczegół), bez siatki i bez
 * zagnieżdżonego przewijania.
 *
 * Paleta: biel, czerń, szarość i firmowa zieleń #3f880b (jedyny akcent).
 * Próg mobilny 992px — ten sam, którego używa dotychczasowe menu.
 */

/* ── Zabezpieczenie kontenera ───────────────────────────────────────────
   Stary blok CSS wciąż jedzie w stopce i ma reguły dla
   .aura-mega-menu-container. Zerujemy wszystko, co mogłoby przyciąć panel. */
/*
 * Motyw wstrzykuje pusty <a class="cg-menu-link"> w każdy poziom rozwijanego
 * menu — także WEWNĄTRZ naszego panelu. Ma 24px wysokości i spychał całą
 * zawartość w dół (na mobile wyglądało to jak pusty pas nad filtrem).
 * Legacy CSS ukrywa go tylko w starych kontenerach.
 */
.aura-mega-menu-container--v2 a.cg-menu-link,
.aura-mm2 a.cg-menu-link,
.aura-mm2__mount > a.cg-menu-link {
	display: none !important;
}

.aura-mega-menu-container--v2 {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #fff;
	overflow: visible !important;
}

.aura-mm2 {
	/* Cztery kolory: biel, czerń, szarość i firmowa zieleń.
	   Zieleń jest jedynym akcentem — niesie akcję i zaznaczenie.
	   Neutralne są chłodno-szare, bez ciepłego beżu. */
	--an-green: #3f880b;
	--an-green-dark: #34700a;
	--an-ink: #1a1a1a;
	--an-ink-2: #4a4a4a;
	--an-ink-3: #8a8a8a;
	--an-line: #e5e5e5;
	--an-line-2: #f0f0f0;
	--an-bg-2: #f6f6f6;
	--an-soft: #eef4e7;
	--an-radius: 8px;
	--an-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

	font-family: inherit;
	color: var(--an-ink);
	background: #fff;
	display: block;
	width: 100%;
	max-width: 100%;
}

.aura-mm2 *,
.aura-mm2 *::before,
.aura-mm2 *::after {
	box-sizing: border-box;
}

.aura-mm2 ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ── Mikro-etykiety i liczby ───────────────────────────────────────── */
.aura-mm2 .an-group__t,
.aura-mm2 .an-aud__label,
.aura-mm2 .an-best__t,
.aura-mm2 .an-promo__kicker,
.aura-mm2 .an-m__group {
	font-size: 10.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	font-weight: 700;
}

.aura-mm2 .an-rail__count,
.aura-mm2 .an-chip__n,
.aura-mm2 .an-main__count,
.aura-mm2 .an-row__count,
.aura-mm2 .an-lvl__count,
.aura-mm2 .an-prod__price {
	font-family: var(--an-mono);
	font-variant-numeric: tabular-nums;
}

/* ── Przełącznik „Dla kogo” ────────────────────────────────────────── */
.aura-mm2 .an-aud {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	background: var(--an-bg-2);
	border-bottom: 1px solid var(--an-line);
}

.aura-mm2 .an-aud__label {
	flex: none;
	color: var(--an-ink-3);
}

.aura-mm2 .an-aud__set {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	min-width: 0;
}

.aura-mm2 .an-aud__btn {
	font: inherit;
	font-size: 13px;
	line-height: 1;
	border: 1px solid var(--an-line);
	background: #fff;
	color: var(--an-ink-2);
	padding: 9px 15px;
	border-radius: var(--an-radius);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .15s, color .15s;
}

.aura-mm2 .an-aud__btn:hover {
	border-color: var(--an-ink-3);
	color: var(--an-ink);
}

.aura-mm2 .an-aud__btn[aria-pressed="true"] {
	background: var(--an-green);
	border-color: var(--an-green);
	color: #fff;
	font-weight: 700;
}

.aura-mm2 .an-aud__btn[aria-pressed="true"][data-value="all"] {
	background: #fff;
	border-color: var(--an-ink);
	color: var(--an-ink);
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP — master–detail
   ══════════════════════════════════════════════════════════════════════ */
.aura-mm2 .an-md {
	display: grid;
	grid-template-columns: 256px minmax(0, 1fr);
	align-items: stretch;
}

.aura-mm2 .an-rail {
	border-right: 1px solid var(--an-line);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-height: max(300px, calc(100vh - 310px));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.aura-mm2 .an-rail__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: var(--an-radius);
	font-size: 14px;
	line-height: 1.3;
	color: var(--an-ink);
	text-decoration: none;
	position: relative;
}

.aura-mm2 .an-rail__btn:hover {
	background: var(--an-bg-2);
}

.aura-mm2 .an-rail__btn[aria-current="true"] {
	background: var(--an-soft);
	font-weight: 600;
}

.aura-mm2 .an-rail__btn[aria-current="true"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	border-radius: 1px;
	background: var(--an-green);
}

.aura-mm2 .an-rail__name {
	min-width: 0;
}

.aura-mm2 .an-rail__count {
	margin-left: auto;
	padding-left: 10px;
	font-size: 11.5px;
	color: var(--an-ink-3);
}

.aura-mm2 .an-rail__btn[aria-current="true"] .an-rail__count {
	color: var(--an-green);
}

.aura-mm2 .an-rail__arrow {
	color: var(--an-ink-3);
	font-size: 13px;
}

/* ── Szczegół ──────────────────────────────────────────────────────── */
.aura-mm2 .an-detail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
}

.aura-mm2 .an-main {
	padding: 22px 26px 24px;
	min-width: 0;
}

.aura-mm2 .an-main__head {
	display: flex;
	align-items: baseline;
	gap: 11px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.aura-mm2 .an-main__title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.15;
	color: var(--an-ink);
}

.aura-mm2 .an-main__count {
	font-size: 11.5px;
	color: var(--an-ink-3);
}

.aura-mm2 .an-group {
	margin-bottom: 16px;
}

.aura-mm2 .an-group__t {
	color: var(--an-ink-3);
	margin-bottom: 9px;
}

.aura-mm2 .an-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.aura-mm2 .an-chip {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	line-height: 1.25;
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius);
	padding: 7px 12px;
	background: #fff;
	text-decoration: none;
}

.aura-mm2 .an-chip--solid {
	background: var(--an-bg-2);
	border-color: var(--an-bg-2);
}

.aura-mm2 .an-chip--solid:hover {
	background: var(--an-soft);
	border-color: var(--an-soft);
}

.aura-mm2 .an-chip:hover {
	border-color: var(--an-green);
}

.aura-mm2 .an-chip--soon {
	background: var(--an-bg-2);
	color: var(--an-ink-3);
	cursor: default;
}

.aura-mm2 .an-chip__n {
	margin-left: 6px;
	font-size: 11px;
	color: var(--an-ink-3);
}

.aura-mm2 .an-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 4px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

/* ── Prawa kolumna ─────────────────────────────────────────────────── */
.aura-mm2 .an-aside {
	border-left: 1px solid var(--an-line);
	background: var(--an-bg-2);
	padding: 22px 20px;
	min-width: 0;
}

.aura-mm2 .an-promo__kicker {
	display: block;
	color: var(--an-ink-3);
}

.aura-mm2 .an-promo__title {
	margin: 8px 0 6px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--an-ink);
}

.aura-mm2 .an-promo__text {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--an-ink-2);
}

.aura-mm2 .an-promo__btn {
	display: block;
	padding: 11px;
	border-radius: var(--an-radius);
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.aura-mm2 .an-best {
	margin-top: 18px;
	padding-top: 13px;
	border-top: 1px solid var(--an-line);
}

.aura-mm2 .an-best__t {
	color: var(--an-ink-3);
	margin-bottom: 9px;
}

.aura-mm2 .an-prod {
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 10px 0 2px;
	text-decoration: none;
}

.aura-mm2 .an-prod:last-child {
	border-bottom: none;
}

.aura-mm2 .an-prod__img {
	display: inline-block;
	flex: none;
	/* Proporcja 1:1 — kadr kwadratowy, bez zniekształcania zdjęcia. */
	width: 84px;
	height: 84px;
	aspect-ratio: 1 / 1;
	border-radius: var(--an-radius);
	object-fit: cover;
	background: #ededed;
	border: 1px solid var(--an-line);
}

.aura-mm2 .an-prod__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.aura-mm2 .an-prod__name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.aura-mm2 .an-prod__meta {
	font-size: 11.5px;
	line-height: 1.3;
}

.aura-mm2 .an-prod__price {
	margin-top: 3px;
	font-size: 14px;
	font-weight: 700;
}

/* ── Odznaki ───────────────────────────────────────────────────────── */
.aura-mm2 .an-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 5px;
	border-radius: 4px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}

.aura-mm2 .an-badge--kids { background: var(--an-soft); }
.aura-mm2 .an-badge--senior { background: #ededed; }
.aura-mm2 .an-badge--soon { background: #ededed; }

/* ── Fokus ─────────────────────────────────────────────────────────── */
.aura-mm2 a:focus-visible,
.aura-mm2 button:focus-visible {
	outline: 2px solid var(--an-green);
	outline-offset: 2px;
	border-radius: var(--an-radius);
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE — nawigacja push wewnątrz szuflady motywu

   RYTM ODNIESIENIA (zmierzony na natywnym podmenu motywu w tej samej
   szufladzie — pozycja „Baza wiedzy”):

       wiersz  .sub-menu li > a   14px / 400 / line-height 1.4
                                  padding 12px 0  → 43,6px + 1px kreska
       kolumna x = 15px, szerokość 274,2px
       kreska  1px solid #e5e5e5

   Panel siedzi w cudzej szufladzie, więc trzyma JEJ rytm, nie własny.
   Wcześniej poziom 1 (przyciski) miał 13px/42px, a poziom 2 (linki)
   14px/44,6px — dwa różne rytmy w jednym panelu.

   ── ZAPORA KASKADOWA ──────────────────────────────────────────────────
   Motyw potomny (style.css, blok @media max-width:992px) wymusza na
   KAŻDYM <a> wewnątrz .sub-menu-wrapper:

       padding: 12px 0 !important;  font-size: 14px !important;
       font-weight: 400 !important; line-height: 1.4 !important;

   Reguły pisane pod stare menu (.aura-mobile-items) łapią też nasz panel.
   Dla wierszy to trafia w punkt, ale chipom kasowało wcięcie poziome
   (tekst przyklejony do ramki), a CTA odbierało pogrubienie.

   Selektor motywu ma specyficzność (0,2,3). Nasze nadpisania prowadzimy
   przez .aura-mm2 .an-m … = (0,3,x) — trzy klasy biją dwie niezależnie
   od liczby elementów. `!important` jest konieczny, bo motyw też go używa;
   dotyczy WYŁĄCZNIE typografii i wcięć, nigdy układu.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
	.aura-mega-menu-container--v2,
	.aura-mm2 {
		max-height: none !important;
		height: auto !important;
		max-width: 100vw !important;
	}

	/* `overflow-x: hidden` czyniło z .an-m kontener przewijania (overflow-y
	   liczy się wtedy jako `auto`), a ten jest dokładnie tak wysoki jak jego
	   treść — przez to `position: sticky` nie miało się o co zaczepić i ani
	   filtr, ani dolne CTA się nie przyklejały. Przewijaniem zarządza
	   .sub-menu-wrapper motywu i to on jest kontenerem dla sticky. */
	.aura-mm2 .an-m {
		display: flex;
		flex-direction: column;
	}

	/* ── Przełącznik odbiorcy ──
	   Poziomy scroll chował „Mężczyźni” i „Seniorzy” poza szufladą (416px
	   treści w 274px okna) — dwie z pięciu opcji były nieosiągalne, bo
	   jedyną wskazówką była miękka maska przy krawędzi. Zawijamy do dwóch
	   rzędów: wszystkie opcje widoczne od razu. */
	.aura-mm2 .an-aud {
		position: sticky;
		top: 0;
		z-index: 3;
		gap: 6px;
		padding: 10px 0;
		background: #fff;
		border-bottom: 1px solid var(--an-line);
		flex-wrap: wrap;
	}

	.aura-mm2 .an-aud__label { display: none; }

	.aura-mm2 .an-aud__set {
		flex-wrap: wrap;
		gap: 6px;
		width: 100%;
	}

	.aura-mm2 .an-m .an-aud__btn {
		padding: 8px 12px !important;
		font-size: 12.5px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
		border-radius: var(--an-radius);
	}

	.aura-mm2 .an-m .an-aud__btn[aria-pressed="true"] {
		font-weight: 700 !important;
	}

	/* ── Etykiety grup ── */
	.aura-mm2 .an-m__group {
		padding: 16px 0 6px;
		font-size: 10px;
		color: var(--an-ink-3);
	}

	/* ── Wiersze — 1:1 z natywnym podmenu motywu ──
	   Listy są <ul>/<li> (czytnik ekranu zapowiada „lista, N pozycji”), ale
	   motyw obrysowuje KAŻDY <li> w szufladzie własną kreską — bez zdjęcia
	   jej wiersze miałyby podwójną krawędź. Kreskę rysuje `.an-row`. */
	/* Motyw obrysowuje `li` DWOMA selektorami: `.main-navigation
	   .sub-menu-wrapper li` = (0,2,1) oraz `.main-navigation ul.sub-menu li`
	   = (0,2,2). Przy remisie decyduje kolejność wczytania, a motyw jedzie
	   po nas — dlatego pierwsze dwa podejścia (`.an-m li`, `.an-m ul li`)
	   przegrywały mimo `!important`, dokładając wierszowi 1px ponad wzorzec.
	   Trzecia klasa daje (0,3,1) i wygrywa niezależnie od kolejności. */
	.aura-mm2 .an-m .an-m__list li,
	.aura-mm2 .an-m .an-m__chips li {
		border-bottom: 0 !important;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.aura-mm2 .an-m__list {
		display: flex;
		flex-direction: column;
	}

	.aura-mm2 .an-m__list > li { display: flex; }

	.aura-mm2 .an-m .an-row {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		/* Bez wcięcia poziomego — tekst stoi w jednej linii z pozycjami
		   menu motywu, które zaczynają się przy krawędzi kontenera. */
		padding: 12px 0 !important;
		font: inherit;
		font-size: 14px !important;
		font-weight: 400 !important;
		line-height: 1.4 !important;
		text-align: left;
		background: none;
		border: none;
		border-bottom: 1px solid var(--an-line);
		cursor: pointer;
		text-decoration: none;
	}

	.aura-mm2 .an-m__list > li:last-child .an-row { border-bottom: none; }
	.aura-mm2 .an-m .an-row:active { background: var(--an-bg-2); }
	.aura-mm2 .an-m .an-row--soon { cursor: default; }

	.aura-mm2 .an-m .an-row__name {
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.aura-mm2 .an-m .an-row__count {
		margin-left: auto;
		padding-left: 8px;
		font-size: 12px;
		color: var(--an-ink-3);
	}

	.aura-mm2 .an-m .an-row__arrow {
		flex: none;
		margin-left: 8px;
		font-size: 16px;
		line-height: 1;
		color: var(--an-ink-3);
	}

	.aura-mm2 .an-m .an-row__arrow--solo { margin-left: auto; }

	/* ── Chipy celów i składników ──
	   Stała siatka 2×N zamiast zawijania: przy nazwach w rodzaju
	   „MACA (Żeń-szeń peruwiański)” zawijanie flexem dawało poszarpane
	   rzędy. Chip jest świadomie mniejszy od wiersza — to nawigacja
	   drugorzędna, nie druga lista. */
	.aura-mm2 .an-m__chips {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding: 2px 0 14px;
	}

	.aura-mm2 .an-m__chips > li { display: flex; }

	.aura-mm2 .an-m .an-m__chips a {
		display: flex;
		width: 100%;
		align-items: center;
		gap: 5px;
		min-height: 36px;
		/* Motyw kasował wcięcie poziome (padding: 12px 0) i tekst kleił się
		   do ramki — stąd `!important` na samym wcięciu. */
		padding: 0 10px !important;
		font-size: 12.5px !important;
		font-weight: 400 !important;
		line-height: 1.25 !important;
		border: 1px solid var(--an-line);
		border-radius: var(--an-radius);
		text-decoration: none;
		background: #fff;
		min-width: 0;
		overflow: hidden;
	}

	/* Wielokropek działa tylko na elemencie blokowym z własnym overflow —
	   na kontenerze flex nie zadziała, dlatego etykieta ma własny <span>. */
	.aura-mm2 .an-m .an-chip__t {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.aura-mm2 .an-m .an-m__chips .an-chip__n {
		flex: none;
		font-size: 11px;
	}

	.aura-mm2 .an-m__all { margin-top: 4px; }

	/* ── Akcja główna na dole ──
	   Świadomie BEZ `position: sticky`. Przyklejone CTA nakładało się na
	   ostatni wiersz („Zobacz wszystkie”), bo treść poziomu 2 jest tylko
	   odrobinę wyższa od szuflady — pasek podnosił się nad listę i zasłaniał
	   jej koniec. Szuflada motywu nie ma żadnych przyklejonych elementów,
	   więc CTA domyka panel jako ostatni blok i nic nie przykrywa. */
	.aura-mm2 .an-m__dock {
		padding: 12px 0 14px;
		background: #fff;
		border-top: 1px solid var(--an-line);
	}

	/* Motyw daje `border-bottom` KAŻDEMU <li> w .sub-menu-wrapper — także
	   temu, który mieści cały panel. Zostawiało to zabłąkaną kreskę pod
	   CTA, wyglądającą na niedokończony wiersz. */
	.main-navigation .sub-menu-wrapper li.aura-mm2-host {
		border-bottom: 0 !important;
	}

	.aura-mm2 .an-m .an-m__dock a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		padding: 0 14px !important;
		border-radius: var(--an-radius);
		font-size: 14px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		text-decoration: none;
		border-bottom: none;
	}
}

/* Desktop: sufit wysokości panelu — bez tego wychodzi poza ekran. */
@media (min-width: 993px) {
	.aura-mm2 {
		max-height: max(340px, calc(100vh - 250px));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aura-mm2 * {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════
   ODZYSKANIE KOLORÓW

   Shoptimizer wymusza rgb(50,50,50) na każdym <a> wewnątrz .sub-menu
   selektorem o wysokiej specyficzności — zielone CTA, chipy i ceny
   renderowały się na ciemno. `!important` jest tu świadomy; CLAUDE.md
   odnotowuje tę wojnę kaskady jako znaną cechę motywu. Nadpisujemy
   WYŁĄCZNIE kolor i podkreślenie, nigdy układ.
   ══════════════════════════════════════════════════════════════════════ */
.aura-mm2 .an-rail__btn,
.aura-mm2 .an-chip,
.aura-mm2 .an-prod,
.aura-mm2 .an-prod__name,
.aura-mm2 .an-row,
.aura-mm2 .an-m .an-m__chips a {
	color: var(--an-ink) !important;
}

.aura-mm2 .an-rail__btn:hover,
.aura-mm2 .an-chip:hover,
.aura-mm2 .an-prod:hover .an-prod__name,
.aura-mm2 .an-cta:hover,
.aura-mm2 .an-m__chips a:hover {
	color: var(--an-green) !important;
}

.aura-mm2 .an-cta,
.aura-mm2 .an-back,
.aura-mm2 .an-m__all .an-row {
	color: var(--an-green) !important;
}

.aura-mm2 .an-promo__btn,
.aura-mm2 .an-m__dock a {
	color: #fff !important;
	background: var(--an-green) !important;
}

.aura-mm2 .an-promo__btn:hover,
.aura-mm2 .an-m__dock a:hover {
	background: var(--an-green-dark) !important;
}

.aura-mm2 .an-prod__meta,
.aura-mm2 .an-prod__price s,
.aura-mm2 .an-chip--soon,
.aura-mm2 .an-row--soon,
.aura-mm2 .an-rail__count,
.aura-mm2 .an-chip__n,
.aura-mm2 .an-row__count {
	color: var(--an-ink-3) !important;
}

.aura-mm2 .an-prod__price {
	color: var(--an-ink) !important;
}

.aura-mm2 .an-badge--kids { color: var(--an-green) !important; }
.aura-mm2 .an-badge--senior { color: #6a6a6a !important; }
.aura-mm2 .an-badge--soon { color: #6a6a6a !important; }

.aura-mm2 a {
	text-decoration: none !important;
}