/**
 * Shop Kit · Mega menu — the panel under a top-level menu item (markup: mega-menu.php).
 *
 * Theme-agnostic: nothing here knows the menu bar. The parent theme's adapter
 * (themes/<theme>.css) makes the bar the panel's containing block and keeps the parent <li>
 * static; a store sets the look by redefining the --sk-mega-* tokens in its own stylesheet,
 * loaded after this one (Love Pharm: assets/css/mega-menu.css reads the store's --plp-* tokens).
 *
 * The pattern (Revolve): a white surface the bar's full width, its content in the page's
 * content column; columns of plain links under a titled hairline; product tiles beside them.
 * Hairlines, no shadow. The panel is display:none while closed (its images are lazy, so a
 * closed panel costs no requests) and fades in through @starting-style where supported.
 */

:root {
	--sk-mega-bg: #ffffff;
	--sk-mega-ink: #1a1a1a;
	--sk-mega-muted: #6b6560;
	--sk-mega-line: #e2e2e2;               /* the hairlines: over and under the panel, under each column title */
	--sk-mega-focus: #1a1a1a;              /* keyboard focus ring */
	--sk-mega-content-width: 1200px;       /* the page's content column (the store sets its own) */
	--sk-mega-gutter: 24px;                /* the content column's side padding */
	--sk-mega-pad-top: 36px;
	--sk-mega-pad-bottom: 40px;
	--sk-mega-block-gap: clamp(40px, 5vw, 64px);   /* the columns ↔ the tiles (gives way on a narrow desktop) */
	--sk-mega-col-gap: clamp(32px, 4vw, 56px);     /* between columns */
	--sk-mega-col-min: 160px;
	--sk-mega-title-size: 14px;
	--sk-mega-title-weight: 600;
	--sk-mega-title-gap: 10px;             /* title → its hairline */
	--sk-mega-list-gap: 12px;              /* hairline → the first link */
	--sk-mega-link-size: 14px;
	--sk-mega-link-weight: 400;
	--sk-mega-link-row: 30px;              /* one link's line box */
	--sk-mega-all-gap: 6px;                /* air over the parent's own "כל ה…" link */
	--sk-mega-underline: 1px;              /* hover cue: a thin underline under the name */
	--sk-mega-underline-offset: 4px;
	--sk-mega-tile-w: 200px;
	--sk-mega-tile-min: 140px;
	--sk-mega-tile-gap: 24px;
	--sk-mega-tile-ratio: 4 / 5;
	--sk-mega-tile-bg: #f3f3f3;            /* the photo's backdrop */
	--sk-mega-tile-pad: 10%;               /* the photo's inset in its box (a processed photo may zero it) */
	--sk-mega-tile-text-gap: 12px;         /* photo → name */
	--sk-mega-name-size: 14px;
	--sk-mega-name-weight: 600;
	--sk-mega-text-size: 13px;
	--sk-mega-price-size: 14px;
	--sk-mega-price-weight: 500;
	--sk-mega-motion: 120ms;               /* the fade; a harness sets 0ms */
	--sk-mega-open-delay: 0ms;             /* read by mega-menu.js — the panel opens the moment the pointer arrives (the owner, 2026-10-12: intent delays "feel stuck") */
	--sk-mega-close-delay: 60ms;           /* a grace that only bridges the seam between two items, below what a hand feels */
	--sk-mega-z: 30;                       /* the panel inside the bar's stacking context */
}

/* ---------- the panel: a surface hanging from the bar, closed until opened */
.sk-mega {
	display: none;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: var(--sk-mega-z);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: var(--sk-mega-bg);
	border-top: 1px solid var(--sk-mega-line);
	border-bottom: 1px solid var(--sk-mega-line);
	color: var(--sk-mega-ink);
	text-align: start;
	font-weight: var(--sk-mega-link-weight);
	line-height: 1.4;
	opacity: 1;
	transition: opacity var(--sk-mega-motion) ease-out, display var(--sk-mega-motion) allow-discrete;
}
.sk-mega-parent.is-open > .sk-mega,
.sk-mega-parent:focus-within > .sk-mega,
html:not(.sk-mega-js) .sk-mega-parent:hover > .sk-mega {
	display: block;
}
@starting-style {
	.sk-mega-parent.is-open > .sk-mega,
	.sk-mega-parent:focus-within > .sk-mega,
	html:not(.sk-mega-js) .sk-mega-parent:hover > .sk-mega {
		opacity: 0;
	}
}
.sk-mega-parent.is-dismissed > .sk-mega {
	display: none !important;   /* Escape: closed until the pointer leaves or focus moves on */
}
@media (prefers-reduced-motion: reduce) {
	.sk-mega {
		transition: none;
	}
}

/* ---------- the content column */
.sk-mega__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--sk-mega-block-gap);
	box-sizing: content-box;              /* the content width is the content; the gutters are padding outside it — the page's column */
	max-width: var(--sk-mega-content-width);
	margin-inline: auto;
	padding: var(--sk-mega-pad-top) var(--sk-mega-gutter) var(--sk-mega-pad-bottom);
}

/* ---------- columns */
.sk-mega__columns {
	display: flex;
	flex: 0 1 auto;
	gap: var(--sk-mega-col-gap);
	min-width: 0;
}
.sk-mega__col {
	flex: 0 1 auto;
	min-width: var(--sk-mega-col-min);
}
.sk-mega__title {
	margin: 0 0 var(--sk-mega-list-gap);
	padding: 0 0 var(--sk-mega-title-gap);
	border-bottom: 1px solid var(--sk-mega-line);
	font-size: var(--sk-mega-title-size);
	font-weight: var(--sk-mega-title-weight);
	line-height: 1.3;
	color: var(--sk-mega-ink);
}
.sk-mega__title-link {
	color: inherit;
	text-decoration: none;
}
.sk-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sk-mega__item {
	display: block;
	margin: 0;
	padding: 0;
}
.sk-mega__item--all {
	margin-top: var(--sk-mega-all-gap);
}
.sk-mega__link {
	display: inline-block;
	padding: 0;
	line-height: var(--sk-mega-link-row);
	font-size: var(--sk-mega-link-size);
	font-weight: var(--sk-mega-link-weight);
	color: var(--sk-mega-ink);
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- tiles */
.sk-mega__tiles {
	display: flex;
	align-items: flex-start;
	gap: var(--sk-mega-tile-gap);
	flex: 0 1 auto;
	min-width: 0;
}
.sk-mega__tiles--column {
	margin-top: var(--sk-mega-list-gap);
}
.sk-mega__tile {
	display: block;
	flex: 0 1 var(--sk-mega-tile-w);
	min-width: var(--sk-mega-tile-min);
	color: var(--sk-mega-ink);
	text-decoration: none;
}
.sk-mega__tile-media {
	display: block;
	aspect-ratio: var(--sk-mega-tile-ratio);
	box-sizing: border-box;
	overflow: hidden;
	background: var(--sk-mega-tile-bg);
}
.sk-mega__img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: var(--sk-mega-tile-pad);
	object-fit: contain;
}
.sk-mega__tile-name,
.sk-mega__tile-text,
.sk-mega__tile-price {
	display: block;
	line-height: 1.35;
}
.sk-mega__tile-name {
	margin-top: var(--sk-mega-tile-text-gap);
	font-size: var(--sk-mega-name-size);
	font-weight: var(--sk-mega-name-weight);
}
.sk-mega__tile-text {
	margin-top: 2px;
	font-size: var(--sk-mega-text-size);
	color: var(--sk-mega-muted);
}
.sk-mega__tile-price {
	margin-top: 4px;
	font-size: var(--sk-mega-price-size);
	font-weight: var(--sk-mega-price-weight);
	font-variant-numeric: tabular-nums;
}
.sk-mega__tile-price del {
	color: var(--sk-mega-muted);
	font-weight: var(--sk-mega-link-weight);
}

/* ---------- hover and focus */
@media (hover: hover) {
	.sk-mega__link:hover,
	.sk-mega__title-link:hover,
	.sk-mega__tile:hover .sk-mega__tile-name {
		text-decoration: underline;
		text-decoration-thickness: var(--sk-mega-underline);
		text-underline-offset: var(--sk-mega-underline-offset);
	}
}
.sk-mega__link:focus-visible,
.sk-mega__title-link:focus-visible,
.sk-mega__tile:focus-visible {
	outline: 2px solid var(--sk-mega-focus);
	outline-offset: 2px;
}

/* ---------- below the desktop breakpoint (993px, the kit's: Shoptimizer's and Bootstrap's "lg")
 * the bar is a theme's drawer or hidden: the panel's links print inline under the parent, no
 * titles and no tiles, so a theme that lists this menu on phones still shows the children. */
@media (max-width: 992px) {
	.sk-mega,
	.sk-mega-parent.is-dismissed > .sk-mega {
		display: block !important;
		position: static;
		border: 0;
		opacity: 1;
		transition: none;
	}
	.sk-mega__inner {
		display: block;
		padding: 0;
	}
	.sk-mega__columns {
		display: block;
	}
	.sk-mega__title,
	.sk-mega__tiles {
		display: none;
	}
}