/*
 * Header "Kategorie" dropdown — global component (immutable).
 *
 * Per user mandate 2026-05-28: zamienia "Energia i koncentracja" link na dropdown
 * z product categories (2-col grid 6 items + count + Zobacz wszystkie CTA).
 *
 * Markup: gk_render_categories_dropdown() w functions.php.
 * Reuse pattern z .gk-header__account-dropdown (hover trigger + bridge area + transitions)
 * ALE z hardcoded hex (NIE var()) bo home.css scope .gk-home nie cascade na PDP/sklep.
 *
 * Pliki: zostaje wciągnięte przez wp_enqueue_style('gemkibo-header-dropdown') globalnie.
 */

/* Header container — nav inner ma szerokość taką samą jak .gk-*__inner sekcji niżej
   (1440 max + padding 0 57.6px). Per user mandate 2026-05-29. */
.gk-header > .gk-header__nav {
	width: 100%;
	max-width: 1440px;
	padding: 0 57.6px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Header context — relative dla anchored dropdown (avoid trigger-overflow). */
.gk-header { position: relative; }

/* Trigger — flex item w .gk-header__menu (matchuje styling innych <a> w menu).
   IMPORTANT: position:static (!important) — bo home.css setuje .gk-header__account { position:relative }
   z większą specificity. Dropdown ma być anchored do .gk-header (viewport) NIE do trigger li. */
.gk-header__cats.gk-header__account,
.gk-header__cats {
	position: static !important;
	display: inline-flex;
	align-items: center;
}
.gk-header__cats-trigger {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #5A6354;
	padding: 8px 14px;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
	transition: color .2s ease, background .2s ease;
}
.gk-header__cats:hover .gk-header__cats-trigger,
.gk-header__cats:focus-within .gk-header__cats-trigger {
	color: #1F3D14;
	background: #F3F4F0;
}
.gk-header__cats-chevron {
	transition: transform .25s cubic-bezier(.16, 1, .3, 1);
	flex-shrink: 0;
}
.gk-header__cats:hover .gk-header__cats-chevron,
.gk-header__cats:focus-within .gk-header__cats-chevron {
	transform: rotate(180deg);
}

/* Dropdown panel — pozycja absolutna pod trigger.
   Specificity podbita przez `.gk-header__cats .gk-header__cats-dropdown` (2 classes)
   bo home.css `.gk-header__account-dropdown { min-width:320px }` ładuje się PO
   tym pliku i overrideuje przy równej specificity. */
.gk-header__cats .gk-header__cats-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: 8px;
	transform: translate(-50%, -8px);
	min-width: 480px;
	max-width: calc(100vw - 32px);
	background: #FFFFFF;
	border: 1px solid rgba(15, 30, 15, 0.06);
	border-radius: 18px;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.06),
		0 18px 48px -8px rgba(31, 61, 20, 0.18);
	padding: 18px;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition:
		opacity .25s cubic-bezier(.16, 1, .3, 1),
		transform .25s cubic-bezier(.16, 1, .3, 1),
		visibility 0s linear .25s;
	z-index: 60;
}

/* Bridge area — diagonal mouse path nie zamyka dropdown.
   FIX hover-gap 2026-05-30: wrapper jest position:static, więc ::before kotwiczy się
   do .gk-header (fixed) a nie do triggera — top:100% lądowało pod całym paskiem (~81px)
   zostawiając ~28px martwej strefy między triggerem (61px) a dropdownem (89px).
   top:50% + bottom:-16px rozciąga mostek od środka paska do tuż pod nim; pełna szerokość
   pokrywa skośną ścieżkę do wycentrowanego mega-menu. Zweryfikowane traversalem myszy. */
/* Selektor .gk-header__cats.gk-header__account podbija specyficzność (0,2,1) żeby wygrać
   z home.css `.gk-header__account::before { top:100%; height:12px }` (0,1,1) — trigger
   Kategorie ma OBIE klasy, a home.css ładuje się PO tym pliku. */
.gk-header__cats::before,
.gk-header__cats.gk-header__account::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: -16px;
	height: auto;
	pointer-events: none;
}
.gk-header__cats:hover::before,
.gk-header__cats.gk-header__account:hover::before { pointer-events: auto; }

/* FIX hover-gap 2026-05-30 — dropdown konta: mostek na samym panelu (account NIE ma
   overflow:hidden, w przeciwieństwie do mega), rozciągnięty w górę nad gap.
   :not(.gk-header__cats-dropdown) żeby nie dotykać panelu Kategorii. */
.gk-header__account-dropdown:not(.gk-header__cats-dropdown)::before {
	content: '';
	position: absolute;
	top: -16px;
	left: -10px;
	right: -10px;
	height: 20px;
	pointer-events: none;
}
.gk-header__account:hover .gk-header__account-dropdown:not(.gk-header__cats-dropdown)::before { pointer-events: auto; }

.gk-header__cats:hover .gk-header__cats-dropdown,
.gk-header__cats:focus-within .gk-header__cats-dropdown,
.gk-header__cats:hover > .gk-header__account-dropdown.gk-header__cats-dropdown,
.gk-header__cats:focus-within > .gk-header__account-dropdown.gk-header__cats-dropdown {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transform: translate(-50%, 0);
	transition:
		opacity .25s cubic-bezier(.16, 1, .3, 1),
		transform .25s cubic-bezier(.16, 1, .3, 1);
}

/* 2-col grid 6 items */
.gk-header__cats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.gk-header__cats-item {
	display: inline-flex !important;
	align-items: center;
	justify-content: space-between !important;
	gap: 12px;
	padding: 12px 14px !important;
	background: transparent !important;
	border-radius: 12px !important;
	color: #1F3D14 !important;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.gk-header__cats-item:hover,
.gk-header__cats-item:focus-visible {
	background: #FAF8F4 !important;
	color: #5DA935 !important;
	transform: translateX(2px);
}
.gk-header__cats-name {
	flex: 1;
	line-height: 1.3;
	letter-spacing: -0.005em;
}
.gk-header__cats-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	background: #F0EDE5;
	color: #5A6354;
	border-radius: 999px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	transition: background .15s ease, color .15s ease;
}
.gk-header__cats-item:hover .gk-header__cats-count,
.gk-header__cats-item:focus-visible .gk-header__cats-count {
	background: #5DA935;
	color: #FFFFFF;
}

/* "Zobacz wszystkie" CTA na dole */
.gk-header__cats-all {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px !important;
	padding: 11px 18px !important;
	background: #1F3D14 !important;
	color: #FFFFFF !important;
	border-radius: 9999px !important;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	transition: background .2s ease, transform .2s ease;
}
.gk-header__cats-all:hover,
.gk-header__cats-all:focus-visible {
	background: #5DA935 !important;
	color: #FFFFFF !important;
	transform: translateY(-1px);
}

/* Mobile — schowaj cały trigger (nav menu hidden i tak na mobile)
   ALE jeśli widoczne w drawer to potraktuj jako accordion w mobile drawer. Aktualnie:
   .gk-header__menu hidden < 768px. */
@media (max-width: 1023px) {
	.gk-header__cats-dropdown {
		min-width: 380px;
		max-width: calc(100vw - 32px);
		padding: 16px;
	}
	.gk-header__cats-grid {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* ───────────────────────────────────────────────────────────────
   MEGA-MENU layout — 3 kolumny (Kategorie + Promocje + Bestsellery)
   Per user mandate 2026-05-29: przywróć dropdown ze wczoraj.
   ─────────────────────────────────────────────────────────── */
.gk-header__cats .gk-header__cats-dropdown.gk-header__cats-dropdown--mega {
	min-width: 0;
	/* FIX 2026-06-01: większy margines od krawędzi (80px) — gwarancja że mega NIGDY
	   nie dotknie brzegu ekranu (anti poziomy-scroll na hover), + trochę luzu. */
	width: min(900px, calc(100vw - 80px));
	max-width: calc(100vw - 80px);
	padding: 0;
	border-radius: 18px;
	overflow: hidden;
}

.gk-header__cats-mega {
	display: grid;
	/* Szersza kolumna kategorii (długie nazwy typu „Adaptogeny i grzyby funkcyjne")
	   2026-06-01 — było 1fr 2fr; poszerzone by nazwy nie wychodziły poza kolumnę. */
	grid-template-columns: 1.5fr 1.5fr;
	gap: 0;
	max-height: 460px;
}

.gk-header__cats-col {
	display: flex;
	flex-direction: column;
	padding: 24px 22px;
	min-width: 0;
}
.gk-header__cats-col + .gk-header__cats-col {
	border-left: 1px solid rgba(15, 30, 15, 0.06);
}

.gk-header__cats-col-label {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #4F9028;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(15, 30, 15, 0.06);
}

/* COL 1 — Kategorie list */
.gk-header__cats-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}
.gk-header__cats-link {
	display: flex !important;
	align-items: center;
	justify-content: space-between !important;
	gap: 10px;
	min-height: 40px;
	padding: 0 12px !important;
	background: transparent !important;
	border-radius: 10px !important;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #1F3D14 !important;
	text-decoration: none !important;
	letter-spacing: -0.005em;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.gk-header__cats-link:hover,
.gk-header__cats-link:focus-visible {
	background: rgba(93, 169, 53, 0.08) !important;
	color: #4F9028 !important;
}
.gk-header__cats-link > span:first-child {
	flex: 1;
	min-width: 0;
	line-height: 1.3;
	/* Długie nazwy kategorii zawijają się zamiast wypychać kolumnę / tworzyć scroll. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* COL 2/3 — Featured products stack */
.gk-header__cats-feats {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-height: 0;
}
.gk-header__cats-feat {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 8px !important;
	background: transparent !important;
	border-radius: 12px !important;
	border: 1px solid transparent;
	text-decoration: none !important;
	color: inherit !important;
	transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gk-header__cats-feat:hover,
.gk-header__cats-feat:focus-visible {
	background: #FAFAF7 !important;
	border-color: rgba(93, 169, 53, 0.28);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}
.gk-header__cats-feat-image {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	background: #FAF8F4 center / contain no-repeat;
	border-radius: 10px;
	display: block;
}
.gk-header__cats-feat-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}
.gk-header__cats-feat-badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 1px 7px;
	background: #DC2626;
	color: #FFFFFF;
	border-radius: 9999px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.4;
	margin-bottom: 1px;
}
.gk-header__cats-feat-name {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #1F3D14;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gk-header__cats-feat-price {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: #009668;
	letter-spacing: -0.01em;
}
.gk-header__cats-feat-price del {
	font-size: 11px;
	font-weight: 500;
	color: #9CA396;
	margin-right: 4px;
}
.gk-header__cats-feat-price ins {
	background: transparent;
	color: #009668;
	text-decoration: none;
}

/* Column CTA — "Wszystkie X" link na dole każdej kolumny */
.gk-header__cats-col-cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: space-between !important;
	gap: 8px;
	margin-top: auto;
	padding: 11px 14px !important;
	background: #F3F4F0 !important;
	color: #1F3D14 !important;
	border-radius: 10px !important;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.gk-header__cats-col-cta:hover,
.gk-header__cats-col-cta:focus-visible {
	background: #1F3D14 !important;
	color: #FFFFFF !important;
	transform: translateY(-1px);
}
.gk-header__cats-col-cta svg {
	flex-shrink: 0;
	transition: transform .2s ease;
}
.gk-header__cats-col-cta:hover svg {
	transform: translateX(2px);
}

/* Responsive mega — na ≤1280px (laptop) trzymaj 2 kolumny z szeroką kolumną
   kategorii. FIX 2026-06-01: było stare 3-kolumnowe `260px 1fr 1fr` (relikt po
   3-kolumnowym mega) — wąskie 260px ucinało długie nazwy + pusty 3. tor robił
   poziomy scroll na hover. */
@media (max-width: 1280px) {
	.gk-header__cats-mega { grid-template-columns: 1.5fr 1.5fr; }
	.gk-header__cats-col { padding: 20px 18px; }
}
@media (max-width: 1023px) {
	.gk-header__cats-dropdown--mega {
		min-width: 360px;
		max-width: calc(100vw - 32px);
	}
	.gk-header__cats-mega {
		grid-template-columns: 1fr;
		max-height: 70vh;
		overflow-y: auto;
	}
	.gk-header__cats-col + .gk-header__cats-col {
		border-left: 0;
		border-top: 1px solid rgba(15, 30, 15, 0.06);
	}
}

/* "Najczęściej kupowane" — 2-col × 3-row grid (6 produktów) */
.gk-header__cats-tops {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	flex: 1;
	min-height: 0;
}
.gk-header__cats-top {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 8px 10px !important;
	background: transparent !important;
	border-radius: 10px !important;
	border: 1px solid transparent;
	text-decoration: none !important;
	color: inherit !important;
	transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.gk-header__cats-top:hover,
.gk-header__cats-top:focus-visible {
	background: #FAFAF7 !important;
	border-color: rgba(93, 169, 53, 0.28);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
	transform: translateY(-1px);
}
.gk-header__cats-top-image {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background: #FAF8F4 center / contain no-repeat;
	border-radius: 8px;
	display: block;
}
.gk-header__cats-top-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.gk-header__cats-top-name {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	color: #1F3D14;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gk-header__cats-top-price {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 800;
	color: #009668;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.gk-header__cats-top-price del {
	font-size: 10.5px;
	font-weight: 500;
	color: #9CA396;
	margin-right: 3px;
}
.gk-header__cats-top-price ins {
	background: transparent;
	color: #009668;
	text-decoration: none;
}

/* Responsive — mobile collapse */
@media (max-width: 1023px) {
	.gk-header__cats-tops { grid-template-columns: 1fr; }
}

/* FIX 2026-05-31: padding 57.6px (--gk-px desktopowy) był za duży na mobile.
   Selektor pasuje specyficznością (0,2,0) do reguły bazowej u góry tego pliku. */
@media (max-width: 767px) {
	.gk-header > .gk-header__nav { padding-left: 16px; padding-right: 16px; }
}