/* os-mobile.css - Ocean Sands designed tablet and phone layer (Stage 4, skill Rule 2). Loads LAST (after os-design.css).
   Started from the starter pack's ilaunch-v2-mobile.starter.css (rendered by render_mobile_css.py from build/site-params.json,
   copy kept as build/os-mobile.starter-render.css) and rewritten for THIS template: Ocean Sands' V2 variant has a brown menu bar
   (.menuwrapper), the booking box inside the hero, a home offer row (.feature-banners: offer text, booking box, photo with
   "Check Availability"), white text on a tan ground (#9f9173) and a brown footer. None of the starter's VARIANT blocks exist here.
   Bands (skill Rule 2, width bands):
     1250px and up    live's exact colours, type and geometry (nothing in this file applies).
     1170 to 1249     live's layout, fitted so nothing overlaps or scrolls sideways, with every state WCAG AA, a 14px text floor,
                      16px inputs and 24px tap targets (first block).
     768 to 1169      one reflow, ours to design (second block); below 980 the menu goes behind the MENU button (third block).
     below 768        the phone layout (fourth block).
   AA palette (live's own hues, darkened; computed in Stage 4): content ground #6d624b (white 6.0:1, #efebe2 5.0:1), offer row
   #423525 under a dark photo overlay, footer small print #cfc8bf on #5a4b38 (5.1:1), booking labels #423525 on #c2b9a6 (6.0:1),
   pager #595959 on #ededed (6.0:1) with the current page white on #a40001 (8.1:1). */

/* =================== below 1250: AA, type floor, inputs and taps (live's layout kept from 1170) =================== */
@media (max-width: 1249px) {
  /* live pads .content 55px each side around a 1170px wrapper (1280px in all): it scrolled sideways below 1280. The wrapper is
     centred either way, so dropping the side padding changes nothing visible and keeps the page inside the screen. */
  body.os-site #page-container .content { padding-left: 0; padding-right: 0; }
  /* the footer address list is 450px wide inside a 425px card and ran 25px past a 1170-1249px screen */
  body.os-site #page-container #footer .vcard ul { float: none; width: auto; }

  /* AA ground: white text on live's #9f9173 is 3.1:1 */
  body.os-site, body.os-site #page-container .content { background-color: #6d624b; }
  body.os-site #page-container .contentimageoverlay { opacity: 0.06; }
  body.os-site #page-container .contentimageoverlay.bottom { opacity: 1; background: linear-gradient(rgba(109, 98, 75, 0), #6d624b) bottom center / 100% 330px no-repeat; }
  /* list entries were lighter than the ground (white on them 4.4:1): two darker tints keep live's alternation */
  body.os-site #page-container .list .entry { background: rgba(0, 0, 0, 0.06); }
  body.os-site #page-container .list .entry.even { background: rgba(0, 0, 0, 0.14); }
  /* home offer row: white text sat on a light photo veil (1.95:1); a dark veil over the same photo */
  body.os-site #page-container .feature-banners { background-color: #423525; }
  body.os-site #page-container .feature-left-overlay .feature-overlay { background: rgba(66, 53, 37, 0.8); }
  body.os-site #page-container .feature-right-overlay .feature-overlay { background: rgba(66, 53, 37, 0.25); }

  /* text colours */
  body.os-site #page-container h3 a:link, body.os-site #page-container h3 a:visited, body.os-site #page-container h3 a:active { color: #ffffff; }
  body.os-site #page-container a.more, body.os-site #page-container .panel .more { color: #ffffff; }
  body.os-site #page-container a.more:hover, body.os-site #page-container .panel .more:hover { color: #ffffff; text-decoration: underline; }
  body.os-site #page-container .panel .title a:hover, body.os-site #page-container h2 a:hover,
  body.os-site #page-container .panel .details a:hover, body.os-site #page-container .entry .details a:hover { color: #ffffff; text-decoration: underline; }
  body.os-site #page-container a:hover, body.os-site #page-container li a:hover, body.os-site #page-container td a:hover { color: #ffffff; }
  body.os-site #page-container .content a:not(.button):hover { color: #ffffff; text-decoration: underline; }
  body.os-site #page-container .panel .date { color: #efebe2; }
  body.os-site #page-container .bookingform em { color: #423525; }
  body.os-site #page-container .search input.clicknclear { color: #666666; }
  body.os-site #page-container #footer .copyright a, body.os-site #page-container #footer .copyright .right,
  body.os-site #page-container .copyright p, body.os-site #page-container #footer .email { color: #cfc8bf; }
  body.os-site #page-container .paging a:link, body.os-site #page-container .paging a:visited, body.os-site #page-container .paging a:active { color: #595959; }
  body.os-site #page-container .paging a:hover, body.os-site #page-container .paging em, body.os-site #page-container .paging em a:link,
  body.os-site #page-container .paging em a:visited { background-color: #a40001; color: #ffffff; }
  body.os-site #page-container .paging em { background-color: transparent; padding: 0; }
  body.os-site #page-container span.options a:link, body.os-site #page-container span.options a:visited { color: #ffffff; }
  body.os-site #page-container div.top a { color: #595959; }
  body.os-site #page-container div.top a:hover { color: #ffffff; background: #595959; }
  body.os-site #page-container .smalltext, body.os-site #page-container .smalltext a { color: #efebe2; }

  /* nothing under 14px */
  body.os-site #page-container .panel, body.os-site #page-container .panel .summary { font-size: 14px; line-height: 20px; }
  body.os-site #page-container .panel .details, body.os-site #page-container .entry .details,
  body.os-site #page-container .panel li em, body.os-site #page-container .panel .date { font-size: 14px; line-height: 20px; }
  body.os-site #page-container a.more { font-size: 14px; }
  body.os-site #page-container .paging, body.os-site #page-container div.top, body.os-site #page-container .smalltext { font-size: 14px; }
  body.os-site #page-container .form td em, body.os-site #page-container .content p.ils-required-note em.required { font-size: 14px; }
  body.os-site #page-container .content h6 { font-size: 14px; line-height: 20px; }
  body.os-site #page-container #footer p, body.os-site #page-container .vcard .org, body.os-site #page-container .vcard .adr,
  body.os-site #page-container .vcard li, body.os-site #page-container #footer .copyright a, body.os-site #page-container .copyright,
  body.os-site #page-container .copyright p, body.os-site #page-container #footer .copyright .right { font-size: 14px; }
  body.os-site #page-container .content :is([style*="font-size: 8px"], [style*="font-size: 9px"], [style*="font-size: 10px"], [style*="font-size: 11px"], [style*="font-size: 12px"], [style*="font-size: 13px"],
    [style*="font-size:8px"], [style*="font-size:9px"], [style*="font-size:10px"], [style*="font-size:11px"], [style*="font-size:12px"], [style*="font-size:13px"]) { font-size: 14px !important; }

  /* live content carrying its own text colour (the reviews intro is #666 on the tan ground, 1.05:1 here): the ground's text colour */
  body.os-site #page-container .content :is(h1, h2, h3, h4, h5, h6, p, span, strong, em, li, td, div)[style*="color"] { color: inherit !important; }

  /* inputs 16px */
  body.os-site #page-container .search input.clicknclear,
  body.os-site #page-container .bookingform span input, body.os-site #page-container .bookingform span select,
  body.os-site #page-container input[type=text], body.os-site #page-container input[type=email], body.os-site #page-container textarea,
  body.os-site #page-container .content select, body.os-site #page-container input[type=image] { font-size: 16px; }
  body.os-site #page-container .os-contact-form p.et_pb_contact_field .input, body.os-site #page-container .os-contact-form input.et_pb_contact_captcha { font-size: 16px; }

  /* tap targets 24px and up (links on their own; links inside running text are exempt) */
  body.os-site #page-container #header .logo a { display: inline-block; }
  body.os-site #page-container .footermenu a, body.os-site #page-container #footer .copyright a,
  body.os-site #page-container #footer a.email { display: inline-block; line-height: 24px; }
  body.os-site #page-container .paging a:link, body.os-site #page-container .paging a:visited, body.os-site #page-container .paging em a { display: inline-block; min-width: 14px; line-height: 24px; text-align: center; }
  body.os-site #page-container span.options a { display: inline-block; line-height: 24px; }
  body.os-site #page-container div.top a { line-height: 24px; }
  /* inline padding grows the tap area without changing how a title or byline wraps beside its photo */
  body.os-site #page-container .panel .title a, body.os-site #page-container .panel .details a, body.os-site #page-container .entry .details a { padding: 2px 0; }

  body.os-site #page-container .panel li a, body.os-site #page-container a.more,
  body.os-site #page-container .content :is(li, td) > a:not(.button), body.os-site #page-container .content p > a:only-child:not(.button) { padding-top: 3px; padding-bottom: 3px; }
  body.os-site #page-container .gallery a.gallery-item { display: inline-block; }

  /* every button state stays readable (live: white on #a40001, hover white on #423525: both AA) */
  body.os-site #page-container a.button:focus, body.os-site #page-container input.button:focus { background: #423525; color: #ffffff; }

  /* the contact and review form become fluid (labels left, fields right), star after the label */
  body.os-site #page-container .os-contact-form { width: auto; }
  body.os-site #page-container .os-contact-form form.et_pb_contact_form { grid-template-columns: 111px minmax(0, 1fr); }
  body.os-site #page-container .os-contact-form p.et_pb_contact_field .input { width: auto; justify-self: stretch; }
  body.os-site #page-container .os-contact-form p.et_pb_contact_field:has(> [data-required_mark="required"]) > .et_pb_contact_form_label::after {
    position: static; display: inline-block; margin-left: 4px; vertical-align: -3px; }
  body.os-site #page-container .content p.ils-required-note { width: auto; }
}
@media (min-width: 1170px) and (max-width: 1249px) {
  /* the same 562px form column as live at these widths */
  body.os-site #page-container .os-contact-form form.et_pb_contact_form { grid-template-columns: 111px 451px; }
}

/* =================== below 1170: one reflow for tablets and phones =================== */
@media (max-width: 1169px) {
  body.os-site #page-container .container { width: auto; padding-left: 24px; padding-right: 24px; }
  body.os-site #page-container .content img { max-width: 100%; height: auto; }
  body.os-site #page-container .content iframe { max-width: 100%; }

  /* ---- header: logo left, phone / search / RSS right (live's floats, fluid), the brown menu bar under it ---- */
  body.os-site #page-container #header .right { width: auto; max-width: calc(100% - 180px); }
  body.os-site #page-container .menuwrapper { position: relative; }
  body.os-site #page-container #menu ul { display: block; }
  body.os-site #page-container #menu li ul { display: none; }
  body.os-site #page-container #menu li:hover ul, body.os-site #page-container #menu li:focus-within ul { display: block; }

  /* ---- hero ---- */
  body.os-site #page-container #feature { position: relative; }
  body.os-site #page-container .featureimage { height: 340px; }
  body.os-site.os-home #page-container .featuremain,
  body.os-site:not(.os-home) #page-container .featuremain { height: 420px; }

  /* ---- booking: a full-width block under the hero (live floats it over the hero's right edge or centre) ---- */
  body.os-site #page-container #booking { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; margin: 0;
    padding: 20px 24px 22px; background-image: none !important; background-color: #5a4b38; z-index: 20; }
  body.os-site #page-container #booking::after { left: auto; right: 24px; top: -34px; width: 68px; height: 68px; margin: 0; background-size: 68px 68px; }
  body.os-site #page-container .booking-overlay { display: none; }
  body.os-site #page-container #booking h3 { margin: 0 0 14px; font-size: 32px; line-height: 36px; text-align: left; }
  body.os-site #page-container .bookingform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; padding: 0; }
  body.os-site #page-container .bookingform span.check-in, body.os-site #page-container .bookingform span.duration {
    float: none; display: flex; align-items: center; min-width: 0; height: 46px; margin: 0; padding-right: 0; line-height: 46px; background-size: 133px 100%; }
  body.os-site #page-container .bookingform em { flex: 0 0 123px; padding-left: 10px; }
  body.os-site #page-container .bookingform .datepicker_wrap { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
  body.os-site #page-container .bookingform span input { flex: 1 1 auto; width: auto; min-width: 0; height: 36px; padding: 0 8px 0 10px; }
  body.os-site #page-container .bookingform span select { flex: 1 1 auto; width: auto; min-width: 0; height: 44px; margin: 0; padding: 0 30px 0 10px; background-position: right 12px center; }
  body.os-site #page-container .bookingform span img, body.os-site #page-container .bookingform .datepicker_trigger { flex: 0 0 auto; margin: 0 12px 0 4px; }
  body.os-site #page-container .bookingbutton { float: none; }
  body.os-site #page-container .bookingbutton input.button { display: block; width: auto; height: 46px; padding: 0 34px; }
  body.os-site #page-container .bookingform .clearleft { display: none; }

  /* ---- home offer row: offer text on its photo (left), the "Check Availability" photo (right) ---- */
  body.os-site.os-home #page-container .feature-banners { display: grid; grid-template-columns: 1fr 1fr; height: auto; padding: 0; overflow: hidden; }
  body.os-site.os-home #page-container .feature-banners > .container { display: contents; }
  body.os-site.os-home #page-container .feature-left-overlay, body.os-site.os-home #page-container .feature-right-overlay {
    position: relative; top: auto; left: auto; width: auto; height: auto; min-height: 260px; margin: 0; grid-row: 1; background-size: cover; background-position: center; }
  body.os-site.os-home #page-container .feature-left-overlay { grid-column: 1; }
  body.os-site.os-home #page-container .feature-right-overlay { grid-column: 2; }
  body.os-site.os-home #page-container .feature-banners .feature-overlay { width: 100%; height: 100%; background-size: 100% 100%; }
  body.os-site.os-home #page-container .special { grid-row: 1; grid-column: 1; position: relative; z-index: 2; float: none; width: auto; margin: 0; padding: 28px 24px 30px; }
  body.os-site.os-home #page-container .special h3 { position: static; font-size: 34px; line-height: 38px; }
  body.os-site.os-home #page-container .special .text { position: static; width: auto; margin-top: 14px; padding-top: 18px; }
  body.os-site.os-home #page-container .special .text p:empty, body.os-site.os-home #page-container .special .text p:last-child:not(:has(a)) { display: none; }
  body.os-site.os-home #page-container .special .button { float: none; }
  body.os-site.os-home #page-container .feature-banners .banner { grid-row: 1; grid-column: 2; position: relative; z-index: 2; top: auto; left: auto; width: auto; height: auto;
    margin: 0; padding: 24px; display: flex; align-items: flex-end; justify-content: center; }
  body.os-site.os-home #page-container .feature-banners .banner .text { position: static; width: auto; }
  body.os-site.os-home #page-container .feature-banners .banner .button { padding: 12px 34px; white-space: normal; }
  body.os-site.os-home #page-container .feature-banners > .container > .clearleft { display: none; }

  /* ---- content ---- */
  body.os-site #page-container .content { padding: 40px 0 44px; }
  body.os-site #page-container .content-wrapper { width: auto; padding: 0 24px; }
  body.os-site #page-container .content .left { width: 64%; }
  body.os-site #page-container .content .right { width: 32%; }
  body.os-site #page-container .content.split .left, body.os-site #page-container .content.split .right { width: 48%; }
  body.os-site #page-container .content table { max-width: 100%; }

  /* home: welcome text full width over the faint flag photo, the latest-blog panel as three columns */
  body.os-site.os-home #page-container .content { padding: 44px 0 0; }
  body.os-site.os-home #page-container .content .wrapper { width: auto; padding: 0 24px; }
  body.os-site.os-home #page-container .content .wrapper > .left { display: none; }
  body.os-site.os-home #page-container .content .inner { float: none; width: auto; max-width: 760px; margin: 0 auto; }
  body.os-site.os-home #page-container .panel.blog { width: auto; margin: 44px 24px 0; padding: 36px 0 56px; }
  body.os-site.os-home #page-container .panel.blog ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 30px; }
  body.os-site.os-home #page-container .panel.blog li { float: none; width: auto; margin: 0; }
  body.os-site.os-home #page-container .panel.blog img { float: none; display: block; margin: 0 0 12px; }

  /* rooms: photo with its swipeable thumbnail row, text beside it */
  body.os-site #page-container .list .entry, body.os-site #page-container .list .entry.even { padding: 24px; }
  body.os-site #page-container .list .entry .images { width: 48%; max-width: 540px; margin-right: 24px; }
  body.os-site #page-container .gallery.room { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  body.os-site #page-container .gallery.room a { flex: 0 0 auto; scroll-snap-align: start; }
  body.os-site #page-container .gallery.room a img { display: block; width: 102px; height: 73px; }
  body.os-site #page-container .gallery.room .clearleft { display: none; }

  /* photo galleries (facilities, location, attractions): an even grid */
  body.os-site #page-container .gallery:not(.room) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  body.os-site #page-container .gallery:not(.room) > h3 { grid-column: 1 / -1; margin: 0; }
  body.os-site #page-container .gallery:not(.room) > a:not(.gallery-item) { position: absolute; }
  body.os-site #page-container .gallery:not(.room) > br, body.os-site #page-container .gallery:not(.room) > .clearleft { display: none; }
  body.os-site #page-container .gallery:not(.room) a.gallery-item img { display: block; width: 100%; height: auto; aspect-ratio: 370 / 250; object-fit: cover; box-sizing: border-box; }

  body.os-site #page-container .content table.grid.short { width: auto; }

  /* contact and reviews: the two columns become one */
  body.os-site.page-id-1493 #page-container .content .left, body.os-site.page-id-1493 #page-container .content .right,
  body.os-site.page-id-1492 #page-container .content .left, body.os-site.page-id-1492 #page-container .content .right { float: none; width: auto; }

  /* ---- footer ---- */
  body.os-site #page-container #footer > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  body.os-site #page-container #footer .footermenu { float: none; width: auto; grid-column: 1; grid-row: 1; }
  body.os-site #page-container #footer ul { width: auto; max-width: 100%; }
  body.os-site #page-container #footer .footermenu ul { float: none; width: auto; }
  body.os-site #page-container #footer .footermenu li { width: auto; }
  body.os-site #page-container #footer > .container > .socialmedia { float: none; width: auto; grid-column: 1; grid-row: 2; margin-top: 16px; }
  body.os-site #page-container #footer .vcard { float: none; width: auto; grid-column: 2; grid-row: 1 / span 2; }
  body.os-site #page-container #footer > .container > .clearboth { display: none; }
  /* 3b F4: the reflowed copyright moves the "Copyright" line last; 31px bottom padding keeps live's 39px from the last line to the page end */
  body.os-site #page-container #footer .copyright { margin-top: 36px; padding-bottom: 31px; }
  body.os-site #page-container #footer .copyright ul { float: none; width: auto; }
  body.os-site #page-container #footer .copyright .right { float: none; text-align: left; display: flex; flex-wrap: wrap-reverse; column-gap: 16px; align-items: center; justify-content: space-between; }
  body.os-site #page-container #footer .copyright .right .left { float: none; width: auto; }
  body.os-site #page-container #footer .footer-tags { float: none; width: auto; }
}

/* narrow tablets: the date field needs the room, Book Now takes its own row */
@media (max-width: 899px) {
  body.os-site #page-container .bookingform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.os-site #page-container .bookingbutton { grid-column: 1 / -1; }
  body.os-site #page-container .bookingbutton input.button { width: 100%; }
}

/* =================== below 980: the menu goes behind a button, columns stack =================== */
@media (max-width: 979px) {
  body.os-site #page-container .menuwrapper > .container { display: flex; flex-wrap: wrap; align-items: center; }
  body.os-site #page-container .ils-menu-toggle { display: inline-flex; align-items: center; gap: 10px; height: 46px; margin: 2px 0; padding: 0 16px 0 12px; border: 0; border-radius: 0;
    background: #423525; color: #ffffff; font: 16px/46px 'dinmedium', Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; box-sizing: border-box; }
  body.os-site #page-container .ils-menu-toggle:hover, body.os-site #page-container .ils-menu-toggle:focus { background: #a40001; color: #ffffff; }
  body.os-site #page-container .ils-menu-toggle span, body.os-site #page-container .ils-menu-toggle span::before, body.os-site #page-container .ils-menu-toggle span::after {
    display: block; position: relative; width: 20px; height: 2px; background: #ffffff; content: ""; }
  body.os-site #page-container .ils-menu-toggle span::before { position: absolute; top: -6px; }
  body.os-site #page-container .ils-menu-toggle span::after { position: absolute; top: 6px; }
  body.os-site #page-container #header.ils-menu-open .ils-menu-toggle { background: #a40001; }
  body.os-site #page-container #menu { display: none; flex: 1 1 100%; margin: 0 -24px; }
  body.os-site #page-container #header.ils-menu-open #menu { display: block; }
  body.os-site #page-container #menu > ul { display: block; width: auto; padding: 0 0 8px; }
  body.os-site #page-container #menu li { display: block; border-top: 1px solid rgba(255, 255, 255, 0.15); }
  body.os-site #page-container #menu li:hover { background-color: transparent; }
  body.os-site #page-container #menu li.active { background-color: transparent; }
  body.os-site #page-container #menu li.active > a:link, body.os-site #page-container #menu li.active > a:visited { background-color: #a40001; }
  body.os-site #page-container #menu a:link, body.os-site #page-container #menu a:visited, body.os-site #page-container #menu a:active {
    display: block; padding: 0 24px; line-height: 50px; font-size: 17px; }
  body.os-site #page-container #menu li a:hover { background-color: #a40001; }
  body.os-site #page-container #menu li ul { position: static; display: block; width: auto; padding: 0; background: none; }
  body.os-site #page-container #menu li li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  body.os-site #page-container #menu li ul a:link, body.os-site #page-container #menu li ul a:visited, body.os-site #page-container #menu li ul a:active {
    padding: 0 24px 0 46px; line-height: 46px; font-size: 16px; }
  body.os-site #page-container #menu li.alt > a:link, body.os-site #page-container #menu li.alt > a:visited { background-color: #a40001; }

  body.os-site #page-container .content .left, body.os-site #page-container .content .right,
  body.os-site #page-container .content.split .left, body.os-site #page-container .content.split .right { float: none; width: auto; }
  body.os-site #page-container .content .right { padding-top: 10px; }
  body.os-site #page-container .content .right .panel { padding-left: 0; padding-right: 0; }
}

/* =================== phone: below 768 =================== */
@media (max-width: 767px) {
  body.os-site #page-container .container { padding-left: 16px; padding-right: 16px; }

  /* header: logo and phone on one row, search (with the RSS button) on the next */
  body.os-site #page-container #header { padding-top: 10px; }
  body.os-site #page-container #header > .container { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; padding-bottom: 12px; }
  body.os-site #page-container #header .logo { float: none; width: 92px; flex: 0 0 92px; }
  body.os-site #page-container #header .logo img { display: block; width: 92px; height: auto; }
  body.os-site #page-container #header > .container > .clearboth { display: none; }
  body.os-site #page-container #header .right { display: contents; }
  body.os-site #page-container #header .phone { order: 1; flex: 0 1 auto; float: none; height: auto; margin: 0 0 0 auto; padding: 2px 0 0 30px; background-size: 22px auto; font-size: 21px; line-height: 28px; text-align: left; white-space: nowrap; }
  body.os-site #page-container #header .search { order: 2; flex: 1 1 calc(100% - 48px); float: none; clear: none; margin: 0; display: flex; }
  body.os-site #page-container #header .search form { display: flex; width: 100%; }
  body.os-site #page-container #header .search input.clicknclear { flex: 1 1 auto; width: auto; min-width: 0; height: 40px; box-sizing: border-box; }
  body.os-site #page-container #header .search input.button { flex: 0 0 auto; float: none; width: 44px; height: 40px; object-fit: fill; }
  body.os-site #page-container #header .search .clearright { display: none; }
  body.os-site #page-container #header .socialmedia { order: 3; flex: 0 0 auto; float: none; margin: 0; line-height: 0; }
  body.os-site #page-container #header .socialmedia a { margin: 0; }
  body.os-site #page-container .ils-menu-toggle { margin-left: -4px; }
  body.os-site #page-container #menu { margin: 0 -16px; }
  body.os-site #page-container #menu a:link, body.os-site #page-container #menu a:visited, body.os-site #page-container #menu a:active { padding: 0 16px; }
  body.os-site #page-container #menu li ul a:link, body.os-site #page-container #menu li ul a:visited, body.os-site #page-container #menu li ul a:active { padding: 0 16px 0 36px; }

  /* hero */
  body.os-site #page-container .featureimage { height: 200px; }
  body.os-site.os-home #page-container .featuremain, body.os-site:not(.os-home) #page-container .featuremain { height: 240px; }

  /* booking: a stacked block, 16px fields, a full-width Book Now */
  body.os-site #page-container #booking { padding: 16px 16px 20px; }
  body.os-site #page-container #booking::after { right: 12px; top: -30px; width: 60px; height: 60px; background-size: 60px 60px; }
  body.os-site #page-container #booking h3 { font-size: 28px; line-height: 32px; margin-bottom: 12px; }
  body.os-site #page-container .bookingform { grid-template-columns: minmax(0, 1fr); }
  body.os-site #page-container .bookingform span.check-in, body.os-site #page-container .bookingform span.duration { height: 50px; line-height: 50px; background-size: 118px 100%; }
  body.os-site #page-container .bookingform em { flex-basis: 108px; font-size: 15px; }
  body.os-site #page-container .bookingform span input { height: 44px; }
  body.os-site #page-container .bookingform span select { height: 48px; }
  body.os-site #page-container .bookingbutton input.button { width: 100%; height: 52px; padding: 0 20px; font-size: 22px; }

  /* home offer row: the offer card over its photo, then the "Check Availability" photo */
  body.os-site.os-home #page-container .feature-banners { grid-template-columns: minmax(0, 1fr); }
  body.os-site.os-home #page-container .feature-left-overlay { grid-row: 1; grid-column: 1; }
  body.os-site.os-home #page-container .feature-right-overlay { grid-row: 2; grid-column: 1; min-height: 200px; }
  body.os-site.os-home #page-container .special { grid-row: 1; padding: 24px 16px 26px; }
  body.os-site.os-home #page-container .special h3 { font-size: 28px; line-height: 32px; }
  body.os-site.os-home #page-container .special .text { margin-top: 12px; padding-top: 14px; }
  body.os-site.os-home #page-container .special .button { display: block; text-align: center; padding: 14px 20px; font-size: 18px; }
  body.os-site.os-home #page-container .feature-banners .banner { grid-row: 2; grid-column: 1; padding: 16px; }
  body.os-site.os-home #page-container .feature-banners .banner .text, body.os-site.os-home #page-container .feature-banners .banner .button { width: 100%; box-sizing: border-box; }
  body.os-site.os-home #page-container .feature-banners .banner .button { display: block; text-align: center; padding: 14px 20px; font-size: 18px; }

  /* type */
  body.os-site #page-container .content { padding: 26px 0 32px; }
  body.os-site #page-container .content-wrapper { padding: 0 16px; font-size: 16px; }
  body.os-site #page-container .content h1 { font-size: 28px; line-height: 34px; margin-bottom: 16px; }
  body.os-site #page-container .content h2 { font-size: 28px; line-height: 33px; margin: 26px 0 8px; }
  body.os-site #page-container .content h3 { font-size: 19px; line-height: 24px; }
  body.os-site #page-container .content h4 { font-size: 20px; line-height: 26px; }
  body.os-site #page-container .content p { margin: 14px 0; }
  body.os-site #page-container .content p, body.os-site #page-container .content li, body.os-site #page-container .content td,
  body.os-site #page-container .content th { font-size: 15px; line-height: 23px; }
  body.os-site #page-container .content :is(p, h1, h2, h3, h4, li, td)[style*="justify"],
  body.os-site #page-container .content [style*="justify"] :is(p, li, td) { text-align: left !important; }
  body.os-site #page-container .panel h3 { font-size: 30px; line-height: 34px; margin: 26px 0 14px; }

  /* home bands */
  body.os-site.os-home #page-container .content { padding-top: 28px; }
  body.os-site.os-home #page-container .content .wrapper { padding: 0 16px; }
  body.os-site.os-home #page-container .content .inner p img { display: inline-block; vertical-align: top; margin: 0 6px 6px 0; max-width: calc(50% - 8px); }
  body.os-site.os-home #page-container .panel.blog { margin: 30px 16px 0; padding: 26px 0 36px; }
  body.os-site.os-home #page-container .panel.blog h3 { margin: 0 0 18px; }
  body.os-site.os-home #page-container .panel.blog ul { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  body.os-site.os-home #page-container .panel.blog li { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; align-content: start; }
  body.os-site.os-home #page-container .panel.blog li > a:first-child { grid-row: 1 / span 3; }
  body.os-site.os-home #page-container .panel.blog img { width: 120px; height: auto; margin: 0; }

  /* rooms: photo, then its thumbnails, then the text */
  body.os-site #page-container .list .entry, body.os-site #page-container .list .entry.even { padding: 16px 14px 20px; }
  body.os-site #page-container .list .entry .images { float: none; width: auto; max-width: none; margin: 0 0 16px; }
  body.os-site #page-container .gallery.room a img { width: 84px; height: 60px; }
  body.os-site #page-container .button.roombooking, body.os-site #page-container .list .entry a.button { display: block; text-align: center; padding: 14px 20px; }

  /* galleries: two up */
  body.os-site #page-container .gallery:not(.room) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0 30px; }
  body.os-site #page-container .gallery:not(.room) a.gallery-item img { border-width: 4px; }

  /* blog list, post, sidebar */
  body.os-site #page-container .content img.blog-image, body.os-site #page-container .content .blog-image { width: 110px; height: auto; margin: 4px 14px 8px 0; }
  body.os-site.single-post #page-container .content .entry > .blog-image,
  body.os-site.single-post #page-container .content .entry > a > .blog-image,
  body.os-site.single-post #page-container .content .entry > a.gallery-item img { float: none; display: block; width: auto; max-width: 100%; margin: 0 0 16px; }
  body.os-site #page-container .list .entry h2 { font-size: 22px; line-height: 27px; margin-bottom: 8px; }
  body.os-site #page-container .panel li { margin: 14px 0; }
  body.os-site #page-container .panel .title { font-size: 16px; line-height: 22px; }

  /* pagers */
  body.os-site #page-container .paging { text-align: left; line-height: 38px; }
  body.os-site #page-container .paging a:link, body.os-site #page-container .paging a:visited, body.os-site #page-container .paging em a { min-width: 32px; line-height: 32px; padding: 0 4px; margin: 0 1px 6px; box-sizing: border-box; }
  body.os-site #page-container .paging .options, body.os-site #page-container span.options { display: inline-block; margin: 0 12px 0 0; }
  body.os-site #page-container span.options a { min-width: 32px; text-align: center; }
  body.os-site #page-container span.result-count { display: inline-block; }

  /* contact and review forms: labels over full-width fields */
  body.os-site #page-container .os-contact-form form.et_pb_contact_form { grid-template-columns: minmax(0, 1fr); }
  body.os-site #page-container .os-contact-form .et_pb_contact_form_label { grid-column: 1; width: auto; padding: 8px 0 4px; font-size: 15px; }
  body.os-site #page-container .os-contact-form p.et_pb_contact_field .input { grid-column: 1; height: 48px; margin: 0 0 8px; }
  body.os-site #page-container .os-contact-form p.et_pb_contact_field textarea.input { height: 140px; margin-bottom: 8px; }
  body.os-site #page-container .os-contact-form .et_pb_contact_right p.clearfix { grid-column: 1; min-height: 0; padding: 8px 0 12px; font-size: 16px; line-height: 48px; }
  body.os-site #page-container .os-contact-form input.et_pb_contact_captcha { width: 90px; height: 48px; }
  body.os-site #page-container .et_pb_section .os-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button { grid-column: 1; justify-self: stretch; width: 100%; margin: 4px 0 0 !important; padding: 14px 20px !important; }
  body.os-site #page-container .et_pb_section .os-contact-form.et_pb_contact_form_container.et_pb_module .et_pb_button:hover { padding: 14px 20px !important; }
  body.os-site #page-container .content p.ils-required-note { height: auto; margin: 10px 0 20px; padding: 0; text-align: left; }
  body.os-site #page-container .content p.ils-required-note em.required { position: static; display: inline-block; }
  body.os-site #page-container .content p.ils-required-note::after { position: static; display: inline-block; margin-left: 4px; vertical-align: -3px; }
  body.os-site.page-id-1493 #page-container .content p.ils-required-note, body.os-site.page-id-1492 #page-container .content p.ils-required-note { height: auto; padding: 0; }
  /* the contact page's address table */
  body.os-site.page-id-1493 #page-container .content .left table td:first-child { width: 80px; }

  /* tables: the specials offer cells stack; search form full width */
  body.os-site.page-id-1504 #page-container .content table, body.os-site.page-id-1504 #page-container .content tbody,
  body.os-site.page-id-1504 #page-container .content tr, body.os-site.page-id-1504 #page-container .content td { display: block; width: auto; }
  body.os-site.page-id-1504 #page-container .content td img { float: none !important; width: 100% !important; height: auto !important; }
  body.os-site #page-container table.form.searchpage, body.os-site #page-container table.form.searchpage tbody, body.os-site #page-container table.form.searchpage tr { display: block; width: auto; }
  body.os-site #page-container table.form.searchpage td { display: flex; gap: 8px; width: auto; padding: 8px 0; }
  body.os-site #page-container .form.searchpage input { float: none; flex: 1 1 auto; min-width: 0; width: auto; height: 48px; margin: 0; box-sizing: border-box; }
  body.os-site #page-container .form.searchpage input.button { flex: 0 0 auto; padding: 0 18px; }
  body.os-site #page-container .form.searchpage input[type=image] { flex: 0 0 52px; width: 52px; height: 48px; padding: 0; border: 0; object-fit: fill; }
  body.os-site #page-container .content h2:has(> span[style*="font-size"]) { line-height: 22px; }
  body.os-site #page-container .content td a.button:link, body.os-site #page-container .content td a.button:visited { text-decoration: none; }

  /* tariffs: each rate row becomes a card (season heading, then the seven rates under live's own column numbers 1 to 7);
     the season-dates table stacks */
  body.os-site #page-container .content table.grid, body.os-site #page-container .content table.grid tbody { display: block; width: auto; }
  body.os-site #page-container .content table.grid:not(.short) tr:first-child { display: none; }
  body.os-site #page-container .content table.grid:not(.short) tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 10px; border-bottom: 1px solid #000000; }
  body.os-site #page-container .content table.grid:not(.short) th { grid-column: 1 / -1; display: block; padding: 8px 10px 2px; border: 0; }
  body.os-site #page-container .content table.grid:not(.short) td { display: block; padding: 2px 10px 8px; border: 0; }
  body.os-site #page-container .content table.grid:not(.short) td::before { display: block; font-size: 14px; line-height: 20px; color: #efebe2; }
  body.os-site #page-container .content table.grid:not(.short) td:nth-of-type(1)::before { content: "1"; }
  body.os-site #page-container .content table.grid:not(.short) td:nth-of-type(2)::before { content: "2"; }
  body.os-site #page-container .content table.grid:not(.short) td:nth-of-type(3)::before { content: "3"; }
  body.os-site #page-container .content table.grid:not(.short) td:nth-of-type(4)::before { content: "4"; }
  body.os-site #page-container .content table.grid:not(.short) td:nth-of-type(5)::before { content: "5"; }
  body.os-site #page-container .content table.grid:not(.short) td:nth-of-type(6)::before { content: "6"; }
  body.os-site #page-container .content table.grid:not(.short) td:nth-of-type(7)::before { content: "7"; }
  body.os-site #page-container .content table.grid.short tr, body.os-site #page-container .content table.grid.short th,
  body.os-site #page-container .content table.grid.short td { display: block; width: auto; }

  /* reviews */
  body.os-site #page-container blockquote { padding: 6px 0 16px 50px; background-size: 38px auto; }

  /* footer: one column */
  body.os-site #page-container #footer { padding-top: 36px; }
  body.os-site #page-container #footer > .container { grid-template-columns: minmax(0, 1fr); }
  body.os-site #page-container #footer .footermenu { grid-row: 1; }
  body.os-site #page-container #footer .vcard { grid-column: 1; grid-row: 2; margin-top: 22px; }
  body.os-site #page-container #footer > .container > .socialmedia { grid-row: 3; }
  body.os-site #page-container #footer .footermenu a { padding: 4px 0; font-size: 15px; }
  body.os-site #page-container #footer .vcard a.email { word-break: break-word; }
  body.os-site #page-container #footer .copyright { margin-top: 28px; padding: 14px 0 37px; } /* 3b F4: live's 39px footer edge */
  body.os-site #page-container #footer .copyright li { display: inline-block; margin: 0 6px 0 0; padding: 0 12px 0 0; background-position: right center; }
  body.os-site #page-container #footer .copyright li a { padding: 6px 0; }
  body.os-site #page-container #footer .copyright .right { display: block; }
  body.os-site #page-container #footer .copyright .right .left { display: block; margin-top: 8px; }
  /* 3b F5 (a sister site's 3.18 finding 6): the four legal links wrapped with a separator left dangling after "Search Site" at the line
     end. Two links per row, the separator centred after the first of each pair, none at a line end */
  body.os-site #page-container #footer .copyright ul { display: grid; grid-template-columns: max-content max-content; column-gap: 6px; justify-content: start; }
  body.os-site #page-container #footer .copyright li { display: block; margin: 0; padding: 0 14px 0 0; }
  body.os-site #page-container #footer .copyright li:nth-child(even) { padding-right: 0; background: none; }
}

/* =================== fix round 1 (3.18 findings, 2026-10-07): below 1250 only =================== */
@media (max-width: 1249px) {
  /* B2: the review form's verification-row star sits after the answer box, like the other stars below 1250 */
  body.os-site.page-id-1492 #page-container .os-contact-form .et_pb_contact_right p.clearfix::after { position: static; display: inline-block; margin-left: 4px; vertical-align: -3px; }
  /* C1: the iLaunch calendar that opened beside the STAAH tab is not shown below 1250. Every booking control (Book Now, the date
     field and its icon) opens the property's STAAH page in a new tab with no dates, as on live, so the calendar did nothing here,
     had 11px text and covered Book Now when the guest came back. From 1250 up it opens exactly as on live (os-design.css rule 25). */
  body.os-site #datepicker_div { display: none !important; }
  /* C2: the footer phone number (an explicit tel: link since 3b F7) was a 19px target 11px under the email link */
  body.os-site #page-container #footer a.tel-link { display: inline-block; line-height: 24px; }
  /* C3: search result title and address links were 19 to 20px tall; inline padding gives a 25px tap area without moving a line */
  body.os-site.page-id-1507 #page-container .content form ~ p > strong > a,
  body.os-site.page-id-1507 #page-container .content form ~ p > a { padding-top: 3px; padding-bottom: 3px; }
  /* A1: the empty search wraps every word in an EMPTY <em class="highlight">; live's rule paints each as a red 10px block, which reads
     as broken text on a phone or tablet. Empty ones take no room below 1250; from 1250 up live's exact look stays. */
  body.os-site #page-container em.highlight:empty { display: none; }
}
@media (min-width: 768px) and (max-width: 1169px) {
  /* C4: a post heading that starts beside the floated feature photo stays one block beside it (it used to wrap its last words under
     the photo, e.g. "Spectators" alone at the left edge) */
  body.os-site.single-post #page-container .content .entry .summary :is(h1, h2, h3, h4, h5, h6) { display: flow-root; }
  /* C5: list teasers: the meta line, summary and READ MORE form one column beside the photo (READ MORE used to drop under the photo
     to the left edge on some entries and sit beside it on others). 225px = the 200px thumbnail plus live's 25px gap. */
  body.os-site #page-container .list .entry > .summary > img.blog-image ~ * { margin-left: 225px; }
}
@media (max-width: 767px) {
  /* C2: the header phone link below 768 (21px text) becomes a full-height 28px target */
  body.os-site #page-container #header .phone a.tel-link { display: inline-block; line-height: 28px; }
}

/* ---- fix round 2 (3.18 r2, 2026-10-08) ---- */
@media (max-width: 1249px) {
  /* C6: three numbers in imported post text (posts 260, 143, 140) are now explicit tel: links (the format-detection meta stops iOS
     linking them itself). os-design.css rule 21 keeps them in the paragraph's own colour, no underline, in every state; inline
     padding gives a 25 to 26px tap area without moving a line (the paragraph text is 14 to 15px on a 19 to 20px line). */
  body.os-site #page-container .content .entry .summary a.tel-link { padding-top: 3px; padding-bottom: 3px; }
}
@media (max-width: 329px) {
  /* C7: from 320 to 325px the booking date field showed "Click for calenda": its text needs 129px and had 123px. Below 330 only, the
     label column (both rows, so "3 nights" still starts under "Click for calendar") is 4px narrower and the field keeps 2px, not 8px,
     before the calendar icon: 133px of room at 320, the same 4px to spare as at 330. Nothing changes from 330 up. */
  body.os-site #page-container .bookingform em { flex-basis: 104px; }
  body.os-site #page-container .bookingform span.check-in, body.os-site #page-container .bookingform span.duration { background-size: 114px 100%; }
  body.os-site #page-container .bookingform span input { padding-right: 2px; }
}