/* =====================================================================
   Connect Products Menu — compact two-column collapsible menu (Variant C)
   All selectors are namespaced under .cpm so nothing leaks into Avada.
   ===================================================================== */
.cpm {
	--cpm-maroon: #7a1530;
	--cpm-gold: #e6a33c;
	--cpm-ink: #1c1b1d;
	--cpm-ink-soft: #55525a;
	--cpm-line: rgba(20, 16, 22, .10);
	--cpm-line-strong: rgba(20, 16, 22, .16);
	--cpm-hover: #f6f1f2;
	--cpm-cond: "Barlow Semi Condensed", "Barlow Condensed", "Oswald", inherit, system-ui, sans-serif;
	color: var(--cpm-ink);
	font-family: inherit;
}
.cpm *,
.cpm *::before,
.cpm *::after { box-sizing: border-box; }
.cpm mark.cpm-hl { background: rgba(230, 163, 60, .42); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---------- Top bar: search + tools ---------- */
.cpm-bar {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	padding-bottom: 16px; margin-bottom: 16px;
	border-bottom: 1px solid var(--cpm-line);
}
.cpm-search {
	flex: 1 1 280px; max-width: 420px;
	display: flex; align-items: center; gap: 9px;
	background: #f4f1f2; border: 1px solid var(--cpm-line-strong); border-radius: 8px;
	padding: 0 12px; height: 42px; color: var(--cpm-ink-soft);
}
.cpm-search:focus-within { border-color: var(--cpm-gold); background: #fff; box-shadow: 0 0 0 3px rgba(230, 163, 60, .18); }
.cpm-search svg { flex: none; }
.cpm-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 15px; color: var(--cpm-ink); }
.cpm-clear { border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--cpm-ink-soft); padding: 0 2px; cursor: pointer; }
.cpm-tools { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.cpm-count { font-size: 13px; font-weight: 500; color: var(--cpm-ink-soft); white-space: nowrap; }
.cpm-toggle-all { border: 0; background: transparent; color: var(--cpm-maroon); font-weight: 700; font-size: 13.5px; padding: 6px 4px; cursor: pointer; }
.cpm-toggle-all:hover:not(:disabled) { color: var(--cpm-gold); text-decoration: underline; }
.cpm-toggle-all:disabled { color: #bdb7bb; cursor: default; }

/* ---------- Two-column collapsible list ---------- */
.cpm-cols { columns: 2; column-gap: 40px; }
.cpm-row { break-inside: avoid; border-left: 3px solid transparent; transition: border-color .2s; margin-bottom: 2px; }
.cpm-row.is-open { border-left-color: var(--cpm-maroon); }
.cpm-row.is-hidden { display: none; }

.cpm-head {
	width: 100%; display: flex; align-items: center; gap: 11px;
	background: transparent; border: 0; padding: 9px 10px;
	text-align: left; text-decoration: none; color: inherit; cursor: pointer;
	transition: background .15s;
}
.cpm-head:hover { background: var(--cpm-hover); }
.cpm-name { flex: 1; font-family: var(--cpm-cond); font-weight: 600; font-size: 16.5px; color: var(--cpm-ink); }
.cpm-badge { font-size: 11.5px; font-weight: 700; color: var(--cpm-ink-soft); }
.cpm-chev { width: 14px; height: 14px; flex: none; color: var(--cpm-maroon); transition: transform .25s; }
.cpm-row.is-open .cpm-chev { transform: rotate(180deg); }
.cpm-leaf .cpm-chev { display: none; }

/* Accordion mechanism: grid-rows 0fr -> 1fr (no JS height math) */
.cpm-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1); }
.cpm-row.is-open .cpm-panel { grid-template-rows: 1fr; }
.cpm-panel-inner { overflow: hidden; min-height: 0; }

.cpm-items { list-style: none; margin: 0; padding: 2px 10px 12px 24px; }
.cpm-items li { margin-bottom: 7px; }
.cpm-items li.is-hidden { display: none; }
.cpm-items a {
	display: inline-block; color: var(--cpm-ink-soft); text-decoration: none;
	font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; transition: .13s;
}
.cpm-items a:hover { color: var(--cpm-maroon); border-bottom-color: var(--cpm-gold); }

.cpm-empty { padding: 24px 4px; color: var(--cpm-ink-soft); font-size: 16px; }
.cpm-notice { padding: 12px; background: #fff4f5; border: 1px solid #e0b4bc; border-radius: 6px; color: #7a1530; font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 620px) {
	.cpm-cols { columns: 1; }
	.cpm-tools { width: 100%; margin-left: 0; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
	.cpm * { transition-duration: .01ms !important; }
}