/* 28 Sep 2026: Daily Prices mega-menu usability (client + UX review). Loaded after the theme CSS by views/include/header.php.
   1. A tall sector panel (Chemicals) scrolls inside the menu instead of running down the page; the sector list stays put.
   2. The menu also opens on click / tap (li.dprice.ipc-open, set by js/ipc_menuux.js) and not only on hover:
      the rules below repeat the theme's ":hover" rules for that class, nothing else changes.
   3. The search suggestions show the category under the product name, and "Did you mean" close matches.
   Colours and fonts are the theme's own. */

/* ---- 1. scrolling panel (desktop menu only: on phones the desktop menu is not shown) ---- */
@media screen and (min-width: 768px) {
	.mynav ul li.dprice div.leftMenu_heading ul li nav.rightMenu_data {
		max-height: 80vh;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: #f3772d rgba(255, 255, 255, 0.12);
		/* the black strip under the sector list used to be an absolutely placed :after (it would scroll away): drawn as the panel background instead */
		background-color: rgba(17, 35, 57, 1);
		background-image: linear-gradient(to right, #000 0, #000 20%, rgba(17, 35, 57, 1) 20%, rgba(17, 35, 57, 1) 100%);
	}
	.mynav ul li.dprice div.leftMenu_heading ul li nav.rightMenu_data::-webkit-scrollbar { width: 7px; }
	.mynav ul li.dprice div.leftMenu_heading ul li nav.rightMenu_data::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.12); }
	.mynav ul li.dprice div.leftMenu_heading ul li nav.rightMenu_data::-webkit-scrollbar-thumb { background: #f3772d; border-radius: 4px; }
	.mynav ul li.dprice div.leftMenu_heading ul li a.ready + nav.rightMenu_data:after { display: none; }
	/* the sector list (the 20% left strip) is the reference for the panel's top; the panel keeps the theme's position */
}

/* ---- 2. open by click / tap: the theme's ":hover" rules, repeated for li.dprice.ipc-open ---- */
.mynav ul li.dprice.ipc-open > a { background-color: rgb(0 112 255); color: #fff; }
.mynav ul li.dprice.ipc-open div.tree_menu { display: block; left: 0; position: absolute; background-color: rgba(17, 35, 57, 1); padding-bottom: 20px; width: 100%; height: auto; z-index: 110; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading { float: left; width: 100%; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul { margin: 0; padding: 0; list-style: none; width: 100%; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li { float: none; margin: 0 0 5px 0; padding: 0; clear: both; display: block; margin-bottom: 0; padding-bottom: 5px; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li a { position: relative; width: auto; max-width: none; padding-left: 3%; z-index: 99; box-sizing: border-box; color: #f3772d; font-size: 1.2rem; display: inline-block; line-height: 30px; padding-right: 10px; background: none; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li a:hover, .mynav ul li.dprice.ipc-open div.leftMenu_heading ul li a.ready { background-color: transparent; color: #fff !important; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li a span { font-family: 'FontAwesome-alloy'; float: right; padding-right: 10px; padding-left: 5px; opacity: 0; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li a:hover span, .mynav ul li.dprice.ipc-open div.leftMenu_heading ul li a.ready span { opacity: 1; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li a.noHover { cursor: default; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li a.noHover:hover { background: 0; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li a.ready + nav.rightMenu_data { display: block; width: 100%; background-color: rgba(17, 35, 57, 1); height: auto; min-height: 100%; padding: 18px 25px 25px 25px; box-sizing: border-box; position: absolute; top: 0; padding-top: 15px; right: 0; padding-left: 22%; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li nav.rightMenu_data ul { list-style: none; padding: 0; margin: 0; float: left; width: 205px; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li nav.rightMenu_data ul span { display: block; font-size: 14px; color: #f3772d; line-height: 30px; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li nav.rightMenu_data ul span a { color: #f3772d; text-decoration: none; padding-left: 0; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li nav.rightMenu_data ul li { float: none; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li nav.rightMenu_data ul li a { font-size: 12px; color: #f5f5f7 !important; line-height: 1.8 !important; width: 100%; max-width: none; padding-left: 0; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li nav.rightMenu_data ul li a:hover { background: 0; color: #ffa137 !important; }
.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li nav.rightMenu_data ul li a:before { display: none; }
@media only screen and (max-width: 1024px) and (min-width: 767px) {
	.mynav ul li.dprice.ipc-open div.leftMenu_heading ul li nav.rightMenu_data ul { max-width: 185px; }
	body .mynav ul li.dprice.ipc-open div.leftMenu_heading ul li nav.rightMenu_data ul li a { line-height: 25px !important; }
}
/* closed by a click while the pointer (or a touch screen's sticky hover) is still over the menu: stay closed until the pointer leaves */
.mynav ul li.dprice.ipc-closed div.tree_menu { display: none !important; }
.mynav ul li.dprice.ipc-closed > a { background-color: transparent; }
/* the sector names are buttons now (click opens): show the hand */
.mynav ul li.dprice div.leftMenu_heading ul li.leftm > a { cursor: pointer; }

/* ---- 3. search suggestions: product name + category, "Did you mean" heading ---- */
.ui-autocomplete.ipc-sug { max-height: 60vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.ui-autocomplete.ipc-sug .ui-menu-item a { padding: 4px 8px; line-height: 1.3; }
.ui-autocomplete.ipc-sug .ipc-sug-cat { display: block; font-size: 11px; opacity: 0.75; line-height: 1.2; }
.ui-autocomplete.ipc-sug .ipc-sug-head { display: block; padding: 5px 8px 2px; font-size: 11px; color: #f3772d; text-transform: uppercase; letter-spacing: 0.03em; cursor: default; }
.ui-autocomplete.ipc-sug .ipc-sug-none { display: block; padding: 6px 8px; cursor: default; }