/* Marketplace category system. Bootstrap owns dropdowns, collapse and offcanvas. */
.cx-market-nav { position:relative; z-index:20; border-bottom:1px solid var(--sf-line); background:#fff; }
.cx-market-inner { display:flex; align-items:center; gap:24px; min-height:56px; position:relative; }
.cx-all-link { display:flex; align-items:center; gap:8px; flex-shrink:0; font-size:13px; font-weight:700; color:var(--sf-ink); padding-block:17px; }
.cx-all-link>i { color:var(--sf-blue); }
.cx-market-families { align-items:stretch; justify-content:space-between; width:100%; }
.cx-market-dropdown { position:static; }
.cx-market-trigger { display:flex; align-items:center; gap:7px; padding:18px 4px; background:none; border:0; color:#536176; font-size:12px; white-space:nowrap; }
.cx-market-trigger>i { font-size:9px; }
.cx-market-trigger:hover,.cx-market-trigger[aria-expanded=true] { color:var(--sf-blue); }
.cx-mega-menu { inset-inline:12px!important; inset-block-start:100%!important; margin:0!important; padding:0; border:1px solid var(--sf-line); border-radius:0 0 16px 16px; box-shadow:0 20px 40px #17233520; max-height:72vh; overflow-y:auto; }
.cx-mega-intro { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:23px 28px; background:#f6f8fc; border-bottom:1px solid var(--sf-line); }
.cx-mega-intro strong { font-size:18px; }
.cx-mega-intro p { font-size:12px; color:var(--sf-muted); margin:5px 0 0; }
.cx-mega-intro>a,.cx-mega-footer>a { font-size:12px; font-weight:600; white-space:nowrap; }
.cx-mega-columns { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px; padding:26px 28px; }
.cx-mega-columns section>a { display:block; color:#637086; font-size:12px; padding:5px 0; }
.cx-mega-columns section>a:hover { color:var(--sf-blue); }
.cx-mega-columns .dropdown-item:focus,.cx-mega-columns .dropdown-item:active { color:var(--sf-blue); background:#eef3ff; }
.cx-mega-columns .cx-mega-heading { display:flex; align-items:center; gap:8px; color:var(--sf-ink); font-weight:700; font-size:13px; margin-bottom:8px; }
.cx-mega-heading>i { color:var(--sf-blue); }
.cx-mega-heading>small { margin-inline-start:auto; background:#eef3ff; color:#4667b0; padding:0 6px; border-radius:4px; font-size:10px; }
.cx-mega-footer { padding:15px 28px; border-top:1px solid var(--sf-line); display:flex; align-items:center; justify-content:space-between; }
.cx-mega-footer>span { color:var(--sf-muted); font-size:11px; }

/* Directory: search, product-family navigation and compact category cards. */
.cx-directory-hero { padding:40px 0 30px; background:#f4f6fa; border-bottom:1px solid var(--sf-line); }
.cx-directory-heading { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cx-directory-heading h1 { font-size:36px; font-weight:750; letter-spacing:-1px; line-height:1.45; margin:10px 0 8px; }
html[dir=rtl] .cx-directory-heading h1 { letter-spacing:0; }
.cx-directory-heading p { color:var(--sf-muted); font-size:14px; margin-bottom:20px; }
.cx-directory-symbol { display:grid; place-items:center; width:86px; height:86px; flex-shrink:0; background:#e6edff; color:var(--sf-blue); border:1px solid #d8e3ff; border-radius:22px; font-size:36px; transform:rotate(-8deg); margin-inline-end:15px; }
.cx-category-search { display:flex; align-items:center; gap:14px; max-width:750px; padding:7px; border:1px solid #dae1ed; border-radius:11px; background:#fff; box-shadow:0 4px 10px #23365c04; }
.cx-category-search>i { color:#8996ab; margin-inline-start:10px; }
.cx-category-search input { border:0; outline:none; width:100%; min-width:0; font-size:14px; background:transparent; padding:7px 0; }
.cx-category-search .btn { font-size:13px; min-width:85px; }
.cx-quick-links { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:20px; font-size:11px; }
.cx-quick-links>span { color:var(--sf-muted); }
.cx-quick-links>a { color:#455976; }
.cx-quick-links>a>i { color:#95a3b8; font-size:10px; }
.cx-directory-layout { display:grid; grid-template-columns:235px minmax(0,1fr); gap:40px; padding-block:40px 65px; }
.cx-family-sidebar { align-self:start; position:sticky; top:20px; }
.cx-family-sidebar>h2 { font-size:12px; color:var(--sf-muted); font-weight:600; margin:0 12px 14px; }
.cx-family-list { display:flex; flex-direction:column; gap:5px; }
.cx-family-link { display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:9px; color:#56657a; font-size:13px; border:1px solid transparent; }
.cx-family-link>i { font-size:18px; color:#7a8ba3; }
.cx-family-link>small { margin-inline-start:auto; font-size:10px; padding:2px 7px; border-radius:5px; background:#fff; }
.cx-family-link:hover { background:#f5f7fb; color:var(--sf-blue); }
.cx-family-link.active { background:#edf2ff; border-color:#dce6ff; color:#234fc4; font-weight:700; }
.cx-family-link.active>i { color:var(--sf-blue); }
.cx-framework-box { background:#f7f9fc; border:1px solid var(--sf-line); border-radius:12px; padding:20px; margin-top:30px; }
.cx-framework-box>i { font-size:22px; color:#4869b3; }
.cx-framework-box h3 { font-size:13px; line-height:1.7; margin-top:10px; font-weight:700; }
.cx-framework-box p { color:var(--sf-muted); font-size:11px; line-height:1.9; }
.cx-framework-box>div { display:flex; flex-wrap:wrap; gap:8px; }
.cx-framework-box a { font-size:10px; border:1px solid #d6dfef; border-radius:6px; background:white; padding:4px 9px; }
.cx-directory-main { min-width:0; }
.cx-family-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:23px; }
.cx-family-heading h2 { display:flex; align-items:center; gap:7px; font-size:25px; font-weight:750; margin:7px 0; }
.cx-family-heading h2 small { font-size:12px; font-weight:600; vertical-align:middle; padding:4px 8px; margin-inline-start:6px; border-radius:6px; background:#edf2ff; color:#4666b2; }
.cx-family-heading p { font-size:12px; color:var(--sf-muted); max-width:530px; margin:0; line-height:1.9; }
.cx-family-heading>a { font-size:12px; font-weight:600; white-space:nowrap; }
.cx-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.cx-category-card { border:1px solid #e0e6ef; border-radius:13px; background:#fff; overflow:hidden; transition:border-color .15s,box-shadow .15s; }
.cx-category-card:hover { border-color:#c2d2f2; box-shadow:0 5px 18px #15346a07; }
.cx-category-card>header { display:flex; align-items:flex-start; gap:13px; padding:22px 22px 16px; }
.cx-category-icon { background:#edf2ff; color:#3a63ce; width:39px; height:39px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; font-size:19px; }
.cx-category-card h3 { font-size:16px; font-weight:700; line-height:1.7; margin:0 0 5px; }
.cx-category-card h3 a { color:var(--sf-ink); }
.cx-category-card header p { font-size:11px; color:var(--sf-muted); line-height:1.8; margin:0; }
.cx-product-count { margin-inline-start:auto; color:#3b60af; background:#f0f4fc; border-radius:5px; font-size:11px; padding:2px 7px; }
.cx-branch-list { list-style:none; padding:0 22px; margin:0; }
.cx-branch-list a { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#4f6078; font-size:12px; padding:11px 0; border-top:1px solid #f0f2f6; }
.cx-branch-list a:hover { color:var(--sf-blue); }
.cx-branch-list small { color:#6981ac; font-size:10px; background:#f2f5fb; padding:0 6px; border-radius:4px; }
.cx-branch-list i { color:#aeb8c8; font-size:9px; }
.cx-more-branches { background:transparent; border:0; color:#697c9b; font-size:11px; padding:10px 22px 13px; display:flex; align-items:center; gap:7px; width:100%; text-align:start; }
.cx-more-branches>i { margin-inline-start:auto; transition:transform .2s; }
.cx-more-branches[aria-expanded=true]>i { transform:rotate(180deg); }
.cx-category-card footer { background:#fafbfe; border-top:1px solid var(--sf-line); padding:12px 22px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cx-category-card footer>a { font-size:11px; font-weight:600; }
.cx-category-card footer>small { color:#8a96a8; font-size:10px; }
.cx-count-note { font-size:11px; color:var(--sf-muted); margin-top:22px; }
.cx-availability { display:flex; align-items:start; gap:13px; padding:18px 20px; background:#f6f8fc; border:1px solid var(--sf-line); border-radius:10px; margin-bottom:23px; font-size:12px; }
.cx-availability>i { color:#5373b5; }
.cx-availability p { color:var(--sf-muted); margin:0 0 5px; line-height:1.8; }
.cx-search-results { display:flex; flex-direction:column; gap:9px; }
.cx-search-result { display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--sf-line); border-radius:10px; padding:18px 20px; color:var(--sf-ink); }
.cx-search-result:hover { background:#f7f9fe; border-color:#ccd9f3; }
.cx-search-result strong { display:block; font-size:14px; }
.cx-search-result small { display:block; margin-top:5px; font-size:11px; color:var(--sf-muted); }
.cx-search-result>span:last-child { color:var(--sf-muted); font-size:11px; white-space:nowrap; }

/* Contextual catalog tree and path share the same recursive data as the menu. */
.cx-catalog-breadcrumb { display:flex; flex-wrap:wrap; gap:6px 10px; color:#8290a5; font-size:11px; margin-bottom:15px; }
.cx-catalog-breadcrumb a { color:#586f94; }
.cx-catalog-breadcrumb strong { color:var(--sf-ink); font-weight:600; }
.cx-filter-tree { margin:22px 0 25px; padding-bottom:22px; border-bottom:1px solid var(--sf-line); }
.cx-filter-tree h3 { font-size:12px; font-weight:700; margin-bottom:14px; }
.cx-filter-tree>a { display:flex; align-items:center; gap:5px; font-size:11px; padding-block:6px; }
.cx-tree-root { color:#6a7e9e; }
.cx-tree-ancestor { padding-inline-start:calc(var(--branch-depth)*9px); color:#687d9c; }
.cx-tree-ancestor>i { font-size:8px; }
.cx-tree-current { display:flex; justify-content:space-between; gap:10px; padding:8px 10px; margin-top:7px; background:#edf2ff; border-radius:6px; color:#2d55b6; font-size:12px; }
.cx-tree-current small { font-size:10px; }
.cx-filter-tree ul { list-style:none; padding:5px 0 0; margin:0; }
.cx-filter-tree li>a { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:11px; color:#586b89; padding:7px 10px; border-inline-start:1px solid #e2e8f2; margin-inline-start:8px; }
.cx-filter-tree li>a:hover,.cx-filter-tree li>a.active { color:var(--sf-blue); background:#f7f9fe; }
.cx-filter-tree li small { font-size:10px; color:#8696af; }
.cx-filter-tree .cx-tree-directory { margin-top:11px; padding-top:10px; color:#3f62b3; }
html[dir=ltr] .cx-direction-arrow { display:inline-block; transform:scaleX(-1); }

@media(max-width:1199px) {
    .cx-market-inner { gap:14px; }
    .cx-market-trigger { font-size:11px; gap:4px; }
    .cx-all-link { font-size:12px; }
    .cx-directory-layout { grid-template-columns:210px minmax(0,1fr); gap:25px; }
}
@media(max-width:991px) {
    .cx-market-inner { overflow-x:auto; white-space:nowrap; }
    .cx-mobile-shortcuts { display:flex; gap:22px; padding-inline-start:16px; border-inline-start:1px solid var(--sf-line); }
    .cx-mobile-shortcuts a { color:#5c6b80; font-size:11px; }
    .cx-directory-layout { grid-template-columns:minmax(0,1fr); gap:24px; padding-top:25px; }
    .cx-family-sidebar { position:static; min-width:0; }
    .cx-family-sidebar>h2 { margin-inline:0; }
    .cx-family-list { flex-direction:row; overflow-x:auto; padding-bottom:8px; gap:8px; }
    .cx-family-link { flex-shrink:0; border:1px solid var(--sf-line); padding:10px 13px; font-size:12px; }
    .cx-family-link>i { font-size:15px; }
    .cx-framework-box { display:none; }
    .cx-directory-heading h1 { font-size:30px; }
    .cx-directory-symbol { width:65px; height:65px; font-size:28px; }
}
@media(max-width:575px) {
    .cx-directory-hero { padding:28px 0 24px; }
    .cx-directory-heading h1 { font-size:27px; }
    .cx-directory-heading p { font-size:12px; line-height:1.9; }
    .cx-directory-symbol { display:none; }
    .cx-category-search { gap:8px; }
    .cx-category-search>i { display:none; }
    .cx-category-search input { font-size:12px; padding-inline:7px; }
    .cx-category-search .btn { min-width:65px; font-size:12px; }
    .cx-quick-links { font-size:10px; gap:9px 13px; }
    .cx-quick-links>span { width:100%; }
    .cx-family-heading { flex-direction:column; align-items:start; gap:12px; }
    .cx-family-heading h2 { display:flex; align-items:center; gap:7px; font-size:24px; }
    .cx-category-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
    .cx-category-card>header { padding:20px 18px 15px; }
    .cx-category-card h3 { font-size:16px; }
    .cx-branch-list { padding-inline:18px; }
    .cx-branch-list a { padding-block:12px; }
    .cx-search-result { padding:15px; flex-direction:column; align-items:start; gap:7px; }
    .cx-search-result>span:last-child { align-self:flex-end; }
}