/*
 * «دسته‌بندی محصولات»: the category mega menu. Loaded only when the header
 * has the category button. The panel opens under the header from its start
 * edge and is as wide as its widest pane (up to the header's width), so a
 * shop with few sub-categories gets a small panel, not a wide empty one.
 */

.fh-mega {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 0;
	z-index: 50;
	inline-size: max-content;
	max-inline-size: min(100%, var(--fh-max));
	border: 1px solid var(--fh-line);
	border-radius: 20px;
	background: var(--fh-panel);
	box-shadow: 0 24px 60px rgb(20 16 40 / 0.16);
	animation: fh-mega-in 0.2s var(--fh-ease);
}

.fh-mega[hidden] {
	display: none;
}

/* A bridge over the gap, so moving the pointer down does not close it. */
.fh-mega::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 100%;
	block-size: 12px;
}

@keyframes fh-mega-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

.fh-mega__inner {
	display: grid;
	grid-template-columns: 260px minmax(0, auto);
}

/* Each side scrolls on its own; a long list never runs out under the panel. */
.fh-mega__parents,
.fh-mega__panes {
	max-block-size: min(70vh, 560px);
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--fh-fg) 18%, transparent) transparent;
}

/* Nothing to show beside the list: the list alone. */
.fh-mega.is-simple .fh-mega__inner {
	grid-template-columns: 260px;
}

.fh-mega.is-simple .fh-mega__parents {
	border-inline-end: 0;
}

.fh-mega__parents {
	margin: 0;
	padding: 12px;
	overflow-y: auto;
	border-inline-end: 1px solid var(--fh-line);
	list-style: none;
}

.fh-mega__parents a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: 48px;
	padding-inline: 12px 8px;
	border-radius: 12px;
	font-weight: 500;
	transition: background-color 0.15s, color 0.15s;
}

.fh-mega__parents a > span:not(.fh-mega__dot) {
	flex: 1;
}

.fh-mega__parents a.is-active,
.fh-mega__parents a:hover {
	background: var(--fh-soft);
	color: var(--fh-accent);
}

.fh-mega__parents img {
	flex: none;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 8px;
	object-fit: contain;
}

.fh-mega__dot {
	flex: none;
	inline-size: 8px;
	block-size: 8px;
	margin-inline: 10px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--fh-accent) 40%, transparent);
}

.fh-mega__arrow {
	opacity: 0.5;
	transform: rotate(90deg);
}

[dir="ltr"] .fh-mega__arrow {
	transform: rotate(-90deg);
}

.fh-mega__panes {
	display: grid;
	/* As tall as the category list beside it, so a banner can sit at the bottom. */
	grid-template-rows: minmax(100%, 1fr);
	min-inline-size: 320px;
	padding: 20px 24px;
	overflow-y: auto;
}

/*
 * The panes share one cell; the hidden ones keep their room, so the panel
 * takes the widest pane's width once and does not jump between categories.
 */
.fh-mega__pane {
	display: flex;
	flex-direction: column;
	grid-area: 1 / 1;
}

.fh-mega__pane[hidden] {
	display: flex;
	visibility: hidden;
}

.fh-mega__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-end: 16px;
	color: var(--fh-accent);
	font-weight: 700;
}

.fh-mega__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 32px;
	/* Four columns at most in a row. */
	max-inline-size: calc(4 * 180px + 3 * 32px);
}

.fh-mega__col {
	inline-size: 180px;
	margin-block-end: 20px;
}

.fh-mega__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 6px;
	font-weight: 700;
}

.fh-mega__head::before {
	content: "";
	inline-size: 3px;
	block-size: 14px;
	border-radius: 2px;
	background: var(--fh-accent);
}

.fh-mega__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fh-mega__col li a {
	display: block;
	padding-block: 6px;
	color: color-mix(in srgb, var(--fh-fg) 72%, transparent);
	font-size: 13px;
	transition: color 0.15s;
}

/* A sub-category with no children of its own reads as a heading, like the columns' first lines. */
.fh-mega__col.is-loose li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 0 10px;
	color: var(--fh-fg);
	font-size: inherit;
	font-weight: 700;
}

.fh-mega__col.is-loose li a::before {
	content: "";
	flex: none;
	inline-size: 3px;
	block-size: 14px;
	border-radius: 2px;
	background: var(--fh-accent);
}

.fh-mega__col a:hover,
.fh-mega__head:hover {
	color: var(--fh-accent);
}

/* The main menu's categories item as a mega menu: the panel spans the header frame. */
.fh-menu__list > li.is-catmega {
	position: static;
}

.fh-megabtn {
	display: grid;
	place-items: center;
	inline-size: 28px;
	block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: 0.7;
}

.fh-megabtn svg {
	transition: transform 0.2s var(--fh-ease);
}

.fh-megabtn[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/*
 * The promo is a wide banner under the columns. Its own width does not count,
 * so it never makes the panel wider; it is two thirds of the columns' width, pinned to
 * the bottom corner.
 */
.fh-mega__promo {
	display: block;
	contain: inline-size;
	align-self: flex-end;
	/* Two thirds of the pane wide, in its far corner; always at the bottom, however long the columns are. */
	inline-size: calc(100% * 2 / 3);
	margin-block-start: auto;
	padding-block-start: 20px;
}

.fh-mega__promo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 120px;
	border-radius: 14px;
	object-fit: cover;
}

.fh-mega__more {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	color: var(--fh-accent) !important;
	font-weight: 700;
}


.fh-mega__none {
	max-inline-size: 280px;
	margin: 0;
	color: color-mix(in srgb, var(--fh-fg) 60%, transparent);
}