/* Coast Breakz tablet and phone layer. Live ships one fixed 1170px layout with no responsive CSS (and a separate phone template at the same address, not copied).
   Width bands: 1250 and up = live's look, nothing in this file applies; 1170 to 1249 = live's layout with AA colours, the 14px text floor, 16px inputs and 24px taps;
   980 to 1169 and 768 to 979 = a reflow; below 768 = the phone design. Below 1250 every state (rest, hover, focus, active) is WCAG AA.
   Palette (AA on white, recomputed for this site from live's #f72626, 3.99:1 with white text): red fill #d62323 (5.09), hover and active #a81b1b, link red #c91313 (5.86), muted grey #6b6b6b. */
body.cb-site { --cb-red: #f72626; --cb-red-aa: #d62323; --cb-red-hover: #a81b1b; --cb-link: #c91313; --cb-muted: #6b6b6b; --cb-ink: #1a1a1a; }

/* ======================= 1170 to 1249 (and below): AA layer, text floor, form and tap sizes ======================= */
@media (max-width: 1249px) {
  /* text floor: nothing under 14px (live's footer, byline, pager and tag text are 11 to 13px) */
  body.cb-site #page-container :is(#footer, #footer p, #footer li, #footer a, .copyright, .footer-tags, .footer-tags p, .footer-tags a, .fmenu li a, .footermenu li a, .vcard, .vcard li,
    .panel, .panel li, .panel .date, .panel .date .month, .panel .date .year, .panel .summary, .panel a, .entry .details, .details, .details a, .summary, a.more, .paging, .paging a, .paging em, span.options a,
    div.top, div.top a, .content h6, blockquote .details, .content .tags a, .form td em, .form td, .form th, table.form em, .ils-required-note) { font-size: 14px; }
  body.cb-site #page-container :is(.panel, .panel li, .panel .summary, .entry .details, .details, .summary, a.more, .paging, .paging a, span.options a, div.top, .content h6, blockquote .details, .content .tags a, .ils-required-note) { line-height: 20px; }
  body.cb-site #page-container #footer .vcard .org { font-size: 24px; line-height: 28px; }
  body.cb-site #page-container .panel.blog .date .day { font-size: 22px; }
  /* form controls 16px (and stops iOS zooming on focus) */
  body.cb-site #page-container :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) { font-size: 16px; }
  body.cb-site #page-container #bp_check_in_date { font-size: 16px; }
  /* tap targets 24px: padding on list and running-text links, a box for pager links */
  body.cb-site #page-container :is(#footer a, .panel a, .fmenu li a, .footermenu li a, .details a, a.more, .copyright a):not(.tag) { padding-top: 4px; padding-bottom: 4px; }
  body.cb-site #page-container :is(.paging a, span.options a) { display: inline-block; min-width: 24px; min-height: 24px; box-sizing: border-box; text-align: center; padding: 2px 6px; }

  /* colours: AA in every state. Live changes only the background on hover, so the label colour is set with the fill in every state. */
  body.cb-site #page-container :is(input.button, button.et_pb_button, #bp_submit, .bookingbutton .button) { background: var(--cb-red-aa); color: #ffffff; }
  body.cb-site #page-container :is(input.button, a.button, button.et_pb_button, #bp_submit, .bookingbutton .button):is(:link, :visited, :hover, :focus, :focus-visible, :active, :disabled),
  body.cb-site #page-container :is(input.button, button.et_pb_button, #bp_submit, .bookingbutton .button):is(:hover, :focus, :focus-visible, :active, :disabled) {
    background: var(--cb-red-aa); color: #ffffff; }
  body.cb-site #page-container :is(input.button, a.button, button.et_pb_button, #bp_submit, .bookingbutton .button):is(:hover, :focus, :focus-visible, :active) { background: var(--cb-red-hover); color: #ffffff; }
  html body.cb-site #page-container .et_pb_section .cb-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button,
  html body.cb-site #page-container .et_pb_section .container.main .cb-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { background: var(--cb-red-aa) !important; color: #ffffff !important; }
  html body.cb-site #page-container .et_pb_section .cb-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :focus-visible, :active),
  html body.cb-site #page-container .et_pb_section .container.main .cb-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:is(:hover, :focus, :focus-visible, :active) { background: var(--cb-red-hover) !important; color: #ffffff !important; }
  body.cb-site #page-container :is(a, input, select, textarea, button, [tabindex]):focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; box-shadow: 0 0 0 5px #ffffff; }
  body.cb-site #page-container :is(#menu, #footer .leftmenus, .main-property-buttons, .faq, .bannertop, #booking, .special, .bookingbannercontent, #footer .vcard) :is(a, input, select, button):focus-visible { outline-color: #ffffff; box-shadow: 0 0 0 5px #1a1a1a; }
  body.cb-site #page-container :is(.content, .panel) a:not(.button):not(.more):not(.link):is(:link, :visited, :hover, :focus, :active) { color: var(--cb-link); }
  body.cb-site #page-container .container.main a:is(:link, :visited, :hover, :focus, :active):not(.button):not(.more) { color: var(--cb-link); text-decoration: underline; }
  body.cb-site #page-container .container.main .maintext :is(h1, h2, h3, h4, th, td) a:is(:link, :visited, :hover, :focus, :active):not(.button) { color: inherit; }
  body.cb-site #page-container :is(.panel .date, .panel .details, .entry .details, .details, .panel li em, blockquote .details, .panel.blog .date) { color: var(--cb-muted); }
  body.cb-site #page-container :is(.panel .details a, .entry .details a, .details a, div.top a):is(:link, :visited, :hover, :focus, :active) { color: #5c5c5c; }
  body.cb-site #page-container .panel.blog .title a:is(:link, :visited, :hover, :focus, :active) { color: var(--cb-ink); }
  body.cb-site #page-container .panel.blog .title a:is(:hover, :focus) { color: var(--cb-link); }
  body.cb-site #page-container .paging em a:is(:link, :visited, :hover, :focus, :active) { color: #ffffff; background: var(--cb-red-aa); }
  body.cb-site #page-container #footer .leftmenus { background: var(--cb-red-aa); }
  body.cb-site #page-container #footer .leftmenus a:is(:link, :visited, :hover, :focus, :active) { color: #ffffff; text-decoration: underline; }
  body.cb-site #page-container #footer .vcard a.email:is(:link, :visited, :hover, :focus, :active) { color: var(--cb-link); }
  body.cb-site #page-container #footer .vcard { color: #333333; }
  body.cb-site #page-container #footer .footermenu a:is(:link, :visited, :hover, :focus, :active) { color: #ffffff; }
  body.cb-site #page-container #footer .footermenu a { line-height: 20px; display: inline-block; }
  body.cb-site #page-container .special a.button:is(:link, :visited, :hover, :focus, :active), body.cb-site #page-container .special .button { background: var(--cb-red-aa) !important; color: #ffffff !important; }

  /* menu bar: white on the AA red in every state, a dark chip for the current page and for hover and focus */
  body.cb-site #page-container #menu { background: var(--cb-red-aa); }
  body.cb-site #page-container #menu a:is(:link, :visited, :active), body.cb-site #page-container #menu li:hover a:is(:link, :visited, :active, :hover) { color: #ffffff; }
  body.cb-site #page-container #menu > ul > li:is(:hover, .active, :focus-within) > a, body.cb-site #page-container #menu > ul > li > a:is(:hover, :focus, :focus-visible) { background: rgba(0, 0, 0, 0.3); border-radius: 5px; color: #ffffff; }
  body.cb-site #page-container #menu li ul { background: #1a1a1a; }
  body.cb-site #page-container #menu li:hover ul a:is(:link, :visited, :active), body.cb-site #page-container #menu li ul a:is(:link, :visited, :active) { color: #ffffff; background: none; }
  body.cb-site #page-container #menu li ul li a:is(:hover, :focus, :focus-visible), body.cb-site #page-container #menu li:hover li a:is(:hover, :focus, :focus-visible) { background: #ffffff; color: #1a1a1a; }
  body.cb-site #page-container #menu li:is(:focus-within, .ils-open) > ul { display: block; }
  /* property tabs and the property buttons */
  body.cb-site #page-container .main-property-buttons a.button.alt:is(:link, :visited, :hover, :focus, :active) { background: #333333 !important; color: #ffffff !important; }
  body.cb-site #page-container .main-property-buttons a.button.alt.active:is(:link, :visited, :hover, :focus, :active) { background: var(--cb-red-aa) !important; color: #ffffff !important; }
  body.cb-site #page-container .main-property-buttons a.button.alt:is(:hover, :focus) { background: var(--cb-red-hover) !important; }
  body.cb-site #page-container #menu-tab li a:is(:link, :visited, :active) { color: #1a1a1a; }
  body.cb-site #page-container #menu-tab li.alt a:is(:link, :visited, :hover, :focus, :active) { color: #1a1a1a; }
  body.cb-site #page-container .bookingform em { font-size: 14px; }
  /* tap targets: 24px or more for a link that stands alone in a list item, a cell or a title (inline padding, no change to how a line wraps) */
  body.cb-site #page-container :is(.maintext, .content, .panel, .faq, #footer, .copyright, .vcard) :is(li, td, th, .title, .top, p:has(> a:only-child), div:has(> a:only-child)) > a:not(.button):not(.more):not(.tag) { padding-top: 5px; padding-bottom: 5px; }
  body.cb-site #page-container :is(#footer a, .panel a, .fmenu li a, .footermenu li a, .details a, a.more, .copyright a, .vcard a):not(.tag) { padding-top: 5px; padding-bottom: 5px; }
  body.cb-site #page-container :is(ul, ol) > li > a:not(.button):not(.more):not(.tag):not(#menu a):not(#menu-tab a):not(.slick-dots a), body.cb-site #page-container :is(.top, strong, em, td, th, .title) > a:not(.button):not(.more):not(.tag):not(#menu a) { padding-top: 5px; padding-bottom: 5px; }
  body.cb-site #page-container a.tel-link { padding-top: 5px; padding-bottom: 5px; }
  body.cb-site #page-container .property-container h1, body.cb-site #page-container .property-container .right h1 { color: #1a1a1a; }
  body.cb-site #page-container :is(.vcard .socialmedia a, #footer .socialmedia a) { padding: 0; }
  /* footer SEO links: live sets them at 13px with an id-level rule */
  body.cb-site #page-container #footer .footermenu a, body.cb-site #page-container #footer .fmenu li a { font-size: 14px; line-height: 20px; }
  /* current property tab: the AA red (white text 3.99:1 on live's #f72626) */
  body.cb-site #page-container #menu-tab li.active a:is(:link, :visited, :active, :hover, :focus) { background: var(--cb-red-aa); color: #ffffff; }
  body.cb-site #page-container #menu-tab li a:is(:hover, :focus-visible) { background: #cfcfcf; color: #1a1a1a; }
  body.cb-site #page-container #menu-tab li.active a:is(:hover, :focus-visible) { background: var(--cb-red-hover); color: #ffffff; }
  body.cb-site #page-container #menu-tab li.alt a:is(:hover, :focus-visible) { background: #e6b800; color: #000000; }
  /* pager: live's grey #808080 is 3.95:1 on white and 3.4:1 on its grey chips */
  body.cb-site #page-container .paging, body.cb-site #page-container .paging a:is(:link, :visited, :active, :hover, :focus), body.cb-site #page-container .list .paging { color: #595959 !important; }
  body.cb-site #page-container .paging em a:is(:link, :visited, :active, :hover, :focus) { color: #ffffff !important; background: var(--cb-red-aa); }
  body.cb-site #page-container .paging a:is(:hover, :focus-visible) { background: #cfcfcf; }
  /* Google's language gadget: 14px text and a 28px high tap target */
  body.cb-site #page-container #translate-widget .goog-te-gadget-simple { font-size: 14px !important; line-height: 22px; padding: 3px 8px !important; min-height: 28px; box-sizing: border-box; }
  body.cb-site #page-container #translate-widget .goog-te-gadget-simple a, body.cb-site #page-container #translate-widget .goog-te-gadget-simple span { font-size: 14px !important; }
  body.cb-site #page-container #translate-widget .goog-te-gadget-simple a.VIpgJd-ZVi9od-xl07Ob-lTBxed { display: inline-block; padding: 3px 0; }
  /* a heading on a post that live paints white on white (home.css colours every h1 white) */
  body.cb-site.single #page-container .entry h1 { color: #1a1a1a; }
  /* the home's copy card sits on a bright sunset: 90% instead of live's 80% keeps its white text at 4.5:1 or better over every pixel; the FAQ button is the AA red */
  body.cb-site.cb-home #page-container .container.main .maintext { background: rgba(26, 26, 26, 0.94); }
  body.cb-site.cb-home #page-container .maintext > .faq { background: var(--cb-red-hover); }
  body.cb-site.cb-home #page-container .maintext > .faq::before { background: var(--cb-red-aa); }
  /* the home blog photo's link is a 132x94 corner on live and its own date box covers it (live defect: the photo cannot be clicked); below 1250 the whole photo is the link, above the date box */
  body.cb-site #page-container .panel.blog .blog-image { position: relative; }
  body.cb-site #page-container .panel.blog .blog-image a { position: relative; z-index: 2; width: 100%; height: 100%; }
  /* "Read More" links and the footer's icon links (their words are hidden in an <em> the checks still read) */
  body.cb-site #page-container a.more:is(:link, :visited, :hover, :focus, :active):not(.button) { color: var(--cb-link) !important; }
  body.cb-site #page-container #footer .vcard .socialmedia a:is(:link, :visited, :hover, :focus, :active), body.cb-site #page-container .socialmedia a:is(:link, :visited, :hover, :focus, :active) { color: #333333; }
  /* forms: field borders 4.5:1 against white, labels and the note readable, star legible */
  body.cb-site #page-container .cb-contact-form .et_pb_contact_field :is(input.input, textarea.input), body.cb-site #page-container .cb-contact-form input.et_pb_contact_captcha { border-color: #767676; font-size: 16px; color: #333333; }
  body.cb-site #page-container .cb-contact-form .et_pb_contact_form_label, body.cb-site #page-container .cb-contact-form .et_pb_contact_right p.clearfix::before, body.cb-site #page-container .cb-contact-form .et_pb_contact_captcha_question { font-size: 15px; color: #1a1a1a; }
  body.cb-site #page-container .cb-contact-form form.et_pb_contact_form::after { font-size: 14px; color: #444444; }
  body.cb-site.cb-property #page-container .cb-contact-form .et_pb_contact_field :is(input.input, textarea.input) { border-color: #767676; }
}

/* ======================= below 1170: reflow shared by tablets and phones ======================= */
@media (max-width: 1169px) {
  html body.cb-site #page-container .container, html body.cb-site #page-container .container.main { width: auto; max-width: 1170px; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
  body.cb-site #page-container #container-outer, body.cb-site #page-container #header { min-width: 0; }
  body.cb-site #page-container .content, body.cb-site #page-container .content.bottom { min-width: 0; padding-top: 28px; float: none; display: flow-root; }
  body.cb-site #page-container .content.bottom { margin: 32px 0; padding-top: 0; }
  body.cb-site #page-container .container .left, body.cb-site #page-container .container .right, body.cb-site #page-container .content .left, body.cb-site #page-container .content .right { float: none; width: auto; }
  body.cb-site #page-container .content .right { padding-top: 24px; }
  body.cb-site #page-container .content img { max-width: 100%; height: auto; }
  body.cb-site #page-container .content table { max-width: 100%; }
  body.cb-site #page-container .content iframe { max-width: 100%; }
  body.cb-site #page-container .content .socialwidgets { display: none; }
  body.cb-site #page-container .container.main .maintext h1 { font-size: 48px; line-height: 50px; margin-bottom: 18px; }
  body.cb-site #page-container .content h1 { font-size: 40px; line-height: 44px; }
  body.cb-site #page-container .content h2 { font-size: 30px; line-height: 34px; }
  body.cb-site #page-container .content h3 { font-size: 26px; line-height: 30px; }
  body.cb-site #page-container .container.main .maintext { width: auto; }
  body.cb-site #page-container .content.property-details-page .container h1 { font-size: 40px; line-height: 44px; }

  /* header: logo (the white wave) over the top of the hero as on live, scaled to fit */
  body.cb-site #page-container #header { height: 58px; }
  body.cb-site #page-container #header .logo { margin-left: -240px; width: 480px; height: auto; top: 57px; }
  body.cb-site #page-container #header .logo img { width: 100%; height: auto; display: block; }
  body.cb-site #page-container #translate-widget { margin: 0; left: auto; right: 12px; top: 80px; width: auto; }

  /* hero in the flow, booking card under it */
  body.cb-site #page-container #feature { height: auto; padding-bottom: 0; top: 0; }
  body.cb-site.cb-home #page-container #feature { height: auto; padding-bottom: 0; }
  body.cb-site #page-container #feature .featureimage { height: 340px; }
  body.cb-site #page-container ul.featuremain.slidepark, body.cb-site #page-container ul.featuremain.slidepark > li, body.cb-site #page-container ul.featuremain.slidepark > li > img { height: 420px; }
  body.cb-site.cb-home #page-container .featuremain { height: 420px; }
  body.cb-site #page-container #booking, body.cb-site.cb-home #page-container #booking {
    position: relative; top: auto; bottom: auto; left: auto; width: auto; margin: 0; padding: 18px 24px 20px; border-radius: 0; background: #1a1a1a; text-align: left; box-sizing: border-box; }
  body.cb-site #page-container #booking h3 { line-height: 40px; font-size: 26px; letter-spacing: 6px; text-align: left; }
  body.cb-site #page-container .bookingform { margin: 8px 0 0; width: auto; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
  body.cb-site #page-container .bookingform span.check-in, body.cb-site #page-container .bookingform span.duration { flex: 1 1 220px; float: none; width: auto; display: block; margin: 0; line-height: 20px; }
  body.cb-site #page-container .bookingform em { float: none; display: block; }
  body.cb-site #page-container .bookingform span input, body.cb-site #page-container .bookingform span select { float: none; display: block; width: 100%; height: 44px; line-height: 44px; box-sizing: border-box; margin: 0; }
  body.cb-site #page-container .bookingform span.check-in input { padding-right: 44px; }
  body.cb-site #page-container .bookingform span select { background-position: right 12px center; padding: 0 36px 0 10px; }
  body.cb-site #page-container #feature .bookingbutton, body.cb-site #page-container .bookingbutton { float: none; flex: 0 0 220px; width: 220px; margin: 0; }
  body.cb-site #page-container .bookingbutton .button, body.cb-site #page-container #bp_submit { display: block; width: 100%; height: 48px; line-height: 48px; margin: 0; padding: 0; box-sizing: border-box; }
  body.cb-site #page-container .bookingform .clearleft { display: none; }

  /* home bands in one column */
  body.cb-site.cb-home #page-container #main-content { background: #1a1a1a; }
  body.cb-site.cb-home #page-container .uppercontentbg { position: relative; top: auto; height: 380px; width: 100%; box-sizing: border-box; }
  body.cb-site.cb-home #page-container .bannertop { position: relative; top: auto; right: auto; margin: -360px auto 0; width: 330px; height: 347px; background-size: 100% auto; z-index: 5; }
  body.cb-site.cb-home #page-container .bannertop a.button { left: 22px; bottom: 22px; width: 286px; height: 48px; line-height: 48px; }
  body.cb-site.cb-home #page-container .content { margin-top: 0; }
  body.cb-site.cb-home #page-container .container.main { padding: 0 0 40px; }
  body.cb-site.cb-home #page-container .container.main .maintext { margin: 40px 24px 0; padding: 26px 26px 28px; width: auto; }
  body.cb-site.cb-home #page-container .content .container.main { padding-left: 0; padding-right: 0; }
  body.cb-site.cb-home #page-container .container.main .maintext h1 { font-size: 52px; line-height: 54px; }
  body.cb-site.cb-home #page-container .content .maintext h2 { font-size: 26px !important; line-height: 30px !important; }
  body.cb-site.cb-home #page-container .faq { position: relative; right: auto; bottom: auto; width: auto; height: auto; margin: 28px 0 0; }
  body.cb-site.cb-home #page-container .faq::before { top: 5px; left: 5px; right: 5px; bottom: 5px; width: auto; height: auto; }
  body.cb-site.cb-home #page-container .faq p { margin: 0; padding: 22px 16px; }
  body.cb-site.cb-home #page-container .mid-banners { padding: 40px 0 40px; }
  body.cb-site.cb-home #page-container .blog-wrapper { float: none; width: auto; }
  body.cb-site.cb-home #page-container .panel.blog { width: auto; padding: 0; }
  body.cb-site.cb-home #page-container .panel.blog li { display: block; width: auto; margin: 0 0 24px; }
  body.cb-site.cb-home #page-container .panel.blog .blog-image { width: 100%; height: 220px; background-size: cover; }
  body.cb-site.cb-home #page-container .video { float: none; width: auto; margin: 40px 0 0; }
  body.cb-site.cb-home #page-container .video .videobg { display: block; width: 100%; height: auto; }
  body.cb-site.cb-home #page-container .video h3 { margin: 0 0 16px; line-height: 38px; }
  body.cb-site.cb-home #page-container .video p { position: static; margin: 0; }
  body.cb-site.cb-home #page-container .video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
  body.cb-site.cb-home #page-container .booking-banner-wrapper .bookingbannercontent { width: auto; height: auto; padding: 28px 24px; background: var(--cb-red-aa); }
  body.cb-site.cb-home #page-container .bookingbanner-text { text-align: left; }
  body.cb-site.cb-home #page-container .bookingbannercontent ul { display: block; width: auto; margin: 0 auto; max-width: 420px; }
  body.cb-site.cb-home #page-container .bookingbannercontent li { float: none; display: block; margin: 0 0 8px; font-size: 24px; line-height: 32px; }
  body.cb-site.cb-home #page-container .bottombanners { padding: 30px 0; }
  body.cb-site.cb-home #page-container .bottombanners a { float: none !important; display: block; margin: 12px 0; }
  body.cb-site.cb-home #page-container .bottombanners img { display: block; margin: 0 auto !important; float: none !important; width: 100%; max-width: 520px; height: auto; }
  body.cb-site.cb-home #page-container .bottombanners p { margin: 0; }

  /* inner pages */
  body.cb-site #page-container .main-property-buttons { display: flex; flex-wrap: wrap; gap: 8px; height: auto; }
  body.cb-site #page-container .main-property-buttons a.button.alt { margin: 0; flex: 1 1 140px; min-width: 0; text-align: center; padding: 6px 10px; box-sizing: border-box; height: auto; min-height: 46px; display: flex; align-items: center; justify-content: center; white-space: normal; line-height: 1.25; letter-spacing: 1px; }
  body.cb-site #page-container .property-details-wraper { display: block; width: auto; margin: 12px 0 40px; padding: 0 24px; box-sizing: border-box; }
  body.cb-site #page-container #menu-tab, body.cb-site #page-container #menu-tab ul { height: auto; }
  body.cb-site #page-container #menu-tab ul { float: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
  body.cb-site #page-container #menu-tab li { float: none; flex: 1 1 140px; margin: 0; }
  body.cb-site #page-container #menu-tab li a:is(:link, :visited, :active, :hover, :focus) { padding: 0 8px; margin: 0; text-align: center; box-sizing: border-box; width: 100%; line-height: 46px; font-size: 16px; white-space: nowrap; border-radius: 5px; }
  body.cb-site #page-container #menu-tab li.alt a:is(:link, :visited, :active, :hover, :focus) { float: none; font-size: 17px; }
  body.cb-site #page-container #menu-tab .clearleft { display: none; }
  body.cb-site #page-container .list .entry { margin: 30px 0 44px; }
  body.cb-site #page-container .list .entry .images, body.cb-site #page-container .list.rooms .entry .images { float: none; width: auto; height: auto; margin: 0 0 20px; }
  body.cb-site #page-container .list.rooms .entry { padding-right: 0; padding-bottom: 36px; }
  body.cb-site #page-container .list.rooms .container { z-index: auto; }
  body.cb-site #page-container .list.rooms .entry .main-photo { position: relative; top: auto; left: auto; right: auto; height: 340px; }
  body.cb-site #page-container .gallery.room { position: relative; top: auto; left: auto; height: auto; width: auto; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 10px 0 8px; }
  body.cb-site #page-container .gallery.room > * { flex: 0 0 auto; scroll-snap-align: start; }
  body.cb-site #page-container .gallery.room img { float: none; margin: 0 !important; display: block; }
  body.cb-site #page-container .gallery.room a { display: block; flex: 0 0 auto; }
  body.cb-site #page-container .list.rooms .entry ul.mainlist { float: none; width: auto; }
  body.cb-site #page-container .content .list.rooms ul { max-height: none; overflow-y: visible; }
  body.cb-site #page-container .content.property-details-page :is(div.left, div.right), body.cb-site #page-container .property-details :is(.left, .right) { float: none; width: auto; }
  body.cb-site #page-container .featureimage.property-image { width: 100%; height: 340px; }
  body.cb-site #page-container ul.featureimage { width: 100%; max-width: 100%; margin: 0; padding: 0; }
  body.cb-site #page-container .content.property-details-page .map-container { height: 380px !important; }
  body.cb-site #page-container .map-container { width: 100%; max-width: 100%; }
  body.cb-site #page-container .maintext table:not(.form):not(.gallery):has(img), body.cb-site #page-container .maintext table:not(.form):not(.gallery):has(img) :is(tbody, tr, td) { display: block; width: auto !important; max-width: 100%; box-sizing: border-box; }
  body.cb-site #page-container .maintext table:not(.form):not(.gallery) img { max-width: 100%; height: auto; margin-left: 0 !important; margin-right: 0 !important; }
  body.cb-site #page-container .maintext table:not(.form):not(.gallery):has(img) tbody { display: flex; flex-direction: column; }
  body.cb-site #page-container .maintext table:not(.form):not(.gallery):has(img) tr { display: flex; flex-direction: column; }
  body.cb-site #page-container .maintext table:not(.form):not(.gallery):has(img) td:has(> img, > p > img) { order: -1; }
  body.cb-site #page-container table.gallery { display: block; }
  body.cb-site #page-container table.gallery tbody { display: flex; flex-wrap: wrap; gap: 12px; }
  body.cb-site #page-container table.gallery tr { display: contents; }
  body.cb-site #page-container table.gallery td { display: block; flex: 0 0 calc(33.333% - 8px); box-sizing: border-box; padding: 0; width: auto; }
  body.cb-site #page-container table.gallery td.none { display: none; }
  body.cb-site #page-container table.gallery img { width: 100%; height: auto; display: block; }

  /* footer */
  body.cb-site #page-container #footer { min-width: 0; display: flex; flex-direction: column; }
  body.cb-site #page-container #footer > .clearboth { display: none; }
  body.cb-site #page-container #footer .leftmenus { order: 1; }
  body.cb-site #page-container #footer .map-wrapper { order: 2; }
  body.cb-site #page-container #footer .vcard { order: 3; }
  body.cb-site #page-container #footer .footermenu { order: 4; }
  body.cb-site #page-container #footer .leftmenus .container { display: block; }
  body.cb-site #page-container #footer .fmenu { float: none; display: block; line-height: 28px; padding: 14px 0 0; }
  body.cb-site #page-container #footer .copyright { height: auto; line-height: 22px; padding: 6px 0 16px; }
  body.cb-site #page-container #footer .copyright .footer-tags { display: block; }
  body.cb-site #page-container #footer .static-map-wrapper { min-height: 300px; }
  body.cb-site #page-container #footer .vcard { position: relative; top: auto; left: auto; width: auto; margin: 24px; max-width: none; box-sizing: border-box; display: flow-root; }
  body.cb-site #page-container #footer .vcard .socialmedia { display: flex; gap: 8px; clear: both; padding-top: 12px; }
  body.cb-site #page-container #footer .footermenu { padding: 16px 12px 28px; box-sizing: border-box; }
  body.cb-site #page-container #footer .footermenu li { display: inline-block; }

  /* blog */
  body.cb-site #page-container .list .entry .summary img.blog-image { margin: 4px 20px 12px 0; }
  body.cb-site #page-container .content .right .panel { margin-bottom: 26px; }
}


/* ======================= forms below 1170: one column, label above the field ======================= */
@media (max-width: 1169px) {
  body.cb-site #page-container .cb-contact-form { margin: 20px 0; }
  body.cb-site #page-container .cb-contact-form form.et_pb_contact_form { display: block; width: auto; }
  body.cb-site #page-container .cb-contact-form :is(.et_pb_contact, .et_contact_bottom_container, .et_pb_contact_right) { display: block; }
  body.cb-site #page-container .cb-contact-form p.et_pb_contact_field { display: block; margin: 0 0 16px; }
  body.cb-site #page-container .cb-contact-form p.et_pb_contact_field::after, body.cb-site #page-container .cb-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"])::after, body.cb-site.cb-property #page-container .cb-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"])::after { display: none; }
  body.cb-site #page-container .cb-contact-form .et_pb_contact_form_label { text-align: left; min-height: 0; height: auto; padding: 0 0 6px; line-height: 22px; font-size: 16px; font-weight: 400; text-transform: none; }
  body.cb-site.cb-property #page-container .cb-contact-form .et_pb_contact_form_label { height: auto; text-transform: uppercase; font-weight: 700; }
  body.cb-site #page-container .cb-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after { content: " *"; color: #c91313; font-weight: 700; }
  body.cb-site #page-container .cb-contact-form .et_pb_contact_field :is(input.input, textarea.input) { width: 100%; max-width: 100%; margin: 0; height: 48px; padding: 10px 14px; box-sizing: border-box; }
  body.cb-site.cb-property #page-container .cb-contact-form .et_pb_contact_field :is(input.input, textarea.input) { width: 100%; margin: 0; height: 48px; }
  body.cb-site #page-container .cb-contact-form .et_pb_contact_field textarea.input, body.cb-site.cb-property #page-container .cb-contact-form .et_pb_contact_field textarea.input { height: 150px; min-height: 150px; }
  body.cb-site #page-container .cb-contact-form .et_pb_contact_right p.clearfix { display: block; padding: 0 0 16px; min-height: 0; margin: 0; }
  body.cb-site #page-container .cb-contact-form .et_pb_contact_right p.clearfix::before, body.cb-site.cb-property #page-container .cb-contact-form .et_pb_contact_right p.clearfix::before { position: static; display: block; width: auto; height: auto; margin: 0 0 6px; padding: 0; text-align: left; font-size: 16px; line-height: 22px; font-weight: 400; text-transform: none; content: "Verification"; }
  body.cb-site #page-container .cb-contact-form input.et_pb_contact_captcha { width: 90px; height: 48px; margin-left: 10px; }
  body.cb-site #page-container .cb-contact-form .et_pb_contact_captcha_question { font-size: 18px; line-height: 48px; }
  html body.cb-site #page-container .et_pb_section .cb-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button { display: block; width: 220px; height: 52px; margin: 8px 0 0; line-height: 52px !important; font-size: 18px !important; }
  body.cb-site #page-container .cb-contact-form form.et_pb_contact_form::after { display: block; margin: 12px 0 0; padding: 0 22px 0 0; text-align: left; background-position: right center; width: max-content; max-width: 100%; }
  body.cb-site #page-container .cb-contact-form .et-pb-contact-message { margin: 0 0 14px; font-size: 16px; line-height: 24px; color: #1a1a1a; scroll-margin-top: 90px; }
}
@media (max-width: 767px) {
  html body.cb-site #page-container .et_pb_section .cb-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button { width: 100%; }
}

/* ======================= below 980: the menu goes behind a button ======================= */
@media (max-width: 979px) {
  body.cb-site #page-container .ils-menu-toggle { display: flex; align-items: center; gap: 12px; width: 100%; height: 58px; margin: 0; padding: 0 20px; border: 0; border-radius: 0; background: transparent; color: #ffffff;
    font: 700 16px/58px 'ProximaNovaRgBold', Arial, Helvetica, sans-serif; letter-spacing: 2px; text-transform: uppercase; text-align: left; cursor: pointer; position: relative; z-index: 10001; }
  body.cb-site #page-container .ils-menu-toggle span, body.cb-site #page-container .ils-menu-toggle span::before, body.cb-site #page-container .ils-menu-toggle span::after { display: block; position: relative; width: 22px; height: 3px; background: #ffffff; content: ""; border-radius: 1px; }
  body.cb-site #page-container .ils-menu-toggle span::before { position: absolute; top: -7px; }
  body.cb-site #page-container .ils-menu-toggle span::after { position: absolute; top: 7px; }
  body.cb-site #page-container .ils-menu-toggle:is(:hover, :focus-visible, :active), body.cb-site #page-container #header.ils-menu-open .ils-menu-toggle { background: rgba(0, 0, 0, 0.3); color: #ffffff; }
  body.cb-site #page-container #header { background: var(--cb-red-aa); }
  body.cb-site #page-container #menu { position: absolute; top: 58px; left: 0; right: 0; display: none; height: auto; width: auto; text-align: left; background: var(--cb-red-aa); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); z-index: 10000; }
  body.cb-site #page-container #header.ils-menu-open #menu { display: block; }
  /* live gives the booking bar z-index 99999, which painted it over the open menu; keep it below the menu panel (10000) */
  body.cb-site #page-container #booking, body.cb-site.cb-home #page-container #booking { z-index: 1; }
  body.cb-site #page-container #menu > ul { display: block; margin: 0; padding: 0 0 8px; }
  body.cb-site #page-container #menu li { display: block; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
  body.cb-site #page-container #menu li a:is(:link, :visited, :active), body.cb-site #page-container #menu li:hover a:is(:link, :visited, :active, :hover) {
    display: block; padding: 0 20px; line-height: 50px; font-size: 17px; color: #ffffff; background: none; border-radius: 0 !important; letter-spacing: 1.3px; }
  body.cb-site #page-container #menu > ul > li:is(.active) > a:is(:link, :visited), body.cb-site #page-container #menu > ul > li > a:is(:hover, :focus, :focus-visible) { background: rgba(0, 0, 0, 0.3); }
  body.cb-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; background: rgba(0, 0, 0, 0.18); }
  body.cb-site #page-container #menu li li { border-top: 1px solid rgba(255, 255, 255, 0.18); }
  body.cb-site #page-container #menu li ul a:is(:link, :visited, :active), body.cb-site #page-container #menu li:hover ul a:is(:link, :visited, :active) { padding: 0 20px 0 40px; line-height: 46px; font-size: 16px; color: #ffffff; background: none; text-transform: none; }
  body.cb-site #page-container #menu li li:is(.active, :hover) a:is(:link, :visited), body.cb-site #page-container #menu li ul li a:is(:hover, :focus, :focus-visible) { background: rgba(0, 0, 0, 0.35); color: #ffffff; }
  body.cb-site #page-container #header .logo { top: 58px; }
}

/* ======================= phone: below 768 ======================= */
@media (max-width: 767px) {
  html body.cb-site #page-container .container, html body.cb-site #page-container .container.main { padding-left: 16px; padding-right: 16px; }
  body.cb-site #page-container #header .logo { width: 320px; margin-left: -160px; }
  body.cb-site #page-container #translate-widget { top: 66px; bottom: auto; right: 8px; }
  body.cb-site #page-container #feature .featureimage { height: 230px; }
  body.cb-site #page-container ul.featuremain.slidepark, body.cb-site #page-container ul.featuremain.slidepark > li, body.cb-site #page-container ul.featuremain.slidepark > li > img, body.cb-site.cb-home #page-container .featuremain { height: 300px; }
  body.cb-site #page-container #booking, body.cb-site.cb-home #page-container #booking { padding: 16px 16px 18px; }
  body.cb-site #page-container #booking h3 { font-size: 22px; letter-spacing: 4px; line-height: 34px; }
  body.cb-site #page-container .bookingform { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  body.cb-site #page-container .bookingform span.check-in, body.cb-site #page-container .bookingform span.duration { flex: 0 0 auto; }
  body.cb-site #page-container #feature .bookingbutton, body.cb-site #page-container .bookingbutton { flex: 0 0 auto; width: 100%; }
  body.cb-site #page-container .bookingbutton .button, body.cb-site #page-container #bp_submit { height: 52px; line-height: 52px; font-size: 18px; }
  body.cb-site #page-container .container.main .maintext h1 { font-size: clamp(26px, 8.6vw, 34px); line-height: 1.15; letter-spacing: 1px; overflow-wrap: anywhere; }
  body.cb-site #page-container .content h1 { font-size: clamp(26px, 8.2vw, 32px); line-height: 1.15; margin-bottom: 14px; letter-spacing: 1px; overflow-wrap: anywhere; }
  body.cb-site #page-container .content h2 { font-size: 25px; line-height: 30px !important; margin: 24px 0 10px; }
  body.cb-site #page-container .content h3 { font-size: 22px; line-height: 27px; margin: 22px 0 8px; }
  body.cb-site #page-container .content h4 { font-size: 20px; line-height: 26px; }
  body.cb-site #page-container .content p { margin: 14px 0; }
  body.cb-site #page-container :is(.content, #content) :is(p, h1, h2, h3, h4, li, td)[style*="justify"], body.cb-site #page-container :is(.content, #content) :is(p, li, td) { text-align: left !important; }
  body.cb-site.cb-home #page-container .container.main .maintext { margin: 28px 16px 0; padding: 22px 20px 24px; }
  body.cb-site.cb-home #page-container .container.main .maintext h1 { font-size: 40px; line-height: 44px; }
  body.cb-site.cb-home #page-container .content .maintext h2 { font-size: 22px !important; line-height: 26px !important; letter-spacing: 2px; }
  body.cb-site.cb-home #page-container .uppercontentbg { height: 330px; }
  body.cb-site.cb-home #page-container .bannertop { margin-top: -312px; width: 300px; height: 315px; }
  body.cb-site.cb-home #page-container .bannertop a.button { left: 20px; bottom: 20px; width: 260px; height: 46px; line-height: 46px; font-size: 16px; }
  body.cb-site.cb-home #page-container .faq p a { font-size: 16px; }
  body.cb-site.cb-home #page-container .faq p a strong { font-size: 20px; }
  body.cb-site.cb-home #page-container .panel.blog h3 { font-size: 28px; }
  body.cb-site.cb-home #page-container .bookingbannercontent li { font-size: 20px; line-height: 28px; }
  /* photos that live floats beside the text stack above it on a phone */
  body.cb-site #page-container :is(.maintext, .entry, .summary, .content) :is(img, a)[style*="float"] { float: none !important; display: block; margin: 0 0 16px !important; max-width: 100%; height: auto; }
  body.cb-site #page-container .content p:has(> img[style*="float"]) { margin: 0; }
  body.cb-site #page-container .content img[style*="float"] { width: auto; max-width: 100%; }
  /* contact tables: one column */
  body.cb-site #page-container .maintext table, body.cb-site #page-container .maintext table tbody, body.cb-site #page-container .maintext table tr, body.cb-site #page-container .maintext table td, body.cb-site #page-container .maintext table th:not(.form th) { display: block; width: auto !important; box-sizing: border-box; }
  body.cb-site #page-container .maintext table.gallery, body.cb-site #page-container .maintext table.gallery tbody { display: flex; }
  body.cb-site #page-container .maintext table td { padding: 2px 0; }
  body.cb-site #page-container table.gallery td { flex: 0 0 calc(50% - 6px); }
  body.cb-site #page-container .main-property-buttons a.button.alt, body.cb-site #page-container #menu-tab li { flex: 1 1 calc(50% - 8px); }
  body.cb-site #page-container .property-details-wraper { padding: 0 16px; }
  body.cb-site #page-container .list.rooms .entry .main-photo { height: 240px; }
  body.cb-site #page-container .featureimage.property-image { height: 240px; }
  body.cb-site #page-container .content.property-details-page .map-container { height: 300px !important; }
  body.cb-site #page-container .list .entry { margin: 22px 0 36px; }
  body.cb-site #page-container .list .entry h2 { font-size: 24px; line-height: 29px !important; }
  body.cb-site #page-container .list .entry .summary img.blog-image { float: none; display: block; margin: 0 0 12px; width: 100%; max-width: 320px; height: auto; }
  body.cb-site #page-container #footer .vcard { margin: 20px 16px; }
  body.cb-site #page-container #footer .static-map-wrapper { min-height: 240px; }
  body.cb-site #page-container #footer .footermenu li { display: block; text-align: center; }
}

/* ======================= the booking calendar (appended to <body>) below 1250: bigger cells, 14px text, AA colours, 24px+ taps ======================= */
@media (max-width: 1249px) {
  body.cb-site #datepicker_div, body.cb-site #datepicker_div .datepicker_oneMonth { width: 266px; font-size: 14px; }
  body.cb-site #datepicker_div :is(th, td) { font-size: 16px; line-height: 24px; }
  body.cb-site #datepicker_div table.datepicker { width: 100%; }
  body.cb-site #datepicker_div .datepicker_control, body.cb-site #datepicker_div .datepicker_links { font-size: 14px; letter-spacing: 0; padding: 0; }
  body.cb-site #datepicker_div .datepicker_control a, body.cb-site #datepicker_div .datepicker_links a { font-size: 14px; padding: 7px 8px !important; line-height: 20px; display: block; color: #ffffff !important; }
  body.cb-site #datepicker_div .datepicker_control a:is(:hover, :focus-visible), body.cb-site #datepicker_div .datepicker_links a:is(:hover, :focus-visible) { background: #ffffff !important; color: #1a1a1a !important; }
  body.cb-site #datepicker_div .datepicker_header, body.cb-site #datepicker_div .datepicker_header select { background: #d62323; font-size: 16px; height: auto; padding: 4px 0; }
  body.cb-site #datepicker_div .datepicker_header select { min-height: 32px; padding: 2px 6px; }
  body.cb-site #datepicker_div .datepicker_titleRow, body.cb-site #datepicker_div .datepicker_titleRow th, body.cb-site #datepicker_div .datepicker_titleRow td { background: #595959; color: #ffffff; }
  body.cb-site #datepicker_div .datepicker_titleRow .datepicker_weekEndCell { background: #595959; }
  body.cb-site #datepicker_div .datepicker_titleRow a { color: #ffffff !important; }
  body.cb-site #datepicker_div .datepicker_daysRow, body.cb-site #datepicker_div .datepicker_daysRow td { color: #333333; }
  body.cb-site #datepicker_div td.datepicker_daysCell a, body.cb-site #datepicker_div td a { min-height: 36px; line-height: 36px; color: #000000; }
  body.cb-site #datepicker_div td.datepicker_daysCell { color: #000000; }
  body.cb-site #datepicker_div td.datepicker_unselectable, body.cb-site #datepicker_div td.datepicker_unselectable a { color: #595959; }
  body.cb-site #datepicker_div td.datepicker_weekEndCell a { color: #000000; }
  body.cb-site #datepicker_div td.datepicker_currentDay a { color: #000000; }
  body.cb-site #datepicker_div td.datepicker_daysCell a:is(:hover, :focus-visible) { background: #ffffff; outline: 2px solid #1a1a1a; outline-offset: -2px; }
}

/* Facebook's page plugin sizes itself to 340px; keep it inside the column on the narrowest phones */
@media (max-width: 767px) {
  body.cb-site #page-container .fb-page, body.cb-site #page-container .fb-page > span, body.cb-site #page-container .fb-page iframe { max-width: 100% !important; width: 100% !important; }
}

/* the search page's field is 300px wide with 5px side margins: fluid on a phone (it ran 38px past a 320px screen) */
@media (max-width: 767px) {
  body.cb-site #page-container .form.searchpage { width: 100%; }
  body.cb-site #page-container .form.searchpage :is(tbody, tr, td) { display: block; width: auto; text-align: left; padding: 0; }
  body.cb-site #page-container .form.searchpage input:not(.button), body.cb-site #page-container input.clicknclear { float: none; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 0 10px; }
  body.cb-site #page-container .form.searchpage .button { margin: 0; }
}

/* ======================= property tab row: Book Now lines up with the tabs (below 1170), full width on phones ======================= */
@media (max-width: 1169px) {
  body.cb-site #page-container #menu-tab li.alt { margin: 0; padding: 0; float: none; }
  body.cb-site #page-container #menu-tab li.alt a:is(:link, :visited, :active, :hover, :focus) { display: block; width: 100%; float: none; margin: 0; line-height: 46px; font-size: 17px; letter-spacing: 1px; text-align: center; box-sizing: border-box; }
}
@media (max-width: 767px) {
  body.cb-site #page-container #menu-tab li.alt { flex: 1 1 100%; }
}

/* tablet: Book Now is the same size as a tab, never stretched across the row (Jake, 19 Oct). Six equal cells on one row from 880px, three by two from 768px; phones keep the full-width Book Now row above */
@media (min-width: 880px) and (max-width: 1169px) {
  body.cb-site #page-container #menu-tab ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  body.cb-site #page-container #menu-tab li, body.cb-site #page-container #menu-tab li.alt { flex: none; min-width: 0; }
}
@media (min-width: 768px) and (max-width: 879px) {
  body.cb-site #page-container #menu-tab ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.cb-site #page-container #menu-tab li, body.cb-site #page-container #menu-tab li.alt { flex: none; min-width: 0; }
}

/* search page: field and button sit on one row at every width, same 48px height, left-aligned with the heading and intro (Jake, 19 Oct) */
body.cb-site #page-container .form.searchpage { display: block; width: 100%; max-width: 860px; margin: 0 !important; }
body.cb-site #page-container .form.searchpage :is(tbody, tr) { display: block; width: 100%; }
body.cb-site #page-container .form.searchpage td { display: flex !important; flex-flow: row nowrap; align-items: stretch; gap: 10px; width: 100% !important; padding: 0 !important; text-align: left; }
body.cb-site #page-container .form.searchpage input:not(.button), body.cb-site #page-container .form.searchpage input.clicknclear { float: none !important; flex: 1 1 auto; width: auto !important; min-width: 0; height: 48px !important; box-sizing: border-box; margin: 0 !important; }
body.cb-site #page-container .form.searchpage input.button { float: none !important; flex: 0 0 auto; width: auto !important; height: 48px !important; line-height: 48px !important; box-sizing: border-box; margin: 0 !important; padding: 0 29px !important; }
@media (max-width: 479px) {
  body.cb-site #page-container .form.searchpage td { gap: 8px; }
  body.cb-site #page-container .form.searchpage input.button { padding: 0 16px !important; font-size: 15px !important; letter-spacing: 0 !important; }
}
body.cb-site #page-container .form.searchpage { margin-bottom: 40px !important; }

/* FAQs (Jake, 19 Oct): one category list straight after the intro line (live repeated it beside every category); three equal cells on desktop, stacked on phone; the category blocks then run full width. Ported from Founda Gardens. */
body.cb-site #page-container .maintext .faq-cats .panel.faqs { margin: 30px 0 0 0; height: auto; }
body.cb-site #page-container .maintext .faq-cats .panel.faqs h3 { margin-bottom: 10px; }
body.cb-site #page-container .maintext .faq-cats ul.archive { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; }
body.cb-site #page-container .maintext .faq-cats li { margin: 15px 0 0 0; }
body.cb-site #page-container .container > .left:has(> .list.faq) { float: none; width: 100%; }
@media (max-width: 767px) {
  body.cb-site #page-container .maintext .faq-cats ul.archive { grid-template-columns: minmax(0, 1fr); }
}
body.cb-site #page-container .maintext .faq-cats { margin-bottom: 45px; }

/* Pre-launch fixes, 19 Oct 2026 (3.18 findings M1 and M2). Below the stated widths only; 1250px and up is untouched. */
/* M1: the 600px floated promo photo on /win no longer squeezes the heading and intro into a thin column below 980px */
@media (max-width: 979px) {
  body.cb-site #page-container .maintext img[src*="fb-banner-artwork-600x338c"] { float: none !important; display: block; max-width: 100%; width: auto !important; height: auto !important; margin: 0 0 20px 0; }
}
/* M2: property Photo Gallery thumbnails: the 6px frame counts inside the cell, so the grid sits inside the text gutter on phones */
@media (max-width: 767px) {
  body.cb-site #page-container table.gallery img { box-sizing: border-box; }
}

/* Pre-launch M3 (19 Oct 2026): lighter hero photos below 1170px. Smaller copies sit beside each original; the script (cb-prelaunch.php) names them in --cb-s (phone), --cb-s3 (3x phone) and --cb-t (tablet) on the band's inline style.
   1170px and up, and tablets at 1.5x or sharper, keep the original file. */
@media (max-width: 767px) {
  body.cb-site #page-container :is(.featureimage, .uppercontentbg)[style*="--cb-s:"] { background-image: var(--cb-s) !important; }
}
@media (max-width: 767px) and (min-resolution: 2.5dppx) {
  body.cb-site #page-container :is(.featureimage, .uppercontentbg)[style*="--cb-s3:"] { background-image: var(--cb-s3) !important; }
}
@media (min-width: 768px) and (max-width: 1169px) and (max-resolution: 1.49dppx) {
  body.cb-site #page-container :is(.featureimage, .uppercontentbg)[style*="--cb-t:"] { background-image: var(--cb-t) !important; }
}
/* the home page photo behind the content band is 2000px and 861 KB: phone and tablet copies */
@media (max-width: 767px) {
  body.cb-site:where(.cb-home) #page-container .content { background-image: url(/wp-content/uploads/ilaunch/skin/images/content-bg-w1000.jpg); }
}
@media (min-width: 768px) and (max-width: 1169px) {
  body.cb-site:where(.cb-home) #page-container .content { background-image: url(/wp-content/uploads/ilaunch/skin/images/content-bg-w1400.jpg); }
}