/*
 * Satrunner header: one bar with logo, category navigation, search, cart, account and EN | DE.
 * Icons are Iconsax TwoTone (web/images/icons), drawn with CSS masks so they take the text colour.
 * Selectors start with .page-wrapper to win over Luma's styles-l.css, which loads after this file.
 * Layouts: Desktop (1024px and wider) has the white bar with the category menu in it; Tablet and Mobile (below
 * 1024px) have a floating glass pill with a menu card (see that section). Breakpoints: satrunner-layout.css.
 */

/* ---------- Bar ---------- */
.page-wrapper .page-header {
    position: relative;
    z-index: 10;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

/* Kept in the page: Magento copies its links into the phone drawer's account tab */
.page-wrapper .page-header .panel.wrapper {
    display: none;
}

.page-wrapper .page-header .header.content {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    max-width: none;
    height: 80px;
    margin: 0;
    /* Site container: content at most 1372px wide, at least 48px from the edge (satrunner-layout.css) */
    padding: 0 max(48px, calc((100% - 1372px) / 2));
}

.page-wrapper .page-header .header.content::before,
.page-wrapper .page-header .header.content::after {
    display: none;
}

.page-wrapper .page-header .logo {
    order: 1;
    float: none;
    max-width: none;
    margin: 0 auto 0 0;
    z-index: 1;
}

.page-wrapper .page-header .logo img {
    display: block;
    width: auto;
    height: 32px;
}

.page-wrapper .page-header .block-search { order: 2; }
.page-wrapper .page-header .minicart-wrapper { order: 3; }
.page-wrapper .page-header .sr-account-link { order: 4; }
.page-wrapper .page-header .sr-lang { order: 5; }

.page-wrapper .page-header .compare.wrapper {
    display: none;
}

/* ---------- Icons (24px, TwoTone) ---------- */
.page-wrapper .page-header .block-search .label::before,
.page-wrapper .page-header .minicart-wrapper .action.showcart::before,
.page-wrapper .page-header .minicart-wrapper .action.showcart.active::before,
.page-wrapper .page-header .action.nav-toggle::before,
.page-wrapper .page-header .sr-icon {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    margin: 0;
    /* Luma gives these pseudo-elements their own grey (#757575, #333 on hover), so the icon
       would ignore the link's colour; inherit it so rest (#333) and hover (orange) both apply */
    color: inherit;
    background-color: currentColor;
    font-family: inherit;
    font-size: 0;
    line-height: 0;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
}

.page-wrapper .page-header .block-search .label::before {
    -webkit-mask-image: url('../images/icons/search.svg');
    mask-image: url('../images/icons/search.svg');
}

.page-wrapper .page-header .minicart-wrapper .action.showcart::before,
.page-wrapper .page-header .minicart-wrapper .action.showcart.active::before {
    -webkit-mask-image: url('../images/icons/bag.svg');
    mask-image: url('../images/icons/bag.svg');
}

.page-wrapper .page-header .sr-icon--account {
    -webkit-mask-image: url('../images/icons/profile.svg');
    mask-image: url('../images/icons/profile.svg');
}

.page-wrapper .page-header .action.nav-toggle::before {
    -webkit-mask-image: url('../images/icons/textalign-left.svg');
    mask-image: url('../images/icons/textalign-left.svg');
}

/* Shared look for the clickable icons */
.page-wrapper .page-header .block-search .label,
.page-wrapper .page-header .minicart-wrapper .action.showcart,
.page-wrapper .page-header .sr-account-link,
.page-wrapper .page-header .action.nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    text-decoration: none;
    cursor: pointer;
}

/* Search, bag and profile rest in a mid grey; all icons turn logo orange on hover */
.page-wrapper .page-header .block-search .label,
.page-wrapper .page-header .minicart-wrapper .action.showcart,
.page-wrapper .page-header .sr-account-link {
    color: #757575;
}

.page-wrapper .page-header .block-search .label:hover,
.page-wrapper .page-header .minicart-wrapper .action.showcart:hover,
.page-wrapper .page-header .sr-account-link:hover,
.page-wrapper .page-header .action.nav-toggle:hover {
    color: #f26a21;
}

/* Visually hidden text next to icons (still read by screen readers) */
.page-wrapper .page-header .block-search .label > span,
.page-wrapper .page-header .minicart-wrapper .action.showcart .text,
.page-wrapper .page-header .action.nav-toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* ---------- Search ---------- */
.page-wrapper .page-header .block-search {
    float: none;
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    z-index: auto;
}

.page-wrapper .page-header .block-search .block-title {
    display: none;
}

.page-wrapper .page-header .block-search .block-content,
.page-wrapper .page-header .block-search .minisearch,
.page-wrapper .page-header .block-search .field.search {
    position: static;
    margin: 0;
}

.page-wrapper .page-header .block-search .label {
    float: none;
    position: static;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    border: 0;
}

/* Search field: a full-width panel under the bar */
.page-wrapper .page-header .block-search .control {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 16px max(48px, calc((100% - 1372px) / 2));
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

.page-wrapper .page-header .block-search.sr-search-open .control,
.page-wrapper .page-header .block-search .label.active + .control {
    display: block;
}

.page-wrapper .page-header .block-search input {
    position: static;
    left: auto;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 16px;
    font-size: 1.6rem;
}

.page-wrapper .page-header .block-search .nested,
.page-wrapper .page-header .block-search .actions {
    display: none;
}

/* ---------- Cart ---------- */
.page-wrapper .page-header .minicart-wrapper {
    float: none;
    margin: 0;
}

.page-wrapper .page-header .minicart-wrapper .action.showcart {
    position: relative;
}

.page-wrapper .page-header .minicart-wrapper .action.showcart .counter.qty {
    position: absolute;
    top: -4px;
    right: -8px;
    box-sizing: border-box;
    min-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0 4px;
    border-radius: 8px;
    background-color: #f26a21;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.page-wrapper .page-header .minicart-wrapper .action.showcart .counter.qty.empty {
    display: none;
}

.page-wrapper .page-header .minicart-wrapper .action.showcart .counter-label {
    display: none;
}

/* ---------- Account, then a divider before EN | DE: search bag user | EN | DE ---------- */
.page-wrapper .page-header .sr-account-link {
    height: 24px;
}

.page-wrapper .page-header .sr-lang {
    height: 24px;
    padding-left: 24px;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
}

/* ---------- Language switch: icon + the other language (header bar and phone drawer) ---------- */
.sr-lang {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sr-lang .sr-lang__link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333333;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-decoration: none;
}

.sr-lang .sr-lang__link:hover {
    color: #f26a21;
}

.sr-lang .sr-icon--language {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../images/icons/language-circle.svg') center / 24px 24px no-repeat;
    mask: url('../images/icons/language-circle.svg') center / 24px 24px no-repeat;
}

.nav-sections .sr-lang {
    padding: 16px;
}

/* ---------- Desktop (1024px and wider): navigation inside the bar ---------- */
@media (min-width: 1024px) {
    .page-wrapper {
        position: relative;
    }

    .page-wrapper .page-header .action.nav-toggle {
        display: none;
    }

    /* The category menu stays in its own element; it is laid over the bar, right of the logo
       (container gutter + 108px logo + 48px gap) */
    .page-wrapper .nav-sections {
        position: absolute;
        top: 0;
        left: calc(max(48px, calc((100% - 1372px) / 2)) + 156px);
        z-index: 11;
        height: 80px;
        margin: 0;
        background: transparent;
    }

    .page-wrapper .nav-sections .navigation {
        max-width: none;
        height: 80px;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    /* Every dropdown opens from the left edge of the first menu item, so this row is their reference, not the item */
    .page-wrapper .nav-sections .navigation > ul {
        display: flex;
        position: relative;
        height: 80px;
        margin: 0;
        padding: 0;
    }

    .page-wrapper .nav-sections .navigation .level0 {
        display: flex;
        align-items: center;
        position: static;
        margin: 0 32px 0 0;
    }

    .page-wrapper .nav-sections .navigation .level0 > .level-top {
        display: flex;
        align-items: center;
        height: 80px;
        padding: 0;
        border: 0;
        color: #333333;
        font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
    }

    /* Magento's dropdown arrow sits on top of the label; the reference has none */
    .page-wrapper .nav-sections .navigation .level0 > .level-top > .ui-menu-icon {
        display: none;
    }

    .page-wrapper .nav-sections .navigation .level0 > .level-top:hover,
    .page-wrapper .nav-sections .navigation .level0.active > .level-top,
    .page-wrapper .nav-sections .navigation .level0.has-active > .level-top {
        border: 0;
        color: #f26a21;
    }

    /* Dropdown: subcategories side by side in a panel laid over the page, so the menu items
       next to it don't move. Hidden until Magento's menu script opens it (it sets display
       inline); without this it sits in the bar while the page is still loading. That script also
       writes the item's position as an inline left, hence !important. Long panels wrap on narrow Desktop. */
    .page-wrapper .nav-sections .navigation .level0 > .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0 !important;
        z-index: 12;
        width: max-content;
        min-width: 0;
        max-width: calc(100vw - 252px);
        margin: 0;
        padding: 0 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        background-color: #ffffff;
        font-size: 1.2rem;
        list-style: none;
        white-space: normal;
    }

    /* Invisible strip right of the panel: the pointer can come straight down from an item further right and
       move left to a short panel without it closing */
    .page-wrapper .nav-sections .navigation .level0 > .submenu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        width: min(800px, calc(100vw - 260px));
        height: 100%;
    }

    /* The last menu item (Dienstleistung) has a short panel: it stays under its item, right edges in line.
       Scoped to the top row because Magento gives the panels the level0 class too. */
    .page-wrapper .nav-sections .navigation > ul > .level0:last-child {
        position: relative;
    }

    .page-wrapper .nav-sections .navigation > ul > .level0:last-child > .submenu {
        right: 0;
        left: auto !important;
    }

    .page-wrapper .nav-sections .navigation > ul > .level0:last-child > .submenu::before {
        display: none;
    }

    .page-wrapper .nav-sections .navigation .level0 > .submenu > li {
        display: inline-block;
        margin: 0;
        vertical-align: middle;
    }

    .page-wrapper .nav-sections .navigation .level0 > .submenu a {
        display: block;
        position: relative;
        padding: 24px 20px;
        color: #333333;
        white-space: nowrap;
    }

    /* Hover: orange 2px underline under the label that grows from left to right */
    .page-wrapper .nav-sections .navigation .level0 > .submenu a::after {
        content: '';
        position: absolute;
        left: 20px;
        bottom: 16px;
        width: 0;
        height: 2px;
        background-color: #f26a21;
        transition: width 0.25s ease-out;
    }

    .page-wrapper .nav-sections .navigation .level0 > .submenu a:hover::after,
    .page-wrapper .nav-sections .navigation .level0 > .submenu a.ui-state-focus::after,
    .page-wrapper .nav-sections .navigation .level0 > .submenu a:focus-visible::after {
        width: calc(100% - 40px);
    }

    @media (prefers-reduced-motion: reduce) {
        .page-wrapper .nav-sections .navigation .level0 > .submenu a::after {
            transition: none;
        }
    }

    .page-wrapper .nav-sections .navigation .level0 > .submenu a:hover,
    .page-wrapper .nav-sections .navigation .level0 > .submenu a.ui-state-focus {
        background-color: transparent;
        color: #f26a21;
    }
}

/* ---------- Tablet and Mobile (below 1024px): floating glass pill ----------
   Instead of the white bar: a frosted pill floating 10px from the top over the page (16px from the sides, 56px
   tall), with the menu button, the centred logo, search and cart. The menu button opens the menu card
   (Magento_Theme/templates/html/sr-mnav-panel.phtml), which grows out of the pill; the page behind is dimmed and
   blurred and doesn't scroll. Search opens its field under the bar, inside the pill. Account and EN | DE live in
   the menu card. Luma's slide-in drawer is not used. Behaviour: web/js/satrunner-header.js. */
.sr-mnav-toggle,
.sr-mnav,
.sr-msearch {
    display: none;
}

@media (max-width: 1023px) {
    /* The page starts at the top edge; plain pages keep 76px (10 + 56 + 10) free for the pill */
    body .page-wrapper {
        padding-top: 76px;
    }

    .page-wrapper .page-header {
        position: fixed;
        top: 8px;
        right: 16px;
        left: 16px;
        z-index: 100;
        margin: 0;
        border: 0;
        border-radius: 12px;
        background-color: rgba(255, 255, 255, 0.72);
        -webkit-backdrop-filter: blur(25px) saturate(1.8);
        backdrop-filter: blur(25px) saturate(1.8);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), inset 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(13, 13, 13, 0.08);
    }

    .page-wrapper .page-header .header.content {
        gap: 4px;
        height: 56px;
        padding: 0 8px;
    }

    /* Luma's own menu button and drawer are replaced by the menu card */
    .page-wrapper .page-header .action.nav-toggle,
    .page-wrapper .nav-sections {
        display: none;
    }

    .page-wrapper .page-header .logo {
        position: absolute;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
    }

    .page-wrapper .page-header .logo img {
        height: 24px;
    }

    /* 38px round-cornered touch targets: menu, search, cart */
    .page-wrapper .page-header .sr-mnav-toggle,
    .page-wrapper .page-header .block-search .label,
    .page-wrapper .page-header .minicart-wrapper .action.showcart {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        box-shadow: none;
        color: #333333;
        cursor: pointer;
    }

    /* Menu button, as on unit1gear.com: 38px, 8px padding, 10px corners, near-black; a 3 × 3 dot grid (22px)
       that turns into a cross while the card is open */
    .page-wrapper .page-header .sr-mnav-toggle {
        order: 0;
        padding: 8px;
        border-radius: 8px;
        color: #0d0d0d;
        transition: opacity 0.15s;
    }

    .page-wrapper .page-header .sr-mnav-toggle:hover {
        opacity: 0.7;
    }

    .page-wrapper .page-header .sr-mnav-toggle:focus-visible {
        outline: 2px solid #f26a21;
        outline-offset: 0;
    }

    .page-wrapper .page-header .sr-mnav-toggle svg {
        display: block;
        flex: none;
        width: 20px;
        height: 20px;
    }

    .page-wrapper .page-header .sr-mnav-toggle .sr-mnav-toggle__close,
    html.sr-mnav-open .page-wrapper .page-header .sr-mnav-toggle .sr-mnav-toggle__menu {
        display: none;
    }

    html.sr-mnav-open .page-wrapper .page-header .sr-mnav-toggle .sr-mnav-toggle__close {
        display: block;
    }

    .page-wrapper .page-header .block-search {
        margin-left: auto;
    }

    /* Account and EN | DE are in the menu card */
    .page-wrapper .page-header .sr-account-link,
    .page-wrapper .page-header .sr-lang {
        display: none;
    }

    /* Magento's search field under the bar is Desktop only; here the search icon opens the pill's own search */
    .page-wrapper .page-header .block-search .control {
        display: none !important;
    }

    /* ---------- Search (unit1gear.com style) ----------
       The search icon turns the pill into a search line: the bar row is hidden, the pill widens past the screen
       edges (12px each side, so it reads as a full-width band), the page goes dark (80 %, blurred). Results appear
       inside the pill while typing: products and categories (sr-msearch.phtml, initSearch in the script). */
    .page-wrapper .page-header {
        transition: left 0.48s cubic-bezier(0.16, 1, 0.3, 1), right 0.48s cubic-bezier(0.16, 1, 0.3, 1);
    }

    html.sr-msearch-open .page-wrapper .page-header {
        right: -12px;
        left: -12px;
    }

    html.sr-msearch-open .page-wrapper .page-header .header.content {
        display: none;
    }

    .page-wrapper .sr-msearch[hidden] {
        display: none;
    }

    .page-wrapper .sr-msearch:not([hidden]) {
        display: block;
        box-sizing: border-box;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: sr-mnav-in 0.48s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sr-msearch__sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* The line: field, ×, arrow (inner edges line up with the page's 16px + 12px) */
    .sr-msearch__form {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 56px;
        padding: 0 20px 0 28px;
    }

    .page-wrapper .sr-msearch input.sr-msearch__input {
        flex: 1 1 auto;
        min-width: 0;
        height: 36px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: #0d0d0d;
        font-size: 1.6rem; /* 16px: phones don't zoom into the field */
        -webkit-appearance: none;
        appearance: none;
    }

    .page-wrapper .sr-msearch input.sr-msearch__input:focus {
        outline: 0;
        box-shadow: none;
    }

    .page-wrapper .sr-msearch input.sr-msearch__input::placeholder {
        color: rgba(13, 13, 13, 0.45);
    }

    .sr-msearch__input::-webkit-search-cancel-button {
        display: none;
    }

    .page-wrapper .sr-msearch .sr-msearch__close,
    .page-wrapper .sr-msearch .sr-msearch__submit {
        display: grid;
        place-items: center;
        flex: none;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        cursor: pointer;
    }

    .page-wrapper .sr-msearch .sr-msearch__close {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: transparent;
        color: #0d0d0d;
    }

    .page-wrapper .sr-msearch .sr-msearch__submit {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: #0d0d0d;
        color: #ffffff;
        transition: background-color 0.2s ease, opacity 0.2s ease;
    }

    .page-wrapper .sr-msearch .sr-msearch__submit:disabled {
        background: rgba(13, 13, 13, 0.25);
        cursor: default;
    }

    .page-wrapper .sr-msearch .sr-msearch__close:focus-visible,
    .page-wrapper .sr-msearch .sr-msearch__submit:focus-visible {
        outline: 2px solid #f26a21;
        outline-offset: 2px;
    }

    .sr-msearch__close svg,
    .sr-msearch__submit svg {
        width: 20px;
        height: 20px;
    }

    /* Results: groups with a small heading, 56px rows (picture, name, chevron) */
    .sr-msearch__results:not(:empty) {
        padding: 0 16px 16px 16px;
    }

    .sr-msearch__heading {
        margin: 12px 8px 4px;
        color: #0d0d0d;
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .sr-msearch__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sr-msearch__list > li {
        margin: 0;
    }

    .page-wrapper .sr-msearch .sr-msearch__item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 56px;
        padding: 8px 8px;
        border-radius: 8px;
        color: #0d0d0d;
        font-size: 1.6rem;
        line-height: 1.3;
        text-decoration: none;
    }

    .page-wrapper .sr-msearch .sr-msearch__item:hover,
    .page-wrapper .sr-msearch .sr-msearch__item:focus-visible {
        background: rgba(13, 13, 13, 0.05);
        color: #0d0d0d;
    }

    .sr-msearch__thumb {
        display: grid;
        place-items: center;
        flex: none;
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: 4px;
        background: #ffffff;
        box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.08);
        color: rgba(13, 13, 13, 0.55);
    }

    .sr-msearch__thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .sr-msearch__thumb svg {
        width: 20px;
        height: 20px;
    }

    .sr-msearch__name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sr-msearch__chevron {
        flex: none;
        width: 16px;
        height: 16px;
        color: rgba(13, 13, 13, 0.35);
    }

    .sr-msearch__none {
        margin: 4px 8px 8px;
        color: #5d5d5d;
        font-size: 1.6rem;
    }

    /* Page behind the search: dark and blurred, not scrolling (the scrim is added by the script) */
    .sr-msearch-scrim {
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(13, 13, 13, 0.8);
        -webkit-backdrop-filter: blur(10px) saturate(1.4);
        backdrop-filter: blur(10px) saturate(1.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    html.sr-msearch-open .sr-msearch-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    /* The page behind doesn't scroll. Lock only <html>: from 768px Luma's styles-l.css
       makes body 100% tall, so hiding body's overflow cut the page to one screen and it jumped to the top */
    html.sr-msearch-open {
        overflow: hidden;
    }

    /* ---------- Menu card ---------- */
    .page-wrapper .sr-mnav[hidden] {
        display: none;
    }

    .page-wrapper .sr-mnav:not([hidden]) {
        display: block;
        box-sizing: border-box;
        max-height: calc(100vh - 84px);
        max-height: calc(100dvh - 84px);
        padding: 4px 20px 20px;
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: sr-mnav-in 0.48s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes sr-mnav-in {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
    }

    .sr-mnav__label {
        margin: 12px 0 4px;
        color: #5d5d5d;
        font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .sr-mnav__list,
    .sr-mnav__sub {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sr-mnav__list > li,
    .sr-mnav__sub > li {
        margin: 0;
    }

    /* A category: a link, or (with subcategories) a button that opens them in place */
    .page-wrapper .sr-mnav .sr-mnav__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-sizing: border-box;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: #14181c;
        font-family: 'Barlow', sans-serif;
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.01em;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .page-wrapper .sr-mnav .sr-mnav__item:hover,
    .page-wrapper .sr-mnav .sr-mnav__item:focus-visible,
    .page-wrapper .sr-mnav .sr-mnav__item.is-current {
        color: #f26a21;
    }

    .sr-mnav__item .sr-icon {
        flex: none;
        width: 24px;
        height: 24px;
        background-color: currentColor;
        -webkit-mask: url('../images/icons/add.svg') center / 24px 24px no-repeat;
        mask: url('../images/icons/add.svg') center / 24px 24px no-repeat;
    }

    .sr-mnav__item[aria-expanded='true'] .sr-icon {
        -webkit-mask-image: url('../images/icons/minus.svg');
        mask-image: url('../images/icons/minus.svg');
    }

    .page-wrapper .sr-mnav .sr-mnav__sub:not([hidden]) {
        display: block;
        padding: 0 0 8px;
    }

    .page-wrapper .sr-mnav .sr-mnav__sub a {
        display: block;
        padding: 8px 0;
        color: #333333;
        font-size: 1.6rem;
        line-height: 1.4;
        text-decoration: none;
    }

    .page-wrapper .sr-mnav .sr-mnav__sub a:hover,
    .page-wrapper .sr-mnav .sr-mnav__sub a:focus-visible,
    .page-wrapper .sr-mnav .sr-mnav__sub a.is-current {
        color: #f26a21;
    }

    .page-wrapper .sr-mnav .sr-mnav__sub a.is-current {
        font-weight: 600;
    }

    /* Bottom row: FAQ, account, DE | EN */
    .sr-mnav__foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 20px;
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .page-wrapper .sr-mnav .sr-mnav__foot-link {
        color: #333333;
        font-size: 1.2rem;
        text-decoration: none;
    }

    .page-wrapper .sr-mnav .sr-mnav__foot-link:hover {
        color: #f26a21;
    }

    /* Sign-out link and its divider: only while signed in (web/js/satrunner-account.js) */
    .page-wrapper .sr-mnav .sr-mnav__foot [hidden] {
        display: none;
    }

    /* Divider between FAQ and Konto */
    .sr-mnav__divider {
        width: 1px;
        height: 12px;
        background: rgba(0, 0, 0, 0.2);
    }

    .sr-mnav__lang {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
        padding: 4px 12px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 999px;
        color: #14181c;
        font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 0.08em;
    }

    .sr-mnav__lang:empty {
        display: none;
    }

    .page-wrapper .sr-mnav .sr-mnav__lang a {
        color: #757575;
        text-decoration: none;
    }

    .page-wrapper .sr-mnav .sr-mnav__lang a:hover {
        color: #f26a21;
    }

    /* Page behind the open card: dimmed, blurred, not scrolling (the backdrop is added by the script) */
    .sr-mnav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(0, 0, 0, 0.3);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    html.sr-mnav-open .sr-mnav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* The page behind doesn't scroll. Lock only <html>: from 768px Luma's styles-l.css
       makes body 100% tall, so hiding body's overflow cut the page to one screen and it jumped to the top */
    html.sr-mnav-open {
        overflow: hidden;
    }

    /* ---------- Pages that run up under the pill ----------
       Heroes and full-bleed banners start at the top edge; their content and the breadcrumb over them move down by
       the pill's 76px. Home hero: satrunner-hero.css; SIM aktualisieren: satrunner-sim-activation.css. The Prepaid
       hero and the Iridium Tarife columns are written In Admin; their offsets are here so the snippets stay as
       they are. */
    body:has(.sr-hero, .sr-pp__hero, .sr-crumbs-overlay) .page-wrapper {
        padding-top: 0;
    }

    body:has(.sr-hero, .sr-pp__hero, .sr-crumbs-overlay) .page-wrapper .breadcrumbs .items {
        padding-top: 92px;
    }

    body .sr-pp__hero {
        padding-top: 172px;
    }

    body .sr-tf a.sr-tf__col:nth-of-type(-n + 2) {
        padding-top: 148px;
    }
}

/* Iridium Tarife stacked (Mobile, Tablet held upright): only the first column sits under the pill */
@media (max-width: 448px), (max-width: 1023px) and (orientation: portrait) {
    body .sr-tf a.sr-tf__col:nth-of-type(2) {
        padding-top: 40px;
    }

    body .sr-tf a.sr-tf__col:first-of-type {
        padding-top: 148px;
    }
}

/* Mobile */
@media (max-width: 448px) {
    .page-wrapper .page-header .logo img {
        height: 24px;
    }

    body .sr-pp__hero {
        padding-top: 132px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-wrapper .sr-mnav:not([hidden]),
    .page-wrapper .sr-msearch:not([hidden]) {
        animation: none;
    }

    .page-wrapper .page-header,
    .page-wrapper .page-header .sr-mnav-toggle,
    .sr-mnav-backdrop,
    .sr-msearch-scrim {
        transition: none;
    }
}