.mobile-shell,
.mobile-top-bar,
#mobile-bar-actions,
.mobile-page-bar-wrap {
    display: none;
}

@media (width <= 576px) {
    .nav-header,
    .navigation-container,
    .gutter.gutter-horizontal,
    .tablist,
    #floating-action-bar,
    #sticky-header,
    .header-wrapper.sticky-header {
        display: none !important;
    }

    .mobile-action[aria-label]::after {
        display: none !important;
    }

    body {
        font-family:
            ui-sans-serif,
            -apple-system,
            BlinkMacSystemFont,
            'Segoe UI',
            'Roboto',
            'Helvetica Neue',
            sans-serif !important;
    }

    body:has(#mobile-top-bar) {
        padding-top: 50px;
    }

    body.has-banner:has(#mobile-top-bar) {
        padding-top: calc(var(--banner-height, 0px) + 50px);
    }

    body.mobile-shell-active {
        padding-bottom: 96px;
    }

    body.mobile-no-scroll {
        overflow: hidden;
    }

    html,
    body {
        overflow-x: clip;
        max-inline-size: 100%;
    }

    .mobile-shell {
        display: block;
    }

    #custom-banner {
        transition: transform 220ms ease;

        &.is-hidden {
            transform: translateY(-100%);
        }
    }

    .main-content,
    .main-content-navigable {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .main-content-container {
        margin: 10px !important;
        width: auto !important;
    }

    .fixed .contentLayout2 > *,
    .wiki-content.fixed .columnLayout.fixed-width,
    .wiki-content.fixed .columnLayout.fixed-width .cell {
        max-width: none !important;
    }

    .main-panel.wiki-content .description,
    .wiki-content .content-wrapper,
    .wiki-content .contentLayout2,
    .wiki-content .contentLayout2 > .columnLayout,
    .wiki-content .columnLayout,
    .wiki-content .columnLayout > .cell,
    .wiki-content .innerCell {
        flex-basis: auto !important;
        inline-size: 100% !important;
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
    }

    .wiki-content .content-wrapper .columnLayout {
        flex-direction: column !important;
    }

    .wiki-content .columnLayout > .cell.normal {
        margin-right: 0 !important;
    }

    .wiki-content img,
    .wiki-content .confluence-embedded-image,
    .wiki-content .header-image {
        block-size: auto !important;
        max-inline-size: 100% !important;
    }

    .title-wrapper .page-title-row {
        margin-top: 0;
    }

    .mobile-top-bar {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 50px;
        padding: 0 16px;
        border-bottom: var(--ds-border-width, 1px) solid var(--ds-border);
        background-color: #ffffff;
        color: #44546f;
        transition: transform 220ms ease;

        html.dark-mode & {
            background-color: #161a1d;
            color: #d3d7e6;
        }

        body.has-banner & {
            top: var(--banner-height, 0px);
        }

        &.is-hidden {
            transform: translateY(-100%);
        }

        body.has-banner &.is-hidden {
            transform: translateY(calc(-100% - var(--banner-height, 0px)));
        }

        .app-link {
            display: flex;
            align-items: center;
            min-width: 0;
            max-width: none;

            a {
                color: inherit;
                text-decoration: none;
            }

            > a,
            > .app-title {
                margin: 0 6px;
            }
        }

        #es-logo-mobile {
            width: auto;
            height: 24px;
        }

        .app-title {
            overflow: hidden;
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: inherit;

            a {
                color: inherit;
                text-decoration: none;
            }
        }
    }

    .mobile-top-bar svg,
    .mobile-bottom-bar-wrap svg,
    .mobile-overlay-host svg,
    .mobile-find-bar svg,
    #comments-panel svg {
        width: 24px;
        height: 24px;
    }

    body:has(#comments-panel.open) .mobile-top-bar,
    body:has(#mobile-overlay-host.is-open) .mobile-top-bar {
        transform: translateY(-100%);
    }

    body.has-banner:has(#comments-panel.open) .mobile-top-bar,
    body.has-banner:has(#mobile-overlay-host.is-open) .mobile-top-bar {
        transform: translateY(calc(-100% - var(--banner-height, 0px)));
    }

    .mobile-bar-scrim {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: transparent;

        &[hidden] {
            display: none;
        }
    }

    .mobile-bottom-bar-wrap {
        position: fixed;
        bottom: 16px;
        left: 50%;
        z-index: 1050;
        display: flex;
        flex-direction: column;
        border-radius: 9999px;
        background-color: var(--ds-surface-raised);
        box-shadow: var(--ds-shadow-raised);
        overflow: hidden;
        transform: translateX(-50%);
        transition:
            transform 240ms ease,
            opacity 240ms ease;

        &[hidden] {
            display: none;
        }

        &.is-hidden {
            opacity: 0;
            transform: translateX(-50%) translateY(160%);
            pointer-events: none;
        }

        &.is-expanded {
            width: min(360px, calc(100vw - 32px));
            border-radius: 32px;

            .mobile-bar-extras {
                grid-template-rows: 1fr;
            }

            .mobile-bar-extras-inner {
                padding: 8px;
                opacity: 1;
            }
        }
    }

    body:has(#comments-panel.open) .mobile-bottom-bar-wrap,
    body:has(#mobile-overlay-host.is-open) .mobile-bottom-bar-wrap {
        opacity: 0;
        transform: translateX(-50%) translateY(160%);
        pointer-events: none;
    }

    .mobile-bar-extras {
        display: grid;
        grid-template-rows: 0fr;
        width: 100%;
    }

    .mobile-bar-extras-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px;
        min-height: 0;
        padding: 0 8px;
        border-bottom: 1px solid var(--ds-border);
        background-color: var(--ds-background-input);
        color: var(--ds-text-subtle);
        overflow: hidden;
        opacity: 0;
    }

    .mobile-extra-tile {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 12px;
        border: none;
        border-radius: 12px;
        background: transparent;
        font-size: 15px;
        text-align: left;
        color: var(--ds-text);
        cursor: pointer;

        &:hover {
            background: var(--ds-background-neutral-subtle-hovered);
        }

        .mobile-action-icon {
            display: inline-flex;
            flex: 0 0 auto;

            svg {
                color: var(--ds-text-subtle);
            }
        }

        .mobile-action-label {
            font-size: 14px;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: var(--ds-text-subtle);
            overflow: hidden;
        }
    }

    nav#mobile-bottom-bar,
    nav#mobile-page-bar {
        position: static;
        top: auto;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        width: auto;
        height: 48px !important;
        min-height: 48px !important;
        padding: 8px;
        background-color: var(--ds-surface-raised);
        box-shadow: none;
        font-size: 14px;
        font-weight: 400;
        color: var(--ds-text);
    }

    .mobile-bar-slot {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--ds-text-subtle);
        cursor: pointer;

        &:hover {
            border-radius: 50%;
            background: var(--ds-background-neutral-subtle-hovered);
            color: var(--ds-text);
        }

        &:active {
            background: var(--ds-background-neutral-subtle-pressed);
        }

        .mobile-action-icon {
            display: inline-flex;
        }

        svg {
            width: 24px;
            height: 24px;
            color: var(--ds-text-subtle);
        }

        .mobile-action-label {
            display: none;
        }
    }

    .mobile-overlay-host {
        position: fixed;
        inset: 0;
        z-index: 1100;

        &[hidden] {
            display: none;
        }

        &.is-open {
            .mobile-overlay-scrim {
                opacity: 1;
            }

            .mobile-sheet {
                transform: translateY(0);
            }
        }
    }

    .mobile-overlay-scrim {
        position: absolute;
        inset: 0;
        background: var(--ds-blanket);
        opacity: 0;
        transition: opacity 280ms ease;
    }

    .mobile-sheet {
        position: absolute;
        top: 28px;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        border-radius: 16px 16px 0 0;
        background-color: var(--ds-background-input);
        box-shadow: none;
        transform: translateY(100%);
        transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow: hidden;

        &[hidden] {
            display: none;
        }
    }

    .mobile-sheet-grip {
        flex: 0 0 auto;
        width: 48px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 999px;
        background: var(--ds-border-bold);
        touch-action: none;
    }

    .mobile-sheet-header {
        position: relative;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 52px;
        padding: 0 8px;
    }

    .mobile-sheet-title {
        font-size: 20px;
        font-weight: 650;
        color: var(--ds-text);
    }

    .mobile-sheet-close {
        position: absolute;
        right: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--ds-text-subtle);
        cursor: pointer;
    }

    .mobile-sheet-body {
        flex: 1 1 auto;
        padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    .mobile-sheet-body[data-panel-body='navigation'] {
        padding: 8px 20px calc(24px + env(safe-area-inset-bottom));

        .navigation-container {
            display: flex !important;
            position: static !important;
            width: 100% !important;
            max-width: none !important;
            height: auto !important;
            background-color: var(--ds-background-input) !important;
            background-image: none !important;
            box-shadow: none !important;
            font-size: 16px !important;
        }

        .navigation {
            width: 100% !important;
            padding: 0 !important;
        }

        .navigation-container .nav-space-name,
        .navigation-container .link-not-active,
        .navigation-container .nav-section-header,
        .navigation-container .nav-sort-btn,
        .navigation-container .nav-sort-option,
        .navigation-container .nav-sort-option-label,
        .navigation-container .nav-sort-dropdown-label {
            color: var(--ds-text) !important;
        }

        .navigation-container .link-active {
            color: var(--ds-text-selected) !important;
        }

        .navigation-container .dot-icon,
        .navigation-container .tree-navigation-expanded,
        .navigation-container .tree-navigation-collapsed {
            color: var(--ds-icon-subtle) !important;
        }

        .tree-item:not(:has(.link-active)):hover,
        .nav-sort-btn:hover,
        .nav-sort-option:hover {
            background-color: var(--ds-background-neutral-subtle-hovered) !important;
        }

        .tree-item:has(.link-active) {
            background-color: var(--ds-background-selected) !important;
        }

        .tree-item:has(.link-active)::before {
            background-color: var(--ds-text-selected) !important;
        }

        .nav-sort-dropdown {
            background-color: var(--ds-surface-overlay) !important;
        }

        .nav-search {
            margin: 0 0 8px !important;
        }

        .nav-search-inner {
            margin-top: 10px;
        }

        .nav-search-bar {
            height: 48px;
        }

        .nav-search-input {
            font-size: 16px !important;
            color: var(--ds-text) !important;
        }
    }

    .mobile-sheet-body[data-panel-body='pageoptions'] {
        &,
        & * {
            font-size: 16px;
            color: var(--ds-text);
        }

        .mobile-section-label {
            font-size: 18px;
            font-weight: 650;
            letter-spacing: normal;
            text-transform: none;
        }

        .mobile-row[data-action='theme']:hover,
        .mobile-row[data-action='theme']:active {
            background: transparent;
        }
    }

    #subscribe-opts-mobile {
        display: block;
        width: 100%;
        font-size: 16px;

        .subscribe-icon-trigger {
            display: none;
        }

        .subscribe-icon-menu {
            display: block !important;
            position: static;
            min-width: 0;
            margin: 0;
            padding: 0;
            background: transparent;
            box-shadow: none;
        }

        .subscribe-icon-menu li {
            list-style: none;
        }

        .more-actions-subitem {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            min-height: 48px;
            padding: 0 8px;
            border-radius: 8px;
            font-size: 16px;
            text-align: left;
            color: var(--ds-text);
        }

        &.subscribed .subscribe-toggle {
            background: var(--ds-background-selected);
            color: var(--ds-text-selected);
        }

        &.subscribed .subscribe-toggle .subscribe-label {
            color: var(--ds-text-selected);
        }
    }

    .mobile-sheet-body[data-panel-body='details'] {
        .panel-author-section,
        .panel-section-group {
            padding-inline: 0;
        }

        .panel-body,
        .panel-outgoing-links-count {
            font-size: 16px;
        }

        .panel-owner-subtitle,
        .panel-add-label-error {
            font-size: 14px;
        }

        .panel-section-group h4 {
            font-size: 18px;
        }
    }

    .mobile-toc-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-toc-item {
        margin: 0;
    }

    .mobile-toc-link {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding-block: 8px;
        padding-inline: 8px;
        padding-inline-start: calc(8px + var(--toc-level, 0) * 16px);
        border-radius: 8px;
        font-size: 16px;
        line-height: 20px;
        word-break: break-word;
        color: var(--ds-text-subtle) !important;
        text-decoration: none;

        &:hover {
            background-color: var(--ds-background-neutral-subtle-hovered);
            text-decoration: none;
        }
    }

    .mobile-toc-link.is-top {
        font-weight: 650;
        color: var(--ds-text);
    }

    .mobile-toc-comments {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 650;
        color: var(--ds-text);
    }

    .mobile-account-id {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 10px 0;
        text-align: center;
    }

    .mobile-account-name {
        font-size: 20px;
        font-weight: 650;
        line-height: 24px;
        color: var(--ds-text) !important;
    }

    .mobile-account-email {
        font-size: 14px;
        color: var(--ds-text-subtlest) !important;
    }

    .mobile-section-label {
        padding: 16px 0 4px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ds-text-subtle);
    }

    .mobile-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: 48px;
        padding: 0 8px;
        border: none;
        border-radius: 8px;
        background: transparent;
        font-size: 16px;
        text-align: left;
        color: var(--ds-text) !important;
        text-decoration: none;
        cursor: pointer;

        &:hover {
            background: var(--ds-background-neutral-subtle-hovered);
            text-decoration: none;
        }

        svg {
            flex: 0 0 auto;
        }
    }

    .mobile-theme-row {
        .mobile-theme-ico {
            display: inline-flex;
            align-items: center;
        }

        .mobile-theme-label-dark {
            display: none;
        }

        html.dark-mode & .mobile-theme-label-light {
            display: none;
        }

        html.dark-mode & .mobile-theme-label-dark {
            display: inline;
        }
    }

    .mobile-search-field {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 48px;
        margin-bottom: 8px;
        padding: 0 12px;
        border: 1px solid var(--ds-border);
        border-radius: 4px;
        background: var(--ds-background-input);

        &:focus-within {
            border-color: var(--ds-border-focused);
            box-shadow: inset 0 0 0 1px var(--ds-border-focused);
        }

        svg {
            flex: 0 0 auto;
            color: var(--ds-text-subtle);
        }
    }

    .mobile-search-input {
        flex: 1 1 auto;
        min-width: 0;
        border: none;
        background: transparent;
        font-size: 16px;
        color: var(--ds-text);
        outline: none;
    }

    .mobile-search-count {
        padding: 12px 0 4px;
        font-size: 14px;
        font-weight: 650;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ds-text-subtle);

        span {
            margin-left: 4px;
        }
    }

    .mobile-search-result {
        display: block;
        padding: 12px 8px;
        border-radius: 8px;
        color: var(--ds-text) !important;
        text-decoration: none !important;

        &:hover {
            background: var(--ds-background-neutral-subtle-hovered);
        }
    }

    .mobile-search-result-title {
        font-size: 16px;
        font-weight: 400;
    }

    .mobile-search-result-sub {
        margin-top: 2px;
        font-size: 14px;
        color: var(--ds-text-subtle);
    }

    .mobile-search-status {
        padding: 12px 0;
        font-size: 16px;
        color: var(--ds-text-subtle);
    }

    .mobile-search-loading {
        display: flex;
        justify-content: center;
        padding: 24px 0;
    }

    .mobile-search-advanced {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 48px;
        margin-top: 16px;
        padding: 0 12px;
        border: 1px solid var(--ds-border);
        border-radius: 8px;
        background: transparent;
        font-size: 16px;
        font-weight: 600;
        color: var(--ds-text-selected);
        cursor: pointer;
    }

    .mobile-find-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1150;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--ds-border);
        background: var(--ds-surface-overlay);
        transform: translateY(100%);
        transition: transform 220ms ease;

        &.is-open {
            transform: translateY(0);
        }
    }

    .mobile-find-done {
        flex: 0 0 auto;
        padding: 6px;
        border: none;
        background: transparent;
        font-size: 16px;
        font-weight: 650;
        color: var(--ds-text-selected);
        cursor: pointer;
    }

    .mobile-find-field {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 48px;
        padding: 0 12px;
        border: 1px solid var(--ds-border);
        border-radius: 4px;
        background: var(--ds-background-input);

        &:focus-within {
            border-color: var(--ds-border-focused);
            box-shadow: inset 0 0 0 1px var(--ds-border-focused);
        }

        svg {
            color: var(--ds-text-subtle);
        }
    }

    .mobile-find-input {
        flex: 1 1 auto;
        min-width: 0;
        border: none;
        background: transparent;
        font-size: 16px;
        color: var(--ds-text);
        outline: none;
    }

    .mobile-find-count {
        flex: 0 0 auto;
        font-size: 13px;
        color: var(--ds-text-subtle);
    }

    .mobile-find-step {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--ds-text-subtle);
        cursor: pointer;

        &:hover {
            background: var(--ds-background-neutral-subtle-hovered);
            color: var(--ds-text);
        }
    }

    .mobile-find-hl {
        border-radius: 2px;
        background: var(--ds-background-accent-yellow-subtle);
        color: var(--ds-text);

        &.current {
            background: var(--ds-background-accent-orange-subtle);
        }
    }

    #comments-panel {
        --ds-background-input: #ffffff;
        --ds-surface-raised: #ffffff;
        --ds-text: #292a2e;
        --ds-text-subtle: #505258;
        --ds-icon-subtlest: #6b6e76;
        --ds-background-neutral-subtle-hovered: #0515240f;
        --ds-background-neutral-subtle-pressed: #0b120e24;
        position: fixed !important;
        inset: 28px 0 0 0 !important;
        z-index: 1100;
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-width: none !important;
        padding-top: 12px;
        border-radius: 16px 16px 0 0;
        background-color: var(--ds-background-input);
        transform: translateY(100%) !important;
        transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);

        html.dark-mode & {
            --ds-background-input: #242528;
            --ds-surface-raised: #242528;
            --ds-text: #cecfd2;
            --ds-text-subtle: #a9abaf;
            --ds-icon-subtlest: #96999e;
            --ds-background-neutral-subtle-hovered: #ceced912;
            --ds-background-neutral-subtle-pressed: #e3e4f21f;
        }

        &::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 50%;
            z-index: 3;
            width: 48px;
            height: 4px;
            border-radius: 999px;
            background: var(--ds-border-bold);
            transform: translateX(-50%);
        }

        &.open {
            transform: translateY(0) !important;
        }

        .panel-header {
            justify-content: center;
            min-height: 52px;
            padding: 12px 8px 8px;
        }

        .panel-header-title > svg {
            display: none;
        }

        .panel-header-actions {
            position: absolute;
            right: 8px;
        }

        .panel-header .panel-header-title h2 {
            font-size: 20px;
            font-weight: 650;
        }

        .comment-actions {
            background-color: var(--ds-background-input);
        }

        .panel-body {
            min-height: 0;
        }

        .comments-panel-footer {
            padding-bottom: max(40px, calc(12px + env(safe-area-inset-bottom, 0px)));
        }
    }

    #comment-list .thread-replies .thread-replies,
    #inline-comment-list .thread-replies .thread-replies {
        padding-left: 0;
    }

    #comment-list .thread-replies .thread-replies > .comment-node > .comment-element::before,
    #inline-comment-list .thread-replies .thread-replies > .comment-node > .comment-element::before {
        display: none;
    }

    #comment-list .thread-replies > .comment-node,
    #inline-comment-list .thread-replies > .comment-node {
        display: block !important;
    }

    #comment-list .show-replies-placeholder,
    #comment-list .show-more-replies-placeholder,
    #comment-list .thread-footer .thread-action[data-action='toggle-replies'],
    #inline-comment-list .show-replies-placeholder,
    #inline-comment-list .show-more-replies-placeholder,
    #inline-comment-list .thread-footer .thread-action[data-action='toggle-replies'] {
        display: none !important;
    }

    #inline-comment-sidebar {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1100 !important;
        flex-direction: column;
        width: 100% !important;
        max-width: none !important;
        height: 60vh !important;
        max-height: 60vh !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -8px 24px rgba(9, 30, 66, 0.25) !important;
        transform: translateY(100%);
        transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow: hidden;

        &.showed {
            transform: translateY(0);
        }
    }

    #inline-comment-list {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .main-panel.wiki-content .description {
        min-height: 0 !important;
    }

    #comments,
    #comment-list,
    #comments-panel,
    #inline-comment-sidebar,
    #inline-comment-list {
        font-size: 16px;

        .comment-author-name,
        .comment-author-email,
        .comment-description,
        .comment-content,
        .thread-action,
        .show-replies-label,
        .confluence-input,
        .button {
            font-size: 16px;
        }
    }

    #comments .comments-header-title {
        font-size: 18px;
    }

    #inline-comment-editor {
        max-width: none !important;
    }

    .comment-actions {
        visibility: visible !important;
    }

    .nav-mobile-links {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-link-row,
    .mobile-link-summary {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 0 8px;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 400;
        color: var(--ds-text) !important;
        text-decoration: none !important;
        cursor: pointer;

        &:hover {
            background-color: var(--ds-background-neutral-subtle-hovered);
            text-decoration: none !important;
        }
    }

    .mobile-link-summary {
        justify-content: space-between;
        list-style: none;

        &::-webkit-details-marker {
            display: none;
        }
    }

    .mobile-link-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .mobile-link-logo {
        inline-size: auto;
        max-block-size: 20px;
    }

    .mobile-link-chevron {
        display: inline-flex;
        flex: none;
        color: var(--ds-text-subtle) !important;

        & svg {
            inline-size: 20px;
            block-size: 20px;
        }
    }

    .mobile-link-children {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    footer.page-footer {
        --footer-color: var(--ds-text) !important;
        --footer-background-color: var(--ds-surface) !important;
        --footer-link-color: var(--ds-text) !important;
        --footer-text-font-size: 14px !important;
        --footer-link-font-size: 14px !important;
        padding-bottom: 72px !important;
        padding-inline: 0;
        border-block-start: 1px solid var(--ds-border);
        background-color: var(--ds-surface) !important;
        box-shadow: none !important;

        & .footer-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            max-inline-size: none;
            margin: 0;
            padding-inline: 20px;
            font-weight: 650;
            text-align: start;
        }

        & .footer-group,
        & .footer-single-link {
            margin: 0;
        }

        & .footer-title,
        & .footer-section-title {
            font-size: 14px;
            font-weight: 650;
            color: var(--ds-text) !important;
        }

        & .footer-section-title {
            margin-block-start: 12px;
            font-size: 12px;
        }

        & ul.footer-links,
        & .footer-section-links {
            display: flex !important;
            flex-direction: column;
            gap: 0 !important;
            margin: 0;
            padding-block: 0 !important;
            padding-inline: 12px 0 !important;
            list-style: none;
        }

        & .footer-container ul {
            padding-inline-start: 12px;
        }

        & li.footer-section-link {
            margin-inline-start: 0;
        }

        & .footer-links a,
        & .footer-single-link a {
            display: block;
            inline-size: auto;
            padding-block: 7px;
            padding-inline: 0;
            background-color: transparent !important;
            font-size: 14px !important;
            color: var(--ds-text) !important;
            text-decoration: none;

            &:hover {
                background-color: transparent !important;
                color: var(--ds-text) !important;
                text-decoration: none !important;
            }
        }

        & .footer-hr {
            inline-size: 100%;
            block-size: 0;
            margin-block: 12px;
            border: none;
            border-block-start: 1px solid var(--ds-border);
            background: none !important;
        }

        & .container {
            padding-inline: 20px;
            text-align: start;
        }

        & .page-footer-text,
        & .page-footer-text-container a {
            color: var(--ds-text) !important;
        }
    }
}