.room-main { background:var(--white); padding-bottom:90px; }
.room-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin:5px 0 29px; }
.room-heading .detail-title { margin:10px 0 12px; }
.room-heading .detail-title em { font-style:normal; color:#a4684b; }
.room-subtitle { margin:0; color:#756a62; font-size:14px; }
.room-map-link { display:inline-flex; align-items:center; gap:8px; flex:none; padding:12px 16px; border:1px solid var(--line); border-radius:100px; font-size:12px; font-weight:700; }
.room-map-link:hover { background:#f7f1ea; }
.room-map-link .icon { width:18px; height:18px; color:var(--green); }
.room-gallery { display:grid; grid-template-columns:minmax(0,1.48fr) minmax(0,1fr); gap:13px; margin-bottom:35px; height:505px; }
.room-featured { position:relative; display:block; width:100%; height:100%; overflow:hidden; padding:0; border:0; border-radius:16px; background:#eae1d8; cursor:zoom-in; }
.room-featured img { display:block; width:100%; height:100%; object-fit:cover; }
.room-photo-count,.room-view-all { position:absolute; bottom:18px; padding:9px 13px; border-radius:100px; background:rgba(255,253,249,.94); color:#3c3029; font-size:11px; font-weight:700; box-shadow:0 5px 16px rgba(38,27,21,.13); }
.room-photo-count { left:18px; }
.room-view-all { right:18px; }
.room-thumb-column { display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid #e8ded3; border-radius:16px; background:#f8f3ed; }
.room-thumb-heading { display:flex; justify-content:space-between; gap:10px; color:#6e594b; font-size:10px; font-weight:700; letter-spacing:.12em; }
.room-thumb-heading span:last-child { color:#9c8172; letter-spacing:0; font-weight:500; }
.room-thumbs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:20px; overflow:auto; }
.room-thumb { position:relative; height:99px; overflow:hidden; padding:0; border:3px solid transparent; border-radius:9px; background:#e8ded3; cursor:pointer; }
.room-thumb.active { border-color:#8e5b43; }
.room-thumb:focus-visible { outline:3px solid #b7775c; outline-offset:2px; }
.room-thumb img { width:100%; height:100%; object-fit:cover; }
.room-thumb span { position:absolute; bottom:5px; right:5px; padding:2px 5px; border-radius:4px; background:rgba(255,253,249,.9); font-size:9px; font-weight:700; }
.room-caption { color:#6d6259; margin:auto 0 0; padding-top:15px; font-size:12px; }
.room-layout { display:grid; grid-template-columns:minmax(0,1fr) 355px; gap:70px; align-items:start; }
.room-quick-facts { display:flex; flex-wrap:wrap; gap:10px; padding:7px 0 30px; border-bottom:1px solid #e8ded3; }
.room-quick-facts span { display:inline-flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid #efe3d7; border-radius:10px; background:linear-gradient(145deg,#fffefa,#f2e7dc); box-shadow:0 4px 8px rgba(91,55,35,.07); font-size:11px; font-weight:700; color:#684b3e; }
.room-quick-facts .icon { width:17px; height:17px; }
.room-section { padding:33px 0; border-bottom:1px solid #e8ded3; }
.room-section h2 { margin:9px 0 16px; font:500 34px/1.2 Fraunces,Georgia,serif; letter-spacing:-.04em; }
.room-section p { max-width:680px; color:#70665f; font-size:14px; line-height:1.85; }
.room-section p + p { margin-top:14px; }
.room-amenities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; margin:24px 0; }
.room-amenities span { display:flex; align-items:center; gap:11px; font-size:13px; }
.room-amenities .icon { width:35px; height:35px; padding:8px; flex:none; border-radius:11px; background:linear-gradient(145deg,#fffefa,#e9d6c6); color:#755341; box-shadow:0 5px 9px rgba(95,61,43,.12); }
.room-fineprint { font-size:11px!important; }
.room-address { font-weight:700; color:#382f29!important; }
.room-rental-card { position:sticky; top:24px; padding:27px; border:1px solid #e8ded3; border-radius:18px; background:white; box-shadow:var(--shadow); }
.room-price { display:flex; align-items:baseline; gap:9px; margin:14px 0 4px; }
.room-price strong { font:500 42px/1 Fraunces,Georgia,serif; letter-spacing:-.06em; }
.room-price span { color:#756a62; font-size:11px; }
.room-rental-card > p { color:#756a62; font-size:12px; }
.room-rental-card .button { width:100%; margin:16px 0 22px; }
.room-terms { border-top:1px solid #e8ded3; padding-top:20px; }
.room-terms h3 { margin:0 0 13px; font:500 22px Fraunces,Georgia,serif; }
.room-terms dl { margin:0; }
.room-terms dl div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #f1eae3; font-size:12px; }
.room-terms dt { color:#756a62; }
.room-terms dd { margin:0; text-align:right; font-weight:700; }
.room-rental-card > small { display:block; margin-top:18px; color:#786c63; font-size:10px; line-height:1.7; }
.room-dialog { width:min(100vw - 28px,1100px); max-width:none; max-height:calc(100vh - 28px); padding:0; overflow:hidden; border:0; border-radius:16px; background:#1f1b18; color:#fff; box-shadow:0 30px 95px rgba(0,0,0,.4); }
.room-dialog::backdrop { background:rgba(25,20,17,.82); }
.room-dialog-head { display:flex; align-items:center; gap:20px; padding:17px 21px; font-size:11px; font-weight:700; letter-spacing:.1em; }
.room-dialog-head span:nth-child(2) { margin-left:auto; }
.room-dialog-head button { width:36px; height:36px; border:1px solid #6e625c; border-radius:50%; background:transparent; color:#fff; cursor:pointer; }
.room-dialog-body { display:grid; grid-template-columns:50px minmax(0,1fr) 50px; align-items:center; gap:8px; padding:0 16px 15px; }
.room-dialog-body > button { width:46px; height:46px; border:1px solid #6e625c; border-radius:50%; background:#352e29; color:#fff; font-size:30px; cursor:pointer; }
.room-dialog figure { margin:0; text-align:center; }
.room-dialog figure img { display:block; width:100%; height:min(68vh,650px); object-fit:contain; }
.room-dialog figcaption { margin-top:9px; color:#ddd0c7; font-size:12px; }
@media(max-width:1050px) { .room-layout { gap:30px; } .room-gallery { height:445px; } .room-thumb { height:80px; } }
@media(max-width:850px) { .room-gallery { grid-template-columns:1fr; height:auto; } .room-featured { height:480px; } .room-thumbs { display:flex; overflow-x:auto; } .room-thumb { flex:0 0 88px; height:72px; } .room-thumb-column { padding:17px; } .room-caption { margin-top:0; } .room-layout { grid-template-columns:1fr; } .room-rental-card { grid-row:1; position:static; } }
@media(max-width:600px) { .room-main { padding-bottom:60px; } .room-heading { display:block; } .room-heading .detail-title { font-size:43px; } .room-subtitle { font-size:12px; line-height:1.7; } .room-map-link { margin-top:17px; } .room-featured { height:360px; } .room-view-all { right:10px; bottom:10px; } .room-photo-count { left:10px; bottom:10px; } .room-amenities { grid-template-columns:1fr; } .room-dialog-body { grid-template-columns:35px minmax(0,1fr) 35px; gap:2px; padding-inline:6px; } .room-dialog-body > button { width:34px; height:34px; font-size:24px; } .room-dialog figure img { height:min(70vh,580px); } }