/* Larisa — mega menu */

.lm-mega {
	--lm-w: min(1160px, calc(100vw - 32px));
	--lm-radius: 22px;
	--lm-ink: #241520;
	--lm-muted: #7a6c76;
	direction: rtl;
	text-align: right;
	font-family: inherit;
	color: var(--lm-ink);
	line-height: 1.7;
}

.lm-mega *,
.lm-mega *::before,
.lm-mega *::after { box-sizing: border-box; }

.lm-mega a { text-decoration: none; }

/* Per-category palettes (same as the 3D hero). */
.lm-t-jewel  { --c1: #4a1640; --c2: #24081f; --acc: #c9963f; --acc-2: #f2c16b; --soft: #fbf4e6; }
.lm-t-beauty { --c1: #3fa585; --c2: #1d6b55; --acc: #2f9a78; --acc-2: #8ee6c3; --soft: #e8f6f0; }
.lm-t-plum   { --c1: #c91c7b; --c2: #6d0f45; --acc: #c91c7b; --acc-2: #f59ac9; --soft: #fbebf4; }

/* ---------- Main-menu host + floating panel ---------- */

.lm-mega-host { position: relative; }

.lm-mega-host > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-inline-start: 7px;
	border-inline-end: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .25s ease;
	opacity: .7;
}

.lm-mega-host.is-open > a::after { transform: translateY(1px) rotate(225deg); }

.lm-mega--main {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 400;
	width: var(--lm-w);
	padding-top: 14px; /* hover bridge */
	perspective: 1400px;
	visibility: hidden;
	pointer-events: none;
}

.lm-mega--main .lm-mega-inner {
	opacity: 0;
	transform-origin: 50% 0;
	transform: rotateX(-14deg) translateY(-8px) scale(.985);
	transition: opacity .26s ease, transform .38s cubic-bezier(.2, .8, .2, 1);
}

.lm-mega-host.is-open > .lm-mega--main,
.lm-mega-host:focus-within > .lm-mega--main {
	visibility: visible;
	pointer-events: auto;
}

.lm-mega-host.is-open > .lm-mega--main .lm-mega-inner,
.lm-mega-host:focus-within > .lm-mega--main .lm-mega-inner {
	opacity: 1;
	transform: none;
}

/* ---------- Header "categories" dropdown ---------- */

.wd-header-cats .wd-dropdown-cats.lm-has-mega,
.wd-header-cats .wd-dropdown-cats:has(> .lm-mega) {
	width: var(--lm-w, min(1160px, calc(100vw - 32px)));
	max-width: none;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
}

.wd-header-cats .wd-dropdown-cats.lm-has-mega::before,
.wd-header-cats .wd-dropdown-cats:has(> .lm-mega)::before { display: none; }

.lm-mega--cats { width: var(--lm-w); padding-top: 10px; }

/* ---------- Panel ---------- */

.lm-mega-inner {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	min-height: 410px;
	background: #fff;
	border-radius: var(--lm-radius);
	overflow: hidden;
	box-shadow:
		0 40px 80px -30px rgba(50, 10, 40, .35),
		0 12px 24px -12px rgba(50, 10, 40, .12),
		0 0 0 1px rgba(36, 21, 32, .06);
}

/* Rail */

.lm-mega-rail {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 14px;
	background: linear-gradient(180deg, #fbf7fa, #f4ecf2);
	border-inline-end: 1px solid rgba(36, 21, 32, .06);
}

.lm-mega-rail-title {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--lm-muted);
	padding: 0 8px 4px;
}

.lm-mega .lm-mega-tab {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 16px;
	color: var(--lm-ink);
	background: transparent;
	transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.lm-mega .lm-mega-tab:hover { background: rgba(255, 255, 255, .8); }

.lm-mega-tab-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--soft);
	color: var(--acc);
	transition: background .3s ease, color .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}

.lm-mega-tab-text { display: flex; flex-direction: column; min-width: 0; }
.lm-mega-tab-text strong { font-size: 14.5px; font-weight: 800; line-height: 1.5; }
.lm-mega-tab-text small { font-size: 11.5px; color: var(--lm-muted); transition: color .3s ease; }

.lm-mega-tab-arrow {
	margin-inline-start: auto;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity .3s ease, transform .3s ease;
}

.lm-mega .lm-mega-tab.is-active {
	color: #fff;
	background: linear-gradient(135deg, var(--c1), var(--c2));
	box-shadow: 0 16px 30px -14px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.lm-mega-tab.is-active .lm-mega-tab-icon {
	background: rgba(255, 255, 255, .14);
	color: var(--acc-2);
	transform: perspective(300px) rotateY(-18deg) scale(1.04);
}

.lm-mega-tab.is-active .lm-mega-tab-text small { color: rgba(255, 255, 255, .75); }
.lm-mega-tab.is-active .lm-mega-tab-arrow { opacity: .9; transform: none; }

.lm-mega-rail-links {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 14px;
	border-top: 1px dashed rgba(36, 21, 32, .12);
}

.lm-mega .lm-mega-rail-links a {
	padding: 6px 10px;
	border-radius: 10px;
	font-size: 13px;
	color: var(--lm-ink);
	transition: background .2s ease, color .2s ease;
}

.lm-mega .lm-mega-rail-links a:hover { background: #fff; color: #c91c7b; }
.lm-mega .lm-mega-rail-links .lm-mega-all { font-weight: 700; color: #c91c7b; }

/* Panes */

.lm-mega-panes { position: relative; min-width: 0; }

.lm-mega-pane {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 230px;
	gap: 22px;
	padding: 22px 26px 24px;
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-14px);
	transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s;
}

.lm-mega-pane.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

.lm-mega-pane.no-promo { grid-template-columns: minmax(0, 1fr); }
.lm-mega-pane.no-promo .lm-mega-tiles.is-dense { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }

.lm-mega-main { min-width: 0; }

.lm-mega-pane-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.lm-mega-pane-head h3 {
	margin: 0;
	padding: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--lm-ink);
	display: flex;
	align-items: center;
	gap: 10px;
}

.lm-mega-pane-head h3::before {
	content: "";
	width: 6px;
	height: 20px;
	border-radius: 4px;
	background: linear-gradient(var(--acc-2), var(--acc));
}

.lm-mega .lm-mega-pane-head a {
	font-size: 13px;
	font-weight: 700;
	color: var(--acc);
	padding: 5px 12px;
	border-radius: 99px;
	background: var(--soft);
	transition: background .2s ease, color .2s ease;
}

.lm-mega .lm-mega-pane-head a:hover { background: var(--acc); color: #fff; }

/* Tiles */

.lm-mega-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 10px 8px;
}

.lm-mega-tiles.is-dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lm-mega .lm-mega-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 6px;
	border-radius: 16px;
	color: var(--lm-ink);
	text-align: center;
	perspective: 500px;
	opacity: 0;
	transform: translateY(10px);
	transition: background .25s ease, opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
	transition-delay: 0s, calc(var(--i) * 35ms), calc(var(--i) * 35ms);
}

.lm-mega-pane.is-active .lm-mega-tile { opacity: 1; transform: none; }
.lm-mega .lm-mega-tile:hover { background: var(--soft); }

.lm-mega-tile-img {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	margin-bottom: 6px;
	border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle at 50% 40%, #faf5fd, #e3d0f0);
	color: var(--acc);
	box-shadow: 0 0 0 2px #f1e6f7, 0 10px 20px -12px rgba(74, 22, 64, .5);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.lm-mega-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lm-mega-tile:hover .lm-mega-tile-img {
	transform: rotateX(14deg) translateY(-5px) scale(1.07);
	box-shadow: 0 0 0 3px var(--acc-2), 0 18px 26px -12px var(--c1);
}

.lm-mega-tile-name { font-size: 13px; font-weight: 700; line-height: 1.5; }
.lm-mega-tile-count { font-size: 11px; color: var(--lm-muted); }

/* Link groups */

.lm-mega-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 22px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(36, 21, 32, .07);
}

.lm-mega .lm-mega-group-title {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--lm-ink);
	background: linear-gradient(var(--acc-2), var(--acc-2)) no-repeat 100% 100% / 100% 30%;
	transition: color .2s ease;
}

.lm-mega .lm-mega-group-title:hover { color: var(--acc); }

.lm-mega-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.lm-mega .lm-mega-chips a {
	font-size: 12.5px;
	padding: 3px 11px;
	border-radius: 99px;
	color: var(--lm-ink);
	background: #f6f2f5;
	border: 1px solid transparent;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.lm-mega .lm-mega-chips a:hover {
	background: #fff;
	color: var(--acc);
	border-color: var(--acc);
	transform: translateY(-1px);
}

/* Promo card */

.lm-mega .lm-mega-promo {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px 14px;
	border-radius: 20px;
	color: #fff;
	text-align: center;
	background:
		radial-gradient(80% 60% at 50% 35%, color-mix(in srgb, var(--acc-2) 35%, transparent), transparent 70%),
		linear-gradient(160deg, var(--c1), var(--c2));
	overflow: hidden;
	align-self: start;
	box-shadow: 0 20px 40px -22px var(--c1);
	transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.lm-mega .lm-mega-promo:hover { transform: translateY(-3px); }

.lm-mega-promo-label {
	align-self: flex-start;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .2);
}

.lm-mega-promo-off {
	position: absolute;
	top: 12px;
	left: 12px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 900;
	color: var(--c2);
	background: var(--acc-2);
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5);
	transform: rotate(-12deg);
}

.lm-mega-promo-img {
	display: block;
	width: 130px;
	height: 130px;
	margin: 6px 0 4px;
	border-radius: 22px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 24px 30px -18px rgba(0, 0, 0, .7);
	animation: lm-mega-float 5s ease-in-out infinite;
}

.lm-mega-promo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes lm-mega-float {
	0%, 100% { transform: perspective(500px) rotateY(-10deg) rotateX(4deg) translateY(0); }
	50% { transform: perspective(500px) rotateY(10deg) rotateX(-2deg) translateY(-6px); }
}

.lm-mega-promo-name { font-size: 12.5px; line-height: 1.7; opacity: .92; }
.lm-mega-promo-price { display: flex; flex-direction: column; line-height: 1.5; }
.lm-mega-promo-price del { font-size: 11.5px; opacity: .6; }
.lm-mega-promo-price strong { font-size: 15px; color: var(--acc-2); }

.lm-mega-promo-cta {
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 700;
	padding: 7px 16px;
	border-radius: 99px;
	background: #fff;
	color: var(--c2);
}

/* Focus */

.lm-mega a:focus-visible {
	outline: 2px solid var(--acc, #c91c7b);
	outline-offset: 2px;
}

/* ---------- Responsive / motion ---------- */

@media (max-width: 1200px) {
	.lm-mega-pane { grid-template-columns: minmax(0, 1fr) 200px; padding: 20px; }
	.lm-mega-inner { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
	.lm-mega--main { display: none; }
	.lm-mega-host > a::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lm-mega--main .lm-mega-inner,
	.lm-mega-pane,
	.lm-mega .lm-mega-tile,
	.lm-mega-tile-img { transition: none; }
	.lm-mega-promo-img { animation: none; }
	.lm-mega-tile:hover .lm-mega-tile-img { transform: none; }
}
