.vl-rooms-section { width: 100%; background: #f2f4f7; font-family: 'Arvo', serif, system-ui; color: #222; }
.vl-rooms-section *, .vl-rooms-section *::before, .vl-rooms-section *::after { box-sizing: border-box; }
.vl-rooms-desktop { width: 100%; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 42% 58%; gap: 40px; padding: 60px 40px; align-items: stretch; }
.vl-rooms-left { display: flex; flex-direction: column; justify-content: space-between; }
.vl-main-heading { margin: 0 0 24px; font-size: 32px; line-height: 1.2; font-weight: 700; color: #111; }
.vl-room-description p { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: #444; }
.vl-stay-button { display: inline-flex; align-items: center; justify-content: center; width: 110px; height: 32px; margin-top: 10px; background: #8a171a; color: #fff !important; text-decoration: none !important; font-size: 11px; font-weight: 700; letter-spacing: 1px; transition: background .2s ease; }
.vl-room-navigation { width: 100%; margin-top: 30px; display: flex; align-items: center; gap: 12px; }
.vl-nav-arrow { background: none; border: none; padding: 0; cursor: pointer; color: #111; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; }
.vl-thumbnail-window { flex: 1; overflow: hidden; }
.vl-thumbnail-track { display: flex; gap: 12px; transition: transform .4s ease-in-out; }
.vl-room-thumb { flex: 0 0 calc((100% - 24px) / 3); aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; background: #e0e0e0; cursor: pointer; opacity: 0.7; transition: opacity .25s ease, border-color .25s ease; }
.vl-room-thumb.active, .vl-room-thumb:hover { opacity: 1; border-color: #8a171a; }
.vl-room-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-main-room { position: relative; width: 100%; height: 100%; min-height: 480px; background: transparent; overflow: hidden; }
.vl-main-room-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: opacity .3s ease; }
.vl-main-room-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.05); pointer-events: none; z-index: 1; }
.vl-main-room-label { position: absolute; left: 24px; bottom: 24px; z-index: 2; color: #ffffff; font-size: 18px; line-height: 1.25; font-weight: 700; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); pointer-events: none; }
.vl-main-room-label span { display: block; letter-spacing: 0.5px; }
.vl-rooms-mobile { display: none; }
@media (max-width: 850px) {
    .vl-rooms-desktop { display: none; }
    .vl-rooms-mobile { display: block; width: 100%; padding: 24px 0; }
    .vl-mobile-slider { width: 100%; overflow: hidden; padding-left: 20px; touch-action: pan-y; }
    .vl-mobile-track { display: flex; gap: 16px; transition: transform .35s cubic-bezier(.25, 1, .5, 1); will-change: transform; }
    .vl-mobile-slide { flex: 0 0 72vw; width: 72vw; }
    .vl-mobile-image-wrap { position: relative; width: 100%; aspect-ratio: 3 / 4; background: #e0e0e0; overflow: hidden; }
    .vl-mobile-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .vl-mobile-label { position: absolute; left: 16px; bottom: 16px; z-index: 2; color: #ffffff; font-size: 14px; line-height: 1.2; font-weight: 700; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
    .vl-mobile-label span { display: block; }
    .vl-mobile-content { padding: 24px 20px 10px; }
    .vl-mobile-title { margin: 0 0 14px; font-size: 20px; line-height: 1.25; font-weight: 700; color: #111; }
    .vl-mobile-description p { font-size: 13px; line-height: 1.5; color: #444; margin-bottom: 12px; transition: opacity 0.25s ease; }
}
.vl-main-room-image.vl-changing { opacity: 0.3; }