.am-mega {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--am-mega-top,0px);
    z-index: 99990;
    background: transparent;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1)
}

    .am-mega.is-open {
        display: block;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        animation: megaSlideIn .28s cubic-bezier(.22,1,.36,1) forwards
    }

    .am-mega.is-closing {
        pointer-events: auto;
        animation: megaSlideOut .22s cubic-bezier(.22,1,.36,1) forwards
    }

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

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes megaSlideOut {
    from {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(-8px)
    }
}

.am-mega > .am-container {
    max-width: var(--am-max,1280px);
    margin: 0 auto;
    padding: 0
}

.am-mega__wrap {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    box-shadow: var(--am-shadow, 0 10px 30px rgba(0,0,0,.10));
    background: var(--am-surface, #fff);
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--am-border, #e8e8ee);
}

.am-mega__close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--am-border, #e8e8ee);
    background: var(--am-surface-2, #f6f7fb);
    color: var(--am-text, #222);
    border-radius: 8px;
    cursor: pointer;
    z-index: 10;
    transition: background .18s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1),color .18s cubic-bezier(.22,1,.36,1)
}

    .am-mega__close:hover {
        background: #fff;
        transform: rotate(90deg)
    }

.am-mega__left {
    background: var(--am-surface-2, #f6f7fb);
    color: var(--am-text, #222);
    padding: 8px 0;
    border-right: 1px solid var(--am-border, #e8e8ee);
}

.am-mega__cats {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 540px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15,76,92,.55) rgba(15,76,92,.06);
}

    .am-mega__cats::-webkit-scrollbar {
        width: 10px;
    }

    .am-mega__cats::-webkit-scrollbar-track {
        background: linear-gradient(180deg, rgba(15,76,92,.05) 0%, rgba(15,76,92,.10) 100%);
        border-left: 1px solid rgba(15,76,92,.08);
        border-radius: 999px;
    }

    .am-mega__cats::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(56,128,143,.95) 0%, rgba(15,76,92,.92) 55%, rgba(10,52,63,.96) 100%);
        border-radius: 999px;
        border: 2px solid rgba(255,255,255,.92);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 10px rgba(15,76,92,.16);
    }

        .am-mega__cats::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(74,148,163,.98) 0%, rgba(20,88,104,.98) 55%, rgba(8,44,54,1) 100%);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 14px rgba(15,76,92,.22);
        }

    .am-mega__cats::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    .am-mega__cats::-webkit-scrollbar-corner {
        background: transparent;
    }

.am-mega__cat {
    border-bottom: 1px solid var(--am-border, #e8e8ee);
}

.am-mega__catbtn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--am-text, #222);
    background: transparent;
    border: 0;
    text-align: left;
    padding: 15px 20px;
    cursor: pointer;
    font-family: "Montserrat","Segoe UI",Roboto,Arial,sans-serif;
    transition: background .18s cubic-bezier(.22,1,.36,1),color .18s cubic-bezier(.22,1,.36,1),padding-left .18s cubic-bezier(.22,1,.36,1)
}

    .am-mega__catbtn:hover {
        background: rgba(15,76,92,.08);
        color: var(--am-red, #0F4C5C);
        padding-left: 22px
    }

    .am-mega__catbtn.is-active {
        background: rgba(15,76,92,.12);
        color: var(--am-red, #0F4C5C)
    }

.am-mega__name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
}

.am-mega__chev {
    width: 18px;
    height: 18px;
    opacity: .65;
    transition: transform .22s cubic-bezier(.22,1,.36,1),opacity .22s cubic-bezier(.22,1,.36,1)
}

.am-mega__catbtn:hover .am-mega__chev {
    opacity: 1
}

.am-mega__catbtn.is-active .am-mega__chev {
    transform: translateX(3px);
    opacity: 1
}

.am-mega__panel {
    background: var(--am-surface, #fff);
    color: var(--am-text, #222);
    min-height: 420px;
    padding: 0;
    position: relative;
    overflow: hidden
}

.am-mega__pane {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 0;
    height: 100%;
    min-height: 420px;
    align-items: stretch;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1)
}

    .am-mega__pane[hidden] {
        display: none
    }

    .am-mega__pane:not([hidden]) {
        opacity: 1;
        transform: translateX(0);
        animation: paneSlideIn .28s cubic-bezier(.22,1,.36,1) forwards
    }

@keyframes paneSlideIn {
    from {
        opacity: 0;
        transform: translateX(-12px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.am-mega__pane-col {
    min-width: 0;
    background: var(--am-surface, #fff);
    padding: 24px 28px
}

.am-mega__ttl {
    margin: 4px 0 10px;
    font-family: "Montserrat","Segoe UI",Roboto,Arial,sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
    opacity: .98;
    color: var(--am-text, #222);
}

.am-mega__all {
    display: inline-block;
    margin-bottom: 16px;
    font-family: "Montserrat","Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    opacity: .94;
    color: var(--am-text, #222);
    text-decoration: none;
    transition: opacity .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),color .18s cubic-bezier(.22,1,.36,1)
}

.am-mega__links li a:hover {
    opacity: 1;
    transform: translateX(4px);
    color: var(--am-red, #0F4C5C);
}

.am-mega__links {
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--am-border, #e8e8ee)
}

    .am-mega__links li {
        margin: 0;
        opacity: 0;
        animation: linkFadeIn .26s cubic-bezier(.22,1,.36,1) forwards
    }

        .am-mega__links li:nth-child(1) {
            animation-delay: .04s
        }

        .am-mega__links li:nth-child(2) {
            animation-delay: .08s
        }

        .am-mega__links li:nth-child(3) {
            animation-delay: .12s
        }

        .am-mega__links li:nth-child(4) {
            animation-delay: .16s
        }

        .am-mega__links li:nth-child(5) {
            animation-delay: .20s
        }

        .am-mega__links li:nth-child(n+6) {
            animation-delay: .24s
        }

@keyframes linkFadeIn {
    from {
        opacity: 0;
        transform: translateX(-8px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.am-mega__links li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 8px;
    color: var(--am-text, #222);
    text-decoration: none;
    font-family: "Roboto","Segoe UI",Arial,sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    transition: transform .18s cubic-bezier(.22,1,.36,1),opacity .18s cubic-bezier(.22,1,.36,1),color .18s cubic-bezier(.22,1,.36,1);
    opacity: .94
}

    .am-mega__links li a svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        transition: transform .18s cubic-bezier(.22,1,.36,1)
    }

    .am-mega__links li a:hover {
        opacity: 1;
        transform: translateX(4px);
        color: var(--am-red, #e21b23);
    }

        .am-mega__links li a:hover svg {
            transform: translateX(2px)
        }

.am-mega__media {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: var(--am-surface, #fff);
    padding: 0;
    position: relative;
    overflow: hidden;
    contain: layout paint
}

    .am-mega__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.10) 45%,rgba(0,0,0,.04) 100%);
        background-size: 220% 100%;
        animation: amMegaShimmer 1.05s ease-in-out infinite;
        opacity: .65;
        pointer-events: none
    }

@keyframes amMegaShimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

.am-mega__pane.is-img-ready .am-mega__media::after {
    opacity: 0;
    animation: none
}

.am-mega__media img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .26s cubic-bezier(.22,1,.36,1),transform .26s cubic-bezier(.22,1,.36,1);
    will-change: opacity,transform
}

    .am-mega__media img.is-ready {
        opacity: 1;
        transform: translateY(0)
    }

@media (max-width:1320px) {
    .am-mega > .am-container {
        max-width: 100%;
        padding: 0 16px
    }
}

@media (max-width:1200px) {
    .am-mega__pane {
        grid-template-columns: 1fr 320px
    }
}

@media (max-width:1024px) {
    .am-mega__wrap {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        position: relative;
        overflow: hidden;
        min-height: min(78vh, 640px);
    }

    .am-mega__close {
        position: relative;
        right: auto;
        top: auto;
        margin: 12px 12px 0 auto;
        justify-self: end;
        z-index: 12;
    }

    .am-mega__left,
    .am-mega__panel {
        grid-column: 1;
        grid-row: 2;
        position: relative;
        will-change: transform,opacity;
    }

    .am-mega__left {
        z-index: 1;
    }

    .am-mega__panel {
        display: none;
        min-height: 0;
        height: 100%;
        overflow: auto;
        background: var(--am-surface, #fff);
        z-index: 2;
    }

    .am-mega.is-drill .am-mega__panel {
        display: block;
    }

    .am-mega__cats {
        max-height: calc(100vh - 180px);
    }

    .am-mega__left.is-slide-out {
        animation: amSlideLeftOut .28s cubic-bezier(.22,1,.36,1) forwards;
    }

    .am-mega__left.is-slide-in {
        animation: amSlideLeftIn .28s cubic-bezier(.22,1,.36,1) forwards;
    }

    .am-mega__panel.is-slide-in {
        animation: amSlideRightIn .30s cubic-bezier(.22,1,.36,1) forwards;
    }

    .am-mega__panel.is-slide-out {
        animation: amSlideRightOut .28s cubic-bezier(.22,1,.36,1) forwards;
    }

    @keyframes amSlideLeftOut {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(-12%);
        }
    }

    @keyframes amSlideLeftIn {
        from {
            opacity: 0;
            transform: translateX(-12%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes amSlideRightIn {
        from {
            opacity: 0;
            transform: translateX(12%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes amSlideRightOut {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(12%);
        }
    }

    .am-mega__back {
        display: none;
        width: 100%;
        border: 0;
        background: var(--am-surface-2, #f6f7fb);
        color: var(--am-text, #222);
        font-weight: 900;
        letter-spacing: .2px;
        padding: 12px 14px;
        cursor: pointer;
        position: sticky;
        top: 0;
        z-index: 5;
        border-bottom: 1px solid var(--am-border, #e8e8ee);
    }

    .am-mega.is-drill .am-mega__back {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .am-mega__back:active {
        opacity: .92;
    }

    .am-mega__pane {
        grid-template-columns: 1fr;
        min-height: 0;
        height: auto;
    }

    .am-mega__media {
        display: block;
        padding: 14px 18px 0 18px;
        background: var(--am-surface, #fff);
        border-bottom: 1px solid var(--am-border, #e8e8ee);
    }

        .am-mega__media::after {
            inset: 14px 18px 0 18px;
            border-radius: 10px;
            opacity: .55;
        }

    .am-mega__pane.is-img-ready .am-mega__media::after {
        opacity: 0;
        animation: none;
    }

    .am-mega__media img {
        width: 100%;
        height: 220px;
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0,0,0,.12);
        object-fit: contain;
        background: #fff;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .26s cubic-bezier(.22,1,.36,1),transform .26s cubic-bezier(.22,1,.36,1);
    }

        .am-mega__media img.is-ready {
            opacity: 1;
            transform: translateY(0);
        }

    .am-mega.is-drilling .am-mega__media img {
        display: none !important;
    }

    .am-mega__pane-col {
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .am-mega,
    .am-mega__pane,
    .am-mega__links li,
    .am-mega__links li a,
    .am-mega__chev,
    .am-mega__catbtn,
    .am-mega__close,
    .am-mega__media img {
        transition: none !important;
        animation: none !important
    }

    .am-mega__media::after {
        animation: none !important
    }

    .am-mega.is-open,
    .am-mega.is-closing {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    .am-mega__pane:not([hidden]) {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }

    .am-mega__links li {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width:1024px) {
    .am-mega__media {
        display: none !important;
    }

        .am-mega__media::after {
            display: none !important;
        }
}