/*
 * Desktop two-panel navigation, matched to the original 65/35 split.
 * The existing mobile drawer rules in theme.css remain authoritative at <=800px.
 */
@media (min-width: 801px) {
    .luxanora-header .top-menu.nomobile {
        z-index: 42;
    }

    .luxanora-navigation-drawer__columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0;
    }

    .luxanora-navigation-drawer .luxanora-navigation-drawer__columns > .col-50 {
        display: block;
        float: none;
        width: auto;
        min-width: 0;
        vertical-align: initial;
    }

    .luxanora-navigation-drawer__secondary {
        position: relative;
        margin: 0;
        padding: 6px 0 0;
        border: 0;
    }

    .luxanora-navigation-drawer .luxanora-contact-menu {
        border-top: 0;
    }

    .luxanora-navigation-drawer__secondary::before {
        position: absolute;
        top: 20px;
        bottom: 8px;
        left: -28px;
        width: 1px;
        background: #131313;
        content: "";
    }

    .luxanora-header .luxanora-navigation-drawer {
        z-index: 40;
        right: 35%;
        width: 65%;
        padding-top: 140px;
        transition: transform .4s ease, opacity .4s ease;
        pointer-events: none;
    }

    body.open-menu .luxanora-header .luxanora-navigation-drawer {
        pointer-events: auto;
    }

    .luxanora-header .luxanora-menu-close {
        display: none;
    }

    body.open-menu .luxanora-header .top-menu.nomobile {
        background: #000 !important;
    }

    body.open-menu .luxanora-header .top-menu.nomobile .luxanora-header__wrap {
        justify-content: flex-start;
        margin-left: 6.6vw;
        margin-right: 0;
        transition: margin .4s ease;
    }

    body.open-menu .luxanora-header .top-menu.nomobile .logo {
        position: absolute;
        top: 4px;
        left: 0;
        flex: 0 0 150px;
        width: 150px;
        margin: 0;
        transform: none;
    }

    body.open-menu .luxanora-header .top-menu.nomobile .luxanora-header__contact {
        position: absolute;
        top: 17px;
        left: 144px;
        width: 330px;
        flex: 0 0 330px;
        font-size: 11px;
    }

    body.open-menu .luxanora-header .top-menu.nomobile .luxanora-header__navigation,
    body.open-menu .luxanora-header .top-menu.nomobile .luxanora-menu-toggle {
        opacity: 0;
        pointer-events: none;
    }

    .luxanora-safes-panel {
        position: fixed;
        z-index: 43;
        top: 0;
        right: 0;
        bottom: 0;
        left: 65%;
        overflow: hidden;
        background: #fff;
        color: #000;
        opacity: 0;
        transform: translateX(100%);
        transition: transform .4s ease, opacity .4s ease;
        pointer-events: none;
    }

    body.open-menu .luxanora-safes-panel {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }

    .luxanora-safes-panel__title {
        margin: 0;
        padding: 40px 31px 12px;
        color: #000;
        font-family: "Luxanora Home Helvetica", Helvetica, sans-serif;
        font-size: var(--luxanora-h2-size);
        font-weight: 300;
        letter-spacing: .05vw;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .luxanora-safes-panel__close {
        position: absolute;
        z-index: 3;
        top: -51px;
        right: -58px;
        display: block;
        width: 208px;
        height: 208px;
        padding: 0;
        border: 1px solid rgba(0, 0, 0, .2);
        border-radius: 50%;
        background: transparent;
        color: rgba(0, 0, 0, .5);
        cursor: pointer;
        transition: top .5s ease, right .5s ease;
    }

    .luxanora-safes-panel__close span {
        position: absolute;
        top: 92px;
        left: 92px;
        display: block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }

    .luxanora-safes-panel__close:focus-visible span {
        outline: 2px solid #000;
        outline-offset: 4px;
    }

    .luxanora-safes-panel__close span::before,
    .luxanora-safes-panel__close span::after {
        position: absolute;
        top: 11px;
        left: 2px;
        width: 20px;
        height: 1px;
        background: rgba(0, 0, 0, .5);
        content: "";
    }

    .luxanora-safes-panel__close span::before {
        transform: rotate(45deg);
    }

    .luxanora-safes-panel__close span::after {
        transform: rotate(-45deg);
    }

    .luxanora-safes-panel__close:hover {
        top: -43px;
        right: -37px;
    }

    .luxanora-safes-panel__scroll-indicator {
        position: absolute;
        z-index: 2;
        top: 127px;
        bottom: 0;
        left: 20px;
        width: 20px;
        color: #000;
        font-family: "Luxanora Helvetica", Helvetica, sans-serif;
        pointer-events: none;
    }

    .luxanora-safes-panel__scroll-marker {
        position: absolute;
        top: 0;
        left: 6px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #000;
    }

    .luxanora-safes-panel__scroll-label {
        position: absolute;
        top: 73px;
        left: 5px;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: .1vw;
        transform: rotate(-90deg);
        transform-origin: left top;
    }

    .luxanora-safes-panel__scroll-track {
        position: absolute;
        top: 120px;
        bottom: 5px;
        left: 10px;
        width: 1px;
        background: #dedede;
    }

    .luxanora-safes-panel__products {
        position: absolute;
        top: 126px;
        right: 0;
        bottom: 0;
        left: 60px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 20px 24px 30px;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .luxanora-safes-panel__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        column-gap: 0;
        row-gap: 50px;
    }

    .luxanora-safes-panel__product {
        display: block;
        min-width: 0;
        margin: 0 0 34px;
        overflow: hidden;
        color: #000;
        text-align: center;
        text-decoration: none;
    }

    .luxanora-safes-panel__product-image {
        display: flex;
        min-height: min(24vh, 217px);
        align-items: flex-end;
        justify-content: center;
    }

    .luxanora-safes-panel__product-image img {
        display: block;
        max-width: 100%;
        max-height: 217px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .luxanora-safes-panel__product-name,
    .luxanora-safes-panel__product-size {
        display: block;
        margin: 0;
        text-align: center;
        text-transform: uppercase;
    }

    .luxanora-safes-panel__product-name {
        padding-top: 16px;
        font-family: "Luxanora Helvetica", Helvetica, sans-serif;
        font-size: .95vw;
        font-weight: 400;
    }

    .luxanora-safes-panel__product-size {
        color: #616161;
        font-family: "Luxanora Helvetica", Helvetica, sans-serif;
        font-size: .75vw;
        font-weight: 300;
        letter-spacing: .05vw;
    }
}

@media (max-width: 800px) {
    .luxanora-safes-panel {
        display: none !important;
    }
}

@media (min-width: 801px) and (max-width: 1099px) {
    body.open-menu .luxanora-header .top-menu.nomobile .luxanora-header__wrap {
        margin-left: 6.5vw;
    }

    body.open-menu .luxanora-header .top-menu.nomobile .logo {
        width: 112px;
        flex-basis: 112px;
    }

    body.open-menu .luxanora-header .top-menu.nomobile .luxanora-header__contact {
        left: 120px;
        width: 270px;
        font-size: 9px;
    }

    .luxanora-safes-panel__title {
        padding-left: 24px;
        font-size: var(--luxanora-h2-size);
    }

    .luxanora-safes-panel__scroll-indicator {
        left: 12px;
    }

    .luxanora-safes-panel__products {
        left: 42px;
        padding-left: 12px;
        padding-right: 10px;
    }

    .luxanora-navigation-drawer .luxanora-navigation-drawer__secondary .luxanora-contact-menu li {
        padding: 0;
    }

    .luxanora-navigation-drawer .luxanora-navigation-drawer__secondary .luxanora-contact-menu a {
        padding: 7px 0;
        font-size: clamp(10px, 1.2vw, 12px);
        letter-spacing: .13vw;
    }

    .luxanora-navigation-drawer .luxanora-navigation-drawer__secondary .luxanora-contact-menu span {
        font-size: clamp(9px, 1vw, 10px);
    }

    .luxanora-safes-panel__product-name {
        font-size: 11px;
    }

    .luxanora-safes-panel__product-size {
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .luxanora-safes-panel,
    .luxanora-header .luxanora-navigation-drawer {
        transition-duration: .01ms;
    }

    .luxanora-safes-panel__close {
        transition-duration: .01ms;
    }
}

/* Original Luxanora line-art background for the navigation drawer. */
.luxanora-header .luxanora-navigation-drawer {
    background-image: url("../../images/sloi_5_5.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 50% auto;
}

/* Preserve the source header motion and let the desktop drawer finish its exit. */
@media (min-width: 801px) {
    .luxanora-header .top-menu.nomobile .luxanora-header__wrap > .logo {
        transition: left .4s ease, top .4s ease, transform .4s ease, width .4s ease;
    }

    .luxanora-header .top-menu.nomobile .luxanora-header__contact {
        transition: transform .4s ease;
    }

    .luxanora-header .luxanora-navigation-drawer {
        transition: transform .4s ease, opacity .4s ease, visibility 0s linear .4s;
    }

    body.open-menu .luxanora-header .luxanora-navigation-drawer {
        transition: transform .4s ease, opacity .4s ease, visibility 0s linear 0s;
    }
}

/* Keep the home logo at the source position in the 801–1200px menu state. */
@media (min-width: 801px) and (max-width: 1200px) {
    body.home.open-menu .luxanora-header .top-menu.nomobile .luxanora-header__wrap > .logo {
        left: calc(-17px + .93vw);
        transform: translateX(0);
    }

    body.open-menu .luxanora-header .top-menu.nomobile .luxanora-header__contact {
        left: calc(10vw + 10px);
        width: 331px;
        font-size: 8.5pt;
    }
}

/* The source header wrapper narrows slightly at 1536px. */
@media (min-width: 1500px) {
    body.open-menu .luxanora-header .top-menu.nomobile .luxanora-header__wrap {
        margin-left: 6.45vw;
    }

    body.open-menu .luxanora-header .top-menu.nomobile .luxanora-header__contact {
        left: 10vw;
    }
}


/* Direction-aware shared header; its fixed bars stay in flow and menus remain interactive. */
.luxanora-header .top-menu {
    transition: background-color .4s, box-shadow .4s, transform 360ms cubic-bezier(.22, .61, .36, 1);
}

body.luxanora-header-hidden:not(.open-menu) .luxanora-header > .top-menu {
    transform: translate3d(0, -120%, 0);
    pointer-events: none;
}

body.luxanora-header-hidden .luxanora-header:focus-within > .top-menu,
body.open-menu .luxanora-header > .top-menu {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .luxanora-header .top-menu {
        transition-duration: .01ms, .01ms, .01ms;
    }
}
