/* =========================================================================
   Pukka — Mega menu
   Left rail of shop categories + a swapping right panel of product cards
   (→ PDP) or category cards (→ landing), plus a feature promo. Full-width
   dropdown attached to a primary-nav item flagged .has-mega.
   Reveal/hover is inherited from header.css (.has-children:hover > panel).
   ========================================================================= */

.pk-nav { position: relative; }                 /* anchor the full-width panel */
.pk-nav__item.has-mega { position: static; }     /* so the panel spans the nav */

.pk-nav__panel--mega {
	left: 0; right: 0;
	min-width: 0;
	padding: 0;
	border-radius: 0 0 var(--pk-radius, 16px) var(--pk-radius, 16px);
	overflow: hidden;
}

.pk-mega__inner {
	display: flex;
	align-items: stretch;
	max-width: var(--pk-header-max, 1320px);
	margin: 0 auto;
	padding: 22px 24px 26px;
	gap: 24px;
}

/* ── Left rail ───────────────────────────────────────────────────────── */
.pk-mega__rail {
	flex: 0 0 232px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-right: 1px solid var(--pk-line, #E2EAE2);
	padding-right: 20px;
}
.pk-mega__railitem {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	width: 100%;
	padding: 11px 14px;
	border: 0; background: none;
	border-radius: var(--pk-radius-sm, 10px);
	font-family: inherit; font-size: 15px; font-weight: 600;
	color: var(--pk-ink, #002301);
	text-align: left; cursor: pointer;
	transition: background .13s ease, color .13s ease;
}
.pk-mega__railitem svg { width: 16px; height: 16px; opacity: 0; transform: translateX(-4px); transition: opacity .13s ease, transform .13s ease; }
.pk-mega__railitem:hover,
.pk-mega__railitem.is-active { background: var(--pk-soft, #D1EED1); color: var(--pk-teal, #002301); }
.pk-mega__railitem.is-active svg { opacity: .7; transform: translateX(0); }
.pk-mega__shopall {
	margin-top: 12px;
	display: block; text-align: center;
	background: var(--pk-teal, #002301); color: #fff !important;
	padding: 12px 16px; border-radius: var(--pk-radius-sm, 10px);
	font-weight: 700; font-size: 14.5px; text-decoration: none;
	transition: background .15s ease;
}
.pk-mega__shopall:hover { background: var(--pk-teal-dark, #0E4A1A); }

/* ── Panels ──────────────────────────────────────────────────────────── */
.pk-mega__panels { flex: 1 1 auto; min-width: 0; max-height: 70vh; overflow-y: auto; }
.pk-mega__panel { display: none; }
.pk-mega__panel.is-active { display: block; }

.pk-mega__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.pk-mega__panel-title { font-family: var(--pk-font-display, "Grano", sans-serif); font-size: 20px; font-weight: 700; color: var(--pk-ink, #002301); margin: 0; }
.pk-mega__panel-all { font-size: 14px; font-weight: 600; color: var(--pk-teal, #002301); text-decoration: none; white-space: nowrap; }
.pk-mega__panel-all:hover { text-decoration: underline; text-underline-offset: 3px; }

.pk-mega__grid { display: grid; gap: 16px; }
.pk-mega__grid--products   { grid-template-columns: repeat(4, 1fr); }
.pk-mega__grid--categories { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) {
	.pk-mega__grid--products, .pk-mega__grid--categories { grid-template-columns: repeat(3, 1fr); }
}

/* Cards */
.pk-mega__card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--pk-ink, #002301); }
.pk-mega__thumb {
	display: block; position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--pk-radius-sm, 10px);
	overflow: hidden;
	background: var(--pk-soft, #D1EED1);
	border: 1px solid var(--pk-line, #E2EAE2);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.pk-mega__card--categories .pk-mega__thumb { aspect-ratio: 4 / 3; }
.pk-mega__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-mega__thumb--ph { display: flex; align-items: center; justify-content: center; color: rgba(0,35,1,.30); }
.pk-mega__thumb--ph svg { width: 42%; height: 42%; }
.pk-mega__card:hover .pk-mega__thumb { border-color: var(--pk-teal, #002301); box-shadow: 0 0 0 2px rgba(0,35,1,.10); }

.pk-mega__card-label { font-size: 14px; font-weight: 600; line-height: 1.3; }
.pk-mega__card:hover .pk-mega__card-label { color: var(--pk-teal, #002301); }
.pk-mega__card--categories { position: relative; }
.pk-mega__card--categories .pk-mega__card-label { font-family: var(--pk-font-display, "Grano", sans-serif); font-size: 16px; font-weight: 700; }
.pk-mega__card-arrow { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #fff; color: var(--pk-teal, #002301); box-shadow: 0 2px 6px rgba(0,35,1,.12); }

/* ── Feature promo ───────────────────────────────────────────────────── */
.pk-mega__feature {
	flex: 0 0 236px;
	display: flex; flex-direction: column; justify-content: flex-end;
	position: relative; overflow: hidden;
	border-radius: var(--pk-radius, 16px);
	background: var(--pk-ink, #002301);
	color: var(--pk-light-green, #D1EED1);
	text-decoration: none;
	min-height: 260px;
}
.pk-mega__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pk-mega__feature-body { position: relative; padding: 18px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(to top, rgba(0,35,1,.85), rgba(0,35,1,0)); }
.pk-mega__feature strong { font-family: var(--pk-font-display, "Grano", sans-serif); font-size: 20px; color: var(--pk-accent, #84FF83); line-height: 1.1; }
.pk-mega__feature span { font-size: 13.5px; line-height: 1.45; }
.pk-mega__feature-cta { font-weight: 700; color: var(--pk-accent, #84FF83) !important; }

@media (max-width: 1180px) { .pk-mega__feature { display: none; } }

/* Long panels (e.g. Tea) scroll inside — tidy the scrollbar. */
.pk-mega__panels::-webkit-scrollbar { width: 8px; }
.pk-mega__panels::-webkit-scrollbar-thumb { background: var(--pk-line, #E2EAE2); border-radius: 8px; }