/* Site menu: Sign In button, phone/tablet header bar and the phone/tablet drawer. Shared by every page type; desktop (wider than 1240px) is untouched except the Sign In button. */
/* "Sign In" / "My Account" in the menu: an outlined button with a person icon, so it is noticed and does not look like another page link */
.account_button > a.menu-link { display: inline-flex !important; align-items: center; gap: 9px; padding: 9px 18px !important; border: 2px solid #919c3f !important; border-radius: 999px; background: #fff; color: #000 !important; font-weight: 600 !important; line-height: 1.2; text-decoration: none !important; white-space: nowrap; margin-top: -5px; transition: background .2s, color .2s; }
.account_button > a.menu-link::before { content: "\f2c0"; font-family: FontAwesome; font-weight: normal; font-size: 17px; line-height: 1; color: #919c3f; transition: color .2s; }
.account_button > a.menu-link:hover, .account_button > a.menu-link:focus-visible { background: #919c3f; color: #fff !important; border-bottom-width: 2px !important; }
.account_button > a.menu-link:hover::before, .account_button > a.menu-link:focus-visible::before { color: #fff; }
.account_button > a.menu-link:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* ---- Phone and tablet header bar: logo on the left, menu button on the right, same bar before and after scrolling ---- */
@media (max-width: 1240px) {
    header.art-header-one .art-header-one-content,
    header.art-header-one .art-header-one-content.art-sticky {
        animation: none !important; -webkit-animation: none !important; transform: none !important; opacity: 1 !important;
        left: 0; right: 0; width: 100%; margin-top: 0 !important; padding: 0 24px; box-sizing: border-box;
    }
    header.art-header-one .art-header-one-content.art-sticky { background: #fff; border-bottom: 0; box-shadow: 0 2px 14px rgba(0, 0, 0, .09); }
    header.art-header-one .art-navigation-container { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 100px; }
    header.art-header-one .art-header-one-content.art-sticky .art-navigation-container { min-height: 80px; }
    header.art-header-one .art-navigation-container .left-content { flex: 0 1 auto; min-width: 0; padding: 0; margin: 0; }
    header.art-header-one .art-navigation-container .left-content .art--logo-container { margin: 0; padding: 0; justify-content: flex-start !important; }
    header.art-header-one .art-navigation-container .left-content .art--logo-container a { margin: 0 !important; padding: 0; }
    header.art-header-one .art-navigation-container .left-content img.img-logotype { display: block; width: auto !important; height: auto !important; max-width: 100%; max-height: 96px; }
    header.art-header-one .art-header-one-content.art-sticky .art-navigation-container .left-content img.img-logotype { max-height: 68px; }
    header.art-header-one .art-navigation-container .center-content,
    header.art-header-one .art-navigation-container .right-content .art-social-container { display: none !important; }
    header.art-header-one .art-navigation-container .right-content { flex: 0 0 auto; display: flex; align-items: center; margin: 0; padding: 0; }
    header.art-header-one .right-content .info_block_hamburger { display: block !important; margin: 0; padding: 10px 0 10px 10px; line-height: 0; }
}
@media (max-width: 480px) {
    header.art-header-one .art-header-one-content, header.art-header-one .art-header-one-content.art-sticky { padding: 0 16px; }
    header.art-header-one .art-navigation-container { gap: 10px; min-height: 92px; }
    header.art-header-one .art-header-one-content.art-sticky .art-navigation-container { min-height: 74px; }
    header.art-header-one .art-navigation-container .left-content img.img-logotype { max-height: 84px; }
    header.art-header-one .art-header-one-content.art-sticky .art-navigation-container .left-content img.img-logotype { max-height: 60px; }
}

/* ---- Phone and tablet menu: a drawer that slides over the page (the page no longer shifts sideways and gets cut off) ---- */
@media (max-width: 1240px) {
    #art-main-holder, .art-main-container { -webkit-transform: none !important; transform: none !important; }
    body:has(.art-mobile-menu-wrapper.open) { overflow: hidden; }
    .art-mobile-menu-wrapper { background: rgba(20, 20, 16, .5); }
    .art-mobile-menu-wrapper .art-nav-container .art--mobile-menu-navigation-wrapper {
        width: min(88vw, 380px); right: calc(-1 * min(88vw, 380px)) !important; padding: 74px 0 34px; height: 100vh; height: 100dvh;
        border-left: 0; box-shadow: -10px 0 30px rgba(0, 0, 0, .18); overscroll-behavior: contain;
    }
    .art-mobile-menu-wrapper .art-nav-container .art--mobile-menu-navigation-wrapper.sidebar-open { right: 0 !important; }
    .ho-menu-close { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #f1eee7; cursor: pointer; z-index: 2; }
    .ho-menu-close::before, .ho-menu-close::after { content: ""; position: absolute; left: 14px; top: 23px; width: 20px; height: 2px; background: #000; }
    .ho-menu-close::before { transform: rotate(45deg); }
    .ho-menu-close::after { transform: rotate(-45deg); }
    .ho-menu-close:hover, .ho-menu-close:focus-visible { background: #919c3f; outline: none; }
    .ho-menu-close:hover::before, .ho-menu-close:hover::after, .ho-menu-close:focus-visible::before, .ho-menu-close:focus-visible::after { background: #fff; }
    .art-mobile-menu-wrapper .art--mobile-menu-navigation-wrapper ul.art--mobile-menu { margin: 0; padding: 0; }
    .art-mobile-menu-wrapper .art--mobile-menu-navigation-wrapper ul.art--mobile-menu > li { border-bottom: 1px solid #ece8dd; }
    .art-mobile-menu-wrapper .art--mobile-menu-navigation-wrapper ul.art--mobile-menu > li > a { padding: 18px 64px 18px 24px !important; font-size: 15px !important; line-height: 21px !important; letter-spacing: .1em; }
    .art-mobile-menu-wrapper .art--mobile-menu-navigation-wrapper ul.art--mobile-menu .sub-menu a { padding: 13px 24px 13px 40px !important; font-size: 14px !important; line-height: 20px !important; text-transform: none; }
    .art-mobile-menu-wrapper .art--mobile-menu-navigation-wrapper ul.art--mobile-menu li a .fl-menu-flipper-icon { width: 56px; }
    /* Sign In and Book Online: two full-width buttons, lined up with each other and with the text above */
    .art-mobile-menu-wrapper .art--mobile-menu-navigation-wrapper ul.art--mobile-menu > li.account_button, .art-mobile-menu-wrapper .art--mobile-menu-navigation-wrapper ul.art--mobile-menu > li.special_button { border-bottom: 0; padding: 0; }
    .art-mobile-menu-wrapper .art--mobile-menu-navigation-wrapper ul.art--mobile-menu > li.account_button > a.menu-link { display: flex !important; justify-content: center; margin: 22px 24px 10px !important; padding: 14px 18px !important; font-size: 15px !important; }
    .art-mobile-menu-wrapper .art--mobile-menu-navigation-wrapper ul.art--mobile-menu > li.special_button > a { display: block !important; margin: 0 24px !important; padding: 17px 18px !important; text-align: center !important; font-size: 15px !important; }
}
@media (max-width: 420px) {
    .art-mobile-menu-wrapper .art-nav-container .art--mobile-menu-navigation-wrapper { width: 92vw; right: -92vw !important; }
}