/* Header mega menu (see inc/sharabindu-menu.php) */

/* ---------- desktop panel ---------- */
.site-header .site-navigation li.sb-has-mega{position:relative}
.site-header .site-navigation li.sb-has-mega > ul.sub-menu{
	position:absolute !important;top:100% !important;left:-18px !important;right:auto !important;
	transform:translateY(10px);
	width:780px !important;max-width:calc(100vw - 32px);min-width:0 !important;
	margin:10px 0 0 !important;padding:14px !important;box-sizing:border-box;
	display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
	background:#fff !important;border:1px solid rgba(20,30,60,.06) !important;border-radius:16px !important;
	box-shadow:0 28px 60px -14px rgba(20,30,70,.28),0 6px 16px rgba(20,30,70,.07) !important;
	list-style:none;z-index:10000;
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
/* invisible bridge so the panel does not close while the mouse travels down to it */
.site-header .site-navigation li.sb-has-mega > ul.sub-menu:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
/* little caret */
.site-header .site-navigation li.sb-has-mega > ul.sub-menu:after{content:"";position:absolute;top:-7px;left:44px;width:12px;height:12px;background:#fff;border-left:1px solid rgba(20,30,60,.06);border-top:1px solid rgba(20,30,60,.06);transform:rotate(45deg);border-top-left-radius:3px}
.site-header .site-navigation li.sb-has-mega:hover > ul.sub-menu,
.site-header .site-navigation li.sb-has-mega:focus-within > ul.sub-menu{
	opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
}

/* ---------- item cards (desktop + mobile) ---------- */
li.sb-mega-child{list-style:none}
.site-header .site-navigation li.sb-mega-child{margin:0 !important;padding:0 !important;width:auto !important;border:0 !important;background:transparent !important;display:block !important}
li.sb-mega-child > a{
	display:flex !important;align-items:flex-start;gap:12px;
	padding:12px !important;border-radius:12px;white-space:normal;line-height:1.3;
	color:#1f2430 !important;text-decoration:none;
	transition:background .18s ease,transform .18s ease;
}
.site-header .site-navigation li.sb-mega-child > a:hover,
.site-header .site-navigation li.sb-mega-child > a:focus-visible{background:#f3f6ff !important;transform:translateY(-1px)}
.sb-mi-icon{
	flex:0 0 42px;width:42px;height:42px;border-radius:12px;
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--sb-bg,#eef0ff);color:var(--sb-c,#5b5bf0);
	transition:transform .18s ease;
}
.sb-mi-icon svg{width:22px;height:22px;display:block}
li.sb-mega-child > a:hover .sb-mi-icon{transform:scale(1.07)}
.sb-mi-text{display:block;min-width:0;padding-top:1px}
.sb-mi-title{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:#1f2430;transition:color .18s ease}
li.sb-mega-child > a:hover .sb-mi-title{color:var(--sb-c,#3d5bdc)}
.sb-mi-desc{
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
	margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.45;color:#6b7280;
}

/* icon colours */
.sb-ic-qr{--sb-c:#6c5ce7;--sb-bg:#efecff}
.sb-ic-barcode{--sb-c:#0b7ed0;--sb-bg:#e4f2fd}
.sb-ic-cart{--sb-c:#0a9a74;--sb-bg:#e2f7f0}
.sb-ic-video{--sb-c:#e0552f;--sb-bg:#fdece6}
.sb-ic-filter{--sb-c:#d6336c;--sb-bg:#fde8f0}
.sb-ic-bell{--sb-c:#d98a00;--sb-bg:#fff3d9}
.sb-ic-bolt{--sb-c:#4c5bd4;--sb-bg:#e9ecfd}

/* ---------- smaller desktop ---------- */
@media (max-width:1280px){
	.site-header .site-navigation li.sb-has-mega > ul.sub-menu{width:540px !important;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- mobile dropdown ---------- */
.site-navigation-dropdown li.sb-mega-child > a{padding:10px 14px !important;gap:12px}
.site-navigation-dropdown .sb-mi-icon{flex-basis:36px;width:36px;height:36px;border-radius:10px}
.site-navigation-dropdown .sb-mi-icon svg{width:19px;height:19px}
.site-navigation-dropdown .sb-mi-title{font-size:14px}
.site-navigation-dropdown .sb-mi-desc{font-size:12px}

@media (prefers-reduced-motion:reduce){
	.site-header .site-navigation li.sb-has-mega > ul.sub-menu,li.sb-mega-child > a,.sb-mi-icon{transition:none}
}