/* MegaSelector.razor — product category mega menu (CategorySelectorMode.NavPaths).
   Plain stylesheet (this project disables StaticWebAssets, so .razor.css bundles are never built).
   Accent follows the site's corporate colour; everything else is neutral. */

.msel {
    --msel-accent: var(--corp-color-normal, #b01c2e);
    --msel-accent-soft: #f0f0f0;
    --msel-ink: #222;
    --msel-muted: #777;
    --msel-line: rgba(0, 0, 0, .10);
    position: relative;
    display: inline-block;
}

/* ── trigger pill ─────────────────────────────────────────────── */
.msel-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
/* colour only as a fallback (zero specificity): inside a menu the host's link class decides the colour */
:where(.msel-trigger) { color: inherit; }
.msel-trigger:hover { background: var(--msel-accent-soft); }
.msel-trigger-open {
    background: var(--msel-accent-soft);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--msel-accent) 35%, transparent);
}

/* inside a navbar: keep the menu's own link colour and use a neutral hover so it reads on any header colour */
.msel-trigger.nav-link { padding: .5rem 1rem; border-radius: 6px; }
.msel-trigger.nav-link:hover, .msel-trigger.nav-link.msel-trigger-open { background: rgba(255, 255, 255, .14); box-shadow: none; }
.msel-nav-item .msel { display: block; }
.msel-close { display: none; }
/* standalone phone control ("Our products"): a full-width outlined pill */
.msel-standalone .msel { display: block; }
.msel-standalone .msel-trigger { width: 100%; justify-content: space-between; border: 1px solid var(--msel-accent); color: var(--msel-accent); font-weight: 600; background: #fff; }
/* heading-style trigger (same look as the menu's other h1 items): no pill, the menu's own typography */
.msel-trigger.msel-trigger-heading { padding: 0; background: transparent !important; box-shadow: none !important; border-radius: 0; }
.msel-trigger.msel-trigger-heading h1 { margin: 0; }   /* typography comes from the menu's own h1 style, like the neighbouring items */

.msel-chevron {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
}
.msel-trigger-open .msel-chevron { transform: rotate(225deg) translateY(-2px); }

/* click-away layer under the panel */
.msel-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; }

/* ── panel ────────────────────────────────────────────────────── */
.msel-panel {
    position: absolute;
    z-index: 1001;
    top: calc(100% + 14px);
    left: 0;
    display: flex;
    width: min(920px, calc(100vw - 24px));
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(15, 30, 60, .22);
    color: var(--msel-ink);
    text-align: left;
    /* the panel's content is plain text: the site's normal body font, not the (display) font of the menu strip */
    font-family: var(--body-font-normal, Arial, Helvetica, sans-serif);
    font-size: 15px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
}
.msel-panel h1, .msel-panel .msel-link, .msel-panel .msel-root, .msel-panel .msel-viewall { font-family: inherit; text-transform: none; letter-spacing: normal; }

/* little pointer under the trigger */
.msel-arrow {
    position: absolute;
    top: -7px;
    left: 40px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
}

.msel-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--msel-muted);
}

/* left pane */
.msel-side {
    flex: 0 0 250px;
    padding: 0 0 12px;
    background: #f5f5f5;
    border-radius: 14px 0 0 14px;
    border-right: 1px solid var(--msel-line);
}
.msel-side .msel-eyebrow { padding: 18px 20px 12px; border-bottom: 1px solid var(--msel-line); margin-bottom: 8px; }

.msel-root {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 20px);
    margin: 2px 10px;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s;
}
.msel-root:hover { background: rgba(0, 0, 0, .05); }
.msel-root-active, .msel-root-active:hover { background: var(--msel-accent-soft); color: var(--msel-accent); font-weight: 600; }

.msel-root-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: .55;
}
.msel-root-active .msel-root-dot { background: currentColor; opacity: 1; }

/* right pane */
.msel-main { flex: 1; min-width: 0; padding: 18px 28px 22px; }
.msel-main-title { color: var(--msel-ink); padding-bottom: 12px; border-bottom: 1px solid var(--msel-line); }

.msel-cols {
    display: flex;
    gap: 0;
    margin-top: 18px;
    min-height: 190px;
    max-height: 360px;
    overflow-y: auto;
}
.msel-col { flex: 1 1 0; min-width: 0; padding: 0 20px; border-left: 1px solid var(--msel-line); }
.msel-col:first-child { padding-left: 0; border-left: 0; }
.msel-col:last-child { padding-right: 0; }

.msel-col-title {
    margin-bottom: 10px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--msel-muted);
}

.msel-link {
    display: block;
    padding: 7px 0;
    color: var(--msel-ink);
    text-decoration: none;
    line-height: 1.25;
    cursor: pointer;
    transition: color .12s, transform .12s;
}
.msel-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msel-link-more { flex: none; opacity: .45; font-size: 1.1em; }
.msel-link-active { color: var(--msel-accent); font-weight: 600; }
.msel-link-active .msel-link-more { opacity: 1; }
.msel-link:hover { color: var(--msel-accent); text-decoration: none; transform: translateX(2px); }

.msel-empty { padding: 20px 0; color: var(--msel-muted); }

/* footer call-to-action */
.msel-foot { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--msel-line); }
.msel-viewall {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 10px;
    background: var(--msel-accent);
    color: #fff !important;
    font-weight: 400;
    text-decoration: none !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--msel-accent) 40%, transparent);
    transition: filter .12s, transform .12s;
}
.msel-viewall:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── phones: the panel is a full-width sheet, panes stack ───────── */
@media (max-width: 768px) {
    .msel { position: static; display: block; }
    .msel-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100001;
        width: auto;
        flex-direction: column;
        border-radius: 0;
        overflow-y: auto;
    }
    .msel-arrow { display: none; }
    .msel-backdrop { display: none; }
    .msel-close {
        display: block; position: sticky; top: 0; align-self: flex-end; z-index: 2;
        margin: 8px 8px 0 auto; padding: 6px 12px; border: 0; border-radius: 8px;
        background: #eee; color: var(--msel-ink); font-size: 1rem; line-height: 1; cursor: pointer;
    }
    .msel-side { flex: none; border-radius: 0; border-right: 0; border-bottom: 1px solid var(--msel-line); }
    .msel-cols { flex-direction: column; max-height: none; }
    .msel-col, .msel-col:first-child, .msel-col:last-child { padding: 0 0 14px; border-left: 0; }
}