/* Marketplace category menu (owner, Nov 2026): bar under the header on computers + the "All categories" panel. */
.mm { position: relative; background: #fff; border-bottom: 1px solid #eef0f3; font-family: inherit; z-index: 60; }
.mm-bar { display: flex; align-items: center; gap: 18px; max-width: 1560px; margin: 0 auto; padding: 0 16px; height: 48px; }
.mm-all { width: auto !important; flex: none !important; max-width: none !important; display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: #111827; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.mm-all:hover, .mm.is-open .mm-all { background: var(--secondary-color, #e11d74); }
.mm-caret { font-size: 11px; transition: transform .2s; }
.mm.is-open .mm-caret { transform: rotate(180deg); }
.mm-quick { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; overflow: hidden; flex: 1; min-width: 0; height: 48px; flex-wrap: wrap; }
.mm-quick li { height: 48px; display: flex; align-items: center; }
.mm-quick a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; color: #1f2937; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.mm-quick a:hover { background: #f3f4f6; color: #111827; }
.mm-ico { font-size: 17px; line-height: 1; width: 22px; text-align: center; flex: none; }

.mm-panel { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; width: min(1290px, calc(100vw - 24px)); height: min(520px, calc(100vh - 170px));
    display: grid; grid-template-columns: 270px 1fr; background: #fff; border: 1px solid #eef0f3; border-radius: 0 0 16px 16px; box-shadow: 0 24px 60px rgba(17, 24, 39, .16); overflow: hidden; }
.mm-panel[hidden] { display: none; }
.mm-mains { list-style: none; margin: 0; padding: 8px 0; overflow-y: auto; background: #f9fafb; border-right: 1px solid #eef0f3; }
.mm-mains a { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: #1f2937; font-size: 14px; text-decoration: none; }
.mm-mains a .mm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-mains a i { font-size: 10px; color: #9ca3af; }
.mm-mains a.on, .mm-mains a:hover { background: #fff; color: var(--secondary-color, #e11d74); font-weight: 600; box-shadow: inset 3px 0 0 var(--secondary-color, #e11d74); }
.mm-subs { overflow-y: auto; padding: 18px 26px 26px; }
.mm-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #f1f2f4; }
.mm-pane-title { font-size: 18px; font-weight: 700; color: #111827; text-decoration: none; }
.mm-see { font-size: 13px; font-weight: 600; color: var(--secondary-color, #e11d74); text-decoration: none; white-space: nowrap; }
.mm-cols { columns: 4 190px; column-gap: 26px; }
.mm-group { break-inside: avoid; margin: 0 0 16px; }
.mm-sub { display: block; font-weight: 700; font-size: 14px; color: #111827; text-decoration: none; margin-bottom: 6px; }
.mm-sub:hover, .mm-group li a:hover { color: var(--secondary-color, #e11d74); }
.mm-group ul { list-style: none; margin: 0; padding: 0; }
.mm-group li a { display: block; padding: 3px 0; font-size: 13px; color: #4b5563; text-decoration: none; line-height: 1.35; }
.mm-group .mm-more { font-weight: 600; color: #6b7280; }
.mm-empty { font-size: 14px; }

html[data-theme="dark"] .mm, html[data-theme="dark"] .mm-panel { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .mm-mains { background: #0b1220; border-color: #1f2937; }
html[data-theme="dark"] .mm-mains a, html[data-theme="dark"] .mm-quick a, html[data-theme="dark"] .mm-sub, html[data-theme="dark"] .mm-pane-title { color: #e5e7eb; }
html[data-theme="dark"] .mm-group li a { color: #9ca3af; }
html[data-theme="dark"] .mm-mains a.on, html[data-theme="dark"] .mm-mains a:hover, html[data-theme="dark"] .mm-quick a:hover { background: #1f2937; }

@media (max-width: 991.98px) { .mm { display: none; } }

/* All categories page: rail + content (phones and computers) */
.cx .cx-h1 { max-width: 1280px; margin: 4px auto 12px; padding: 0 16px; font-size: 24px; font-weight: 700; }
.cx-box { display: grid; grid-template-columns: 250px 1fr; max-width: 1280px; margin: 0 auto 40px; background: #fff; border: 1px solid #eef0f3; border-radius: 16px; overflow: hidden; min-height: 560px; }
.cx-rail { background: #f9fafb; border-right: 1px solid #eef0f3; overflow-y: auto; max-height: 78vh; position: sticky; top: 0; }
.cx-rail a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: #374151; font-size: 14px; text-decoration: none; border-left: 3px solid transparent; }
.cx-rail a.on { background: #fff; color: var(--secondary-color, #e11d74); font-weight: 700; border-left-color: var(--secondary-color, #e11d74); }
.cx-ico { font-size: 20px; width: 26px; text-align: center; flex: none; }
.cx-body { padding: 18px 22px; overflow-y: auto; max-height: 78vh; }
.cx-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 18px; border-radius: 14px; text-decoration: none; color: #111827;
    background: linear-gradient(120deg, #fdf2f8, #eef2ff); }
.cx-banner-ico { font-size: 36px; }
.cx-banner b { display: block; font-size: 18px; }
.cx-banner small { color: var(--secondary-color, #e11d74); font-weight: 600; }
.cx-group { margin-bottom: 18px; }
.cx-sub { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; color: #111827; text-decoration: none; padding: 6px 0 8px; border-bottom: 1px dashed #eceef1; margin-bottom: 10px; }
.cx-sub i { font-size: 11px; color: #9ca3af; }
.cx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.cx-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; text-align: center; color: #374151; font-size: 12.5px; line-height: 1.3; text-decoration: none; background: #fafafa; }
.cx-tile:hover { background: #fdf2f8; color: var(--secondary-color, #e11d74); }
.cx-dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid #f0e4ec; font-weight: 700; color: var(--secondary-color, #e11d74); }
html[data-theme="dark"] .cx-box { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .cx-rail { background: #0b1220; border-color: #1f2937; }
html[data-theme="dark"] .cx-rail a, html[data-theme="dark"] .cx-sub, html[data-theme="dark"] .cx-banner { color: #e5e7eb; }
html[data-theme="dark"] .cx-rail a.on, html[data-theme="dark"] .cx-tile { background: #1f2937; color: #e5e7eb; }
@media (max-width: 767.98px) {
    .cx .cx-h1 { font-size: 18px; margin: 0 0 8px; }
    .cx-box { grid-template-columns: 92px 1fr; border-radius: 0; border-left: 0; border-right: 0; min-height: calc(100vh - 140px); }
    .cx-rail, .cx-body { max-height: calc(100vh - 140px); }
    .cx-rail a { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 11px; text-align: center; line-height: 1.25; }
    .cx-body { padding: 12px; }
    .cx-banner { padding: 12px; } .cx-banner-ico { font-size: 28px; } .cx-banner b { font-size: 15px; }
    .cx-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .cx-tile { font-size: 11px; padding: 8px 4px; }
    .cx-dot { width: 36px; height: 36px; }
}
}

/* the search box sits in the middle of the coloured bar, with room under it before the category bar (owner, Nov 2026) */
@media (min-width: 992px) {
    header.desktop .header-navbar { padding-top: 6px; padding-bottom: 8px; }
}