/* ==========================================================================
   CITYMALL — "Shop by Department" mega-menu (two-pane flyout)
   Ported from the IVONIX child theme, re-branded to the Citymall palette.
   Injected as the first item of the primary nav (.col-full-nav row).
   Vars (--ct-blue / --ct-navy / --ct-orange) come from header.css.
   ========================================================================== */

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

/* ---- The trigger button ---- */
.ct-dept-toggle{
	display:flex; align-items:center; gap:9px;
	background:var(--ct-blue, #1b6fb3); color:#fff;
	border:0; cursor:pointer;
	font-size:15px; font-weight:700;
	padding:11px 20px; margin:7px 16px 7px 0;
	border-radius:24px;
	line-height:1; white-space:nowrap;
}
.ct-dept-toggle svg{ stroke:#fff; }
.ct-dept-item:hover .ct-dept-toggle,
.ct-dept-item.open .ct-dept-toggle{ background:var(--ct-navy, #0e3f6e); }

/* ---- The dropdown panel (list + flyouts side by side) ---- */
.ct-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(14,63,110,.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 rail ---- */
.ct-dept-list{
	position:static !important; /* the theme styles menu <ul>s as absolute; keep it a
	   normal flex child so flyouts anchor to the 900px panel, not this 262px rail */
	width:262px; margin:0; padding:8px 0; list-style:none;
	background:linear-gradient(180deg, var(--ct-navy, #0e3f6e), var(--ct-navy2, #0a2f52));
	align-self:stretch;
}
.ct-dept-row{
	position:static !important; /* defeat the 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;
}
.ct-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;
}
.ct-dept-ic{ flex:0 0 auto; color:var(--ct-cyan, #29abe2); opacity:.95; }
.ct-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;
}
.ct-dept-row:hover{ background:rgba(255,255,255,.10); }
.ct-dept-row:hover .ct-dept-ic{ color:#fff; }
.ct-dept-row:hover .ct-dept-caret{ opacity:1; }

/* ---- Right: flyout grids (absolutely fills the area right of the rail) ---- */
.ct-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){
	.ct-dept-row:hover > .ct-dept-flyout{ display:block; }
	.ct-dept-list:not(:hover) .ct-dept-row:first-child > .ct-dept-flyout{ display:block; }
	.ct-dept-item:hover .ct-dept-panel{ display:flex; }
}
.ct-dept-item.open .ct-dept-panel{ display:flex; }

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

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

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