:root {
    --cx-blue: #1e3a8a;
    --cx-blue-light: #e0e7ff;
    --cx-blue-bg: #f8fafc;
    --cx-border: #cbd5e1;
}

/* Master-detail layout */
.cx-master-detail{display:flex;gap:24px;align-items:flex-start}

/* Controls */
.cx-controls{margin-bottom:20px}
.cx-search{width:100%;padding:14px 18px;border:2px solid var(--cx-border);border-radius:16px;font-size:1rem;background:#fff;transition:border-color .2s}
.sr-only{position:absolute!important;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header with search layout */
.cx-head--with-search{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cx-head--with-search .cx-title{margin:0;font-size:clamp(1.2rem,2.2vw,1.6rem)}
.cx-head--with-search .cx-controls{margin:0;flex:0 0 360px}
.cx-head--with-search .cx-search{width:100%;padding:10px 14px;border-radius:12px}

@media (max-width: 720px){
    .cx-head--with-search{flex-direction:column;align-items:flex-start;gap:12px}
    .cx-head--with-search .cx-controls{width:100%;flex:1 1 auto}
}
.cx-search:focus{border-color:var(--cx-blue);outline:none}

/* Left column */
.cx-left{flex:0 0 340px;border:2px solid var(--cx-border);border-radius:16px;padding:16px;background:var(--cx-blue-bg);max-height:75vh;overflow-y:auto;box-shadow:0 4px 20px rgba(30,58,138,0.1)}
.cx-left-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cx-left-item{padding:14px;border-radius:12px;cursor:pointer;transition:all .2s;background:#fff;border:1px solid transparent}
.cx-left-item[aria-selected="true"],.cx-left-item:focus{background:var(--cx-blue-light);border-color:var(--cx-blue);box-shadow:0 2px 8px rgba(30,58,138,0.15)}
.cx-left-content{display:flex;gap:14px;align-items:center}
.cx-left-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--cx-blue);background:#fff;border-radius:8px;border:1px solid var(--cx-border)}
.cx-left-text{flex:1}
.cx-left-link{text-decoration:none;color:#1f2937;font-weight:700}
.cx-count{font-size:.85rem;color:#6b7280;margin-left:8px}

/* Right column */
.cx-right{flex:1;min-height:500px}
.cx-panel{display:none;padding:15px;background:#fff;border:2px solid var(--cx-border);border-radius:16px;box-shadow:0 4px 20px rgba(30,58,138,0.1);animation:slideIn .3s ease;}
.cx-panel[aria-hidden="false"]{display:block}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.cx-panel-head{display:flex;justify-content:space-between;align-items:center;padding:0 0 20px 0;border-bottom:2px solid var(--cx-border);margin-bottom:20px}
.cx-panel-title{margin:0;font-size:1.25rem;color:var(--cx-blue);font-weight:800}
.cx-panel-all{text-decoration:none;font-weight:700;color:var(--cx-blue);padding:8px 16px;border:1px solid var(--cx-blue);border-radius:8px;transition:background .2s}
.cx-panel-all:hover{background:var(--cx-blue);color:#fff}

.cx-tree{padding-top:16px}
.cx-level{list-style:none;margin:0;padding:0}
.cx-level-2 > .cx-node{padding:16px 0;border-bottom:1px solid #f1f5f9;background:#fafbfc;border-radius:8px;margin-bottom:8px;padding-left:16px;padding-right:16px}
.cx-node-head{display:flex;align-items:center;gap:12px}
.cx-node-toggle{background:#fff;border:1px solid var(--cx-border);border-radius:6px;cursor:pointer;min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--cx-blue);transition:all .2s}
.cx-node-toggle:hover{background:var(--cx-blue);color:#fff}
.cx-node-toggle[aria-expanded="true"]{transform:rotate(90deg);background:var(--cx-blue);color:#fff}
.cx-node-link{text-decoration:none;color:#374151;font-weight:600;transition:color .2s}
.cx-node-link:hover{color:var(--cx-blue)}
.cx-level-3{padding-left:60px;margin-top:12px;animation:fadeIn .2s ease;border-left:2px solid var(--cx-border);padding-left:20px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.cx-node--leaf{padding:12px 0;border-bottom:1px dashed #e2e8f0;margin-bottom:8px;background:#f8fafc;border-radius:6px;padding-left:16px;padding-right:16px}

/* Highlight */
.cx-highlight{background:linear-gradient(90deg,#fef3c7,#fde68a);padding:2px 6px;border-radius:6px;font-weight:700}

.cx-left-item:hover{background:#f1f5f9;transform:translateY(-2px);box-shadow:0 8px 20px rgba(30,58,138,0.15)}
.cx-node:hover{background:#f1f5f9;border-radius:8px;box-shadow:0 4px 12px rgba(30,58,138,0.1)}
.cx-node-link:hover{color:var(--cx-blue)}
.ep-catalog-explore--strict{
    justify-content:space-between; /* розташує дитячі елементи по боках */
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

/* На мобільних — стекати вертикально */
@media (max-width:768px){
    .ep-catalog-explore--strict{
        flex-direction:column;
        align-items:stretch;
    }
}

.cx-head{margin-bottom:20px}
.cx-title{margin:0 0 8px 0;font-size:clamp(1.4rem,2.5vw,1.8rem);color:var(--cx-blue);font-weight:800}
.cx-subtitle{margin:0;color:#6b7280;font-size:1.1rem}

.cx-list{display:flex;flex-direction:column;gap:12px}
.cx-cat{border:2px solid var(--cx-border);border-radius:16px;background:#fff;box-shadow:0 4px 20px rgba(30,58,138,0.1)}
.cx-cat__head{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;border-radius:14px 14px 0 0}
.cx-cat__head:focus{outline:2px solid var(--cx-blue);outline-offset:2px;border-radius:12px}
.cx-link{text-decoration:none;color:#1f2937;font-weight:700}
.cx-toggle{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--cx-border);background:#fff;border-radius:8px}
.cx-chevron{width:12px;height:12px;border-right:2px solid #374151;border-bottom:2px solid #374151;transform:rotate(-45deg);transition:transform .18s ease}
.cx-toggle[aria-expanded="true"] .cx-chevron{transform:rotate(45deg)}
.cx-cat__body{border-top:2px solid var(--cx-border)}
.cx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px 18px}
.cx-item{display:block;text-decoration:none;color:#1f2937;border:1px solid var(--cx-border);border-radius:10px;padding:12px 16px;background:#fafbfc;font-weight:600;transition:background .2s}
.cx-item:hover{background:#f1f5f9;border-color:var(--cx-blue)}
.cx-empty{display:block;color:#6b7280;padding:16px 18px;font-style:italic}
@media (max-width: 900px){.cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 560px){.cx-grid{grid-template-columns:1fr}}
@media (max-width: 768px){.cx-master-detail{flex-direction:column;gap:16px}.cx-left{flex:0 0 auto;max-height:none}}