/* Mobile home page redesign 2026. Scoped to max-width 767px.
   Paired with js/mobile-2026.js. */

@media screen and (max-width: 767px) {

    /* --- block order ------------------------------------------------- */

    body.page-template-tm-home-new .mm-page {
        display: flex;
        flex-direction: column;
    }

    body.page-template-tm-home-new .mm-page > * {
        order: 50;
    }

    /* jquery.sticky sometimes wraps the header, sometimes not, so match
       both forms - otherwise it takes order:50 and lands at the foot. */
    body.page-template-tm-home-new .mm-page > .my_hidden_div,
    body.page-template-tm-home-new .mm-page > .sticky-wrapper,
    body.page-template-tm-home-new .mm-page > [id$="-sticky-wrapper"],
    body.page-template-tm-home-new .mm-page > #my_mobile_wrapper,
    body.page-template-tm-home-new .mm-page > #top_wrapper {
        order: 0;
    }

    body.page-template-tm-home-new .mm-page > #levart_form_home_wrapper_outter { order: 1; }
    body.page-template-tm-home-new.m26-panel-lifted .home_top_wrapper { display: none; }
    body.page-template-tm-home-new .home_welcome_wrapper       { order: 2; }
    body.page-template-tm-home-new .home_hotels_wrapper        { order: 3; }
    body.page-template-tm-home-new .m26-why-book-direct-slot   { order: 4; }
    body.page-template-tm-home-new .home_subscribe_wrapper     { order: 5; }
    body.page-template-tm-home-new .home_find_out_more_wrapper { order: 6; }

    /* Not in the brief, which ends at the subscribe form. Hidden rather
       than removed, so the markup and its internal links are still served. */
    body.page-template-tm-home-new .home_popular_destination_section,
    body.page-template-tm-home-new .home_hotel_deals_section,
    body.page-template-tm-home-new .home_venues_block_section {
        display: none;
    }


    /* --- hero: drop the image/video ---------------------------------- */

    /* Was a fixed 220px box with overflow:hidden, which clipped the panel. */
    body.page-template-tm-home-new .home_top_wrapper,
    body.page-template-tm-home-new .home_top_wrapper .container-fluid,
    body.page-template-tm-home-new .home_top_wrapper .row,
    body.page-template-tm-home-new .home_top_wrapper .col-md-12,
    body.page-template-tm-home-new #home_top_outer_wrapper {
        background: none;
        padding: 0;
        margin: 0;
        min-height: 0;
        height: auto !important;
        overflow: visible !important;
    }

    body.page-template-tm-home-new #home_top_bg_slider_video,
    body.page-template-tm-home-new .home_top_bg_slider_block,
    body.page-template-tm-home-new .home_welcome_text_line_three {
        display: none !important;
    }

    body.page-template-tm-home-new #home_top_inner_wrapper {
        min-height: 0;
        height: auto !important;
        overflow: visible !important;
        background: none;
    }

    body.page-template-tm-home-new .home_welcome_text.with_levart_home_form {
        position: static !important;
        top: auto;
        padding: 0;
    }


    /* --- booking panel ------------------------------------------------ */

    /* Not sticky: the theme sets body{overflow:hidden} for mmenu, which
       makes <html> the scroll container and leaves sticky inert. Fixed
       instead, with .m26-panel-spacer holding its place in the flow. */
    body.page-template-tm-home-new #levart_form_home_wrapper_outter.mobile_use_cls {
        position: fixed !important;
        top: var(--m26-header-h, 57px);
        left: 0;
        right: 0;
        z-index: 900;
        display: block;
        width: 100%;
        padding: 0;
        background: #f6f6f6;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    }

    body.page-template-tm-home-new .m26-panel-spacer {
        order: 1;
        flex: 0 0 auto;
        width: 100%;
    }

    body.page-template-tm-home-new #levart_form_home_wrapper_outter .levart_form_wrapper {
        display: block;              /* ships as inline-block */
        width: 100%;
        padding: 12px 15px 10px;
        margin: 0;
    }

    body.page-template-tm-home-new #levart_form_home_wrapper_outter .jw-book-form {
        margin-bottom: 0;
    }

    /* Sits on the Book Direct + Save row rather than a row of its own,
       which left ~55px of grey under the button. 44px tap target, centred
       on the 33px button. */
    .m26-panel-toggle {
        position: absolute;
        right: 6px;
        bottom: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        padding: 0;
        line-height: 1;
        color: #ef1a20;
        font-size: 20px;
        cursor: pointer;
    }


    /* The dropdown trigger goes; the JS moves its content down the page. */
    body.page-template-tm-home-new #levart_form_home_wrapper_outter .why_book_direct_button_wrapper {
        display: none !important;
    }


    /* --- welcome block ------------------------------------------------ */

    body.page-template-tm-home-new .home_welcome_icon_on_banner {
        display: none !important;
    }

    body.page-template-tm-home-new .home_welcome_wrapper {
        padding-top: 18px;
    }

    body.page-template-tm-home-new .home_welcome_inner_wrapper {
        display: flex;
        flex-direction: column;
        margin-top: 0;
    }

    body.page-template-tm-home-new .home_welcome_inner_wrapper h1        { order: 1; }
    body.page-template-tm-home-new .m26-intro                            { order: 2; }
    body.page-template-tm-home-new .home_welcome_inner_promption_wrapper { order: 3; }

    /* Duplicates the "book direct" message that now sits under the carousel. */
    body.page-template-tm-home-new .home_find_out_more_inner_wrapper {
        display: none !important;
    }

    body.page-template-tm-home-new .home_welcome_inner_wrapper h1 {
        font-size: 22px;
        line-height: 1.2;
        margin: 0;
    }

    body.page-template-tm-home-new .home_welcome_subtitle {
        display: block;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.35;
        margin-top: 4px;
    }


    /* --- three buttons (ACF Prompt Repeater rows) --------------------- */

    body.page-template-tm-home-new .home_welcome_inner_promption_wrapper {
        flex-direction: column;
        padding: 6px 0 0;
        gap: 10px;
    }

    body.page-template-tm-home-new .home_welcome_wrapper .container {
        padding-bottom: 6px;
    }

    body.page-template-tm-home-new .single_prompt_wrapper {
        width: 100%;
        margin-bottom: 0;
        align-items: stretch;
        min-height: 62px;
        border-radius: 6px;
    }

    body.page-template-tm-home-new .single_prompt_image_wrapper {
        width: 82px;
        flex: 0 0 82px;
        overflow: hidden;
    }

    body.page-template-tm-home-new .home_welcome_inner_promption-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.page-template-tm-home-new .single_prompt_content_wrap {
        padding: 8px 14px;
    }

    body.page-template-tm-home-new .single_prompt_heading,
    body.page-template-tm-home-new .single_prompt_heading a {
        font-size: 17px;
    }


    /* --- body copy: clamp + Read More --------------------------------- */

    /* Collapsed to nothing by default - only the H1 and its subtitle show
       above the buttons. The text is never removed from the DOM. */
    body.page-template-tm-home-new .m26-clamp {
        overflow: hidden;
        max-height: 0;
        transition: max-height .25s ease;
    }

    body.page-template-tm-home-new .m26-clamp.m26-open {
        max-height: 200em;
    }

    .m26-readmore {
        display: inline-block;
        border: 0;
        background: transparent;
        padding: 10px 0 4px;
        color: #ef1a20;
        font-size: 14px;
        font-weight: 700;
        text-decoration: underline;
        cursor: pointer;
    }


    /* --- hotel carousel: filter ---------------------------------------

       The five filters totalled 564px and wrapped onto three rows, costing
       152px before the first hotel was visible. Replaced on mobile by a
       native select built from the same links by mobile-2026.js.

       The .section_header h2 above it is deliberately left alone: it uses
       line-height:0.1em with a border-bottom to draw a line through the
       text, so its box is ~3px tall and the text overflows it by design.
       Changing its font-size makes it collide with whatever follows.
       ------------------------------------------------------------------ */

    body.page-template-tm-home-new .home_hotel_filter_wrapper {
        padding: 0 15px 12px;
        margin: 0;
    }

    body.page-template-tm-home-new .home_hotel_filter_block,
    body.page-template-tm-home-new .home_hotel_filter_items_block {
        display: none;
    }

    .m26-hotel-filter {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 9px 34px 9px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ef1a20' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 12px 8px;
        color: #333;
        font-size: 14px;
        font-family: inherit;
        line-height: 1.3;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }


    /* --- subscribe form ----------------------------------------------

       944px for a banner, three lines of copy and six fields. The spacing
       is desktop spacing: an empty <p>, 20px wrappers, 15px between every
       field and a 22px label above each one.
       ------------------------------------------------------------------ */

    body.page-template-tm-home-new .footer_sbuscribe_form_wrapper {
        padding: 14px 15px;
        margin-bottom: 0;
    }

    body.page-template-tm-home-new .footer_sbuscribe_form_text {
        padding: 0 0 10px;
        font-size: 16px;
    }

    body.page-template-tm-home-new .footer_sbuscribe_form_text p {
        margin-bottom: 0;
        line-height: 1.45;
    }

    /* <p>&nbsp;</p> left by the editor - tagged by mobile-2026.js, since
       :empty does not match a paragraph holding a non-breaking space. */
    body.page-template-tm-home-new .footer_sbuscribe_form_text p.m26-blank {
        display: none;
    }

    body.page-template-tm-home-new .home_subscribe_wrapper .my-form-row {
        margin-bottom: 0;
    }

    body.page-template-tm-home-new .home_subscribe_wrapper .my-form-group {
        margin-bottom: 10px;
    }

    body.page-template-tm-home-new .home_subscribe_wrapper .my-form-group label {
        margin-bottom: 2px;
        font-size: 13px;
        line-height: 1.3;
    }

    body.page-template-tm-home-new .home_subscribe_wrapper .home_subscribe_title {
        margin: 14px 0 8px;
    }


    /* --- Why Book Direct, moved below the carousel -------------------- */

    body.page-template-tm-home-new .m26-why-book-direct-slot {
        background: #f6f6f6;
        padding: 18px 15px;
    }

    body.page-template-tm-home-new .m26-why-book-direct-slot .why_book_direct_wrapper,
    body.page-template-tm-home-new .m26-why-book-direct-slot .why_book_direct_wrapper_inner {
        position: static;
        width: 100%;
        padding: 0;
        margin: 0;
        background: none;
    }

    /* Ships with .hidden_cls, opened by the button that is now hidden. */
    body.page-template-tm-home-new .m26-why-book-direct-slot #why_book_direct_text_wrapper {
        display: block !important;
        position: static;
        width: 100%;
        padding: 0;
    }

    body.page-template-tm-home-new .m26-why-book-direct-slot .my_book_direct_close_btn,
    /* The trigger came along with the block when it was moved out of the
       booking panel. Nothing left for it to open. */
    body.page-template-tm-home-new .m26-why-book-direct-slot .why_book_direct_button_wrapper {
        display: none !important;
    }

    /* -30px pulled the content up under the button that is now hidden. */
    body.page-template-tm-home-new .m26-why-book-direct-slot #why_book_direct_text_wrapper {
        margin-bottom: 0;
    }

    /* Liz: the three blocks under the carousel all match the 16px bullets. */
    body.page-template-tm-home-new .m26-why-book-direct-slot h3 {
        font-size: 16px;
        line-height: 1.25;
        margin: 0 0 8px;
    }

    body.page-template-tm-home-new .m26-why-book-direct-slot .jw_why_book_direct_heading_wrapper {
        padding: 0;
        margin: 0 0 10px;
    }

    body.page-template-tm-home-new .m26-why-book-direct-slot .why_book_direct_text_wrapper_inner {
        padding: 0;
    }

    body.page-template-tm-home-new .m26-why-book-direct-slot .why_book_direct_text_wrapper_inner_item_footer {
        margin: 4px 0 0;
    }

    body.page-template-tm-home-new .m26-why-book-direct-slot .why_book_direct_text_wrapper_inner_item {
        display: block;
    }

    body.page-template-tm-home-new .m26-why-book-direct-slot .why_book_direct_text_wrapper_inner_item_left,
    body.page-template-tm-home-new .m26-why-book-direct-slot .why_book_direct_text_wrapper_inner_item_right {
        width: 100%;
        padding: 0;
    }


    /* ==================================================================
       HOTELS ARCHIVE (/hotels/)

       The theme hides the city filter entirely below 767px
       (style.css ~8599), so mobile had no way to reach a city short of
       scrolling all eight hotels. Replaced here by a 2x2 tile grid at the
       top plus a sticky chip bar once the tiles scroll away.
       ================================================================== */

    /* --- city tiles ---------------------------------------------------

       Four groups, not the three in the brief: Sydney CBD, Sydney
       Suburban, Perth, Darwin. Three across a 390px screen leaves ~110px
       per tile, too narrow for the labels, so they go 2x2.
       ------------------------------------------------------------------ */

    body.post-type-archive-hotels .m26-city-tiles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 4px 0 22px;
    }

    body.post-type-archive-hotels .m26-city-tile,
    body.post-type-archive-hotels .m26-city-tile:hover,
    body.post-type-archive-hotels .m26-city-tile:focus {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 4px;
        min-height: 104px;
        padding: 0;
        border: 0;
        background-color: #333;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        color: #fff;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    /* Scrim, not a flat opacity on the image: keeps the photo readable
       while guaranteeing contrast for the label over any image. */
    body.post-type-archive-hotels .m26-city-tile::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 100%);
    }

    body.post-type-archive-hotels .m26-city-tile-label {
        position: absolute;
        z-index: 2;
        left: 10px;
        right: 10px;
        bottom: 9px;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        text-shadow: 0 1px 3px rgba(0,0,0,.5);
    }

    body.post-type-archive-hotels .m26-city-tile-count {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        font-weight: 400;
        letter-spacing: .02em;
        opacity: .85;
    }

    /* --- sticky chip bar ----------------------------------------------

       Sits under the header, which jquery.sticky pins at top:0 (57px tall)
       once the page scrolls. Appears only after the tiles leave the
       viewport, so the two never show the same choice twice.

       position:fixed, not sticky - mmenu sets overflow:hidden on <body>,
       which stops sticky resolving anywhere on the page.
       ------------------------------------------------------------------ */

    body.post-type-archive-hotels .m26-city-chips {
        position: fixed;
        top: var(--m26-header-h, 57px);
        left: 0;
        right: 0;
        z-index: 900;
        display: flex;
        gap: 8px;
        padding: 8px 15px;
        overflow-x: auto;
        background: #fff;
        border-bottom: 1px solid #e2e2e2;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s ease, visibility .18s ease;
    }

    body.post-type-archive-hotels .m26-city-chips::-webkit-scrollbar {
        display: none;
    }

    body.post-type-archive-hotels .m26-city-chips.m26-chips-on {
        opacity: 1;
        visibility: visible;
    }

    body.post-type-archive-hotels .m26-city-chip {
        flex: 0 0 auto;
        border: 1px solid #ccc;
        border-radius: 15px;
        background: #fff;
        padding: 6px 14px;
        color: #333;
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
        cursor: pointer;
    }

    /* Current section, tracked by IntersectionObserver - tells the reader
       where they are, not just where they can go. */
    body.post-type-archive-hotels .m26-city-chip.m26-chip-current {
        border-color: #ef1a20;
        background: #ef1a20;
        color: #fff;
        font-weight: 700;
    }

    /* --- city intro copy: clamp + Read More ---------------------------

       The clamp and the button are printed by archive-hotels.php and only
       switched on when html.m26-js says JS will run, so the collapsed state
       is there in the first paint. With JS off nothing collapses.
       ------------------------------------------------------------------ */

    /* The heading is the visible single line; it is 30px in the theme,
       which wraps to four rows on a phone. */
    body.post-type-archive-hotels .archive_hotels_list_top_description > h1:first-child,
    body.post-type-archive-hotels .archive_hotels_list_top_description > h2:first-child,
    body.post-type-archive-hotels .archive_hotels_list_top_description > h3:first-child,
    body.post-type-archive-hotels .archive_hotels_list_top_description > h4:first-child {
        margin: 0 0 4px;
        font-size: 17px;
        line-height: 1.3;
        text-align: left;
    }

    body.post-type-archive-hotels .archive_hotels_list_top_description,
    body.post-type-archive-hotels .hotels_description_section_wrapper_description {
        text-align: left;
    }

    body.post-type-archive-hotels .archive_hotels_list_top_description {
        padding-bottom: 18px;
    }

    body.post-type-archive-hotels .m26-city-clamp p {
        margin: 0 0 10px;
    }

    body.post-type-archive-hotels .m26-city-clamp > :last-child {
        margin-bottom: 0;
    }

    /* <p>&nbsp;</p> left by editors, marked in archive-hotels.php. It costs a
       line of the two-line preview. Left in place on desktop. */
    body.post-type-archive-hotels .m26-city-clamp .m26-blank {
        display: none;
    }

    /* Exactly two lines: the first solid, the second half transparent, so
       it reads as still running. 3.2em is two lines at the theme's 1.6
       line-height - 2.9em cut the second line at 80% and looked broken.
       The mask holds full opacity to the end of line one, so only line two
       fades. */
    html.m26-js body.post-type-archive-hotels .m26-city-clamp,
    html.m26-js body.post-type-archive-hotels .m26-intro-clamp {
        overflow: hidden;
        max-height: 3.2em;
        transition: max-height .25s ease;
        -webkit-mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, .35) 100%);
        mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, .35) 100%);
    }

    html.m26-js body.post-type-archive-hotels .m26-city-clamp.m26-open,
    html.m26-js body.post-type-archive-hotels .m26-intro-clamp.m26-open {
        max-height: 200em;
        -webkit-mask-image: none;
        mask-image: none;
    }

    body.post-type-archive-hotels .hotels_description_section_wrapper_description {
        padding-bottom: 0;
    }

    html.m26-js body.post-type-archive-hotels .m26-readmore {
        display: inline-block;
    }

    body.post-type-archive-hotels .hotels_description_section_wrapper_description .m26-readmore {
        margin-bottom: 6px;
    }

    /* WP Rocket lazy render gives each city block content-visibility:auto.
       With the clamps and chip-bar jumps the blocks resize as they render,
       the lazyload sees the photos enter then exit, and cancels them - the
       Perth and Darwin photos never loaded. */
    body.post-type-archive-hotels .archive_hotels_list_section_block[data-wpr-lazyrender] {
        content-visibility: visible;
    }

    /* --- hotel card: rate badge over the image -------------------------

       Liz asked for this "as per the way we do on the home page", so it
       copies the home tiles: top right of the photo, a red ellipse, and the
       price alone - no "Rates From", no "AUD * Per Night".

       Anchored to .archive_hotels_list_section_inner, which is already
       position:relative and whose top-left corner is exactly the photo's.
       The blocks in between stay static, so the badge escapes their
       overflow:hidden instead of being clipped away.
       ------------------------------------------------------------------ */

    body.post-type-archive-hotels .archive_hotels_list_section_right_top_right {
        position: absolute;
        z-index: 12;
        top: 0;
        right: 0;
        pointer-events: none;
    }

    /* The disc is drawn on the wrapper, not the box above it: jw-booking.js
       hides this element when a hotel has no rate, and painting the outer
       box left an empty red blob on the photo whenever rates failed. */
    body.post-type-archive-hotels .archive_hotels_list_section_right_top_right .price_per_night_wrapper {
        display: block;
        width: 75px;
        padding: 10px;
        border-radius: 50%;
        background: rgba(240, 27, 39, .9);
        color: #fff;
        text-align: center;
    }

    /* Home page shows the price only. */
    body.post-type-archive-hotels .archive_hotels_list_section_right_top_right .price_per_night_top_text,
    body.post-type-archive-hotels .archive_hotels_list_section_right_top_right .price_per_night_body_price_text {
        display: none;
    }

    body.post-type-archive-hotels .archive_hotels_list_section_right_top_right .price_per_night_wrapper .price_per_night_body {
        overflow: visible;
    }

    body.post-type-archive-hotels .archive_hotels_list_section_right_top_right .price_per_night_body .price_per_night_body_price {
        float: none;
        margin: 0;
        padding: 0;
        color: #fff;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
    }

    body.post-type-archive-hotels .archive_hotels_list_section_right_top_right .jw_each_hotel_best_price_cls {
        color: #fff;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
    }

    /* --- hotel card: buttons side by side ------------------------------ */

    body.post-type-archive-hotels .archive_hotels_list_buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        text-align: left;
    }

    /* Flex, not block: "Show Rooms + Prices" wraps to two lines and the grid
       stretches both buttons to match, leaving the one-line label stuck at
       the top of its box. */
    body.post-type-archive-hotels .archive_hotels_list_buttons .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 8px 6px;
        font-size: 13px;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }


    /* ==================================================================
       ALL PAGES
       ================================================================== */

    /* Same footer on every page, so matched everywhere, not just home. */
    .jw_footer_extra_text p {
        font-size: 16px;
    }

    /* --- one Metro red (#ef1a20) for buttons, arrows and link text -----

       The theme mixes five reds. .btn-danger is a lighter #fe3e3e gradient
       (style.css ~202, !important), which made the solid Book Direct + Save
       and Submit buttons look darker beside it. */
    body .btn.btn-danger,
    body .btn.btn-danger:hover,
    body .btn.btn-danger:focus,
    body .btn.btn-danger:active,
    body .btn.btn-danger.active {
        background-image: none !important;
        background-color: #ef1a20 !important;
        border-color: #ef1a20;
    }

    body .single_hotel_information_section_left a:not(.btn),
    body .single_hotel_general_section_left a:not(.btn),
    body .single_hotel_top_breadcrumb p a:hover,
    body .hotel_extra_info .home_hotel_footer_block a:hover {
        color: #ef1a20 !important;
    }

    /* Wedding pages are pink on purpose (wedding.css). */
    body .new_wedding_body .btn.btn-danger,
    body .new_wedding_body .btn.btn-danger:hover {
        background-color: #de6182 !important;
        border-color: #de6182;
    }

    body .new_wedding_body .single_hotel_information_section_left a:not(.btn),
    body .new_wedding_body .single_hotel_general_section_left a:not(.btn) {
        color: #de6182 !important;
    }

    /* FAQ: red caret when closed, white caret on a red cell when open. */
    body .faq_group_body .panel-heading .panel_icon_head.collapsed .fa-caret-down,
    body .faq_group_body .panel-heading.collapsed .panel_icon_head .fa-caret-down {
        color: #ef1a20 !important;
    }

    body .faq_group_body .panel-heading .panel_icon_head {
        background-color: #ef1a20;
    }

}

/* The hotels city tiles are printed by archive-hotels.php so they can be
   edited as markup. They are a mobile-only device, so they are hidden by
   default and only the block above turns them on. */
.m26-city-tiles {
    display: none;
}

/* Printed by archive-hotels.php next to the clamps. Hidden until the
   mobile block below turns them on, so desktop and JS-off never see a
   button that does nothing. Scoped to this page - the home page creates
   its own .m26-readmore in JS. */
body.post-type-archive-hotels .m26-readmore {
    display: none;
}