/* 橙濱之丘｜全站共用樣式 */
:root {
    --cream:#fff9ed;
    --ink:#343b35;
    --muted:#626455;
    --rust:#a85031;
    --sage:#294b4c;
    --sage-light:#ece7ce;
    --line:#d9c8aa;
    --serif:'Microsoft JhengHei','PingFang TC',sans-serif;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:110px;
}

body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Microsoft JhengHei','PingFang TC',sans-serif;
    font-size: 18px;
    line-height:1.9;
}

a {
    color:inherit;
    text-decoration:none;
}

button,input,textarea {
    font:inherit;
}

button {
    color:inherit;
}

img {
    max-width:100%;
    display:block;
}

h1,h2,h3 {
    font-family:var(--serif);
    font-weight:700;
    line-height:1.5;
}

h2 {
    font-size:clamp(30px,3vw,43px);
    letter-spacing:.08em;
    margin:12px 0 25px;
}

h3 {
    font-size: 25px;
    margin:12px 0;
}

p {
    margin:0 0 20px;
}

[hidden] {
    display:none !important;
}

:focus-visible {
    outline:3px solid var(--rust);
    outline-offset:5px;
}

.wrap {
    width:min(1180px,86%);
    margin-inline:auto;
}

.narrow {
    width:min(860px,86%);
    margin-inline:auto;
}

.section {
    padding-block:85px;
}

.center {
    text-align:center;
}

.eyebrow {
    font-size: 13px;
    letter-spacing:.24em;
    font-weight:600;
    margin-bottom:12px;
    text-transform:uppercase;
}

.intro-text {
    color:var(--muted);
    max-width:640px;
}

.center .intro-text {
    margin-inline:auto;
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:20px;
    padding:9px 0;
    border-bottom:1px solid var(--ink);
    font-size: 16px;
}

.text-link span {
    transition:transform .25s;
}

.text-link:hover span {
    transform:translate(3px,-3px);
}

.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    background:var(--sage);
    color:white;
    padding:14px 26px;
    border:0;
    border-radius:40px;
    font-size: 16px;
    cursor:pointer;
    transition:background .2s,transform .2s;
}

.button:hover {
    background:var(--rust);
    transform:translateY(-2px);
}

.skip-link {
    position:fixed;
    left:20px;
    top:-100px;
    z-index:100;
    padding:12px;
    background:white;
}

.skip-link:focus {
    top:10px;
}

.site-header {
    height:100px;
    padding:12px 3.5%;
    display:flex;
    align-items:center;
    gap:30px;
    background:rgba(247,243,233,.97);
    position:sticky;
    top:0;
    z-index:20;
    border-bottom:1px solid #ddd8c970;
}

.brand {
    width:185px;
    flex-shrink:0;
}

.brand img {
    width:100%;
    max-height:72px;
    object-fit:contain;
}

#main-nav {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
    margin-left:auto;
}

#main-nav a {
    white-space:nowrap;
    font-size: 13px;
    position:relative;
}

#main-nav a::after {
    content:'';
    height:4px;
    width:4px;
    position:absolute;
    bottom:-9px;
    left:calc(50% - 2px);
    background:var(--rust);
    border-radius:50%;
    opacity:0;
}

#main-nav a[aria-current],#main-nav a:hover {
    color:var(--rust);
}

#main-nav a[aria-current]::after {
    opacity:1;
}

.header-book {
    background:var(--sage);
    color:white;
    border-radius:40px;
    padding:12px 20px;
    white-space:nowrap;
    font-size: 13px;
}

.header-book span {
    margin-left:12px;
}

.menu-toggle {
    display:none;
    background:none;
    border:0;
    width:44px;
    height:44px;
    padding:10px;
}

.menu-toggle span {
    display:block;
    height:1px;
    background:var(--ink);
    margin:6px 0;
}

.page-hero {
    height:390px;
    position:relative;
    overflow:hidden;
    color:white;
    border-radius:0 0 50% 8% / 0 0 40px 20px;
}

.page-hero > img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 55%;
}

.page-hero::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#172b30ad,#172b3025);
}

.page-hero-content {
    position:absolute;
    z-index:1;
    left:9%;
    bottom:60px;
    right:7%;
}

.page-hero h1 {
    font-size:clamp(36px,4vw,58px);
    margin:8px 0 15px;
    letter-spacing:.12em;
}

.page-hero p {
    margin-bottom:0;
}

.room-photo {
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:150px 150px 12px 12px;
    aspect-ratio:1;
}

.room-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s;
}

.room-photo:hover img {
    transform:scale(1.045);
}

.room-count {
    position:absolute;
    left:20px;
    bottom:20px;
    background:var(--cream);
    padding:4px 15px;
    border-radius:30px;
    font-size: 13px;
}

.round-arrow {
    position:absolute;
    right:17px;
    bottom:17px;
    border:1px solid #fff;
    border-radius:50%;
    width:38px;
    height:38px;
    text-align:center;
    color:white;
    background:#3335;
}

.room-caption {
    padding:22px 4px 0;
}

.room-caption > span {
    font-size: 13px;
    letter-spacing:.19em;
    color:var(--rust);
}

.room-caption h3 {
    margin:5px 0 8px;
    font-size: 29px;
}

.room-caption small {
    font-family:'Microsoft JhengHei',sans-serif;
    font-size: 13px;
    margin-left:18px;
    color:var(--muted);
}

.room-caption p {
    font-size: 16px;
    color:var(--muted);
}

.news-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.news-card img {
    width:100%;
    aspect-ratio:1.5;
    object-fit:cover;
    border-radius:12px 65px 12px 12px;
    transition:filter .3s;
}

.news-card a:hover img {
    filter:brightness(1.08);
}

.news-copy {
    padding-top:22px;
}

.news-copy .eyebrow {
    color:var(--rust);
}

.news-copy h3 {
    font-size: 23px;
}

.news-copy p {
    font-size: 16px;
    color:var(--muted);
}

.stay-cta {
    position:relative;
    border-top:1px solid var(--line);
    padding-block:70px 85px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    column-gap:6%;
}

.stay-cta > .eyebrow {
    grid-column:1/-1;
    color:var(--rust);
}

.stay-cta h2 {
    font-size:clamp(35px,4vw,55px);
}

.stay-cta .text-link {
    margin-top:15px;
    display:table;
}

.site-footer {
    background:#e7e9dc;
    border-radius:50% 50% 0 0 / 30px 30px 0 0;
    padding-top:70px;
}

.footer-top {
    display:grid;
    grid-template-columns:1fr 1fr .8fr;
    gap:65px;
    padding-bottom:45px;
}

.footer-logo {
    width:230px;
    margin-bottom:23px;
    mix-blend-mode:multiply;
}

.footer-top p {
    font-size: 13px;
}

.footer-phone {
    font-family:var(--serif);
    font-size: 29px;
}

.footer-nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 25px;
    align-content:start;
    font-size: 13px;
}

.footer-bottom {
    border-top:1px solid #c9cebd;
    padding-block:20px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size: 13px;
}

.note {
    font-size: 16px;
    color:var(--muted);
    background:var(--sage-light);
    border-radius:16px;
    padding:22px 25px;
}

.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
}

.article-body {
    margin-inline:auto;
}

.article-body > img {
    width:100%;
    border-radius:22px;
    max-height:530px;
    object-fit:cover;
    margin-bottom:40px;
}

.article-body h2 {
    font-size: 30px;
    margin-top:40px;
}

.article-nav {
    margin-top:50px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--line);
    padding-top:25px;
}

.room-detail-intro {
    display:grid;
    grid-template-columns:.65fr 1fr;
    gap:10%;
    padding-bottom:35px;
    margin-bottom:45px;
}

.room-detail-intro h2 {
    margin-top:0;
}

.gallery-main {
    margin:0;
}

.gallery-main img {
    width:100%;
    height:580px;
    object-fit:cover;
    border-radius:28px;
}

.gallery-thumbs {
    display:flex;
    gap:12px;
    overflow:auto;
    padding:15px 3px;
}

.gallery-thumb {
    padding:0;
    border:3px solid transparent;
    border-radius:12px;
    overflow:hidden;
    flex:0 0 125px;
    cursor:pointer;
    background:transparent;
}

.gallery-thumb[aria-pressed="true"] {
    border-color:var(--rust);
}

.gallery-thumb img {
    width:100%;
    height:86px;
    object-fit:cover;
}

.room-info {
    margin-top:45px;
}

.room-info h3 {
    font-size: 23px;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

@media(min-width:1600px) {
    .site-header {
        padding-inline:6%;
    }
    #main-nav {
        gap:30px;
    }
}

@media(max-width:1180px) {
    .site-header {
        gap:20px;
    }
    .brand {
        width:155px;
    }
    #main-nav {
        gap:15px;
    }
    .header-book {
        display:none;
    }
}

@media(max-width:900px) {
    .site-header {
        height:80px;
        padding-inline:6%;
        justify-content:space-between;
    }
    .brand {
        width:165px;
    }
    .brand img {
        max-height:60px;
    }
    .menu-toggle {
        display:block;
        cursor:pointer;
    }
    #main-nav {
        display:none;
        position:absolute;
        top:80px;
        left:0;
        right:0;
        padding:25px 8% 35px;
        background:var(--cream);
        box-shadow:0 15px 20px #3331;
        grid-template-columns:1fr 1fr;
        gap:24px;
    }
    #main-nav.is-open {
        display:grid;
    }
    #main-nav a {
        font-size: 15px;
    }
    #main-nav a::after {
        display:none;
    }
}

@media(max-width:760px) {
    .section {
        padding-block:55px;
    }
    .page-hero {
        height:320px;
    }
    .page-hero-content {
        bottom:45px;
        left:7%;
    }
    .page-hero-content > p:last-child {
        font-size: 16px;
    }
    .split,.room-detail-intro {
        grid-template-columns:1fr;
        gap:25px;
    }
    .news-grid {
        grid-template-columns:1fr;
        gap:38px;
    }
    .stay-cta {
        grid-template-columns:1fr;
        padding-block:50px;
    }
    .footer-top {
        grid-template-columns:1fr;
        gap:30px;
    }
    .footer-bottom {
        flex-direction:column;
        gap:8px;
    }
    .footer-nav {
        grid-template-columns:repeat(3,1fr);
    }
    .gallery-main img {
        height:330px;
    }
    .gallery-thumb {
        flex-basis:90px;
    }
    .gallery-thumb img {
        height:65px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*::before,*::after {
        transition:none !important;
        animation:none !important;
    }
}

/* 全站視覺：取自橘色屋瓦、奶油白牆與深色圓窗。 */
body {
    font-size:18px;
}

h1,h2,h3 {
    font-weight:700;
    /*letter-spacing:.025em;*/
}

.eyebrow {
    font-size:13px;
    letter-spacing:.14em;
}

.text-link {
    font-size:16px;
    font-weight:600;
    color:var(--rust);
    border-color:var(--rust);
}

.button {
    font-size:16px;
    font-weight:700;
    background:var(--rust);
    padding:15px 27px;
    box-shadow:0 4px 0 #743f201a;
}

.button:hover {
    background:var(--sage);
}

.intro-text {
    color:#626455;
}

.site-header {
    height:98px;
    padding-inline:3%;
    gap:24px;
    background:#fffaf1;
    border-bottom:3px solid #b76b3e;
}

.brand {
    width:180px;
}

#main-nav {
    gap:20px;
}

#main-nav a {
    font-size:15px;
    font-weight:600;
}

#main-nav a::after {
    width:7px;
    height:7px;
    bottom:-13px;
}

.header-book {
    background:var(--rust);
    font-size:15px;
    font-weight:700;
    padding:13px 18px;
}

.menu-toggle span {
    height:2px;
}

.page-hero {
    height:430px;
    border-radius:0 0 47% 6% / 0 0 65px 25px;
    background:var(--sage);
}

.page-hero::after {
    background:linear-gradient(90deg,#172c31c9,#172c3130);
}

.page-hero-content {
    bottom:65px;
    left:7%;
    right:7%;
}

.page-hero h1 {
    font-size:clamp(35px,4vw,56px);
    letter-spacing:.04em;
    font-weight:700;
    max-width:1100px;
}

.page-hero-content > p:last-child {
    font-size:18px;
    max-width:860px;
}

.page-ribbon {
    position:absolute;
    z-index:2;
    right:5%;
    top:30px;
    color:#ffdfa9;
    font-size:13px;
    letter-spacing:.12em;
    border-bottom:1px solid #ffdfa970;
    padding-bottom:8px;
}

.inner-page main {
    background:linear-gradient(180deg, #fff9ed 0%, #fbf4e5 100%);
}

.inner-page main > .section {
    position:relative;
}

.inner-page h2 {
    color:#915032;
}

.inner-page .eyebrow {
    color:var(--rust);
}

.inner-page .page-hero .eyebrow {
    color:#ffdda4;
}

.inner-page main > .narrow:not(.article-body) {
    width:min(980px,86%);
    padding:55px 60px;
    margin-top:60px;
    margin-bottom:60px;
    background:#fffdf6f2;
    border:1px solid #e8d5b6;
    border-radius:70px 16px 50px 16px;
    box-shadow:12px 15px 0 #c1814610;
}

.room-card {
    min-width:0;
}

.room-photo {
    border:7px solid #fff8eb;
    outline:1px solid #bf9066;
    border-radius:45% 45% 20px 20px;
}

.room-card:nth-child(3n+2) .room-photo {
    border-radius:22px 45% 22px 45%;
}

.room-card:nth-child(3n) .room-photo {
    border-radius:45% 22px 45% 22px;
}

.room-count {
    background:#f7d597;
    color:#754126;
    font-size:15px;
    font-weight:700;
}

.room-caption {
    padding:24px 8px 0;
}

.room-caption > span {
    font-size:13px;
    letter-spacing:.12em;
}

.room-caption p {
    font-size:17px;
}

.room-caption small {
    font-size:16px;
    color:#606253;
}

.news-copy p {
    font-size:17px;
}

.news-copy h3 {
    font-size:25px;
}

.note {
    font-size:16px;
    color:#4c5449;
    background:#eee9d3;
    border-left:4px solid #bc7445;
    padding:24px 28px;
}

.room-detail-intro {
    padding:35px 40px;
    background:#fffaf0;
    border:1px solid #e0c8a5;
    border-radius:50px 10px 50px 10px;
    gap:6%;
}

.gallery-main {
    padding:10px;
    border:1px solid #c18c5d;
    background:#fff9ed;
    border-radius:45px 45px 22px 22px;
}

.gallery-main img {
    border-radius:35px 35px 15px 15px;
}

.gallery-thumbs {
    margin-top:8px;
    padding-bottom:20px;
}

.gallery-thumb {
    flex-basis:135px;
}

.gallery-thumb[aria-pressed='true'] {
    border-color:#a85031;
}

.room-info {
    padding:35px;
    background:#f5e4c9;
    border-radius:15px 70px 15px 15px;
}

.room-info h3 {
    color:#874b30;
}

.article-body {
    background:#fffdf5;
    padding:45px;
    border:1px solid #e4d0ad;
    border-radius:50px 12px 50px 12px;
    margin-block:65px;
}

.article-nav {
    font-size:16px;
}

.stay-cta {
    width:100%;
    max-width:none;
    padding:85px max(7%,calc((100% - 1180px)/2)) 80px;
    background:radial-gradient(ellipse at 98% 110%,#e3bb72 0 24%,transparent 24.1%),url('../images/fac/landscape.svg') left bottom / cover no-repeat,#f5e9cd;
    border:0;
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.stay-cta h2 {
    position:relative;
    z-index:1;
    font-size:clamp(34px,3.7vw,53px);
    color:#874b30;
}

.stay-cta > .eyebrow {
    position:relative;
    z-index:1;
}

.stay-cta > div {
    position:relative;
    z-index:1;
    padding-bottom:75px;
}

.cta-house {
    position:absolute;
    z-index:0;
    width:330px;
    height:auto;
    aspect-ratio:20 / 11;
    right:2%;
    bottom:-12px;
    pointer-events:none;
}

.site-footer {
    position:relative;
    padding-top:70px;
    border-radius:0;
    background:url('../images/fac/roof-pattern.svg') repeat,#93452e;
    color:#fff3df;
}

.footer-top {
    gap:45px;
}

.footer-logo {
    mix-blend-mode:normal;
    background:#fff6e5;
    padding:13px;
    border-radius:45px 9px 40px 9px;
    width:245px;
}

.footer-phone {
    font-size:30px;
    font-weight:700;
}

.footer-top p {
    font-size:16px;
}

.footer-top .eyebrow {
    font-size:13px;
    color:#ffe0a8;
}

.footer-nav {
    font-size:16px;
    gap:15px 25px;
}

.site-footer .text-link {
    color:#fff3df;
    border-color:#efc69c;
}

.footer-bottom {
    border-color:#eeb58470;
    font-size:13px;
    align-items:center;
}

.footer-bottom a {
    font-size:13px;
}

@media (max-width:1200px) {
    .site-header {
        gap:18px;
    }
    #main-nav {
        gap:17px;
    }
    .header-book {
        display:none;
    }
}

@media (max-width:1000px) and (min-width:901px) {
    #main-nav {
        gap:12px;
    }
    #main-nav a {
        font-size:14px;
    }
    .brand {
        width:155px;
    }
}

@media (max-width:900px) {
    .site-header {
        height:80px;
        padding-inline:6%;
    }
    .brand {
        width:165px;
    }
    #main-nav {
        gap:24px;
        border-bottom:4px solid #bd744b;
    }
    #main-nav a {
        font-size:17px;
    }
}

@media (max-width:760px) {
    body {
        font-size:17px;
    }
    h2 {
        font-size:32px;
    }
    .page-hero {
        height:370px;
        border-radius:0 0 35% 0 / 0 0 45px 0;
    }
    .page-hero-content {
        bottom:45px;
    }
    .page-hero h1 {
        font-size:32px;
        letter-spacing:.025em;
        line-height:1.5;
    }
    .page-hero-content > p:last-child {
        font-size:17px;
    }
    .page-ribbon {
        top:22px;
        right:7%;
        font-size:13px;
        letter-spacing:.035em;
    }

    .inner-page main > .narrow:not(.article-body) {
        padding:32px 22px;
        width:90%;
        margin-block:35px;
        border-radius:40px 12px 40px 12px;
    }
    .room-detail-intro {
        padding:28px 24px;
        gap:15px;
    }
    .room-detail-intro h2 br {
        display:none;
    }
    .room-detail-intro h2 {
        font-size:30px;
    }
    .gallery-main {
        padding:6px;
        border-radius:25px;
    }
    .gallery-main img {
        border-radius:20px;
        height:310px;
    }
    .gallery-thumb {
        flex-basis:95px;
    }
    .room-info {
        padding:25px;
    }
    .article-body {
        padding:28px 22px;
        width:90%;
        margin-block:35px;
    }
    .article-body h2 {
        font-size:28px;
    }
    .note {
        padding:20px;
        font-size:16px;
    }
    .stay-cta {
        padding:55px 7% 180px;
        gap:5px;
    }
    .stay-cta > div {
        padding-bottom:0;
    }
    .stay-cta h2 {
        font-size:35px;
    }
    .cta-house {
        width:300px;
        bottom:-10px;
    }
    .footer-top {
        gap:35px;
    }
    .footer-nav {
        gap:14px;
        font-size:16px;
    }
    .footer-bottom {
        align-items:start;
        gap:12px;
    }
}

/* 內頁以連續暖色底保留閱讀留白，訂房區只使用一組低矮山丘。 */
.inner-page .stay-cta {
    background: url('../images/fac/quiet-hills.svg') center bottom / 100% 160px no-repeat,
        linear-gradient(180deg, #ffefcc, #f4e5c7);
}

@media (min-width: 761px) and (max-width: 900px) {
    .stay-cta,
    .inner-page .stay-cta {
        background:
            url('../images/fac/mobile-hills.svg') center bottom / 100% auto no-repeat,
            linear-gradient(180deg, #fbf4e5, #f4e5c7);
    }
}

/* 手機頁尾共用同一套等比例山丘，保留插畫原始比例。 */
@media (max-width: 760px) {
    .stay-cta,
    .inner-page .stay-cta {
        background:
            url('../images/fac/mobile-hills.svg') center bottom / 100% auto no-repeat,
            linear-gradient(180deg, #fbf4e5, #f4e5c7);
        padding-bottom: 185px;
    }

    .cta-house {
        width: min(300px, 78%);
        height: auto;
        max-height: none;
        aspect-ratio: 20 / 11;
        right: 3%;
        bottom: -5px;
    }

    .page-hero .eyebrow,
    .page-ribbon,
    .stay-cta .eyebrow {
        letter-spacing: .055em;
        overflow-wrap: anywhere;
    }

    .page-hero h1 {
        font-size: clamp(28px, 7.8vw, 34px);
        line-height: 1.45;
    }

    .page-hero-content {
        bottom: 42px;
    }

    .footer-nav a,
    .article-nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .article-nav {
        gap: 15px;
        align-items: start;
    }
}
/* 其他兩館：桌機靠右，手機改為底部雙按鈕並預留閱讀空間。 */
.sister-hotels {
    position: fixed;
    z-index: 20;
    right: 12px;
    top: 45%;
    display: grid;
    gap: 10px;
}

.sister-hotels a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 15px;
    border: 1px solid #e6cba1;
    border-radius: 24px 8px 24px 8px;
    background: #fff5e3;
    color: #874b30;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 16px #402b2526;
}

.sister-hotels a:hover,
.sister-hotels a:focus-visible {
    background: #294b4c;
    color: #fff5e3;
}

.sister-hotels a span {
    font-size: 13px;
}

@media (max-width: 1200px) {
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .sister-hotels {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
        background: #fff9edf5;
        border-top: 1px solid #e6cba1;
    }

    .sister-hotels a {
        justify-content: center;
        gap: 5px;
        padding: 12px 5px;
        font-size: 13px;
    }
}

/* 客房主圖燈箱。 */
.room-zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: zoom-in;
}
.room-lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 75px 5% 40px;
    border: 0;
    background: #142629f5;
    opacity: 0;
    transition: opacity .25s;
}
.room-lightbox::backdrop { background: #142629; }
.room-lightbox.is-visible { opacity: 1; }
.room-lightbox > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(.96);
    transition: transform .25s;
}
.room-lightbox.is-visible > img { transform: scale(1); }
.room-lightbox-close {
    position: absolute;
    top: 16px;
    right: 5%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #fff5e366;
    border-radius: 50%;
    background: #fff5e318;
    color: #fff5e3;
    cursor: pointer;
}
.room-lightbox-close svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.room-lightbox { padding-inline: 85px; }
.room-lightbox > img { transition: opacity .15s, transform .25s; touch-action: pan-y; }
.room-lightbox > img.is-changing { opacity: 0; }
.room-lightbox-prev,
.room-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #fff5e366;
    border-radius: 50%;
    background: #fff5e318;
    color: #fff5e3;
    cursor: pointer;
}
.room-lightbox-prev { left: 20px; }
.room-lightbox-next { right: 20px; }
.room-lightbox-prev svg,
.room-lightbox-next svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.room-lightbox-counter {
    position: absolute;
    top: 25px;
    left: 5%;
    margin: 0;
    color: #fff5e3;
    font-size: 17px;
}
@media (max-width: 760px) {
    .room-lightbox { padding: 75px 12px 80px; }
    .room-lightbox-prev,
    .room-lightbox-next { top: auto; bottom: 16px; transform: none; }
}