/* Hero Section */
        .suites-hero {
            height: 80vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        }

        .suites-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://westgate-havanna.s3.us-east-1.amazonaws.com/Static+Files/online+frontpage.PNG') center/cover;
            opacity: 0.4;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7));
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: var(--pure-white);
            max-width: 900px;
            padding: 0 20px;
        }

        .hero-subtitle {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            font-style: italic;
            letter-spacing: 3px;
            margin-bottom: 20px;
            opacity: 0.9;
        }

        .hero-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 4.5rem;
            font-weight: 300;
            letter-spacing: 8px;
            margin-bottom: 20px;
            line-height: 1.1;
        }

        .hero-description {
            font-size: 1rem;
            letter-spacing: 2px;
            font-weight: 300;
            line-height: 1.8;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Hero pick-dates CTA */
        .hero-cta-pick { margin-top: 28px; display:flex; flex-direction:column; align-items:center; gap:14px; }
        .hero-pick-btn {
            display:inline-flex; align-items:center; gap:12px; background:transparent; border:2px solid rgba(255,255,255,0.12); color:var(--pure-white); padding:12px 20px; border-radius:999px; cursor:pointer; font-family:'Montserrat',sans-serif; letter-spacing:1px; text-transform:none; transition: all 220ms ease; font-size:1rem;
        }
        .hero-pick-btn i { color: var(--accent-red); font-size:1.1rem; }
        .hero-pick-btn .hero-pick-text { color: var(--pure-white); font-weight:500; }
        .hero-pick-btn:hover { background: rgba(255,255,255,0.02); transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.28); border-color: rgba(255,255,255,0.18); }

        /* Inline hero calendar wrapper */
        .hero-calendar-wrapper { width: min(700px, 95%); background: rgba(255,255,255,0.98); border-radius:12px; margin-top: 12px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 320ms ease, opacity 260ms ease, transform 260ms ease; transform-origin: top center; box-shadow: 0 20px 60px rgba(0,0,0,0.18); position: relative; z-index: 1030; }
        .hero-calendar-wrapper.open { max-height: 800px; opacity: 1; transform: translateY(0); }
        .hero-calendar-inputs { display:flex; gap:12px; padding:12px 18px; align-items:center; justify-content:center; border-bottom:1px solid rgba(0,0,0,0.06); }
        .hero-calendar-inputs .input-luxury { background:transparent; border-bottom:1px solid #ddd; padding:8px 10px; color:var(--dark-grey); }
        /* Add extra top padding so the close button doesn't overlap calendar controls */
        .hero-calendar { padding: 56px 18px 18px; }

        /* Close button inside calendar wrapper */
        .hero-calendar-wrapper {
            width: min(700px, 95%);
            background: rgba(255,255,255,0.98);
            border-radius: 12px;
            /* center vertically in the hero: absolute positioned relative to .suites-hero */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -10%);
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height 320ms ease, opacity 260ms ease, transform 260ms ease;
            transform-origin: center top;
            box-shadow: 0 30px 80px rgba(0,0,0,0.22);
            z-index: 2000; /* above navbar (navbar uses z-index:1000) */
        }
        .hero-calendar-wrapper.open { max-height: 1100px; opacity: 1; transform: translate(-50%, -50%); }
        
                /* Close button styling */
                .hero-calendar-close {
                    position: absolute;
                    top: 4px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 44px;
                    height: 44px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                     background: var(--accent-red);
                    color: var(--pure-white);
                  
                    font-size: 1.25rem;
                    line-height: 1;
                    padding: 0;
                    cursor: pointer;
                    z-index: 2100;
                    border-radius: 10px;
                    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
                    transition: transform 160ms ease, background 160ms ease, color 160ms ease;
                }

                .hero-calendar-close:hover {
                  
                      background: rgba(255,255,255,0.98);
                    border: 1px solid rgba(0,0,0,0.06);
                    color: var(--dark-grey);
                }

                .hero-calendar-close:focus {
                    outline: none;
                    box-shadow: 0 0 0 4px rgba(196,30,58,0.14);
                }

                /* Make the button slightly smaller on narrow screens */
                @media (max-width: 768px) {
                    .hero-calendar-close { width: 36px; height: 36px; top: 10px; left: 50%; transform: translateX(-50%); font-size: 1rem; }
                }

        /* When calendar is open, hide hero headline/description for cleaner inline calendar */
        .hero-content.calendar-open .hero-subtitle,
        .hero-content.calendar-open .hero-title,
        .hero-content.calendar-open .hero-description {
            opacity: 0;
            transform: translateY(-12px);
            transition: opacity 240ms ease, transform 240ms ease;
            pointer-events: none;
            height: 0; /* collapse space where possible */
            margin: 0 !important;
            padding: 0 !important;
        }

        .hero-content.calendar-open { display: flex; flex-direction: column; align-items: center; gap: 8px; }

        .hero-content.calendar-open .hero-cta-pick { margin-top: 8px; }

        /* Hide the pick button when calendar is displayed (toggle behavior) */
        .hero-content.calendar-open .hero-pick-btn {
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            height: 0;
            margin: 0;
            padding: 0;
            transition: opacity 240ms ease, transform 240ms ease;
        }

       

        /* Filter Tabs */
        .filter-section {
            background: var(--pure-white);
            padding: 40px 0;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .filter-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 50px;
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 12px 30px;
            border: 1px solid #ddd;
            background: transparent;
            color: var(--dark-grey);
            font-size: 0.8rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Montserrat', sans-serif;
        }

        .filter-btn:hover,
        .filter-btn.active {
            background: var(--accent-red);
            border-color: var(--accent-red);
            color: var(--pure-white);
        }

        /* Scroll indicators for filter row (visual hint for horizontal scroll) */
        .filter-section { position: sticky; top: 0; z-index: 100; }
        .filter-indicator {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border-radius: 999px;
            background: rgba(255,255,255,0.95);
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            color: var(--dark-grey);
            font-size: 18px;
            font-weight: 600;
            pointer-events: none;
        }
        .filter-indicator.left { left: 8px; }
        .filter-indicator.right { right: 8px; }

        /* Suite Cards */
        .suites-section {
            padding: 100px 50px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .suite-card {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            margin-bottom: 100px;
            align-items: center;
            opacity: 0;
            transform: translateY(50px);
        }

        .suite-card:nth-child(even) {
            direction: rtl;
        }

        .suite-card:nth-child(even) > * {
            direction: ltr;
        }

        .suite-image-container {
            position: relative;
            overflow: hidden;
            height: 500px;
        }

        .suite-image-container:focus-visible {
            outline: 2px solid var(--accent-red);
            outline-offset: 4px;
        }

        .suite-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        .suite-card:hover .suite-image {
            transform: scale(1.05);
        }

        .suite-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--accent-red);
            color: var(--pure-white);
            padding: 10px 25px;
            font-size: 0.7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            z-index: 2;
        }

        .suite-gallery-hint {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(140deg, rgba(0,0,0,0.45), rgba(0,0,0,0.08));
            opacity: 0;
            transform: scale(0.98);
            transition: opacity 0.25s ease, transform 0.25s ease;
            pointer-events: none;
        }

        .suite-gallery-hint span {
            padding: 10px 20px;
            border-radius: 999px;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.28);
            color: var(--pure-white);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            backdrop-filter: blur(6px);
        }

        .suite-image-container:hover .suite-gallery-hint,
        .suite-image-container:focus-visible .suite-gallery-hint {
            opacity: 1;
            transform: scale(1);
        }

        /* Badge variants for conversion signals */
        .suite-badge.badge-reserved {
            background: linear-gradient(90deg, rgba(17,24,39,0.95), rgba(31,41,55,0.95));
            color: #ffffff;
            border: 1px solid rgba(255,255,255,0.06);
            padding: 8px 18px;
            border-radius: 8px;
            text-transform: none;
            font-weight: 600;
            letter-spacing: 0.6px;
        }

        .suite-badge.badge-hot { background: linear-gradient(90deg,#ff7a45,#ff4d4f); color:#fff; }
        .suite-badge.badge-popular { background: linear-gradient(90deg,#f59e0b,#f97316); color:#111; }
        .suite-badge.badge-selling { background: linear-gradient(90deg,#fb923c,#fb7185); color:#111; }
        .suite-badge.badge-limited { background: linear-gradient(90deg,#ef4444,#dc2626); color:#fff; }
        .suite-badge.badge-premium { background: linear-gradient(90deg,#d4af37,#b8860b); color:#111; }
        .suite-badge.badge-recommended { background: linear-gradient(90deg,#3b82f6,#2563eb); color:#fff; }
        .suite-badge.badge-default { background: rgba(0,0,0,0.45); color: #fff; }

        /* Disabled / reserved action button styling */
        .btn-disabled {
            background: linear-gradient(180deg,#f3f4f6,#e5e7eb);
            color: #6b7280;
            border: 1px solid rgba(0,0,0,0.06);
            cursor: not-allowed;
            opacity: 0.95;
            padding: 10px 18px;
            border-radius: 6px;
            font-weight: 600;
        }

        .btn-disabled[disabled] {
            pointer-events: none;
        }

        .suite-image-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 30px;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: var(--pure-white);
        }

        .suite-quick-info {
            display: flex;
            gap: 30px;
            font-size: 0.85rem;
            letter-spacing: 1px;
        }

        .suite-quick-info span {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .suite-quick-info i {
            color: var(--accent-red);
        }

        .suite-content {
            padding: 20px 0;
        }

        .suite-category {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.2rem;
            font-style: italic;
            color: var(--accent-red);
            margin-bottom: 10px;
            letter-spacing: 2px;
        }

        .suite-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: 3rem;
            font-weight: 300;
            margin-bottom: 20px;
            color: var(--dark-grey);
            line-height: 1.2;
        }

        .suite-description {
            font-size: 1rem;
            line-height: 1.9;
            color: var(--medium-grey);
            margin-bottom: 30px;
            font-weight: 300;
        }

        .suite-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 40px;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.9rem;
            color: var(--medium-grey);
        }

        .feature-item i {
            color: var(--accent-red);
            width: 20px;
        }

        .suite-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 30px;
            border-top: 1px solid #eee;
        }

        .suite-price {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2.5rem;
            color: var(--dark-grey);
            font-weight: 300;
        }

        .suite-price span {
            font-size: 1rem;
            color: var(--medium-grey);
            font-family: 'Montserrat', sans-serif;
        }

        .suite-actions {
            display: flex;
            gap: 15px;
        }

        .btn-primary {
            background: var(--accent-red);
            color: var(--pure-white);
            border: none;
            padding: 15px 35px;
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Montserrat', sans-serif;
        }

        .btn-primary:hover {
            background: var(--dark-grey);
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }

        .btn-secondary {
            background: transparent;
            color: var(--dark-grey);
            border: 1px solid var(--dark-grey);
            padding: 15px 35px;
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Montserrat', sans-serif;
        }

        .btn-secondary:hover {
            background: var(--dark-grey);
            color: var(--pure-white);
        }

        /* Comparison Section */
        .comparison-section {
            background: var(--dark-grey);
            color: var(--pure-white);
            /* padding: 100px 50px; */
        }

        .comparison-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .comparison-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .comparison-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 3rem;
            font-weight: 300;
            margin-bottom: 20px;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
        }

        .comparison-table th {
            padding: 20px;
            text-align: left;
            font-weight: 300;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-size: 0.8rem;
            border-bottom: 2px solid rgba(255,255,255,0.2);
        }

        .comparison-table td {
            padding: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            font-weight: 300;
        }

        .comparison-table tr:hover td {
            background: rgba(196,30,58,0.1);
        }

        .check-icon {
            color: var(--accent-red);
        }

        /* Amenities Grid */
        .suite-amenities {
            padding: 100px 50px;
            max-width: 1400px;
            margin: 0 auto;
            background: var(--pure-white);
        }

        .amenities-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .amenities-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 3rem;
            font-weight: 300;
            margin-bottom: 20px;
            color: var(--dark-grey);
        }

        .amenities-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
        }

        .amenity-card {
            text-align: center;
            padding: 40px 20px;
            border: 1px solid #eee;
            transition: all 0.4s ease;
        }

        .amenity-card:hover {
            border-color: var(--accent-red);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .amenity-icon {
            font-size: 2.5rem;
            color: var(--accent-red);
            margin-bottom: 20px;
        }

        .amenity-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.5rem;
            margin-bottom: 10px;
            font-weight: 300;
        }

        .amenity-desc {
            font-size: 0.9rem;
            color: var(--medium-grey);
            line-height: 1.6;
        }

        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, var(--dark-grey) 0%, #2d2d2d 100%);
            padding: 120px 50px;
            text-align: center;
            color: var(--pure-white);
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(196,30,58,0.05) 0%, transparent 70%);
            animation: rotate 30s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .cta-content {
            position: relative;
            z-index: 1;
            max-width: 700px;
            margin: 0 auto;
        }

        .cta-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 3.5rem;
            font-weight: 300;
            margin-bottom: 20px;
        }

        .cta-text {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 40px;
            opacity: 0.9;
            font-weight: 300;
        }

        .cta-btn {
            display: inline-block;
            background: var(--accent-red);
            color: var(--pure-white);
            padding: 20px 50px;
            font-size: 0.8rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 2px solid var(--accent-red);
        }

        .cta-btn:hover {
            background: transparent;
            color: var(--pure-white);
        }

  


        /* Responsive */
        @media (max-width: 1200px) {
            .amenities-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 992px) {
            .suite-card {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .suite-card:nth-child(even) {
                direction: ltr;
            }

            .suite-image-container {
                height: 400px;
            }

            .hero-title {
                font-size: 3rem;
            }

            .suite-name {
                font-size: 2.5rem;
            }

         
        }

        @media (max-width: 768px) {
            .navbar {
                padding: 15px 20px;
            }

            .nav-links {
                display: none;
            }

            .mobile-menu {
                display: block;
            }

            .suites-hero {
                height: 70vh;
            }

            .hero-title {
                font-size: 2.5rem;
                letter-spacing: 4px;
            }

            .filter-container {
                padding: 0 20px;
            }

            /* show indicators on small screens where filters become scrollable */
            .filter-indicator { display: flex; }

            .suites-section {
                padding: 60px 20px;
            }

            .suite-features {
                grid-template-columns: 1fr;
            }

            .suite-footer {
                flex-direction: column;
                gap: 20px;
                align-items: flex-start;
            }

            .amenities-grid {
                grid-template-columns: 1fr;
            }

            .comparison-table {
                font-size: 0.8rem;
            }

            .comparison-table th,
            .comparison-table td {
                padding: 10px;
            }

            .cta-title {
                font-size: 2.5rem;
            }

            /* Reduce top padding on small screens so layout stays balanced */
            .hero-calendar { padding-top: 44px; }

            .hero-calendar-close { top: 8px; left: 50%; transform: translateX(-50%); }
        }

        /* Make comparison table horizontally scrollable on small screens */
        @media (max-width: 992px) {
            .comparison-container {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding: 0 14px;
            }

            .comparison-table {
                min-width: 760px;
                width: max-content;
                border-collapse: collapse;
            }

            .comparison-container::-webkit-scrollbar {
                height: 8px;
            }
            .comparison-container::-webkit-scrollbar-track { background: transparent; }
            .comparison-container::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }
        }

        /* Make filter buttons horizontally scrollable on narrow screens */
        @media (max-width: 900px) {
            .filter-container {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                gap: 12px;
                padding: 10px 14px;
                justify-content: flex-start;
            }

            .filter-container::-webkit-scrollbar {
                height: 8px;
            }
            .filter-container::-webkit-scrollbar-track {
                background: transparent;
            }
            .filter-container::-webkit-scrollbar-thumb {
                background: rgba(0,0,0,0.12);
                border-radius: 8px;
            }

            .filter-btn {
                flex: 0 0 auto;
                white-space: nowrap;
            }
        }

        /* Suite Gallery Modal - responsive, touch-friendly slider */
        /* ============================================================
   SUITE GALLERY MODAL - PROFESSIONALLY REFACTORED
   ============================================================ */

/* ---- Base Modal ---- */
.suite-gallery-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transition: opacity 300ms ease;
}

.suite-gallery-modal.open {
    display: flex;
    opacity: 1;
}

/* ---- Overlay ---- */
.suite-gallery-modal .sg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.92));
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    cursor: pointer;
}

/* ---- Container ---- */
.suite-gallery-modal .sg-container {
    position: relative;
    width: min(1100px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    z-index: 1;
    padding: 48px 16px 16px;
    box-sizing: border-box;
}

/* ---- Close Button ---- */
.sg-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
    backdrop-filter: blur(4px);
}

.sg-close:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

.sg-close:active {
    transform: scale(0.95);
}

.sg-close svg {
    width: 22px;
    height: 22px;
}

/* ---- Slides Track ---- */
.sg-slides {
    width: 100%;
    height: min(68vh, 640px);
    display: flex;
    flex-wrap: nowrap;
    transition: transform 320ms cubic-bezier(.22,.9,.35,1);
    will-change: transform;
    border-radius: 12px;
    overflow: hidden;
    background: #0b0b0b;
    position: relative;
    touch-action: pan-y;
}

/* Single-image renderer (no translate slider) */
.sg-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    opacity: 0;
    transition: opacity 220ms ease;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.sg-main-image.is-visible {
    opacity: 1;
}

/* ---- Individual Slide ---- */
.sg-slide {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.sg-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 600ms ease;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.sg-slide:hover img {
    transform: scale(1.02);
}

/* ---- Navigation Arrows ---- */
.sg-prev,
.sg-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    transition: all 200ms ease;
    backdrop-filter: blur(4px);
}

.sg-prev { left: 16px; }
.sg-next { right: 16px; }

.sg-prev:hover,
.sg-next:hover {
    background: rgba(0,0,0,0.75);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-50%) scale(1.08);
}

.sg-prev:active,
.sg-next:active {
    transform: translateY(-50%) scale(0.95);
}

.sg-prev svg,
.sg-next svg {
    width: 20px;
    height: 20px;
}

/* ---- Caption ---- */
.sg-caption {
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    text-align: center;
    min-height: 24px;
    padding: 4px 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}

/* ---- Thumbnails ---- */
.sg-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 4px 4px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.sg-thumbs::-webkit-scrollbar {
    height: 4px;
}
.sg-thumbs::-webkit-scrollbar-track {
    background: transparent;
}
.sg-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
}

.sg-thumb {
    width: 80px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: all 200ms ease;
    background: #1a1a1a;
    position: relative;
}

.sg-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    transition: background 200ms ease;
}

.sg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sg-thumb:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.sg-thumb.active {
    opacity: 1;
    border-color: var(--accent-red, #C41E3A);
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(196,30,58,0.3);
}

.sg-thumb.active::after {
    background: transparent;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 768px) {
    .suite-gallery-modal .sg-container {
        width: 100vw;
        max-height: 100vh;
        padding: 52px 8px 12px;
        gap: 10px;
    }

    .sg-slides {
        height: 55vh;
        border-radius: 8px;
    }

    .sg-prev,
    .sg-next {
        width: 44px;
        height: 44px;
    }

    .sg-prev { left: 8px; }
    .sg-next { right: 8px; }

    .sg-close {
        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
    }

    .sg-thumb {
        width: 64px;
        height: 44px;
    }

    .sg-caption {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .sg-slides {
        height: 50vh;
        border-radius: 6px;
    }

    .sg-prev,
    .sg-next {
        width: 40px;
        height: 40px;
    }

    .sg-prev svg,
    .sg-next svg {
        width: 16px;
        height: 16px;
    }

    .sg-thumb {
        width: 56px;
        height: 40px;
    }
}

/* Focus styles for accessibility */
.sg-close:focus-visible,
.sg-prev:focus-visible,
.sg-next:focus-visible,
.sg-thumb:focus-visible {
    outline: 2px solid var(--accent-red, #C41E3A);
    outline-offset: 2px;
}