/* Auto Subcategories Menu — plugin styles (theme-independent) */

:root {
	/* Category image size in submenus — change this to make images bigger/smaller */
	--asm-cat-img-size: 42px;
	/* Width of a "Defined width" mega menu panel */
	--asm-mega-width: 1200px;
}

/* --- Category images --- */
li.asm-has-image > a {
	display: inline-flex !important;
	align-items: center;
	/* Woodmart sizes its menu images (18px default) via these variables */
	--nav-img-width: var(--asm-cat-img-size);
	--nav-img-height: var(--asm-cat-img-size);
}

/* Covers both the plugin's own images (asm-cat-img) and Woodmart's (wd-nav-img) */
li.asm-has-image > a img.asm-cat-img,
li.asm-has-image > a img.wd-nav-img {
	width: var(--asm-cat-img-size) !important;
	height: var(--asm-cat-img-size) !important;
	max-width: var(--asm-cat-img-size) !important;
	max-height: var(--asm-cat-img-size) !important;
	/* "contain" shows the whole picture without cropping */
	object-fit: contain;
	background: #fff;
	border: 1px solid #c8c8c8;
	border-radius: 8px;
	padding: 3px;
	margin-inline-end: 10px;
	flex: 0 0 auto;
}

/* --- Mega menu (desktop only; mobile menus keep the theme's default look) --- */
@media (min-width: 1025px) {

	li.asm-style-mega {
		position: static !important;
	}

	/* Full-width panel: generic themes (ul.sub-menu) and Woodmart (div.wd-dropdown-menu) */
	li.asm-style-mega > ul.sub-menu,
	li.asm-style-mega > .wd-dropdown-menu {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		/* No gap between the menu bar and the panel, so hover doesn't break */
		top: 100% !important;
		margin-top: 0 !important;
	}

	/* Generic themes: the panel needs its own background */
	li.asm-style-mega > ul.sub-menu {
		background: #fff;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
	}

	/* Columns: each first-level subcategory becomes a column */
	li.asm-style-mega > ul.sub-menu,
	li.asm-style-mega > .wd-dropdown-menu .wd-sub-menu {
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
		gap: 20px 30px;
		padding: 25px 30px;
	}

	/* Column headings (first-level subcategories) */
	li.asm-style-mega > ul.sub-menu > li > a,
	li.asm-style-mega > .wd-dropdown-menu .wd-sub-menu > li > a {
		font-weight: 600;
	}

	/* Nested lists inside the mega panel: always visible, flattened into the column */
	li.asm-style-mega ul.sub-menu ul,
	li.asm-style-mega .wd-sub-menu ul {
		position: static !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		box-shadow: none !important;
		border: 0 !important;
		background: transparent !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 6px 0 0 !important;
		padding: 0 !important;
	}

	/* Hide submenu-opener arrows inside the mega panel (Woodmart) */
	li.asm-style-mega .wd-sub-menu .wd-nav-opener {
		display: none !important;
	}

	/* "Defined width" mega menu: the outer panel keeps spanning edge to edge
	   (its position is calculated by the theme and is hard to override
	   reliably), but it's made invisible. Its content wrapper becomes the
	   visible "card" instead: capped to a fixed width, centered, with its
	   own background/shadow/padding (so there's no empty gap above it). */
	li.asm-mega-contained > .wd-dropdown-menu {
		background: transparent !important;
		box-shadow: none !important;
		padding: 0 !important;
	}

	li.asm-mega-contained > .wd-dropdown-menu > .container {
		max-width: var(--asm-mega-width) !important;
		margin-inline: auto !important;
		background: #fff;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
		border-radius: 8px;
		padding: 25px 30px !important;
	}

	/* Generic themes: the panel itself is the card */
	li.asm-mega-contained > ul.sub-menu {
		max-width: var(--asm-mega-width) !important;
		margin-inline: auto !important;
		border-radius: 8px;
	}
}

/* --- Products column in the mega menu --- */
.asm-products {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.asm-products-title {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.5px;
}

a.asm-product {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

a.asm-product img,
img.asm-product-img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #c8c8c8;
	border-radius: 8px;
	padding: 3px;
	flex: 0 0 auto;
}

.asm-product-name {
	font-size: 14px;
	line-height: 1.35;
}

a.asm-product:hover .asm-product-name {
	text-decoration: underline;
}

/* Hide the products column in mobile menus */
@media (max-width: 1024px) {
	li.asm-products-item {
		display: none !important;
	}
}