/* ── SS Responsive Nav (mobile + tablet) ── */

.ss-rnav-btn,
.ss-rnav-overlay,
.ss-rnav-drawer {
    display: none;
}

@media (max-width: 1024px) {
    .ss-rnav-overlay {
        display: block;
    }

    .ss-rnav-drawer {
        display: flex;
    }

    header.page_header nav.main_menu {
        display: none !important;
    }

    .ss-rnav-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        margin: 0 10px 0 0;
        border: 1px solid var(--ss-border, rgba(201, 169, 98, 0.35));
        border-radius: 10px;
        background: var(--ss-card, #fff);
        cursor: pointer;
        position: relative;
        z-index: 100010;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }

    .ss-rnav-btn__icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 20px;
    }

    .ss-rnav-btn__icon i {
        display: block;
        height: 2px;
        width: 100%;
        background: var(--ss-dark, #1a1a1a);
        border-radius: 2px;
        font-style: normal;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    body.ss-rnav-open .ss-rnav-btn__icon i:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.ss-rnav-open .ss-rnav-btn__icon i:nth-child(2) {
        opacity: 0;
    }

    body.ss-rnav-open .ss-rnav-btn__icon i:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .ss-rnav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 100020;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s ease;
    }

    .ss-rnav-overlay:not([hidden]) {
        opacity: 1;
        visibility: visible;
    }

    .ss-rnav-drawer {
        position: fixed;
        top: 0;
        right: 0;
        width: min(300px, 86vw);
        height: 100vh;
        height: 100dvh;
        z-index: 100030;
        background: #141414;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        display: flex;
        flex-direction: column;
    }

    body.ss-rnav-open .ss-rnav-drawer {
        transform: translateX(0);
    }

    .ss-rnav-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.3);
        flex-shrink: 0;
    }

    .ss-rnav-drawer__title {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--ss-gold-light, #e8d5a3);
        text-transform: uppercase;
    }

    .ss-rnav-drawer__close {
        width: 38px;
        height: 38px;
        border: 1px solid rgba(212, 175, 55, 0.35);
        border-radius: 8px;
        background: transparent;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
    }

    .ss-rnav-drawer__nav {
        display: flex;
        flex-direction: column;
        padding: 8px 0 24px;
        overflow-y: auto;
    }

    .ss-rnav-drawer__link {
        display: block;
        padding: 16px 24px;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 16px;
        font-weight: 500;
        text-align: right;
        direction: rtl;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        transition: background 0.2s ease, color 0.2s ease;
    }

    .ss-rnav-drawer__link:hover,
    .ss-rnav-drawer__link:focus {
        background: rgba(212, 175, 55, 0.14);
        color: var(--ss-gold-light, #e8d5a3) !important;
    }
}

@media (min-width: 1025px) {
    .ss-rnav-btn,
    .ss-rnav-overlay,
    .ss-rnav-drawer {
        display: none !important;
    }
}

[data-theme="dark"] .ss-rnav-btn {
    background: #1a1a1a;
    border-color: var(--ss-theme-border, rgba(212, 175, 55, 0.35));
}

[data-theme="dark"] .ss-rnav-btn__icon i {
    background: var(--ss-theme-gold-light, #f0d78c);
}