/**
 * Pooja's Annexe - Dedicated Desktop Stylesheet (>= 901px)
 * Complete Desktop UI: 3x3 Collection Grid, 6-Col Instagram, 3-Col Reviews, Desktop Tooltips & Navigation
 */

@media (min-width: 901px) {
    /* 1. Top Header Navigation (Desktop Bar) */
    .site-header-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1500;
        background: rgba(8, 14, 24, 0.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(240, 208, 138, 0.25);
        padding: 0.85rem 2.8rem;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    }

    .nav-container {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .nav-brand-logo {
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 700;
        color: #FFFFFF;
        letter-spacing: 0.12em;
        text-decoration: none;
        transition: color 0.25s ease;
        white-space: nowrap;
    }

    .nav-brand-logo:hover {
        color: var(--color-champagne-bright);
    }

    .desktop-only-nav {
        display: flex !important;
        align-items: center;
        gap: 2.2rem;
    }

    .nav-link {
        font-family: var(--font-body);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        transition: color 0.25s ease, transform 0.25s ease;
        padding: 0.4rem 0.6rem;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .nav-link:hover {
        color: var(--color-champagne-bright);
        transform: translateY(-1px);
    }

    .nav-link-admin {
        border: 1px solid var(--color-champagne-bright) !important;
        border-radius: 6px !important;
        padding: 0.45rem 1.1rem !important;
        color: var(--color-champagne-bright) !important;
        background: linear-gradient(135deg, rgba(240, 208, 138, 0.2) 0%, rgba(212, 175, 55, 0.08) 100%) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 12px rgba(240, 208, 138, 0.2) !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    .nav-hamburger-btn {
        display: none !important;
    }

    .mobile-nav-drawer,
    .mobile-nav-overlay {
        display: none !important;
    }

    /* 2. Section 4: 3-in-a-Row Collections (3x3 Grid) */
    .collections-rows-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;
        max-width: 1350px;
        margin: 0 auto;
    }

    .collection-carousel-row {
        position: relative;
        width: 100%;
    }

    .floating-carousel-arrow {
        display: none !important;
    }

    .row-carousel-track-container {
        position: relative;
        width: 100%;
        height: auto !important;
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .row-carousel-track {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
        width: 100% !important;
        transform: none !important;
    }

    .collection-row-card {
        position: relative;
        width: 100% !important;
        height: 420px !important;
        border-radius: var(--radius-default);
        overflow: hidden;
        cursor: pointer;
        border: 1px solid rgba(240, 208, 138, 0.3);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
        background: #0E1624;
        display: flex;
        align-items: flex-end;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .collection-row-card:hover {
        transform: translateY(-5px);
        border-color: var(--color-champagne-bright);
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(240, 208, 138, 0.25);
    }

    .card-floating-info {
        padding: 2.2rem 2.2rem;
    }

    .card-floating-info .card-title {
        font-size: 1.65rem;
        font-weight: 600;
        color: #FFFFFF;
        margin-bottom: 0.5rem;
    }

    /* 3. Section 5: Hotspots (Desktop Tooltips Beside Points) */
    .hotspot-stage-wrapper {
        max-width: 600px;
        margin: 0 auto;
    }

    .hotspot-stage {
        height: 820px;
        max-height: 85vh;
    }

    .hotspot-point {
        display: flex !important;
        width: 32px;
        height: 32px;
    }

    .hotspot-point .hotspot-card {
        display: block !important;
    }

    .hotspot-mobile-modal {
        display: none !important;
    }

    .mobile-hotspot-list {
        display: none !important;
    }

    /* 4. Section 7: Instagram (6-Column Magazine Grid) */
    .instagram-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 1.4rem !important;
        width: 100% !important;
    }

    .insta-card {
        height: 195px !important;
        flex: none !important;
    }

    /* 5. Section 8: Google Reviews (3-Column Symmetrical Grid) */
    .reviews-horizontal-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
        width: 100% !important;
    }

    .review-luxury-card {
        flex: none !important;
        padding: 2.5rem 2.2rem !important;
    }

    /* 6. Product Grid (3 Products Per Row on Desktop) */
    .category-products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem 2rem !important;
    }

    /* 7. Product Detail Modal (Desktop Split View) */
    .modal-box {
        grid-template-columns: 1.15fr 1fr !important;
        max-width: 1140px !important;
        height: 86vh !important;
        max-height: 760px !important;
        padding: 0 !important;
    }

    .modal-main-img-box {
        border-radius: 4px;
    }
}