/* Mobile layer for the frozen 980px Wix capture.
   Everything below lives inside @media (max-width:900px) so the >=901px
   desktop rendering stays byte-identical. */

@media (max-width: 900px) {

  /* --- 0. drop the legacy shrink-to-fit zoom ------------------------- */
  #SITE_CONTAINER, #site-root { zoom: 1 !important; }

  /* NB: no overflow-x on html/body — this capture keeps its scroll on
     #SITE_CONTAINER, and clipping here collapses the document height. */

  /* --- 1. remove the 980px floor ------------------------------------ */
  #site-root,
  #masterPage,
  #PAGES_CONTAINER,
  #SITE_PAGES,
  #tuckg,
  header#SITE_HEADER,
  footer#SITE_FOOTER,
  section[id^="comp-"],
  div[id^="comp-"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* full-bleed background/underlay layers pinned to the old 980 canvas */
  .PFkO7r.wixui-page,
  .vlM3HR,
  .lvxhkV { width: 100% !important; }

  #BACKGROUND_GROUP,
  #BACKGROUND_GROUP_TRANSITION_GROUP,
  #BACKGROUND_GROUP div[id],
  #pageBackground_tuckg,
  #bgLayers_pageBackground_tuckg,
  #bgLayers_pageBackground_tuckg > div,
  #bgMedia_pageBackground_tuckg {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* --- 2. mesh grid -> one column, natural height ------------------- */
  [data-mesh-id$="-gridContainer"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 100% !important;
    grid-template-rows: none !important;
  }
  [data-mesh-id$="inlineContent"] { width: 100% !important; height: auto !important; }

  /* Wix ships canvas-era negative margins on some mesh containers (the about
     page gallery carries margin-bottom:-338px) to compensate for a component
     that overflowed its section at 980px. Reflowed to one column the child
     grows instead, so the negative pull ends the section above its own content
     and the next section lands on top of the photos. Neutralise those offsets —
     the column supplies its own rhythm. */
  [data-mesh-id$="-gridContainer"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* children keep their grid ROW (= original visual order) but lose the
     980px-canvas offsets and hard sizes */
  [data-mesh-id$="-gridContainer"] > [id^="comp-"],
  [data-mesh-id$="-gridContainer"] > wix-interact-element > [id^="comp-"] {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    margin: 0 0 18px 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    grid-area: auto !important;      /* auto-placement = one row each */
    justify-self: stretch !important;
    align-self: start !important;
  }
  /* the three containers whose DOM order differs from their canvas order */
  #comp-lyon011x { grid-row: 1 !important; }   /* home hero: "ABALONE" */
  #comp-lyomxy2x { grid-row: 2 !important; }   /* home hero: strapline */
  #comp-lyprxth6 { grid-row: 3 !important; }   /* home hero: Book Now   */
  #comp-lyss8qzy { grid-row: 1 !important; }   /* about hero: "ABALONE" */
  #comp-lyss8qzc { grid-row: 2 !important; }   /* about hero: subtitle  */
  /* nested strips/sections are structural — no rhythm gap, it would expose
     the parent column's fill colour as a stray band */
  [data-mesh-id$="-gridContainer"] > section[id^="comp-"],
  [data-mesh-id$="-gridContainer"] > [id^="comp-"].SPY_vo,
  [data-mesh-id$="-gridContainer"] > [id^="comp-"].mDzRgi { margin-bottom: 0 !important; }

  /* --- 3. column strips -> stacked ---------------------------------- */
  body:not(.device-mobile-optimized) .CohWsy,
  section.CohWsy {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body:not(.device-mobile-optimized) .V5AUxf,
  .V5AUxf {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body:not(.device-mobile-optimized) .V5AUxf > *,
  .V5AUxf > * {
    flex: none !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* --- 4. side gutters ---------------------------------------------- */
  [data-mesh-id$="-gridContainer"] > [id^="comp-"].wixui-rich-text,
  [data-mesh-id$="-gridContainer"] > [id^="comp-"].Z_l5lU {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* --- 5. sections: never collapse, never overflow ------------------ */
  section.wixui-section,
  .wixui-column-strip__column {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }
  section.wixui-section > div,
  .wixui-column-strip__column > div { width: 100% !important; }

  /* background media layers keep covering their (now shorter) section */
  [data-hook="bgLayers"],
  [data-hook="bgLayers"] > div,
  wow-image[data-motion-part^="BG_IMG"] {
    background-size: cover !important;
    background-position: 50% 50% !important;
  }

  /* --- 6. images ----------------------------------------------------- */
  .wixui-image img,
  .MazNVa img,
  img.BI8PVQ {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .wixui-image > a,
  .wixui-image > div,
  .MazNVa > a,
  .MazNVa > div { width: 100% !important; height: auto !important; }

  /* CSS-background decorative images carry their ratio in an aspect-ratio */
  .deco-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 403 / 155;
  }

  /* --- 7. header ----------------------------------------------------- */
  header#SITE_HEADER { height: auto !important; }
  header#SITE_HEADER .cKxVkc,
  header#SITE_HEADER .VrZrC0 { height: auto !important; }

  /* logo + wordmark + microlight: readable stack */
  [data-mesh-id="comp-mcc0bjuninlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 14px 12px 4px !important;
    box-sizing: border-box !important;
  }
  [data-mesh-id="comp-mcc0bjuninlineContent-gridContainer"] > [id^="comp-"] {
    margin: 0 !important;
    text-align: center !important;
    align-self: center !important;
  }
  #comp-lyombtt4 { width: 96px !important; order: 1; }
  #comp-lyombtt4 img { width: 96px !important; height: auto !important; }
  #comp-mcc071r9 { order: 2; width: 100% !important; }
  #comp-mcc0804a { order: 3; width: 100% !important; }
  #comp-mcc06p58 {
    order: 4;
    margin-top: 8px !important;
    display: flex !important;
    justify-content: center !important;
    width: min(78%, 290px) !important;
  }
  #comp-mcc071r9 p, #comp-mcc071r9 span { font-size: 40px !important; line-height: 1.05 !important; }
  #comp-mcc0804a p, #comp-mcc0804a span { font-size: 21px !important; line-height: 1.1 !important; letter-spacing: .02em; }
  /* the wordmark is a link — give it a 44px-tall hit area */
  #comp-mcc071r9 > p > span > a,
  #comp-mcc0804a > p > span > a { display: inline-block; padding: 12px 6px; }

  /* --- 8. navigation: wrapping pill menu, 44px targets --------------- */
  #comp-lywtcjp8,
  .comp-lywtcjp8 { width: 100% !important; height: auto !important; }
  .wixui-horizontal-menu,
  nav.StylableHorizontalMenu3372578893__root { width: 100% !important; height: auto !important; }
  ul.StylableHorizontalMenu3372578893__menu {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 4px 6px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    gap: 4px;
  }
  li.wixui-horizontal-menu__item { width: auto !important; height: auto !important; }
  li.wixui-horizontal-menu__item > div,
  .itemShared2352141355__rootContainer { height: auto !important; }
  .wixui-horizontal-menu__item a.itemShared2352141355__menuItem {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
  }
  .itemDepth02233374943__container { height: auto !important; }
  .wixui-horizontal-menu__item-label { font-size: 16px !important; }

  /* --- 9. hero slideshow --------------------------------------------- */
  #comp-lyomih2t {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }
  #comp-lyomih2t > .hDJzl4 { position: relative !important; height: auto !important; }
  #comp-lyomnlqc {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
  }
  [data-mesh-id="comp-lyomnlqcinlineContent-gridContainer"] {
    min-height: 300px !important;
    align-content: center !important;
    padding: 30px 0 !important;
    box-sizing: border-box !important;
  }
  #comp-lyomxy2x, #comp-lyon011x { top: 0 !important; }
  #comp-lyon011x p, #comp-lyon011x span { font-size: 52px !important; line-height: 1.05 !important; }
  #comp-lyomxy2x p, #comp-lyomxy2x span { font-size: 26px !important; line-height: 1.25 !important; }

  /* --- 10. typography scale ------------------------------------------ */
  [style*="font-size:150px"] { font-size: 54px !important; line-height: 1.05 !important; }
  [style*="font-size:130px"] { font-size: 48px !important; line-height: 1.05 !important; }
  [style*="font-size:90px"]  { font-size: 40px !important; line-height: 1.08 !important; }
  [style*="font-size:65px"]  { font-size: 30px !important; line-height: 1.12 !important; }
  [style*="font-size:60px"]  { font-size: 30px !important; line-height: 1.12 !important; }
  [style*="font-size:56px"]  { font-size: 29px !important; line-height: 1.12 !important; }
  [style*="font-size:40px"]  { font-size: 25px !important; line-height: 1.2 !important; }
  [style*="font-size:15px"]  { font-size: 16px !important; }
  [style*="font-size:14px"]  { font-size: 16px !important; }

  .font_7, .font_8, .wixui-rich-text__text { font-size: inherit; }
  #tuckg .font_8 { font-size: 17px !important; }
  #SITE_FOOTER .font_7, #SITE_FOOTER .font_7 span { font-size: 16px !important; }

  h1.restored-h1 { font-size: 26px !important; padding: 0 18px !important; margin-top: 18px !important; }

  /* --- 11. buttons / CTAs -------------------------------------------- */
  [id^="comp-"].wixui-button,
  a.wixui-button,
  .StylableButton2545352419__root {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 320px !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 10px 22px !important;
    box-sizing: border-box !important;
  }
  .StylableButton2545352419__root span.StylableButton2545352419__container {
    width: 100% !important;
    height: auto !important;
    justify-content: center !important;
  }
  .StylableButton2545352419__root .StylableButton2545352419__label {
    font-size: 17px !important;
    white-space: normal !important;
    max-width: none !important;
  }
  /* the wrapper div that holds a stylable button */
  [data-mesh-id$="-gridContainer"] > [id^="comp-"]:has(> .StylableButton2545352419__root) {
    display: flex !important;
    justify-content: center !important;
    margin: 4px 0 22px 0 !important;
  }

  .restored-cta { padding: 0 18px !important; }
  .restored-cta .cta-tel { justify-content: center !important; }
  .restored-cta a { min-height: 48px !important; }

  /* --- 12. columns whose only "content" is a background photo ---------
     (the "so much more!" cards, banner strips, page heroes). Their height
     came from the 980px canvas, so give them a floor and centre the copy. */
  .wixui-column-strip__column { padding: 0 !important; }
  .wixui-column-strip__column > [data-mesh-id$="inlineContent"]
    > [data-mesh-id$="-gridContainer"]:not(:has(> section)):not(:has(> [id^="comp-"].mDzRgi)) {
    padding: 22px 0 !important;
    box-sizing: border-box !important;
  }
  .wixui-column-strip__column:has(wow-image[data-motion-part^="BG_IMG"]) {
    min-height: 240px !important;
  }
  .wixui-column-strip__column:has(wow-image[data-motion-part^="BG_IMG"])
    > [data-mesh-id$="inlineContent"] > [data-mesh-id$="-gridContainer"] {
    min-height: 240px !important;
    align-content: center !important;
  }
  /* several such columns in one strip need air between them */
  .V5AUxf > .wixui-column-strip__column + .wixui-column-strip__column {
    margin-top: 12px !important;
  }

  /* --- 12b. Pro Gallery: frozen 3-column masonry -> single column ------
     Items are absolutely placed on the old 980px canvas, so two thirds of
     the photos sit off-screen. Flatten them into normal flow. */
  [id^="gallery-wrapper-"],
  [id^="pro-gallery-"],
  .pro-gallery,
  .pro-gallery-parent-container,
  .pro-gallery-margin-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .pro-gallery-margin-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    grid-auto-rows: 128px !important;
  }
  .pro-gallery .item-link-wrapper { display: block !important; height: 100% !important; }
  .gallery-item-container {
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .gallery-item-wrapper { width: 100% !important; height: 100% !important; }
  .gallery-item-content {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  .gallery-item-content picture { display: block; height: 100%; }
  .gallery-item-content img,
  img.gallery-item-visible {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .gallery-item-container .item-action { display: none !important; }

  /* --- 12c. contact form ---------------------------------------------- */
  form.wixui-form {
    width: 100% !important;
    height: auto !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
  }
  form.wixui-form [data-mesh-id$="-gridContainer"] { display: block !important; }
  .wixui-text-input, .wixui-text-box {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 14px !important;
  }
  .wixui-text-input__input, .wixui-text-box__input {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }
  .wixui-text-box__input { min-height: 120px !important; }
  .wixui-text-input__label, .wixui-text-box__label {
    font-size: 15px !important;
    height: auto !important;
    margin-bottom: 4px !important;
  }
  form .wixui-button {
    position: relative !important;
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
  }
  [id^="comp-"]:has(> button.wixui-button) {
    min-height: 48px !important;
    height: auto !important;
    margin-bottom: 16px !important;
  }

  /* --- 13. footer ----------------------------------------------------- */
  footer#SITE_FOOTER { height: auto !important; }
  footer#SITE_FOOTER .kn76TK,
  footer#SITE_FOOTER .QijXjn,
  footer#SITE_FOOTER .TMFrcJ { height: auto !important; }
  footer#SITE_FOOTER [id^="comp-"] { text-align: center !important; }
  footer#SITE_FOOTER a { display: inline-block; min-height: 44px; line-height: 44px; }

  /* --- 14. misc safety ------------------------------------------------ */
  p, span, div { max-width: 100%; }
  #comp-mcbsfs1a { min-height: 0 !important; }
}