/* ── Layout ── */
.app-layout {
    height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
    width: 260px;
    min-width: 260px;
    transition: width 0.3s;
}

.nav .nav-link {
    color: white;
}

.nav .nav-link.active {
    color: grey;
}

/* ── Login ── */
.login-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* ── Cards ── */
.hover-shadow:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.transition {
    transition: all 0.3s ease;
}

.shop-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ── Scrollbar ── */
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: #dee2e6;
    border-radius: 10px;
}

/* ── Mobile nav bar ── */
.mobile-tab-bar {
    z-index: 1050;
    height: 65px;
}

.tab-item {
    transition: color 0.2s ease-in-out;
}

/* ── Shop scroll containers ── */
.shop-scroll {
    overflow-x: hidden;
}

/* ── Single shop panels ── */
.photo-panel {
    min-height: 350px;
    height: 75vh;
}

.comment-panel {
    min-height: 350px;
    height: calc(75vh - 105px);
}

/* ── Mobile ── */
@media (max-width: 991.98px) {
    .sidebar {
        display: none !important;
    }

    /* Push content above the fixed mobile nav */
    .shop-scroll {
        padding-bottom: 75px;
    }

    .photo-panel {
        height: 320px;
        min-height: 220px;
    }

    .comment-panel {
        height: 300px;
        min-height: 220px;
    }

    .hover-shadow:hover {
        transform: none;
    }
}

/* ── 1280×720 tweaks ── */
@media (min-width: 992px) and (max-height: 780px) {
    .photo-panel {
        height: 68vh;
    }

    .comment-panel {
        height: calc(68vh - 105px);
    }
}