/* ===========================================================================
   Category menu - shared by every storefront.
   Covers both places the category list is rendered:
     - desktop: the CATEGORII dropdown in .header-bottom (and the same list left
       permanently open on the home page), whose subcategories fly out sideways;
     - mobile: a full-width Categorii button that drops a full-width panel, with
       a +/- on every category that has subcategories.

   Loaded after the theme css, so the plain selectors below already outrank the
   theme rules they replace - no !important needed except where a per-site
   inline <style> block would otherwise win on source order.

   Per-shop colours come from the custom properties; a site override sets them
   on :root instead of restating any of these rules. See
   ui/sites/newshop.beurer.ro/template_header_top.htm for an example.
   =========================================================================== */

:root {
	--catmenu-accent: #26c;
	--catmenu-accent-hover: #1a52a8;
	--catmenu-bg: #fff;
	--catmenu-text: #333;
	--catmenu-border: #eee;
}

/* icons (cdn/<domain>/categories/<slug>.svg, emitted by
   part_build_category_list_menu.htm) are a mobile-only affordance - the desktop
   dropdown is a dense text list with no room for them */
.categ-icon {
	display: none;
}

/* ---------------------------------------------------------------- desktop - */
@media (min-width: 992px) {
	/* First level. Long category lists scroll rather than running off the bottom
	   of the window - which is exactly why the flyouts below are taken out to
	   position:fixed, since this overflow would otherwise clip them. Nothing in
	   here may create a containing block for fixed descendants, so the theme's
	   transform-based reveal has to go (it only animated the drop-in). */
	.menu ul.categmenu {
		min-width: 26rem;
		max-height: 70vh;
		overflow-x: hidden;
		overflow-y: auto;
		transform: none !important;
	}

	.menu ul.categmenu li a {
		color: var(--catmenu-text);
		text-transform: none;
	}

	.menu ul.categmenu li > a:hover,
	.menu ul.categmenu li.active > a {
		color: var(--catmenu-accent);
	}

	/* Second level: a normal sideways flyout, parked off-screen until catmenu.js
	   gives it real coordinates on hover. It is fixed rather than absolute even
	   while hidden, so that it contributes nothing to the scrollable area of the
	   dropdown above - an absolutely positioned box at left:100% still counts
	   towards an ancestor's scrollWidth even when invisible, which is what used
	   to force a horizontal scrollbar in here. */
	.menu ul.categmenu li > ul {
		position: fixed;
		left: -9999px;
		top: -9999px;
		min-width: 22rem;
		/* !important because main.js's initMenu() writes an inline margin-left on
		   every .main-nav .submenu > ul to pull wide flyouts back on screen. It
		   measures once, at load, while this dropdown is still parked off-canvas,
		   so the number is meaningless here - and it would be applied on top of
		   the coordinates catmenu.js works out, which already keep the flyout
		   inside the viewport. */
		margin: 0 !important;
		padding: 1rem 0;
		background: var(--catmenu-bg);
		box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
		border-radius: 3px;
		overflow-y: auto;
		/* instant - the flyout is placed on mouseenter and sent back off-screen on
		   mouseleave, so a fade would only show it on its way to -9999px */
		transition: none;
		transform: none !important;
	}

	.menu ul.categmenu li > ul li {
		padding: 0 1.5rem;
	}

	/* A right-pointing chevron on the categories that have subcategories, since
	   that is the direction they open. Keyed off :has() rather than off the
	   .submenu class main.js adds, so the marker cannot quietly vanish whenever
	   main.js does not run - which is also why the pseudo-element is spelled out
	   in full here instead of leaning on white.css's .submenu > a:after. */
	.menu ul.categmenu li:has(> ul) > a {
		position: relative;
		display: block;
	}

	.menu ul.categmenu li:has(> ul) > a:after {
		content: "\f054";
		display: inline-block;
		position: absolute;
		right: 1rem;
		top: 50%;
		margin-top: 0;
		line-height: 0;
		vertical-align: middle;
		font-family: "Font Awesome 5 Free";
		font-weight: 700;
		font-size: 1.1rem;
		color: inherit;
	}
}

/* ----------------------------------------------------------------- mobile - */
/* the desktop CATEGORII/Promotii/... bar is replaced by .mobile-categ-bar down
   here. .d-lg-show is the class the markup already uses to say "desktop only",
   but white.css - unlike every other skin in this theme - never defines it. */
@media (max-width: 991px) {
	.header-bottom.d-lg-show {
		display: none !important;
	}

	.mobile-categ-bar {
		display: block;
		position: relative;
		z-index: 500;
		background: var(--catmenu-bg);
		border-bottom: 1px solid var(--catmenu-border);
	}

	/* edge to edge: the button and the panel are the full width of the screen,
	   not of the header's padded container. display:block because .container
	   inside a .header is a flex row in this theme, which was laying the panel
	   out *beside* the button and leaving each of them roughly half-width. */
	.mobile-categ-bar > .container {
		display: block;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.mobile-categ-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 1.3rem 1.6rem;
		background: var(--catmenu-accent);
		color: #fff;
		font-size: 1.5rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		transition: background 0.2s;
	}

	.mobile-categ-trigger:hover,
	.mobile-categ-trigger:focus,
	.mobile-categ-trigger.open {
		background: var(--catmenu-accent-hover);
		color: #fff;
	}

	.mobile-categ-trigger i {
		font-size: 1.4rem;
		transition: transform 0.3s;
	}

	.mobile-categ-trigger.open i {
		transform: rotate(180deg);
	}

	.mobile-categ-panel {
		display: none;
		background: var(--catmenu-bg);
	}

	.mobile-categ-panel.open {
		display: block;
	}

	/* the panel reuses .mobile-menu (so main.js's +/- slide-toggle picks it up),
	   which is styled for the theme's dark off-canvas drawer - repaint it light */
	.mobile-categ-panel .mobile-menu,
	.mobile-categ-panel .mobile-menu li a {
		background: var(--catmenu-bg);
		color: var(--catmenu-text);
	}

	.mobile-categ-panel .mobile-menu li:not(:last-child) {
		border-bottom: 1px solid var(--catmenu-border);
	}

	.mobile-categ-panel .mobile-menu li a {
		padding: 1.4rem 5.2rem 1.4rem 1.6rem;
		text-transform: none;
		font-size: 1.4rem;
	}

	.mobile-categ-panel .mobile-menu li li a {
		padding-left: 3.4rem;
		font-weight: 400;
	}

	.mobile-categ-panel .mobile-menu li.active > a {
		color: var(--catmenu-accent);
	}

	.mobile-categ-panel .categ-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.2rem;
		height: 2.2rem;
		margin-right: 1rem;
		vertical-align: middle;
		flex-shrink: 0;
	}

	.mobile-categ-panel .categ-icon img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

/* The +/- opener. main.js appends a bare <span class="toggle-btn"> inside the
   <a> of every .mobile-menu li that ends in a <ul> and slide-toggles that <ul>
   on click. The look is ours - for the panel above and equally for the category
   list some stores also keep in the off-canvas hamburger menu.

   Everything reset here is white.css's own .toggle-btn, which is built as a
   small Font Awesome chevron pinned to the vertical middle: top:50% +
   translateY(-50%) (which fought the full-height tap target below), opacity .6,
   a 1rem FA glyph, and a 630deg spin on .show. Sized to be tappable on its own,
   so hitting "expand" never means accidentally opening the category instead. */
.mobile-menu .toggle-btn {
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 100%;
	padding: 0;
	opacity: 1;
	transform: none;
	color: #999;
	cursor: pointer;
}

.mobile-menu .toggle-btn:before,
.mobile-menu li.show > a > .toggle-btn:before {
	font-family: inherit;
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 1;
	transform: none;
	transition: none;
}

.mobile-menu .toggle-btn:before {
	content: "+";
}

.mobile-menu li.show > a > .toggle-btn:before {
	content: "\2212";
}

/* hidden on desktop, where the CATEGORII dropdown takes over. Repeated with
   !important because a per-site inline <style> block sits after this file in
   the <head> and would otherwise win the source-order tie. */
@media (min-width: 992px) {
	.mobile-categ-bar {
		display: none !important;
	}
}