.frm-root,
.frm-root * { box-sizing: border-box; }

.frm-root {
    position: relative;
    z-index: var(--frm-z);
    font-family: var(--frm-font);
    pointer-events: none;
}

.frm-root.frm-fixed { position: fixed; top: var(--frm-top); }
.frm-root.frm-align-center { left: 50%; transform: translateX(-50%); }
.frm-root.frm-align-left { left: var(--frm-side); transform: none; }
.frm-root.frm-align-right { right: var(--frm-side); left: auto; transform: none; }

.frm-shell {
    pointer-events: auto;
    width: min(var(--frm-width), calc(100vw - (var(--frm-side) * 2)));
    max-width: calc(100vw - (var(--frm-side) * 2));
    padding: var(--frm-py) var(--frm-px);
    border: var(--frm-border-width) solid var(--frm-border);
    border-radius: var(--frm-radius);
    background: var(--frm-bg);
    -webkit-backdrop-filter: blur(var(--frm-blur));
    backdrop-filter: blur(var(--frm-blur));
    box-shadow: var(--frm-shadow);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.frm-shell::-webkit-scrollbar { display: none; }
.frm-compact .frm-shell { width: max-content; }

.frm-shell-inner {
    display: flex;
    align-items: center;
    width: max-content;
    min-width: 100%;
}

.frm-compact .frm-shell-inner { min-width: 0; }

.frm-logo-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--frm-logo-gap);
}

.frm-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    line-height: 0;
}

.frm-logo {
    display: block;
    width: var(--frm-logo-width);
    max-width: none;
    height: auto;
    object-fit: contain;
}

.frm-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--frm-gap);
    width: max-content;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.frm-compact .frm-list { min-width: 0; }
.frm-item { margin: 0 !important; padding: 0 !important; list-style: none !important; flex: 0 0 auto; }

.frm-link {
    position: relative;
    display: block;
    padding: var(--frm-item-py) var(--frm-item-px);
    border-radius: var(--frm-item-radius);
    overflow: hidden;
    color: var(--frm-text) !important;
    background: transparent;
    font-size: var(--frm-font-size);
    font-weight: var(--frm-weight);
    line-height: var(--frm-line);
    letter-spacing: var(--frm-letter);
    text-transform: var(--frm-transform);
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .24s ease, background-color .24s ease;
    -webkit-tap-highlight-color: transparent;
}

.frm-link:hover,
.frm-link:focus-visible { color: var(--frm-hover) !important; background: var(--frm-hover-bg); }
.frm-item.is-active > .frm-link { color: var(--frm-active) !important; background: var(--frm-active-bg); }
.frm-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.frm-roll-viewport {
    position: relative;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    /* JS locks this to the exact rendered text-line height.
       The link padding stays outside this viewport, so neither row can peek
       through the top or bottom padding during the GSAP roll. */
}

.frm-menu-item__text {
    display: block;
    white-space: nowrap;
    line-height: var(--frm-line);
}
.frm-menu-item__text > span {
    display: inline-block;
    font: inherit;
    line-height: inherit;
    will-change: transform;
}

.frm-menu-item__text.frm-clone {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    pointer-events: none;
}

@media (max-width: 767px) {
    .frm-root.frm-align-center { width: calc(100vw - (var(--frm-side) * 2)); }
    .frm-root.frm-align-center .frm-shell { max-width: 100%; }
    .frm-link { font-size: var(--frm-font-mobile); }
    .frm-logo { max-width: min(var(--frm-logo-width), 30vw); }
    .frm-list { justify-content: flex-start; }
}

@media (hover: none), (pointer: coarse) {
    .frm-menu-item__text.frm-clone { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .frm-link { transition: none; }
}