/* ==========================================================================
   IVONIX — "Shop by Department" mega-menu (Newegg-style flyout)
   Injected as the first item of the primary nav (.col-full-nav row).
   Vars (--ivx-navy / --ivx-navy-2 / --ivx-accent) come from style.css.
   ========================================================================== */

.ivx-dept-item{ position:relative; list-style:none; }

/* ---- The trigger button ---- */
.ivx-dept-toggle{
	display:flex; align-items:center; gap:9px;
	background:var(--ivx-accent, #f5821f); color:#1a1a1a;
	border:0; cursor:pointer;
	font-size:15px; font-weight:700;
	padding:11px 18px; margin:0;
	line-height:1; white-space:nowrap;
}
.ivx-dept-toggle svg{ stroke:#1a1a1a; }
.ivx-dept-item:hover .ivx-dept-toggle,
.ivx-dept-item.open .ivx-dept-toggle{ filter:brightness(.94); }

/* ---- The dropdown panel (list + flyouts side by side) ---- */
.ivx-dept-panel{
	position:absolute; top:100%; left:0; z-index:1200;
	display:none;
	min-width:900px; min-height:428px;
	background:#fff;
	border-radius:0 0 6px 6px;
	box-shadow:0 18px 40px rgba(0,0,0,.28);
	overflow:hidden;
}
/* The panel (position:absolute) is the containing block for the flyouts, so the
   rows must NOT be positioned — otherwise the flyout sizes to the 262px row. */

/* ---- Left: department list ---- */
.ivx-dept-list{
	position:static !important; /* theme styles menu <ul>s as absolute; keep it a
	   normal flex child so flyouts anchor to the 900px panel, not this 262px list */
	width:262px; margin:0; padding:8px 0; list-style:none;
	background:var(--ivx-navy-2, #123fa8);
	align-self:stretch;
}
.ivx-dept-row{
	position:static !important; /* defeat theme's li{position:relative} so the
	   flyout anchors to the 900px panel, not this 262px row */
	display:flex !important; align-items:center; flex-wrap:nowrap;
	margin:0; padding:0; list-style:none;
}
.ivx-dept-rowlink{
	display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0;
	padding:10px 8px 10px 18px;
	color:#fff !important; text-decoration:none;
	font-size:14px; font-weight:500; line-height:1.2;
}
.ivx-dept-ic{ flex:0 0 auto; opacity:.9; }
.ivx-dept-caret{
	display:flex; align-items:center; justify-content:center; flex:0 0 auto;
	background:transparent; border:0; cursor:pointer;
	color:#fff; opacity:.6; padding:10px 14px; margin:0;
}
.ivx-dept-row:hover{ background:rgba(255,255,255,.10); }
.ivx-dept-row:hover .ivx-dept-caret{ opacity:1; }

/* ---- Right: flyout grids (absolutely fills the area right of the list) ---- */
.ivx-dept-flyout{
	display:none;
	position:absolute; top:0; left:262px;
	width:calc(100% - 262px); min-height:100%;
	background:#fff;
	padding:20px 24px 24px;
	box-sizing:border-box;
}
/* Desktop: show hovered row's flyout; default to first row when nothing hovered */
@media (min-width:993px){
	.ivx-dept-row:hover > .ivx-dept-flyout{ display:block; }
	.ivx-dept-list:not(:hover) .ivx-dept-row:first-child > .ivx-dept-flyout{ display:block; }
	.ivx-dept-item:hover .ivx-dept-panel{ display:flex; }
}
.ivx-dept-item.open .ivx-dept-panel{ display:flex; }

.ivx-dept-flyout-head{
	font-size:16px; font-weight:700; color:var(--ivx-navy, #1a56db);
	padding-bottom:12px; margin-bottom:14px;
	border-bottom:1px solid #eceef4;
}
.ivx-dept-flyout-head a{ color:var(--ivx-navy, #1a56db); text-decoration:none; }
.ivx-dept-flyout-head a:hover{ color:var(--ivx-accent, #f5821f); }

.ivx-dept-grid{
	display:grid; grid-template-columns:repeat(3, 1fr);
	gap:6px 20px; margin:0; padding:0; list-style:none;
}
.ivx-dept-grid li{ list-style:none; margin:0; }
.ivx-dept-grid a{
	display:block; padding:7px 6px;
	color:#33373f !important; text-decoration:none;
	font-size:13.5px; line-height:1.3;
	border-radius:4px;
}
.ivx-dept-grid a:hover{ color:var(--ivx-accent, #f5821f) !important; background:#f7f8fb; }

/* ==========================================================================
   MOBILE ( <= 992px ) — the whole thing lives inside Shoptimizer's slide-out.
   Panel becomes a static accordion; caret toggles each department's grid.
   ========================================================================== */
@media (max-width:992px){
	.ivx-dept-toggle{ width:100%; justify-content:flex-start; }
	.ivx-dept-item .ivx-dept-panel{
		position:static; min-width:0; min-height:0;
		display:none; box-shadow:none; border-radius:0;
		background:var(--ivx-navy-2, #123fa8);
	}
	.ivx-dept-item.open .ivx-dept-panel{ display:block; }
	.ivx-dept-list{ width:100%; padding:0; }
	.ivx-dept-row{ flex-wrap:wrap; }
	.ivx-dept-flyout{
		position:static; width:100%; flex:0 0 100%; left:0; padding:4px 0 10px 30px;
		background:transparent;
	}
	.ivx-dept-row.open > .ivx-dept-flyout{ display:block; }
	.ivx-dept-flyout-head{ display:none; }
	.ivx-dept-grid{ grid-template-columns:1fr; gap:0; }
	.ivx-dept-grid a{ color:#dfe3f2 !important; font-size:14px; padding:8px 6px; }
	.ivx-dept-grid a:hover{ background:transparent; }
	.ivx-dept-caret{ transition:transform .15s ease; }
	.ivx-dept-row.open > .ivx-dept-caret{ transform:rotate(90deg); }
}