/**
 * Store navigation module — product mega menu and mobile bottom bar.
 * Loaded after the base responsive stylesheet so navigation can evolve without
 * adding one-off overrides to the global CSS bundle.
 */

/* Product mega menu ------------------------------------------------------- */
.ln-mega-menu {
	position: relative;
	z-index: 30;
	flex: 0 0 auto;
}

.ln-mega-menu > summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.ln-mega-menu > summary::-webkit-details-marker { display: none; }

.ln-mega-menu .ln-all-products {
	position: relative;
	min-height: 46px;
}

.ln-mega-menu__chevron {
	width: 7px;
	height: 7px;
	margin-inline-start: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}

.ln-mega-menu[open] .ln-mega-menu__chevron {
	transform: rotate(225deg) translate(-1px, -1px);
}

.ln-mega-menu__panel {
	position: absolute;
	top: calc(100% + 1px);
	right: 0;
	width: min(980px, calc(100vw - 48px));
	padding: 18px;
	grid-template-columns: 235px minmax(0, 1fr);
	gap: 18px;
	border: 1px solid color-mix(in srgb, var(--ln-gold) 34%, var(--ln-line));
	border-radius: 0 0 20px 20px;
	background: color-mix(in srgb, var(--ln-paper) 96%, white);
	box-shadow: 0 24px 70px rgba(8, 42, 37, .22);
	color: var(--ln-ink);
	direction: rtl;
}

.ln-mega-menu__intro {
	position: relative;
	display: flex;
	min-height: 260px;
	padding: 24px 21px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: 15px;
	background:
		radial-gradient(circle at 15% 12%, rgba(221, 185, 107, .28), transparent 32%),
		linear-gradient(145deg, var(--ln-primary), var(--ln-primary-dark));
	color: #f7f1df;
}

.ln-mega-menu__intro::before,
.ln-mega-menu__intro::after {
	position: absolute;
	border: 1px solid rgba(221, 185, 107, .2);
	border-radius: 50% 50% 8px 8px;
	content: "";
	pointer-events: none;
}

.ln-mega-menu__intro::before {
	top: -62px;
	right: 22px;
	width: 150px;
	height: 190px;
}

.ln-mega-menu__intro::after {
	top: -82px;
	right: 54px;
	width: 85px;
	height: 165px;
}

.ln-mega-menu__eyebrow {
	position: relative;
	z-index: 1;
	margin-bottom: 7px;
	color: var(--ln-gold-light);
	font-size: 10px;
	font-weight: 760;
}

.ln-mega-menu__intro > strong {
	position: relative;
	z-index: 1;
	font: 700 25px/1.55 var(--ln-font-display);
}

.ln-mega-menu__intro p {
	position: relative;
	z-index: 1;
	margin: 8px 0 15px;
	color: #a9bbb5;
	font-size: 10.5px;
	line-height: 1.95;
}

.ln-mega-menu__intro a {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ln-gold-light);
	font-size: 10.5px;
	font-weight: 800;
	text-decoration: none;
}

.ln-mega-menu__categories {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px 14px;
	align-content: start;
}

.ln-mega-menu__group {
	min-width: 0;
	padding: 8px;
	border-radius: 13px;
	transition: background-color .2s ease, box-shadow .2s ease;
}

.ln-mega-menu__group:hover {
	background: #fff;
	box-shadow: 0 8px 24px rgba(12, 59, 52, .06);
}

.ln-mega-menu__head {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 18px;
	gap: 9px;
	align-items: center;
	min-width: 0;
	color: var(--ln-ink);
	text-decoration: none;
}

.ln-mega-menu__media {
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--ln-gold) 28%, var(--ln-line));
	border-radius: 11px;
	background: #f3efe4;
}

.ln-mega-menu__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ln-mega-menu__media > i {
	position: relative;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--ln-gold);
	border-radius: 50% 50% 5px 5px;
}

.ln-mega-menu__media > i::before,
.ln-mega-menu__media > i::after {
	position: absolute;
	left: 50%;
	background: var(--ln-gold);
	content: "";
	transform: translateX(-50%);
}

.ln-mega-menu__media > i::before { top: -7px; width: 1px; height: 7px; }
.ln-mega-menu__media > i::after { bottom: -5px; width: 8px; height: 1px; }

.ln-mega-menu__title {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.ln-mega-menu__title strong {
	overflow: hidden;
	font-size: 11.5px;
	font-weight: 820;
	line-height: 1.7;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ln-mega-menu__title small {
	color: var(--ln-muted);
	font-size: 8.5px;
	line-height: 1.5;
}

.ln-mega-menu__arrow {
	color: color-mix(in srgb, var(--ln-gold) 70%, var(--ln-muted));
	font-size: 14px;
	transition: transform .2s ease;
}

.ln-mega-menu__head:hover .ln-mega-menu__arrow { transform: translateX(-3px); }

.ln-mega-menu__group ul {
	margin: 7px 55px 0 0;
	padding: 0;
	list-style: none;
}

.ln-mega-menu__group li + li { margin-top: 1px; }

.ln-mega-menu__group li a {
	display: block;
	padding: 3px 0;
	overflow: hidden;
	color: #6c7c77;
	font-size: 9.75px;
	line-height: 1.7;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ln-mega-menu__group li a:hover { color: #9a7b3f; }

@media (min-width: 901px) {
	.ln-mega-menu:not([open]):not(:hover):not(:focus-within) > .ln-mega-menu__panel {
		display: none;
	}

	.ln-mega-menu[open] > .ln-mega-menu__panel,
	.ln-mega-menu:hover > .ln-mega-menu__panel,
	.ln-mega-menu:focus-within > .ln-mega-menu__panel {
		display: grid;
		animation: ln-mega-menu-in .18s ease both;
	}
}

@keyframes ln-mega-menu-in {
	from { opacity: 0; transform: translateY(7px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
	.ln-mega-menu { width: 100%; }

	.ln-mega-menu .ln-all-products {
		width: 100%;
		justify-content: flex-start;
		margin-bottom: 8px;
		padding: 11px 12px;
		border: 1px solid rgba(221, 185, 107, .2);
		border-radius: 12px;
		background: rgba(221, 185, 107, .08);
	}

	.ln-mega-menu__chevron { margin-inline-start: auto; }

	.ln-mega-menu__panel {
		position: static;
		width: 100%;
		margin: -2px 0 12px;
		padding: 8px;
		grid-template-columns: 1fr;
		border: 1px solid rgba(221, 185, 107, .18);
		border-radius: 12px;
		background: rgba(4, 32, 28, .34);
		box-shadow: none;
		color: #f3efe2;
	}

	.ln-mega-menu:not([open]) > .ln-mega-menu__panel { display: none; }
	.ln-mega-menu[open] > .ln-mega-menu__panel { display: block; }
	.ln-mega-menu__intro { display: none; }
	.ln-mega-menu__categories { display: block; }

	.ln-mega-menu__group {
		padding: 7px 5px;
		border-radius: 10px;
	}

	.ln-mega-menu__group + .ln-mega-menu__group {
		border-top: 1px solid rgba(221, 185, 107, .12);
	}

	.ln-mega-menu__group:hover { background: rgba(255, 255, 255, .04); box-shadow: none; }
	.ln-mega-menu__head { grid-template-columns: 38px minmax(0, 1fr) 16px; }
	.ln-mega-menu__media { width: 38px; height: 38px; border-color: rgba(221, 185, 107, .2); background: rgba(255, 255, 255, .05); }
	.ln-mega-menu__title strong { color: #f3efe2; font-size: 11px; }
	.ln-mega-menu__title small { color: #7fa096; }
	.ln-mega-menu__group ul { margin: 5px 47px 0 0; }
	.ln-mega-menu__group li a { padding: 5px 0; color: #9bb0aa; font-size: 10px; }
}

/* Mobile bottom bar ------------------------------------------------------- */
@media (max-width: 700px) {
	body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

	.ln-mobile-bar {
		right: 10px;
		bottom: max(10px, env(safe-area-inset-bottom));
		left: 10px;
		height: 68px;
		padding: 5px 8px;
		grid-template-columns: 1fr 1fr 1.14fr 1fr;
		align-items: stretch;
		border: 1px solid rgba(201, 163, 92, .28);
		border-radius: 21px;
		background: rgba(255, 253, 248, .96);
		box-shadow: 0 18px 45px rgba(8, 42, 37, .2);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}

	.ln-mobile-bar__item {
		position: relative;
		display: flex;
		min-width: 0;
		padding: 6px 2px 4px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		border-radius: 14px;
		color: #6a7874;
		font-size: 9px;
		font-weight: 720;
		line-height: 1.2;
		text-decoration: none;
	}

	.ln-mobile-bar__item::after {
		position: absolute;
		right: 50%;
		bottom: 2px;
		width: 15px;
		height: 2px;
		border-radius: 99px;
		background: var(--ln-gold);
		content: "";
		opacity: 0;
		transform: translateX(50%) scaleX(.45);
		transition: opacity .2s ease, transform .2s ease;
	}

	.ln-mobile-bar__item.is-active {
		background: color-mix(in srgb, var(--ln-gold) 10%, transparent);
		color: var(--ln-primary);
	}

	.ln-mobile-bar__item.is-active::after { opacity: 1; transform: translateX(50%) scaleX(1); }

	.ln-mobile-bar__icon {
		position: relative;
		display: grid;
		width: 32px;
		height: 29px;
		place-items: center;
		border-radius: 10px;
	}

	.ln-mobile-bar__icon .ln-icon { width: 20px; height: 20px; }
	.ln-mobile-bar__label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	.ln-mobile-bar__item--cart {
		padding-top: 2px;
		color: var(--ln-primary);
	}

	.ln-mobile-bar__item--cart::after { display: none; }

	.ln-mobile-bar__item--cart .ln-mobile-bar__icon {
		width: 50px;
		height: 50px;
		margin-top: -21px;
		margin-bottom: 1px;
		border: 4px solid var(--ln-paper);
		border-radius: 18px;
		background: linear-gradient(145deg, var(--ln-primary), var(--ln-primary-dark));
		box-shadow: 0 9px 24px rgba(8, 42, 37, .3), inset 0 0 0 1px rgba(221, 185, 107, .25);
		color: var(--ln-gold-light);
	}

	.ln-mobile-bar__item--cart .ln-mobile-bar__icon .ln-icon { width: 22px; height: 22px; }

	.ln-mobile-bar .ln-cart-count {
		top: -4px;
		left: -5px;
		width: 18px;
		height: 18px;
		border: 2px solid var(--ln-paper);
		font-size: 8px;
	}

	.ln-mobile-bar__item--cart .ln-mobile-bar__label { color: var(--ln-primary); font-weight: 820; }
}

@media (max-width: 430px) {
	.ln-mobile-bar { right: 7px; left: 7px; padding-inline: 5px; }
	.ln-mobile-bar__item { font-size: 8.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.ln-mega-menu__panel { animation: none !important; }
	.ln-mega-menu__chevron,
	.ln-mobile-bar__item::after { transition: none; }
}