/* Header category menu (front.inc.category_menu, assets/js/category-menu.js). Desktop: a three-column dropdown under
   the header. Mobile: a full-screen panel with the main categories in two columns, then one category's subcategories. */

/* the old menu's dark layer: an old cached theme.js may still try to show it */
.header-backdrop { display: none !important; }

.cm:not(.is-open) { display: none; }
.cm img { display: block; max-width: 100%; }
.cm a { color: inherit; text-decoration: none; }
.cm ul { margin: 0; padding: 0; list-style: none; }
.cm-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--colorText); font-size: 20px; cursor: pointer; }
.cm-icon-btn:hover { background: rgba(var(--colorGrayRGB), .25); }

/* pictures: a soft tile behind each image */
.cm-tile { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f6f4f8; }
.cm-tile img { width: 100%; height: 100%; object-fit: contain; }
.cm-tile-empty::after { content: ''; width: 38%; height: 38%; border-radius: 50%; background: rgba(var(--colorMainRGB), .12); }
.cm-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cm-card-title { display: -webkit-box; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--colorText); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cm-card:hover .cm-card-title { color: var(--colorMain); }

.cm-skel { border-radius: 10px; background: linear-gradient(90deg, #f1eff4 25%, #faf9fb 50%, #f1eff4 75%); background-size: 200% 100%; animation: cm-skel 1.2s infinite linear; }
@keyframes cm-skel { to { background-position: -200% 0; } }

/* ---------------- desktop ---------------- */
@media (min-width: 992px) {
    .header-content { position: relative; }
    .cm { position: absolute; top: 100%; right: 0; left: 0; z-index: 30; }
    .cm-backdrop { position: fixed; right: 0; left: 0; bottom: 0; top: var(--cm-top, 0); background: rgba(40, 25, 51, .25); }
    .cm-panel { position: relative; overflow: hidden; margin-top: 8px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(40, 25, 51, .16); }
    .cm-head, .cm-root-view, .cm-root-media img, .cm-back { display: none !important; }
    .cm-body { display: grid; grid-template-columns: 250px 250px 1fr; height: min(560px, calc(100vh - 140px)); }
    .cm-roots, .cm-subs, .cm-leaves { overflow-y: auto; overscroll-behavior: contain; }
    .cm-roots { padding: 10px 8px; border-left: 1px solid #f0edf3; }
    .cm-subs { padding: 10px 8px; border-left: 1px solid #f0edf3; background: #fcfbfd; }

    .cm-root, .cm-sub { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
    .cm-root.is-active, .cm-sub.is-active { background: rgba(var(--colorMainRGB), .07); color: var(--colorMain); font-weight: 600; }
    .cm-root-media { display: none; }
    .cm-root.no-icon .cm-root-media { display: block; width: 26px; height: 26px; }
    .cm-root.no-icon .cm-root-media img { display: block !important; width: 26px; height: 26px; object-fit: contain; }
    .cm-root-icon { display: inline-flex; width: 24px; height: 24px; color: var(--colorMain); }
    .cm-root-icon svg { width: 24px; height: 24px; }
    .cm-root-title { flex: 1; }
    .cm-root-arrow, .cm-sub i { margin-inline-start: auto; font-size: 14px; color: var(--colorGray); }
    .cm-sub-list:not(.is-active) { display: none; }
    .cm-sub-all { margin-top: 6px; color: var(--colorMain); font-size: 13px; }

    .cm-leaves { padding: 18px 24px; }
    .cm-leaves-head { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 18px; font-weight: 700; font-size: 15px; }
    .cm-leaves-head:hover { color: var(--colorMain); }
    .cm-leaves-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 22px 14px; }
    .cm-leaves-grid .cm-tile { width: 64px; height: 64px; border-radius: 50%; }
    .cm-leaves-grid .cm-tile img { padding: 8px; }
    .cm-leaves-empty { color: var(--colorGray); font-size: 13px; }
}

/* ---------------- mobile ---------------- */
@media (max-width: 991.98px) {
    .cm { position: fixed; inset: 0; z-index: 1060; overscroll-behavior: none; }
    .cm-backdrop { display: none; }
    .cm-panel { display: flex; flex-direction: column; height: 100%; background: #fff; }
    /* touching the header must not scroll the page behind (iOS) */
    .cm-head { touch-action: none; display: flex; flex: 0 0 auto; align-items: center; gap: 4px; height: 56px; padding: 0 8px; border-bottom: 1px solid #f0edf3; }
    .cm-head-title { flex: 1; overflow: hidden; padding: 0 6px; font-weight: 700; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
    .cm-head-all { padding: 6px 10px; border-radius: 8px; color: var(--colorMain) !important; font-size: 13px; white-space: nowrap; }
    .cm-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 14px 28px; }
    .cm-subs, .cm-leaves, .cm-root-icon, .cm-root-arrow { display: none !important; }

    .cm-roots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .cm-root { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; padding: 14px 10px 12px; border: 1px solid #f0edf3; border-radius: 14px; text-align: center; }
    .cm-root:active { background: rgba(var(--colorMainRGB), .05); }
    .cm-root-media { display: flex; align-items: center; justify-content: center; overflow: hidden; width: 76px; height: 76px; border-radius: 18px; background: #f6f4f8; }
    .cm-root-media img { width: 100%; height: 100%; object-fit: cover; }
    .cm-root-title { font-size: 13.5px; font-weight: 600; line-height: 1.5; }
    .cm-root.no-image .cm-root-media::after { content: ''; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--colorMainRGB), .14); }

    .cm.is-root .cm-roots { display: none; }
    .cm:not(.is-root) .cm-root-view { display: none; }
    .cm-sec + .cm-sec { margin-top: 22px; }
    .cm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
    .cm-sec-title { font-weight: 700; font-size: 14.5px; }
    .cm-sec-all { display: inline-flex; align-items: center; gap: 2px; color: var(--colorMain) !important; font-size: 12.5px; white-space: nowrap; }
    .cm-scroller { display: flex; gap: 10px; overflow-x: auto; margin: 0 -14px; padding: 0 14px 4px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
    .cm-scroller::-webkit-scrollbar { display: none; }
    .cm-scroller .cm-card { flex: 0 0 92px; scroll-snap-align: start; }
    .cm-scroller .cm-tile, .cm-grid .cm-tile { width: 100%; aspect-ratio: 1; border-radius: 14px; }
    .cm-scroller .cm-tile img, .cm-grid .cm-tile img { padding: 10px; }
    .cm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }

    html.cm-lock, html.cm-lock body { overflow: hidden !important; }
}