/** Shopify CDN: Minification failed

Line 4854:10 Unexpected "`"
Line 4872:30 Expected identifier but found whitespace
Line 4875:8 Expected identifier but found whitespace
Line 4876:34 Unterminated string token

**/
/* ==========================================================
   BUILD MARKER — read this before measuring anything
   ==========================================================
   Shopify minifies theme CSS, so comments are stripped and cannot
   identify a build. A custom property survives minification and is
   readable from the page, so it is the only reliable marker.

   To confirm which build is deployed, run in the browser console:
     getComputedStyle(document.documentElement).getPropertyValue('--rmyc-build')

   Bump the value on every upload. Never identify a build from
   rendered values — earlier builds can produce the same numbers,
   which is how two builds were misidentified during this project.
   ========================================================== */
:root {
    --rmyc-build: "2026-08-25-qa35-LAUNCH";
}

html body {
    /* RMYC brand default for body copy:
       Avenir Next LT Pro, Regular (400), 18px / 24px.
       Was font-weight:700 with no size, so every element that didn't set
       its own weight inherited Bold - which is why the footer went bold on
       tablet and mobile while desktop looked fine. */
    font-family: 'Avenir Next LT Pro';
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #33373d;
}

.owl-list-icon .owl-list-icon-title {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 700;
}

.owl-list-icons .owl-list-icon-des {
    font-family: 'Avenir Next LT Pro' !important;
    margin-top: 15px;
}

.owl-image-blocks-slider .owl-image-content-button {
    font-family: 'Cormorant Garamond' !important;
}

.body-inner .box_tab_blog a {
    font-family: 'Avenir Next LT Pro';
    letter-spacing: 2px;
    padding-inline: 15px;
    border: 1px solid #fff;
    border-right: none;
}

.owl-main-content-inner .owl-mc-sidebar ul li a {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 20px;
}

.owl-main-content-inner .owl-mc-sidebar ul li {
    margin-bottom: 20px;
}

.member-item .member-item_name {
    font-family: 'Cormorant Garamond';
    font-weight: 700;
    font-size: 24px;
}

.member-item .member-item_job_position {
    font-family: 'Avenir Next LT Pro';
    font-weight: 700;
    font-size: 20px;
}

.member-item .member-item_description {
    font-family: 'Avenir Next LT Pro';
    font-size: 18px;
}

.owl-main-content-inner .owl-mc-title.font_mainpage_alokary, 
#careers-with-us .owl-mc-content .page-rte h1, 
body .owl-mc-title.font_mainpage_alokary, 
body .owl-slide-heading.font_mainpage_alokary, 
body .owl-mc-content.font_mainpage_alokary h1, 
body .owl-mc-sub-title.font_mainpage_alokary, 
body .owl-mc-content.font_mainpage_alokary h2 {
    font-size: 40px !important;
}

.owl-main-content-inner .owl-mc-des {
    font-weight: 400;
}

.owl-main-content-inner .page-rte {
    font-family: 'Avenir Next LT Pro';
}

.owl-main-content-inner .page-rte h2 {
    font-family: 'Cormorant Garamond';
    font-size: 32px;
    font-weight: 700;
}

.owl-text-banner-inner-wrapper .owl-text-banner-title {
  font-family: "Cormorant Garamond" !important;
  font-size: 40px;
}
.owl-text-banner-inner-wrapper .owl-text-banner-subtitle {
  font-family: "Avenir Next LT Pro" !important;
  font-size: 28px !important;
}
.owl-text-banner-inner-wrapper .owl-text-banner-button {
  font-size: 20px !important;
  font-weight: 700;
}

#careers-with-us.template-page .owl-mc-main .page-rte p, 
body .owl-image-content-des.font_mainpage_lane, 
body .owl-mc-rich-text-des.font_mainpage_lane, 
body .text-center.font_mainpage_lane, 
body .owl-mc-des.font_mainpage_lane, 
.owl-mc-content .owl-mc-des {
    font-size: 28px !important;
    font-weight: 400;
}

#careers-with-us.template-page .owl-mc-main .block-paragraph-content h2 {
    font-family: "Avenir Next LT Pro" !important;
    font-size: 36px;
}

#careers-with-us.template-page .owl-mc-main .block-paragraph-content p {
    font-size: 24px;
}

.block-list-features .feature-item .feature-item_name {
    font-family: 'Cormorant Garamond';
    font-weight: 700;
    font-size: 28px;
}

#careers-with-us .block-list-features .feature-item .feature-item_name {
    font-family: 'Avenir Next LT Pro';
}

body .nav-tab {
    margin-bottom: 60px;
}

body .nav-tab ul li a {
    font-family: 'Avenir Next LT Pro';
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
}

body .tab-content-wrapper .tab-content .tab-heading {
    font-family: 'Avenir Next LT Pro';
    font-weight: 700;
    line-height: 1.2;
}

.blog_list_page .list_page .item a {
    font-family: 'Avenir Next LT Pro';
    font-size: 24px !important;
    font-weight: 400;
}

.blog_container .blog_heading h4 {
    font-family: Avenir Next LT Pro;
    font-size: 28px;
    font-weight: normal;
    text-transform: none;
}

.blog_item_content .blog_createAt {
    font-family: 'Avenir Next LT Pro';
    font-weight: 700;
}

.blog_item_content .blog_post_title {
    padding-inline: 15px;
    font-family: 'Cormorant Garamond';
    text-transform: lowercase;
    font-size: 20px !important;
    line-height: 2;
}

#berthing-amp-moorings .owl-mc-main .font_mainpage_alokary {
    line-height: 2.3;
}

.section_tabs_event_top__content .section_tabs_event_top__list_products {
    padding-inline: 0;
}

.section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-title {
    font-family: 'Cormorant Garamond';
    font-size: 24px;
}

.section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-desc {
    font-family: 'Avenir Next LT Pro';
    font-size: 22px;
    line-height: 1.3;
}

.section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-action {
    padding: 10px 25px;
    font-family: 'Avenir Next LT Pro';
    font-size: 22px;
}

.owl-mc-contentmain .owl-mc__tabs {
    font-family: 'Avenir Next LT Pro';
    font-weight: 700;
    font-size: 28px;
}

.owl-mc-contentmain .owl-mc__contenttabs .item__event-title, 
#what-s-on .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-title {
    font-family: 'Avenir Next LT Pro';
}

.owl-mc-contentmain .owl-mc__contenttabs .item__event-time-start-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.owl-mc-contentmain .owl-mc__contenttabs .item__event-time-start-end p {
    margin: 0;
}

.owl-mc-contentmain .owl-mc__contenttabs .item__event-desc {
    font-family: 'Avenir Next LT Pro';
    font-size: 20px;
    line-height: 1.3;
}

.owl-mc-contentmain .owl-mc__contenttabs .item__event-action {
    padding: 10px 25px;
    font-family: 'Avenir Next LT Pro';
}

.search-block-wrapper .owl-center-title h4 {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 24px !important;
}

.owl-bg-color-blue.owl-center-title h4 {
    font-family: 'Cormorant Garamond' !important;
    font-size: 40px !important;
}

.owl-image-blocks-outer .owl-image-content .owl-image-content-title {
    font-family: 'Cormorant Garamond' !important;
    line-height: 2.15;
    font-size: 40px !important;
}

.owl-image-blocks-outer .owl-image-content .owl-image-content-des {
    margin-top: 20px !important;
    font-size: 22px !important;
    max-width: 500px !important;
}

.owl-image-blocks-outer .owl-image-content a.owl-image-content-button {
    margin-top: 30px !important;
    padding: 12px 24px;
    border-radius: 3px;
    font-family: 'Avenir Next LT Pro' !important;
    line-height: 1;
    font-size: 22px !important;
}

.owl-mc-sidebar .owl-mc-btns a.owl-bg-color-aqua-blue, 
.owl-mc-sidebar ul.owl-bg-color-blue li a {
    font-size: 20px !important;
    font-family: 'Avenir Next LT Pro' !important;
    font-weight: 700;
}

#eat-amp-drink .owl-page-header-grid-btn {
    font-family: 'Avenir Next LT Pro' !important;
    font-weight: 700;
}

.owl-mc-grid-items .owl-mc-grid-item-title {
    font-family: 'Avenir Next LT Pro' !important;
    font-weight: 400;
    margin-bottom: 20px;
    font-size: 36px !important;
}

.owl-mc-grid-items .owl-mc-grid-item-des {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 22px !important;
}

.owl-mc-grid-items .owl-mc-grid-item-btns a {
    font-size: 20px !important;
}

.grid-banner-sections .owl-script-title {
    padding-bottom: 40px;
}

.grid-banner-sections .owl-script-title h4 {
    font-family: 'Cormorant Garamond' !important;
    font-size: 40px !important;
}

.owl-grid-banner-item .owl-grid-banner-title .owl-grid-banner-title-box {
    font-family: 'Avenir Next LT Pro' !important;
}

.owl-mc-image-text-item .owl-mc-image-text-item-title {
    font-family: 'Cormorant Garamond' !important;
    font-size: 40px !important;
}

.owl-mc-image-text-item .owl-mc-image-text-item-description {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 20px !important;
}

.owl-mc-image-text-item .owl-mc-image-text-item-description * {
    font-size: inherit !important;
}

.owl-mc-image-text-item a.owl-mc-image-text-item-btn {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    font-weight: 700;
}

.blog_heading_top .blog_heading_top__title {
    font-family: 'Avenir Next LT Pro' !important;
}

.blog_heading_top .blog_heading_top__content {
    margin-bottom: 40px;
    font-size: 28px;
    line-height: 1.5;
}

.blog_menu .blog-nav .swiper-wrapper a {
    font-family: 'Avenir Next LT Pro' !important;
    font-weight: 700;
    font-size: 18px;
}

.modal #event_quickview_content {
    font-family: 'Avenir Next LT Pro';
    font-size: 18px;
    line-height: 1.5;
}

.modal #event_quickview_content .event-action {
    font-family: 'Avenir Next LT Pro';
    font-weight: 700;
}

.owl-mc-main .list-events .item__event {
    text-align: center;
}

.item__event .item__event-image img {
    object-fit: cover;
}

.item__event .item__event-image div {
    padding-top: 100%;
}

.owl-image-parralax-content .owl-image-parralax-content-wrapper h4 {
    font-family: 'Cormorant Garamond' !important;
    line-height: 2;
    font-size: 40px !important;
}

/* RMYC rebrand: homepage image-block headings are Cormorant Garamond.
   This rule previously forced 'Avenir Next LT Pro' !important, and its
   4-class specificity beat the .font-cormorant utility class applied by
   the section's own font setting - which is why the Wellness Studio /
   Amplify Diesel headings rendered in Avenir on the homepage only.
   (The `#all.template-index` override below it never applied: no element
   in the document has id="all".) */
.template-index .owl-image-blocks-outer .owl-image-content .owl-image-content-title {
    font-family: 'Cormorant Garamond' !important;
    line-height: 1;
    padding-bottom: 10px;
}

body .popup_royal_service {
    max-width: 910px !important;
    width: calc(100% - 20px);
}

.blog_menu .blog-nav-swiper .swiper-wrapper {
    background: #329dc7;
    border-radius: 5px;
    padding: 10px 20px;
}

.blog_menu .blog-nav-swiper .swiper-wrapper a {
    background: transparent;
    color: #fff;
    font-family: 'Avenir Next LT Pro' !important;
    font-weight: 500;
    padding: 5px 15px;
    text-decoration: none;
    border-radius: 5px;
}

.blog_menu .blog-nav-swiper .swiper-wrapper a:hover, 
.blog_menu .blog-nav-swiper .swiper-wrapper a.active {
    background: #fff;
    color: #329dc7;
}

.blog_item .blog_item_content .blog_post_title, 
.list-events .blog_item_content .blog_post_title {
    font-family: 'Avenir Next LT Pro';
    font-weight: 600;
    line-height: 1.3;
}

.article-content #shopify-section-sidebar-blog {
    display: block;
}

.article-content #shopify-section-sidebar-blog .widget-title, 
.article-content #shopify-section-sidebar-blog .widget-content:not(:has(.has-back-icon)),
.article-content #shopify-section-sidebar-blog .widget-content li a:not(.has-back-icon) {
    display: none;
}

.article-content #shopify-section-sidebar-blog .widget-content:has(.has-back-icon) ul {
    background: none !important;
    padding: 0;
}

.article-content #shopify-section-sidebar-blog .widget-content:has(.has-back-icon) ul a.has-back-icon {
    color: #032050;
}

.article-content #shopify-section-sidebar-blog .widget-content:has(.has-back-icon) ul a.has-back-icon svg path {
    stroke: currentColor !important;
}

#rmyc-events #owl-main-content-outer-template--25086429102372__9d1ebb7c-798f-4f77-83ad-5970f64c7797 .owl-mc-grid-title,
#rmyc-events #owl-main-content-outer-template--21042396725540__9d1ebb7c-798f-4f77-83ad-5970f64c7797 .owl-mc-grid-title,
#search-block-template--21042396561700__search_block_eDKGXx .search-block__title h4{
    font-family: 'Avenir Next LT Pro' !important;
}

#rmyc-events .owl-mc-grid-item-title.font_page_within_alokary {
    font-size: 30px !important;
    margin-bottom: 0;
    min-height: auto;
}
#eat-amp-drink #owl-main-content-outer-template--25086429036836__9d1ebb7c-798f-4f77-83ad-5970f64c7797 .owl-mc-grid-item-title {
    font-weight: 400;
}

#redevelopment-page .owl-mc-sub-title {
    font-family: 'Cormorant Garamond' !important;
}

.blog_container .halo-blog-content .article-title {
    font-family: "Cormorant Garamond";
}

.blog_container .halo-blog-content .blog_author {
    font-weight: 600;
    font-size: 16px;
}

.section_post_recent .recent_heading h3 {
    font-family: 'Cormorant Garamond';
    color: #032050;
}

@media (min-width: 1250px) {
    .site-header .owl-header-btn a {
        font-family: 'Avenir Next LT Pro';
        padding-inline: 30px;
        font-weight: 500;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right {
        gap: 10px;
        justify-content: space-between;
        align-items: initial;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right .owl-header-right-nav {
        flex: 2;
        justify-content: space-evenly;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right .owl-header-btn {
        flex: 1;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right .owl-header-right-nav li a {
        font-weight: 500;
        font-family: 'Avenir Next LT Pro';
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right .owl-header-right-nav .site-nav-dropdown li a {
        font-family: 'Avenir Next LT Pro';
        font-weight: 700;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right .owl-header-right-nav li a span:before, 
    .site-header .site-nav .menu-lv-1>a>span:not(.icon-dropdown):before {
        display: none;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left {
        padding-left: 8.5%;
        display: block;
        padding-right: 4%;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left .wrapper-navigation .main-menu .mb-area>.nav-bar>.site-nav {
        justify-content: space-evenly;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left .wrapper-navigation>.main-menu .mb-area {
        display: block;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left .wrapper-navigation .main-menu .mb-area > .nav-bar > .site-nav > .menu-lv-1.item > a {
        font-weight: 500 !important;
        font-family: 'Avenir Next LT Pro';
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left .wrapper-navigation .main-menu .mb-area > .nav-bar .site-nav-dropdown > li a {
        font-family: 'Avenir Next LT Pro';
    }

    .site-header .site-nav .no-mega-menu:hover>.sub-menu-mobile, 
    .site-header .site-nav .no-mega-menu .sub-menu-mobile {
        -webkit-transform: none;
        transform: none;
    }

    .owl-image-blocks-slider .owl-image-content-title {
        padding-bottom: 25px;
    }

    .site-footer .owl-footer-col {
        font-size: 18px;
        font-weight: 400;
    }

    .site-footer .owl-footer-col .owl-footer-col-title {
        font-size: 26px;
    }

    .site-footer .owl-footer-cols {
        align-items: flex-start;
        grid-template-columns: 20% calc(60% - 88px) 20%;
    }

    .site-footer.owl-footer {
        padding-inline: 64px;
    }

    .site-footer .owl-footer-inner {
        gap: 30px;
    }

    .site-footer .owl-footer-col-mid .owl-footer-col {
        flex: 1;
    }

    .owl-mc-content.description-margin-sm .page-rte.rte h2 + div {
        font-size: 28px;
    }

    .body-inner .owl-main-content-outer .owl-mc-content {
        padding-inline: 0;
    }

    .body-inner .owl-mc-content.description-margin-sm .page-rte.rte h2, 
    #board-of-directors .owl-main-content-outer .owl-mc-content .page-rte h2 {
        font-size: 40px !important;
        line-height: 1.5;
    }

    .owl-main-content-inner .owl-mc-main-outer {
        padding: 0 60px 0 0;
    }

    #redevelopment-page .owl-main-content-inner .owl-mc-main-outer, 
    #careers-with-us .owl-main-content-inner .owl-mc-main-outer:has(.owl-mc-grid), 
    #all .owl-main-content-inner .owl-mc-main-outer, 
    #rmyc-marina .owl-main-content-inner .owl-mc-main-outer, 
    .owl-mc-contentmain .owl-mc__contenttabs  .owl-mc-main-outer {
        padding-left: 60px;
    }

    .owl-mc-main-outer .block-our-teams {
        margin-top: 50px;
    }

    .owl-mc-main .owl-mc-content.description-margin-sm .page-rte.rte {
        font-size: 28px;
    }

    .owl-mc-main .owl-mc-content.description-margin-sm .page-rte.rte:has(table) {
        font-size: 22px;
    }

    #berthing-amp-moorings .owl-mc-main .font_mainpage_alokary {
        margin-bottom: 64px;
    }

    #berthing-amp-moorings .owl-mc-grid-item-des {
        font-size: 18px;
    }

    #rmyc-events .owl-mc-grid-item-title.font_page_within_alokary {
        font-size: 30px !important;
    }

    #eat-amp-drink #owl-main-content-outer-template--25086429036836__9d1ebb7c-798f-4f77-83ad-5970f64c7797 .owl-mc-sub-title {
        font-size: 50px !important;
    }

    #eat-amp-drink #owl-main-content-outer-template--25086429036836__9d1ebb7c-798f-4f77-83ad-5970f64c7797 .owl-mc-grid-item-title {
        font-size: 36px !important;
    }

    .owl-mc-contentmain .owl-mc__contenttabs .item__event-title, 
    #what-s-on .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-title {
        font-size: 30px;
    }

    .owl-mc-image-text-item .owl-mc-image-text-item-description {
        font-size: 24px !important;
    }

    .owl-mc-image-text-item a.owl-mc-image-text-item-btn {
        font-size: 20px !important;
    }

}

@media (max-width: 1440px) {
    .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-title {
        font-size: 20px;
    }
}

@media (max-width: 1249.98px) {
    .site-header .container-fluid {
        padding-inline: 10px;
    }

    .site-header .owl-header-btn a {
        font-size: 16px !important;
        font-family: 'Avenir Next LT Pro';
        font-weight: 500;
        text-transform: none;
    }

    .site-header.owl-header .header-bottom>.container-fluid .header-mb .header-mb-right a {
        padding: 7px 15px 5px !important;
        border-radius: 3px;
    }

    .site-header .header-mb-items {
        justify-content: space-between;
    }

    .site-header .header-mb.header_mobile_2 .header-logo {
        padding-right: 10px;
    }

    .site-header .header-mb-items.header-mb-right {
        justify-content: flex-end;
    }

    .owl-bg-color-blue.owl-center-title h4 {
        font-size: 35px !important;
    }

    .owl-image-blocks-outer .owl-image-content .owl-image-content-title {
        font-size: 35px !important;
    }

    .owl-image-blocks-outer .owl-image-content .owl-image-content-des {
        font-size: 20px !important;
    }

    .owl-mc-sidebar .owl-mc-btns a.owl-bg-color-aqua-blue, 
    .owl-mc-sidebar ul.owl-bg-color-blue li a {
        font-size: 18px !important;
    }

    .owl-mc-grid-items .owl-mc-grid-item-title {
        font-size: 20px !important;
    }

    .grid-banner-sections .owl-script-title h4 {
        font-size: 36px !important;
    }

    .owl-grid-banner-item .owl-grid-banner-title .owl-grid-banner-title-box {
    }

    .site-footer .owl-footer-cols {
        gap: 15px;
        grid-template-columns: 23% calc(55% - 30px) 22%;
    }

    .site-footer .owl-footer-col-mid {
        gap: 30px;
    }

    .site-footer .owl-footer-col-mid .owl-footer-col {
        max-width: calc(50% - 15px);
    }
}

@media (max-width: 991px) {
    .owl-main-content-inner .owl-mc-title.font_mainpage_alokary, 
    #careers-with-us .owl-mc-content .page-rte h1, 
    body .owl-mc-title.font_mainpage_alokary, 
    body .owl-slide-heading.font_mainpage_alokary, 
    body .owl-mc-content.font_mainpage_alokary h1, 
    body .owl-mc-sub-title.font_mainpage_alokary, 
    body .owl-mc-content.font_mainpage_alokary h2 {
        font-size: 36px !important;
    }
  .owl-text-banner-inner-wrapper .owl-text-banner-title {
    font-size: 35px;
  }
  .owl-text-banner-inner-wrapper .owl-text-banner-subtitle {
    font-size: 24px !important;
  }

    #careers-with-us.template-page .owl-mc-main .page-rte p, 
    body .owl-image-content-des.font_mainpage_lane, 
    body .owl-mc-rich-text-des.font_mainpage_lane, 
    body .text-center.font_mainpage_lane, 
    body .owl-mc-des.font_mainpage_lane, 
    .owl-mc-main .owl-mc-content.description-margin-sm .page-rte.rte, 
    .owl-mc-content .owl-mc-des {
        font-size: 24px !important;
    }

    .owl-mc-main .owl-mc-content.description-margin-sm .page-rte.rte:has(table) {
        font-size: 18px !important;
    }

    #careers-with-us.template-page .owl-mc-main .block-paragraph-content h2 {
        font-size: 32px;
    }

    #careers-with-us.template-page .owl-mc-main .block-paragraph-content p {
        font-size: 22px;
    }

    .block-list-features .feature-item .feature-item_name {
        font-size: 24px;
    }

    body .nav-tab {
        margin-bottom: 40px;
    }

    body .nav-tab ul li a {
        font-size: 22px;
    }

    .blog_list_page .list_page .item a {
        font-size: 22px !important;
    }

    .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-title {
        font-size: 18px;
    }

    .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-desc, 
    .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-action {
        font-size: 20px;
    }

    .owl-mc-contentmain .owl-mc__tabs {
        font-size: 22px;
    }

    .owl-mc-contentmain .owl-mc__contenttabs .item__event-desc {
        font-size: 18px;
    }

    .search-block-wrapper .owl-center-title h4 {
        font-size: 22px !important;
    }

    .owl-bg-color-blue.owl-center-title h4 {
        font-size: 32px !important;
    }

    .owl-image-blocks-outer .owl-image-content .owl-image-content-title {
        font-size: 32px !important;
    }

    .owl-image-blocks-outer .owl-image-content .owl-image-content-des {
        font-size: 18px !important;
    }

    .owl-image-blocks-outer .owl-image-content a.owl-image-content-button {
        font-size: 20px !important;
    }

    .owl-mc-sidebar .owl-mc-btns a.owl-bg-color-aqua-blue, 
    .owl-mc-sidebar ul.owl-bg-color-blue li a {
        font-size: 16px !important;
    }

    .owl-mc-grid-items .owl-mc-grid-item-title {
        font-size: 18px !important;
    }

    .owl-mc-grid-items .owl-mc-grid-item-des {
        font-size: 18px !important;
    }

    .owl-mc-grid-items .owl-mc-grid-item-btns a {
        font-size: 18px !important;
    }

    .grid-banner-sections .owl-script-title h4 {
        font-size: 32px !important;
    }

    .owl-grid-banner-item .owl-grid-banner-title .owl-grid-banner-title-box {
    }

    .owl-mc-image-text-item .owl-mc-image-text-item-title {
        font-size: 32px !important;
    }

    .owl-mc-image-text-item .owl-mc-image-text-item-description, 
    .owl-mc-image-text-item a.owl-mc-image-text-item-btn {
        font-size: 16px !important;
    }

    .blog_heading_top .blog_heading_top__content {
        font-size: 24px;
    }

    .blog_menu .blog-nav .swiper-wrapper a {
        font-size: 18px;
    }

    .owl-image-parralax-content .owl-image-parralax-content-wrapper h4 {
        font-size: 36px !important;
    }
}

@media (max-width: 767px) {
    .owl-main-content-inner .owl-mc-title.font_mainpage_alokary, 
    #careers-with-us .owl-mc-content .page-rte h1, 
    body .owl-mc-title.font_mainpage_alokary, 
    body .owl-slide-heading.font_mainpage_alokary, 
    body .owl-mc-content.font_mainpage_alokary h1, 
    body .owl-mc-sub-title.font_mainpage_alokary, 
    body .owl-mc-content.font_mainpage_alokary h2 {
        font-size: 32px !important;
    }
    .owl-text-banner-inner-wrapper .owl-text-banner-title {
        font-size: 32px;
    }
    .owl-text-banner-inner-wrapper .owl-text-banner-subtitle {
        font-size: 22px !important;
    }

    .owl-text-banner-inner-wrapper .owl-text-banner-button {
        font-size: 18px !important;
    }

    #careers-with-us.template-page .owl-mc-main .page-rte p, 
    body .owl-image-content-des.font_mainpage_lane, 
    body .owl-mc-rich-text-des.font_mainpage_lane, 
    body .text-center.font_mainpage_lane, 
    body .owl-mc-des.font_mainpage_lane, 
    .owl-mc-main .owl-mc-content.description-margin-sm .page-rte.rte, 
    .owl-mc-content .owl-mc-des {
        font-size: 22px !important;
    }

    #careers-with-us.template-page .owl-mc-main .block-paragraph-content h2 {
        font-size: 28px;
    }

    #careers-with-us.template-page .owl-mc-main .block-paragraph-content p {
        font-size: 18px;
    }

    body .nav-tab ul li a {
        font-size: 18px;
    }

    .blog_list_page .list_page .item a {
        font-size: 20px !important;
    }

    .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-desc, 
    .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-action {
        font-size: 18px;
    }

    .owl-mc-contentmain .owl-mc__tabs {
        font-size: 18px;
    }

    .owl-mc-contentmain .owl-mc__contenttabs .item__event-desc {
        font-size: 16px;
    }

    .search-block-wrapper .owl-center-title h4 {
        font-size: 20px !important;
    }

    .owl-bg-color-blue.owl-center-title h4 {
        font-size: 30px !important;
    }

    .owl-image-blocks-outer .owl-image-content .owl-image-content-title {
        font-size: 30px !important;
    }

    .owl-image-blocks-outer .owl-image-content .owl-image-content-des {
        font-size: 16px !important;
    }

    .owl-image-blocks-outer .owl-image-content a.owl-image-content-button {
        font-size: 18px !important;
    }

    .owl-mc-grid-items .owl-mc-grid-item-des {
        font-size: 16px !important;
    }

    .owl-mc-grid-items .owl-mc-grid-item-btns a {
        font-size: 16px !important;
    }

    .grid-banner-sections .owl-script-title h4 {
        font-size: 28px !important;
    }

    .owl-grid-banner-item .owl-grid-banner-title .owl-grid-banner-title-box {
    }

    .owl-mc-image-text-item .owl-mc-image-text-item-title {
        font-size: 24px !important;
    }

    .blog_heading_top .blog_heading_top__content {
        font-size: 20px;
    }

    .blog_menu .blog-nav .swiper-wrapper a {
        font-size: 16px;
    }

    .modal #event_quickview_content {
        font-size: 16px;
    }

    .owl-image-parralax-content .owl-image-parralax-content-wrapper h4 {
        font-size: 32px !important;
    }
    
    body .popup_royal_service {
        max-height: initial;
        overflow: hidden;
        max-width: 540px !important;
        padding: 3% !important;
    }

    body .popup_royal_service .box_container .right {
        padding-inline: 0;
        text-align: center;
    }

    body .popup_royal_service .left img {
        aspect-ratio: 4/2;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 50% 30%;
    }

    .owl-instagram-sections .instafeed-new-layout-container {
        width: 100% !important;
    }

    .owl-instagram-sections .instafeed-new-layout-container .instafeed-new-layout-item {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .owl-main-content-inner .owl-mc-title.font_mainpage_alokary, 
    #careers-with-us .owl-mc-content .page-rte h1, 
    body .owl-mc-title.font_mainpage_alokary, 
    body .owl-slide-heading.font_mainpage_alokary, 
    body .owl-mc-content.font_mainpage_alokary h1, 
    body .owl-mc-sub-title.font_mainpage_alokary, 
    body .owl-mc-content.font_mainpage_alokary h2 {
        font-size: 28px !important;
    }
    .owl-text-banner-inner-wrapper .owl-text-banner-title {
        font-size: 28px;
    }
    .owl-text-banner-inner-wrapper .owl-text-banner-subtitle {
        font-size: 18px !important;
    }
    .owl-text-banner-inner-wrapper .owl-text-banner-button {
        font-size: 16px !important;
    }

    #careers-with-us.template-page .owl-mc-main .page-rte p, 
    body .owl-image-content-des.font_mainpage_lane, 
    body .owl-mc-rich-text-des.font_mainpage_lane, 
    body .text-center.font_mainpage_lane, 
    body .owl-mc-des.font_mainpage_lane, 
    .owl-mc-main .owl-mc-content.description-margin-sm .page-rte.rte, 
    .owl-mc-content .owl-mc-des {
        font-size: 18px !important;
    }

    .owl-mc-main .owl-mc-content.description-margin-sm .page-rte.rte:has(table) {
        font-size: 16px !important;
    }

    #careers-with-us.template-page .owl-mc-main .block-paragraph-content h2 {
        font-size: 28px;
    }

    #careers-with-us.template-page .owl-mc-main .block-paragraph-content p {
        font-size: 16px;
    }

    body .nav-tab {
        margin-bottom: 25px;
    }

    body .nav-tab ul li a {
        font-size: 16px;
    }

    .blog_list_page .list_page .item a {
        font-size: 18px !important;
    }

    .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-title {
        font-size: 16px;
    }

    .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-desc, 
    .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-action {
        font-size: 16px;
    }

    .owl-mc-contentmain .owl-mc__tabs {
        font-size: 16px;
    }

    .search-block-wrapper .owl-center-title h4 {
        font-size: 18px !important;
    }

    .owl-bg-color-blue.owl-center-title h4 {
        font-size: 28px !important;
    }

    .owl-image-blocks-outer .owl-image-content .owl-image-content-title {
        font-size: 28px !important;
    }

    .owl-image-blocks-outer .owl-image-content .owl-image-content-des {
        font-size: 16px !important;
    }

    .owl-image-blocks-outer .owl-image-content a.owl-image-content-button {
        font-size: 16px !important;
    }

    .owl-mc-sidebar .owl-mc-btns a.owl-bg-color-aqua-blue, 
    .owl-mc-sidebar ul.owl-bg-color-blue li a {
        font-size: 14px !important;
    }

    .owl-mc-grid-items .owl-mc-grid-item-title {
        font-size: 16px !important;
    }

    .owl-grid-banner-item .owl-grid-banner-title .owl-grid-banner-title-box {
    }

    .grid-banner-sections .owl-script-title {
        padding-bottom: 25px;
    }

    .owl-mc-image-text-item .owl-mc-image-text-item-title {
        font-size: 20px !important;
    }

    .owl-mc-image-text-item .owl-mc-image-text-item-description, 
    .owl-mc-image-text-item a.owl-mc-image-text-item-btn {
        font-size: 14px !important;
    }

    .blog_heading_top .blog_heading_top__content {
        font-size: 16px;
    }

    .blog_menu .blog-nav .swiper-wrapper a {
        font-size: 14px;
    }

    .modal #event_quickview_content {
        font-size: 14px;
    }

    .owl-image-parralax-content .owl-image-parralax-content-wrapper h4 {
        font-size: 28px !important;
    }

    body .popup_royal_service .right h2 {
        font-size: 18px !important;
        margin-bottom: 0 !important;
        line-height: 2 !important;
    }

    body .popup_royal_service .popup_royal_link {
        padding: 10px 20px !important;
    }
}

/* ============================================================
   RMYC REBRAND — HEADER / NAV OVERRIDES
   ------------------------------------------------------------
   This file is loaded LAST and uses `.site-header.owl-header`
   selectors, so it outranks owl.css. Earlier rebrand rules were
   written into owl.css and were silently beaten by the rules
   above; these live here deliberately so they actually apply.
   Verified against the live preview theme.
   ============================================================ */

.owl-header {
    --rmyc-nav-h: 88px;
    /* Logo is locked to the nav height at a 3:2 ratio (logo = nav x 1.5)
       and is never driven by available horizontal space. */
    --rmyc-logo-h: calc(var(--rmyc-nav-h) * 1.5);   /* 88 -> 132px */
}

@media (min-width: 1250px) {

    /* Nav items: exactly 16px apart.
       `justify-content: space-evenly` (set earlier in this file) was
       distributing all leftover space between items, adding ~14px on top
       of the 16px gap. flex-start makes `gap` the only separation. */
    .site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left .wrapper-navigation .main-menu .mb-area>.nav-bar>.site-nav {
        justify-content: flex-start !important;
        gap: 16px !important;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right {
        justify-content: flex-end !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right .owl-header-right-nav {
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        gap: 16px !important;
        align-self: center !important;
    }

    /* Store CTA sits flush against the right edge and fills the full nav
       height. `flex: 1` (set earlier in this file) stretched this wrapper
       to the full remaining width while the <a> inside stayed content-
       sized, leaving a ~75px dead gap after the button. */
    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right .owl-header-btn {
        flex: 0 0 auto !important;
        align-self: stretch !important;
        margin-right: 0 !important;
    }

    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right .owl-header-btn a {
        height: 100% !important;
        padding-block: 0 !important;
    }
}

/* Logo sizing — applies to BOTH the uploaded <img> (brand_type = image)
   and the inline <svg> fallback. Previous rebrand rules targeted only
   `svg`, which never matched because this store uses an uploaded image;
   and the theme's `width: {{ max_height_logo_pc }}` emits a unitless
   value ("200"), which is invalid CSS and silently dropped. */
.site-header.owl-header .header-center .header-logo .logo-img img,
.site-header.owl-header .header-center .header-logo .logo-img svg,
.site-header.owl-header .header-center .header-logo.rmyc-box-logo img,
.site-header.owl-header .header-center .header-logo.rmyc-box-logo svg {
    height: var(--rmyc-logo-h) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    flex-shrink: 0 !important;
    display: block !important;
}

@media (max-width: 1249.98px) {
    .owl-header { --rmyc-nav-h: 64px; }   /* 64 -> 96px logo */

    .site-header.owl-header .header-mb .rmyc-box-logo-mb img,
    .site-header.owl-header .header-mb .rmyc-box-logo-mb svg,
    .site-header.owl-header .header-mb .header-logo img,
    .site-header.owl-header .header-mb .header-logo svg {
        height: var(--rmyc-logo-h) !important;
        width: auto !important;
        max-width: none !important;
        flex-shrink: 0 !important;
    }
}


/* ============================================================
   RMYC REBRAND — SECTION TYPE OVERRIDES
   ------------------------------------------------------------
   Earlier in THIS file there are hardcoded rules from the old
   design that conflict with the rebrand spec (40px headings,
   22px body, 22px Cormorant buttons with a 3px radius, a white
   border on the side tab, 700-weight icon titles). They use
   !important and 3-class specificity, so they beat both owl.css
   and the section settings. These rules restore the spec.
   ============================================================ */

/* --- Image block (Wellness Studio / Amplify Diesel / etc.) --- */
.template-index .owl-image-blocks-outer .owl-image-content .owl-image-content-title,
body .owl-image-blocks-outer .owl-image-content .owl-image-content-title {
    font-size: 48px !important;
    line-height: 60px !important;
    font-weight: 500 !important;
}

.template-index .owl-image-blocks-outer .owl-image-content .owl-image-content-des,
body .owl-image-blocks-outer .owl-image-content .owl-image-content-des {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
}

/* Button: Avenir (not Cormorant), 18/24, square corners */
body .owl-image-blocks-outer .owl-image-content a.owl-image-content-button,
body .owl-image-blocks-slider .owl-image-content-button {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    letter-spacing: 0.36px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 12px 24px !important;
}

/* --- Club Redevelopment / image-banner-text --- */
body .owl-text-banner-inner-wrapper .owl-text-banner-button,
body .owl-text-banner-button {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    letter-spacing: 0.36px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}

/* --- Icon columns: Cormorant 500 32/40, body Avenir 400 18/24 --- */
body .owl-list-icon .owl-list-icon-title {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 500 !important;
    font-size: 32px !important;
    line-height: 40px !important;
}

body .owl-list-icons .owl-list-icon-des {
    font-family: 'Avenir Next LT Pro' !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 24px !important;
}

/* --- Side tab: no white border, brand letter-spacing --- */
body .body-inner .box_tab_blog a,
body .box_tab_blog a {
    border: 0 !important;
    letter-spacing: 0.36px !important;
    padding: 24px 12px !important;
    font-weight: 500 !important;
}


/* --- Mobile header: 64px bar, logo hangs below at the same 3:2 ratio ---
   The logo is taken out of flow (as on desktop) so the bar stays 64px
   while the logo renders at 96px and overhangs, matching the mobile
   dev-mode frame. */
@media (max-width: 1249.98px) {
    .site-header.owl-header .header-bottom .header-mb {
        min-height: var(--rmyc-nav-h);
        height: var(--rmyc-nav-h);
        position: relative;
        overflow: visible;
    }

    .site-header.owl-header .header-bottom > .container-fluid,
    .site-header.owl-header .header-bottom {
        overflow: visible;
    }

    .site-header.owl-header .header-mb .header-mb-middle {
        position: static;
    }

    .site-header.owl-header .header-mb .header-mb-middle .header-logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        line-height: 0;
        padding: 0 !important;
    }

    .site-header.owl-header .header-mb .header-mb-middle .header-logo img,
    .site-header.owl-header .header-mb .header-mb-middle .header-logo svg {
        height: var(--rmyc-logo-h) !important;   /* 64 * 1.5 = 96px */
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        display: block !important;
    }
}


/* ============================================================
   RMYC REBRAND — ROUND 3 (A–F)
   All values below verified against the live preview theme.
   ============================================================ */

/* ---------- A. HEADER / NAV ---------- */

/* A3 (root cause of the recurring right-hand gutter):
   the sticky script writes an inline `width:<px>` onto .header-bottom,
   captured when it initialises and never recalculated on resize. At
   narrow widths that stale width overflowed the viewport. An !important
   stylesheet rule beats the inline style. */
.owl-header .header-bottom {
    /* 100% (not auto): when the sticky script switches this to
       position:fixed, `auto` collapsed it to content width and the
       mobile bar broke apart - the Store button detached to the top
       left over the page. 100% is correct both in flow and when
       fixed, and still beats the stale inline pixel width. */
    width: 100% !important;
    max-width: 100% !important;
}
.owl-header .header-bottom > .container-fluid {
    max-width: 100% !important;
}
.slick-list { overflow: hidden !important; }
/* off-canvas drawers were pinned at a hardcoded left:820px */
#dropdown-cart,
#dropdown-customer {
    left: auto !important;
    right: 0 !important;
    max-width: 100vw !important;
}
body { overflow-x: clip; }

/* A1: 5px padding put a white sliver above the navy logo block */
@media (max-width: 1249.98px) {
    .site-header.owl-header .logo-img { padding: 0 !important; }
}

/* A5: legacy 42px gap between the header and the hero. Source is
   theme-styles-responsive.css:
       .wrapper-header.header_mobile_style_3 { padding-bottom: 42px }
   It only fires for the header_mobile_style_3 layout - the one used to
   centre the logo - so centring the logo silently introduced the gap.
   Removed so the logo overhangs onto the hero exactly as it does on
   desktop. (Below 400px the logo no longer overhangs at all.) */
@media (max-width: 1249.98px) {
    .wrapper-header.header_mobile_style_3,
    .wrapper-header.wrapper_header_04 { padding-bottom: 0 !important; }
    .header-04 .policies-block { margin-top: 0 !important; }
}

/* A6: left nav vertical centring (matat-base sets .col-left display:block,
   which killed the flex centring) */
@media (min-width: 1250px) {
    .site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left {
        display: flex !important;
        align-items: center !important;
    }
}

/* A7: Store basket icon + label dark, not white */
.site-header.owl-header .owl-header-btn a { color: #2E2F33 !important; }
.site-header.owl-header .owl-header-btn a svg {
    fill: currentColor !important;
    color: #2E2F33 !important;
}

/* A8: reveal the dropdown caret on items that have a submenu.
   NOTE: no top-level menu item currently has child links in Shopify
   Navigation, so nothing shows until submenus are added there. */
@media (min-width: 1250px) {
    .site-header.owl-header .site-nav .menu-lv-1.item > a .icon-dropdown,
    .site-header.owl-header .owl-header-right-nav .menu-lv-1.item > a .icon-dropdown {
        display: inline-block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
        margin-left: 6px;
        font-size: 11px;
        line-height: 1;
        vertical-align: middle;
    }
}

/* A9: submenus open flush beneath the nav bar rather than overlapping it */
@media (min-width: 1250px) {
    .site-header.owl-header .header-panel-bt .site-nav > .menu-lv-1.item { position: relative; }

    /* The submenu is positioned from the bottom of its <li>, so the <li>
       must be the full height of the nav bar or the dropdown opens
       *inside* the white bar. Horizontal padding stays 0 so the flex
       `gap` remains exactly 16px; only vertical padding is restored,
       which does not affect the gap. */
    .site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left .wrapper-navigation .main-menu .mb-area>.nav-bar>.site-nav>.menu-lv-1.item>a,
    .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right .owl-header-right-nav>li.menu-lv-1.item>a {
        padding: calc((var(--rmyc-nav-h) - 20px) / 2) 0 !important;   /* 34px 0 at an 88px nav */
    }

    /* Now flush to the bottom edge of the nav bar */
    .site-header.owl-header .header-panel-bt .sub-mega-menu,
    .site-header.owl-header .header-panel-bt .site-nav-dropdown,
    .site-header.owl-header .owl-header-right .owl-header-right-nav>li .sub-mega-menu {
        top: 100% !important;
        margin-top: 0 !important;
    }

    /* The caret markup is FontAwesome's RIGHT chevron (fa-angle-right),
       used by the mobile drawer to mean "go deeper". On desktop it needs
       to read as a dropdown, so rotate it to point down. The mobile
       drawer is untouched. */
    .site-header.owl-header .site-nav .menu-lv-1.item > a .icon-dropdown .fa-angle-right,
    .site-header.owl-header .owl-header-right-nav .menu-lv-1.item > a .icon-dropdown .fa-angle-right {
        display: inline-block;
        transform: rotate(90deg);
        transform-origin: center;
    }
}

/* A2 + A4: below 400px the logo stops overhanging - it matches the nav
   height and then scales down, so it can never collide with the Menu
   trigger or the Store button. */
@media (max-width: 400px) {
    .site-header.owl-header .header-mb .header-mb-middle .header-logo img,
    .site-header.owl-header .header-mb .header-mb-middle .header-logo svg {
        height: var(--rmyc-nav-h) !important;
    }
}
@media (max-width: 360px) {
    .site-header.owl-header .header-mb .header-mb-middle .header-logo img,
    .site-header.owl-header .header-mb .header-mb-middle .header-logo svg {
        height: calc(var(--rmyc-nav-h) * 0.75) !important;
    }
}
@media (max-width: 300px) {
    .site-header.owl-header .header-mb .header-mb-middle .header-logo img,
    .site-header.owl-header .header-mb .header-mb-middle .header-logo svg {
        height: calc(var(--rmyc-nav-h) * 0.55) !important;
    }
}
.site-header.owl-header .header-mb .owl-header-btn-mobile,
.site-header.owl-header .header-mb .hamburger-icon {
    position: relative;
    z-index: 10;
}

/* ---------- B. ICON COLUMNS ---------- */
.owl-list-icons { gap: 24px !important; }
.owl-list-icon-item { flex: 1 1 0 !important; min-width: 0; }

/* ---------- C. CONTENT SECTIONS ---------- */
/* C11: gallery card labels match the global button type spec */
body .owl-grid-banner-title-box {
    /* font-size intentionally NOT set here: the size comes from the
       section's own theme-editor settings (font-size-<bp>-item-title) so
       it stays adjustable per breakpoint in the Theme Editor. Hardcoding
       it here previously (18px) was ALSO being beaten by the 3-class
       .owl-grid-banner-item ... rules above, so neither value applied
       and the label rendered at the theme default 32px. */
    line-height: 24px !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    font-weight: 500 !important;
    letter-spacing: 0.36px !important;
}

/* ---------- E. FOOTER ---------- */
/* E15: the logo <a> inherits Bootstrap's link blue (#337ab7) as an SVG
   stroke, drawing a blue outline around the wordmark. */
.owl-footer-logo svg,
.owl-footer-logo svg path,
.owl-footer-logo svg rect { stroke: none !important; }

/* E17 + E18: day ranges and Eat & Drink sub-headings are Medium (500) */
body .owl-footer-col-content h4,
body .owl-footer-col-content strong,
body .owl-footer-col-content b { font-weight: 500 !important; }

/* E20: legal strip text is Regular (400) */
.owl-sub-footer-inner a,
.owl-sub-footer-links span,
.owl-sub-footer-copyright { font-weight: 400 !important; }

/* ---------- F. FULL-BLEED BACKGROUNDS, 1440 CONTENT ---------- */
/* Nav spans the viewport; its inner content is not boxed in */
.owl-header .header-bottom > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Icon columns: cream background full-bleed, grid capped at 1440 */
.owl-list-icons-outer { width: 100%; }
.owl-list-icons-outer .owl-container { max-width: 1440px !important; }

/* Footer layout (full-bleed cream + 1440 capped content) is defined in
   sections/footer.liquid so it lives in one place - do not re-declare
   .owl-footer-inner width here or the two will drift apart. */

/* Search section: sage background, full-bleed, content capped */
.search-block-wrapper {
    background: #BDD0C8;
    width: 100%;
}
.search-block-wrapper > .container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

/* Gallery cards stay capped at 1440 (not full-bleed) */
.owl-grid-banners-outer .owl-grid-banners {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

/* E16: social icons move below ALL contact details (address, phone,
   email) rather than sitting directly under the "Contact" heading.
   Done with flex ordering so the two rich-text fields keep their own
   markup and stay independently editable. */
.owl-footer-col-1 .owl-footer-col-content {
    display: flex;
    flex-direction: column;
}
.owl-footer-col-1 .owl-footer-social-icons {
    order: 99;
    margin-top: 8px;
}

/* ---------- D14. SPONSOR / LOGO CAROUSEL ARROWS ---------- */
/* Unified with the cream/navy square arrow pair used by the image-block
   slider and the Instagram section (.owl-custom-slider-nav-item). */
.owl-mc-gallery .owl-mc-gallery-nav-btn {
    width: 62px !important;
    height: 62px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
    border: 0 !important;
    transition: all .25s;
}
.owl-mc-gallery .owl-mc-gallery-nav-btn-prev {
    background: #F7F3EC !important;
    color: #17305D !important;
}
.owl-mc-gallery .owl-mc-gallery-nav-btn-prev:hover { background: #ece5d6 !important; }
.owl-mc-gallery .owl-mc-gallery-nav-btn-next {
    background: #17305D !important;
    color: #FFFFFF !important;
}
.owl-mc-gallery .owl-mc-gallery-nav-btn-next:hover { background: var(--owl-main-dark) !important; }
.owl-mc-gallery .owl-mc-gallery-nav-btn svg { width: 20px; height: 20px; }
.owl-mc-gallery .owl-mc-gallery-nav-btn svg path {
    stroke: currentColor !important;
    fill: none;
}

/* ---------- F. AMPLIFY-STYLE SECTION: LEFT IMAGE BLEEDS ---------- */
/* Image column runs to the viewport edge; the text column's content is
   inset so it lines up with the 1440px content grid used elsewhere. */
.owl-image-blocks-outer { width: 100%; }
.owl-image-blocks-inner { max-width: none; }
@media (min-width: 1250px) {
    .owl-image-blocks-inner.owl-image-blocks-left .owl-image-content {
        padding-right: max(64px, calc((100vw - 1440px) / 2 + 64px));
    }
    .owl-image-blocks-inner.owl-image-blocks-right .owl-image-content {
        padding-left: max(64px, calc((100vw - 1440px) / 2 + 64px));
    }
}


/* Search section: the sage background belongs to the full-bleed
   wrapper only - inner wrappers must stay transparent or they paint
   white bands across the middle of the bar. */
.search-block-wrapper > .container,
.search-block-wrapper .search-block,
.search-block-wrapper .search-block__title,
.search-block-wrapper .search-block__form {
    background: transparent !important;
}

/* ============================================================
   SITE-WIDE FULL BLEED
   theme-styles.css caps the whole page with
       .body-inner { max-width: 1920px }
   On any display wider than 1920 that leaves a white gutter down
   both sides, and every "full-bleed" section inherits it - header,
   footer, icon columns and the search band all stop at 1920 no
   matter what width they declare themselves.
   The theme's own "Layout Body > Full Width" setting adds .body-full
   but does NOT lift this cap, so the setting alone has no effect.
   Scoping the override to .body-full makes the setting actually work,
   while leaving Boxed / Custom Width free to apply their own widths.
   Content stays capped by .owl-container (1440px), so body copy does
   not stretch on ultra-wide screens.
   ============================================================ */
.body-full .body-inner {
    max-width: none !important;
}


/* ============================================================
   ROUND 4 — tracker items
   ============================================================ */

/* F1: paragraph spacing in the footer is 8px between lines
   (was 24px, which is the gap seen between address and phone). */
body .owl-footer-col-content p { margin-bottom: 8px !important; }
body .owl-footer-col-content p:last-child { margin-bottom: 0 !important; }
body .owl-footer-col-3 .owl-footer-col-content p:not(:last-child) { margin-bottom: 8px !important; }

/* NM3: the side tab dropped to z-index 1 below 991px, putting it under
   the header and other fixed UI. Keep it above everything at all sizes. */
@media (max-width: 991px) {
    .box_tab_blog.mobile { z-index: 9999 !important; }
}

/* NM1 + NM2: hamburger was flush to the viewport edge and not centred. */
@media (max-width: 1249.98px) {
    .site-header.owl-header .header-mb .hamburger-icon {
        padding-left: 24px;
        display: flex;
        align-items: center;
    }
    .site-header.owl-header .header-mb .hamburger-icon .icon-nav {
        display: flex;
        align-items: center;
    }
}

/* C1 + C2: gallery module capped at 1440 and centred (client confirmed
   1440, superseding the earlier "full width of container"), plus 96px
   of breathing room top and bottom. */
.owl-grid-banners-outer { padding-top: 96px; padding-bottom: 96px; }
.owl-grid-banners-outer .owl-grid-banners {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* C3: 24px above and below the Amplify Diesel style carousel on tablet. */
@media (max-width: 1249.98px) {
    .owl-image-blocks-outer { padding-top: 24px; padding-bottom: 24px; }
}

/* FT2 + FT3 + FT4: tablet footer — logo and social icons anchor left,
   columns use the same 32px gap as desktop. */
@media (min-width: 768px) and (max-width: 1249.98px) {
    .owl-footer-inner { gap: 32px !important; }
    .owl-footer-brand,
    .owl-footer-brand .owl-footer-logo { text-align: left !important; margin-left: 0 !important; }
    .owl-footer-col-1 .owl-footer-social-icons { justify-content: flex-start !important; }
}

/* FM3 + L2: legal bar wraps properly instead of stacking on top of itself. */
@media (max-width: 767px) {
    .owl-sub-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .owl-sub-footer-links {
        flex-wrap: wrap;
        row-gap: 4px;
        column-gap: 16px;
    }
    .owl-sub-footer-copyright { margin-top: 4px; }
}

/* FM1: mobile footer spacing — social icons left, consistent rhythm. */
@media (max-width: 767px) {
    .owl-footer-col-1 .owl-footer-social-icons { justify-content: flex-start !important; }
    .owl-footer-brand { text-align: left !important; }
}


/* ============================================================
   BODY COPY = AVENIR REGULAR 18 / 24  (brand default, sitewide)
   ------------------------------------------------------------
   The global default is set on `html body` above. These selectors
   are the ones that previously forced body copy to 20/22/24/28px
   and so ignored it. Headings (Cormorant) and their own sizes are
   deliberately NOT touched here.

   FOOTER IS EXCLUDED ON PURPOSE: the Figma dev export specifies
   footer body copy at 15/20, not 18/24, and its size is driven by a
   theme-editor setting (font_size_desktop_footer_content). Forcing
   18/24 here would both contradict that spec and lock the setting.
   Flagged for the client to confirm which wins.
   ============================================================ */
body .owl-mc-content .owl-mc-des,
body .owl-mc-des,
body .owl-mc-grid-items .owl-mc-grid-item-des,
body .owl-mc-image-text-item .owl-mc-image-text-item-description,
body .owl-image-blocks-outer .owl-image-content .owl-image-content-des,
body .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-desc,
body .owl-mc-contentmain .owl-mc__contenttabs .item__event-desc,
body .blog_heading_top .blog_heading_top__content,
body .member-item .member-item_description,
body #careers-with-us.template-page .owl-mc-main .block-paragraph-content p,
body .owl-mc-main .owl-mc-content.description-margin-sm .page-rte.rte,
body .owl-main-content-inner .page-rte,
body .owl-main-content-inner .page-rte p {
    font-family: 'Avenir Next LT Pro' !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 24px !important;
}

/* Buttons share the same 18/24 (Medium weight per the brand spec) */
body .section_tabs_event_top__content .section_tabs_event_top__list_products .item__event-action,
body .owl-image-blocks-outer .owl-image-content a.owl-image-content-button,
body .owl-mc-grid-items .owl-mc-grid-item-btns a {
    font-family: 'Avenir Next LT Pro' !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 24px !important;
}


/* ============================================================
   SITEWIDE LAYOUT RULE
   Backgrounds run the full width of the viewport; CONTENT caps at
   1440px and centres. `.body-inner`'s 1920 cap is already lifted,
   so the only thing that should constrain content is this.
   ============================================================ */

/* every content container caps at 1440 */
.owl-container,
.owl-container-md,
.owl-container-xl,
.container {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ...but full-bleed wrappers must stay edge to edge */
.container-fluid,
.owl-header .header-bottom > .container-fluid,
.owl-header .wrapper-header-bt > .container-fluid {
    max-width: 100% !important;
}

/* Search module: sage background full width, content capped.
   Bootstrap's .container caps at 1170 on large screens, which is why
   this band looked narrower than everything else. */
.search-block-wrapper {
    width: 100%;
}
.search-block-wrapper > .container {
    /* The theme applies a percentage-based padding here (computed ~81px a
       side) left over from its custom-width layout, which squeezed this to
       1170 even though max-width was 1440. Reset it to the standard gutter. */
    max-width: 1440px !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Footer: cream background full width, 5-column content capped.
   (Content cap lives in sections/footer.liquid - kept here as a note
   so the two don't drift apart again.) */
.owl-footer { width: 100%; }


/* ==========================================================
   SITEWIDE BUTTON RULE
   Previously each button was styled per-component, so pages the
   brand pass never touched still shipped the theme defaults:
   vendor.min.css sets `.btn { border-radius: .25rem }` and loads
   AFTER theme-styles.css (which sets 0), so 4px corners won on
   Wellness, Blog and the cart/account UI, and "Send an Enquiry"
   on Marina rendered sentence case. This applies the brand rule
   once, globally: square corners, always caps.
   Carousel arrows and close buttons are excluded - they are icon
   controls, not labelled buttons.
   ========================================================== */
body .btn, body button, body .owl-btn, body a.button, body .button,
body input[type=submit], body input[type=button],
body .shopify-payment-button__button, body .owl-mc-btn, body .owl-page-btn {
    border-radius: 0 !important;
}
body .btn, body .owl-btn, body a.button, body .button,
body input[type=submit], body input[type=button],
body .shopify-payment-button__button, body .owl-mc-btn, body .owl-page-btn,
body button:not(.slick-arrow):not(.mfp-close):not(.close):not([class*="arrow"]) {
    text-transform: uppercase !important;
}


/* ==========================================================
   HOMEPAGE VIDEO
   Full-bleed width is intended, but the slideshow sized itself
   purely from the video's aspect ratio, so on wide screens it
   grew past 1000px tall. Height is capped at 720 and the video
   crops rather than letterboxes.
   ========================================================== */
.home-slideshow.hasvideo,
.home-slideshow.owl-slideshow {
    max-height: 720px !important;
    overflow: hidden !important;
}
.home-slideshow.hasvideo video,
.home-slideshow.owl-slideshow video,
.home-slideshow .owl-slideshow-video video {
    max-height: 720px !important;
    height: 720px !important;
    object-fit: cover !important;
    width: 100% !important;
}
@media (max-width: 767px) {
    .home-slideshow.hasvideo,
    .home-slideshow.owl-slideshow,
    .home-slideshow.hasvideo video,
    .home-slideshow.owl-slideshow video {
        max-height: 560px !important;
    }
    .home-slideshow.hasvideo video,
    .home-slideshow.owl-slideshow video { height: 560px !important; }
}


/* ==========================================================
   INSTAGRAM / SOCIAL SECTION  (rebuilt to the Figma layout)
   Was: a centred gold hash with two bare icons and no feed grid.
   Now: text column left, 5-up feed grid right, gold CTA buttons.
   ========================================================== */
.owl-instagram-outer { width: 100%; }
.owl-instagram-inner {
    display: grid !important;
    grid-template-columns: minmax(260px, 30%) 1fr !important;
    align-items: center !important;
    gap: 64px !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 96px 64px !important;
    box-sizing: border-box !important;
}
.owl-instagram-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 20px !important;
}
.owl-instagram-eyebrow {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    color: #2E2F33 !important;
    margin: 0 !important;
}
.owl-instagram-title { margin: 0 !important; }
.owl-instagram-title .owl-instagram-button {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    color: #17305D !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* the two CTAs, side by side */
.owl-instagram-content .icons_social {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    flex-wrap: wrap;
}
.owl-instagram-content .icons_social a.owl-footer-social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #EDB80F !important;
    color: #2E2F33 !important;
    padding: 12px 24px !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    letter-spacing: 0.36px !important;
    text-transform: uppercase !important;
    transition: background .2s ease;
}
.owl-instagram-content .icons_social a.owl-footer-social-icon:hover { background: #D9A80B !important; }
.owl-instagram-content .icons_social a.owl-footer-social-icon svg {
    width: 20px !important; height: 20px !important;
    fill: #2E2F33 !important; flex-shrink: 0;
}
.owl-instagram-social-label { display: inline-block; }

/* feed: 5 across, 2 rows, flush */
.owl-instagram-grid { min-width: 0; }
.owl-instagram-grid #insta-feed {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0 !important;
}
.owl-instagram-grid #insta-feed > * { min-width: 0; }
.owl-instagram-grid #insta-feed img,
.owl-instagram-grid #insta-feed video {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

@media (max-width: 1249.98px) {
    .owl-instagram-inner {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 64px 24px !important;
    }
    .owl-instagram-grid #insta-feed { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 767px) {
    .owl-instagram-grid #insta-feed { grid-template-columns: repeat(3, 1fr) !important; }
    .owl-instagram-inner { padding: 48px 20px !important; }
}


/* ==========================================================
   NARROW-VIEWPORT FIXES  (added 01/08)
   ========================================================== */

/* 1. HERO MENU — the CONTACT / WEATHER / INSTAGRAM / FACEBOOK / CAREERS row.
   owl.css sets `flex-wrap: nowrap; overflow: auto` with `white-space: nowrap`
   on each label, so the row could never shrink: it ran to ~765px inside a
   250px viewport, pushed the document to 320px wide and produced the white
   gutter down the right. It is also why the row rendered clipped mid-word
   ("FACEB…") between 600-700px. Wrapping solves both. */
.owl-hero-menu-inner {
    flex-wrap: wrap !important;
    overflow: visible !important;
    justify-content: center !important;
    gap: 12px 32px !important;
}
.owl-hero-menu-item { flex: 0 1 auto !important; min-width: 0 !important; }
.owl-hero-menu-text { white-space: normal !important; }
@media (max-width: 767px) {
    .owl-hero-menu { padding: 16px 12px !important; }
    .owl-hero-menu-inner { gap: 10px 20px !important; }
}

/* 2. Safety net: nothing may create a horizontal scrollbar. `body` already
   had overflow-x:hidden but `html` did not, so a stray wide child still
   stretched the document. */
html { overflow-x: hidden !important; }

/* 3. HAMBURGER — vertical centring.
   .icon-line is position:absolute and only 2px tall; its ::before/::after sit
   at top 5px and 12px, so the VISIBLE three-bar stack spans 0-14px while the
   box the browser centres is just the 2px bar. Measured result: the bars sat
   10px above the "Menu" label. Centring the 14px visual stack instead. */
.site-header.owl-header .header-mb .hamburger-icon .icon-nav { position: relative !important; }
.site-header.owl-header .header-mb .hamburger-icon .icon-line {
    top: 50% !important;
    margin-top: -7px !important;   /* half the 14px visual stack */
}

/* 4. LOGO — global floor: never shorter than the nav bar itself.
   Client rule: the logo may not shrink below 100% of the menu height at any
   breakpoint. Desktop keeps the 1.5x ratio; this only sets the floor. */
.site-header.owl-header .header-logo img,
.site-header.owl-header .header-logo svg,
.site-header.owl-header .rmyc-box-logo-mb img,
.site-header.owl-header .rmyc-box-logo-mb svg,
.site-header.owl-header .header-mb .header-logo img,
.site-header.owl-header .header-mb .header-logo svg {
    min-height: var(--rmyc-nav-h, 64px) !important;
    max-height: none !important;
    width: auto !important;
}

/* 5. Banner image vertically centred rather than bottom-anchored. */
.owl-text-banner-inner-wrapper img,
.owl-image-banner-text img,
.owl-text-banner img {
    object-fit: cover !important;
    object-position: center center !important;
}
.owl-text-banner, .owl-image-banner-text, .owl-text-banner-inner-wrapper {
    background-position: center center !important;
}


/* ==========================================================
   BODY CONTAINER  (client instruction 01/08)
   "Turn the container back on for all body content, keep the
   footer and menu nav full width."

   NB: the header, footer AND legal bar all sit INSIDE .body-inner,
   so re-enabling the theme's own Layout Body container would have
   capped the nav and footer too - the opposite of what was asked.
   Instead the cap is applied to section CONTENT only.

   This theme names section wrappers <name>-outer / <name>-inner,
   with the background on the outer. Capping the inner therefore
   contains the content while the background still bleeds.
   Attribute selector is *= not $= : $= matches only when the class
   attribute ENDS with "-outer", which fails on any element carrying
   a second class (e.g. "owl-image-blocks-outer template-index").
   ========================================================== */
.body-inner [class*="-outer"] > [class*="-inner"],
.body-inner .section_tabs_event_top,
.body-inner .owl-mc-main,
.body-inner .owl-main-content-inner {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
}

/* Header, footer and legal bar keep their own gutters and stay full width. */
.owl-footer-inner { padding-left: 64px !important; padding-right: 64px !important; }
.owl-sub-footer-inner { padding-left: 64px !important; padding-right: 64px !important; }
@media (max-width: 767px) {
    .body-inner [class*="-outer"] > [class*="-inner"],
    .body-inner .section_tabs_event_top,
    .body-inner .owl-mc-main {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .owl-footer-inner, .owl-sub-footer-inner {
        padding-left: 24px !important; padding-right: 24px !important;
    }
}


/* ==========================================================
   IMAGE BLOCK — image full-bleed, copy on the 1440 grid
   ==========================================================
   Verified live before writing. The inset down the outside of the
   picture was NOT my container rule — it is slick's own gutter:
   `.owl-image-blocks-slider-item.slick-slide { padding: 0 15px }`.
   The left/right modifier also sits on `.owl-image-blocks-slider`,
   not on `-inner`, so the selectors below match it on any ancestor.
   ========================================================== */
.owl-image-blocks-outer .owl-image-blocks-slider-item,
.owl-image-blocks-outer .slick-slide {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.owl-image-blocks-outer .owl-image-blocks-inner,
.owl-image-blocks-outer .owl-image-blocks-slider-inner {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* copy sits on the 1440 line; never tighter than 64px at narrow widths */
.owl-image-blocks-left .owl-image-content,
.owl-image-blocks-inner:not(.owl-image-blocks-right) .owl-image-content {
    padding-left: max(64px, calc((100vw - 1440px) / 2)) !important;
    padding-right: 64px !important;
}
.owl-image-blocks-right .owl-image-content {
    padding-right: max(64px, calc((100vw - 1440px) / 2)) !important;
    padding-left: 64px !important;
}
@media (max-width: 991px) {
    .owl-image-blocks-left .owl-image-content,
    .owl-image-blocks-right .owl-image-content,
    .owl-image-blocks-inner .owl-image-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ==========================================================
   SECTION RHYTHM — search + sponsor logos matched to the
   96px/64px vertical spacing used by the other modules.
   ========================================================== */
.search-block-wrapper {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}
.owl-mc-gallery,
.slide-image .owl-mc-gallery {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}
@media (max-width: 767px) {
    .search-block-wrapper,
    .owl-mc-gallery,
    .slide-image .owl-mc-gallery {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
}


/* ==========================================================
   NON-HOMEPAGE: EVERYTHING INSIDE A 1440 CONTAINER
   ==========================================================
   Client instruction 03/08, explicitly overriding the earlier
   "backgrounds full-bleed, content capped" rule for every page
   EXCEPT the homepage. On sub-pages the section itself — image,
   background and all — is capped at 1440 and centred.

   Homepage is excluded via `body.template-index`, which Shopify
   sets on the index template only. Header and footer keep their
   own full-width behaviour and are excluded by id.
   ========================================================== */
body:not(.template-index) main.main-content div[id^="shopify-section"]:not([id*="header"]):not([id*="footer"]) > * {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* The R10 rule padded `-outer > -inner` by 24px. On sub-pages the
   section is already capped above, so the inner must not cap again
   or the content ends up double-inset. */
body:not(.template-index) main.main-content [class*="-outer"] > [class*="-inner"] {
    max-width: none !important;
}

/* Page-header hero: cap the media too, not just the copy. */
body:not(.template-index) .page-tpl,
body:not(.template-index) .owl-page-header,
body:not(.template-index) .owl-slide,
body:not(.template-index) .owl-slide-content {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================
   IMAGE BLOCK — FINAL SPEC (client, 04/08)
   "Image always runs 50% of the full viewport width; the content on
    either variant sits within the 1440 container."
   ==========================================================
   The two halves are a `1fr 1fr` grid on .owl-image-blocks-inner, so each
   half is already 50vw. What has to change is only where the COPY starts:
   its outer edge must land on the 1440 container line, i.e. (100vw-1440)/2
   from the viewport edge — not on the half's own edge.

   Which side is "outer" flips with the variant, so both are handled. The
   modifier can sit on .owl-image-blocks-slider OR .owl-image-blocks-inner.
   ========================================================== */
/* `1fr` is `minmax(auto, 1fr)` — a track will NOT shrink below its content's
   intrinsic width. The image column therefore held its natural width and
   squeezed the copy column to ~65px, which is why "Get in touch" wrapped one
   letter per line and the body copy truncated. It is also why the copy never
   landed on the 1440 line: the column was never the size the padding assumed.
   `minmax(0, 1fr)` lets both halves actually be half. Identical root cause to
   the 5-column footer bug in Round 10 (FT4). */
.owl-image-blocks-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
.owl-image-blocks-inner > * { min-width: 0 !important; }
/* NOTE: `padding: 0 !important` here removed the image entirely.
   `.owl-image-block-thumb` is sized by an INLINE `padding-bottom: X%`
   aspect-ratio box (owl-image-block.liquid:41,65). Author !important
   beats an inline style, so the shorthand collapsed the box to zero
   height and the picture vanished — leaving the row height set by the
   text column, which read as "image missing".
   Only the horizontal gutters are cleared now; padding-bottom is left
   to the section setting that drives the image height. */
.owl-image-blocks-outer .owl-image-blocks,
.owl-image-blocks-outer .owl-image-block-thumb,
.owl-image-blocks-outer .owl-image-block-thumb img {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

/* copy starts on the 1440 line — text-left variant */
body .owl-image-blocks-left .owl-image-content,
body .owl-image-blocks-inner:not(.owl-image-blocks-right) .owl-image-content {
    padding-left: max(24px, calc((100vw - 1440px) / 2)) !important;
    padding-right: 64px !important;
}
/* …and text-right variant */
body .owl-image-blocks-right .owl-image-content {
    padding-right: max(24px, calc((100vw - 1440px) / 2)) !important;
    padding-left: 64px !important;
}

/* CTA hugs its own text rather than filling the column */
body .owl-image-content .owl-image-content-button,
body .owl-image-content a[class*="-button"],
body .owl-image-content a[class*="btn"] {
    width: auto !important;
    max-width: max-content !important;
    display: inline-flex !important;
    align-self: flex-start !important;
    justify-content: center !important;
}
body .owl-image-content.owl-image-content-center .owl-image-content-button,
body .owl-image-content.owl-image-content-center a[class*="-button"] {
    align-self: center !important;
}

@media (max-width: 991px) {
    body .owl-image-blocks-left .owl-image-content,
    body .owl-image-blocks-right .owl-image-content,
    body .owl-image-blocks-inner .owl-image-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}


/* ==========================================================
   SITEWIDE LETTER-SPACING NORMALISATION  (04/08)
   ==========================================================
   The theme ships 549 letter-spacing declarations across 30+ distinct
   values (0.05em x149, 0.02em, 0.2px, 0.48px, 0.5px, 0.72px, 1.5px,
   1.6px, 2px, 2.7px, 5px ...), almost all in theme-styles.css and
   theme.min.css. That is the inconsistency visible between pages.

   Brand rule: headings and body run untracked; only LABELS carry
   tracking, at 0.36px. Applied here in one place so it can be changed
   in one place.
   ========================================================== */

/* 1. Reset everything to untracked. */
body, body * {
    letter-spacing: normal !important;
}

/* 2. Headings — Cormorant, untracked (explicit, so it survives any
      future theme rule that reintroduces tracking). */
body h1, body h2, body h3, body h4, body h5, body h6,
body .owl-mc-title, body .owl-mc-sub-title, body .owl-slide-heading,
body .owl-image-content-title, body .owl-text-banner-title,
body .owl-grid-banner-title-box, body .owl-footer-col-title,
body .owl-list-icon-title, body .owl-mc-grid-item-title,
body .owl-instagram-title, body .owl-team-title,
body .search-block__title, body .owl-center-title h4 {
    letter-spacing: 0 !important;
}

/* 3. LABELS — the only tracked type on the site. Buttons, nav, and
      anything set uppercase reads as a label. */
body .btn, body button, body a.button, body .button,
body input[type=submit], body input[type=button],
body .owl-image-content-button, body .owl-text-banner-button,
body .owl-mc-btn, body .owl-mc-btn-1, body .owl-mc-btn-2,
body .owl-mc-grid-item-btn, body .owl-mc-grid-item-btn-2,
body .owl-page-header-grid-btn-1, body .owl-page-header-grid-btn-2,
body .owl-booking-submit, body .shopify-payment-button__button,
body .owl-footer-logo-subtext, body .box_tab_blog a,
body .owl-instagram-social-label, body .icon-nav-label,
body .owl-hero-menu-text, body .owl-sub-footer-links a,
body .owl-grid-banner-title-box {
    letter-spacing: 0.36px !important;
}


/* ==========================================================
   ONE BUTTON STYLE SITEWIDE  (04/08)
   ==========================================================
   Values are the brand button already running on the homepage
   (FIND OUT MORE) — the one signed off in review. If the Figma
   differs, every value lives in this single block.

   Split deliberately into TWO rules:
   - shape/type applies to ALL buttons (safe everywhere)
   - the gold fill applies only to CONTENT CTAs, so it cannot
     repaint the nav Store button, cart drawer or account UI.
   ========================================================== */

/* --- a) shape + type: every button on the site --- */
body .btn, body a.button, body .button,
body input[type=submit], body input[type=button],
body button:not(.slick-arrow):not(.mfp-close):not(.close):not([class*="arrow"]):not([class*="nav-btn"]),
body .owl-mc-btn, body .owl-mc-btn-1, body .owl-mc-btn-2,
body .owl-mc-grid-item-btn, body .owl-mc-grid-item-btn-2,
body .owl-image-content-button, body .owl-text-banner-button,
body .owl-page-header-grid-btn-1, body .owl-page-header-grid-btn-2,
body .owl-page-header-grid-btn-3, body .owl-booking-submit,
body .shopify-payment-button__button {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.36px !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 12px 24px !important;
    width: auto !important;
    max-width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background .2s ease;
}

/* --- b) gold fill: content CTAs only.
       Also overrides the pre-rebrand aqua (#319EC5) still saved on the
       Wellness pages as `owl-bg-color-aqua-blue`. --- */
body .owl-mc-btn, body .owl-mc-btn-1, body .owl-mc-btn-2,
body .owl-mc-grid-item-btn, body .owl-mc-grid-item-btn-2,
body .owl-image-content-button, body .owl-text-banner-button,
body .owl-page-header-grid-btn-1, body .owl-page-header-grid-btn-2,
body .owl-page-header-grid-btn-3,
body .owl-mc-btns a, body .owl-mc-grid-item-btns a,
body a.owl-bg-color-aqua-blue, body a.owl-bg-color-val-aqua-blue {
    background: #EDB80F !important;
    color: #2E2F33 !important;
}
body .owl-mc-btn:hover, body .owl-mc-btns a:hover,
body .owl-mc-grid-item-btns a:hover,
body .owl-image-content-button:hover,
body .owl-text-banner-button:hover {
    background: #D9A80B !important;
    color: #2E2F33 !important;
}


/* ==========================================================
   CLUB CO-ORDINATES panel  (04/08)
   White type on the theme's grey band was unreadable. Background
   changed to brand gold. Type set to primary black rather than
   left white: white on #EDB80F is roughly 1.8:1 contrast, which
   fails WCAG AA badly — black on gold is ~7:1 and legible.
   If the white is wanted regardless, change the `color` below.
   ========================================================== */
/* SCOPED TO #rmyc-marina ONLY — 04/08.
   This was previously unscoped. `.use-line-background` is a GENERIC theme
   class that the page-header hero also carries, so `background-image: none`
   stripped the hero photo and repainted it gold on every page using it —
   that is the Our Spaces "missing heading image". The gold was never a
   colour setting; no yellow value exists on that section at all.
   Never let this rule off the #rmyc-marina leash again. */
body #rmyc-marina .owl-slide-content-area.use-line-background,
body #rmyc-marina .owl-slide-content-area.use-line-background .owl-slide-content,
body #rmyc-marina .owl-slide-content-area.use-line-background .owl-slide-content-inner {
    background-color: #EDB80F !important;
    background-image: none !important;
}
body #rmyc-marina .owl-slide-content-area.use-line-background,
body #rmyc-marina .owl-slide-content-area.use-line-background * {
    color: #2E2F33 !important;
}


/* ==========================================================
   LEGIBILITY PASS  (04/08)
   ==========================================================
   The font purge swapped script/condensed faces for Cormorant and
   Avenir but left sizes and line-heights that were tuned for the old
   faces. Cormorant sets far wider, so headings wrapped, overflowed
   their coloured background boxes, and in narrow columns broke to one
   word per line. This fixes the mechanism rather than each page.
   ========================================================== */

/* 1. No heading may be wider than its column. */
body .owl-image-content-title,
body .owl-mc-title, body .owl-mc-sub-title, body .owl-mc-grid-title,
body .owl-slide-heading, body .owl-text-banner-title,
body .owl-image-parralax-content-title, body .owl-mc-image-text-item-title,
body .owl-mc-grid-item-title, body .owl-team-title, body .product-title {
    font-size: clamp(20px, 2.8vw, 40px) !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    max-width: 100% !important;
}

/* 2. Coloured boxes behind headings must follow the text, not clip it.
      `show-background-color-item-title` is saved TRUE on many instances;
      with a script face the box was a thin band, with Cormorant it became
      a tall block the text spilled out of. */
body [class*="-title"][class*="owl-bg-color"],
body .owl-image-content-title[class*="owl-bg-color"],
body .owl-grid-banner-title-box[class*="owl-bg-color"] {
    display: inline !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    padding: 6px 16px !important;
    line-height: 1.5 !important;
    overflow: visible !important;
}

/* 3. Body copy legible everywhere — no inherited script line-heights. */
body .owl-image-content-des, body .owl-mc-des, body .owl-mc-rich-text-des,
body .owl-slide-text, body .owl-text-banner-subtitle,
body .owl-mc-grid-item-des, body .owl-image-content p {
    font-size: 18px !important;
    line-height: 24px !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* 4. Copy columns need room to set. A half-width column at 64px gutters
      leaves too little at mid widths, which is where the one-word-per-line
      breakage appeared. */
@media (max-width: 1280px) {
    body .owl-image-content { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 991px) {
    body .owl-image-blocks-inner { grid-template-columns: 1fr !important; }
    body .owl-image-content { padding: 32px 24px !important; }
}


/* ==========================================================
   1. MODALS ABOVE THE COMMUNITIES SIDE TAB  (04/08)
   ==========================================================
   NM3 raised `.box_tab_blog` to z-index 9999 so it stopped sitting
   under the header and other fixed UI. That over-corrected: it now
   also sits above page-load popups. The tab keeps its 9999 (so the
   original fix holds); modals are lifted above it instead.
   ========================================================== */
body .mfp-bg, body .mfp-wrap, body .mfp-container,
body .halo-modal, body .halo_modal-custom, body .popup--video,
body .modal, body .modal-backdrop, body .modal-dialog,
body #shopify-section-popup, body .newsletter-popup,
body [class*="popup"][class*="open"], body .fancybox-container,
body .before-you-leave-popup, body .halo-popup {
    z-index: 100000 !important;
}
body .mfp-bg, body .modal-backdrop { z-index: 99999 !important; }

/* while a modal is open, drop the tab out of the stack entirely */
body.mfp-active .box_tab_blog,
body.modal-open .box_tab_blog,
body.overflow-hidden .box_tab_blog {
    z-index: 1 !important;
}

/* ==========================================================
   2. HEADINGS INSIDE COLOURED BOXES MUST FIT THE BOX
   ==========================================================
   "New Dining Experiences" overflows its navy card. The size was set
   for a script face; Cormorant sets ~40% wider so it spills the box on
   both sides and the bottom. Capped tighter than the general display
   size and allowed to wrap inside the box rather than over it.

   NB: sized to fit its container, NOT taken from Figma — the Figma
   connector is not authorised in this session. Confirm the intended
   value and it is a one-number change here.
   ========================================================== */
body .owl-image-content-title[class*="owl-bg-color"],
body .owl-grid-banner-title-box[class*="owl-bg-color"],
body [class*="-title"][class*="owl-bg-color"] {
    font-size: clamp(18px, 1.9vw, 28px) !important;
    line-height: 1.35 !important;
    display: inline !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    padding: 6px 14px !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* the card itself grows to its content rather than clipping it */
body .owl-image-content-title,
body .owl-image-content .owl-image-content-title {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
@media (max-width: 767px) {
    body .owl-image-content-title[class*="owl-bg-color"],
    body [class*="-title"][class*="owl-bg-color"] {
        font-size: clamp(16px, 4.4vw, 22px) !important;
        padding: 5px 12px !important;
    }
}


/* ==========================================================
   1. H1 / ARTICLE TITLES — natural case  (04/08)
   ==========================================================
   `text-transform: uppercase` is set on page and article headings in
   FOUR stylesheets: theme-styles.css and theme.min.css
   (`.page-header h1, .page-header h2`), rol-blog.css (`.blog_post_title`,
   `.article-title`, `.sidebar-title`) and layout_style_flower.css.
   Headings render as entered.
   ========================================================== */
body h1, body .page-header h1, body .page-header h2,
body .blog_post_title, body .blog_container .halo-blog-content .article-title,
body .blog_container .sidebar .sidebar-title,
body .article-template .blog-detail .title-comment,
body .layout-header--style2 .container .absolute h1,
body .owl-page-header h1, body .owl-slide-heading, body .article-title {
    text-transform: none !important;
}

/* ==========================================================
   2. MOBILE SUBMENU MATCHES THE MAIN MENU LIST
   ==========================================================
   Drilling into a submenu switched to a bold uppercase centred title
   bar with navy links. The main list is plain rows, sentence case,
   regular weight. Submenu now matches; back navigation is untouched.
   ========================================================== */
body .site-nav .menu-mb-title,
body .sub-menu-mobile .menu-mb-title,
body .menu-mb-title {
    text-transform: none !important;
    text-align: left !important;
    font-family: 'Avenir Next LT Pro' !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: normal !important;
    color: #2E2F33 !important;
    background: transparent !important;
    justify-content: flex-start !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(46,47,51,.12) !important;
}
/* keep the back control usable and on the left */
body .menu-mb-title .icon-back,
body .menu-mb-title [class*="back"],
body .menu-mb-title i {
    color: #2E2F33 !important;
    margin-right: 10px !important;
    position: static !important;
    transform: none !important;
}
/* submenu rows identical to the main list rows */
body .sub-menu-mobile a,
body .site-nav .sub-menu-mobile .site-nav-dropdown > li > a,
body .site-nav-dropdown > li.menu-lv-2 > a {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #2E2F33 !important;
    text-align: left !important;
    padding: 12px 20px !important;
}


/* ==========================================================
   CLUB REDEVELOPMENT / TEXT BANNER — MOBILE  (04/08)
   ==========================================================
   Mobile spec: image edge to edge, white type, content block sitting
   48px off the bottom of the banner. No CSS gradient — the client is
   baking a black gradient into the image itself for contrast.

   Overrides both the sub-page 1440 cap and the R10 container padding
   for this section only, so the image can reach the viewport edge.
   ========================================================== */
@media (max-width: 767px) {

    /* a) full-bleed image — clear every inherited gutter */
    body .owl-text-banner,
    body .owl-text-banner-outer,
    body .owl-text-banner-inner,
    body .owl-text-banner-inner-wrapper,
    body .owl-image-banner-text,
    body div[id^="shopify-section"] > .owl-text-banner,
    body:not(.template-index) main.main-content div[id^="shopify-section"] > .owl-text-banner {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body .owl-text-banner img,
    body .owl-image-banner-text img {
        width: 100% !important;
        max-width: none !important;
        display: block !important;
        object-fit: cover !important;
    }

    /* b) content block 48px off the bottom */
    body .owl-text-banner-inner-wrapper,
    body .owl-text-banner .owl-text-banner-content {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 48px !important;
        top: auto !important;
        transform: none !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    body .owl-text-banner,
    body .owl-image-banner-text { position: relative !important; }

    /* c) white type — the navy-on-navy was unreadable */
    body .owl-text-banner-title,
    body .owl-text-banner-subtitle,
    body .owl-text-banner-inner-wrapper .owl-text-banner-title,
    body .owl-text-banner-inner-wrapper .owl-text-banner-subtitle,
    body .owl-text-banner-inner-wrapper p,
    body .owl-text-banner-inner-wrapper span {
        color: #FFFFFF !important;
        background: transparent !important;
    }
    body .owl-text-banner-title { text-shadow: none !important; }
}


/* ==========================================================
   BUTTONS — ONE SPEC, EVERY BUTTON  (04/08)
   ==========================================================
   Spec: 18px, caps, total height 48px.

   My previous rule listed button classes by name, so anything not on
   that list kept the theme default — that is the inconsistency still
   showing. This matches on the class SUBSTRING instead, so it catches
   every `*btn*` / `*button*` variant the theme uses.

   Height is set explicitly (min-height + inline-flex centring) rather
   than derived from line-height + padding: a button with a border, an
   icon, or a different line-height would otherwise land off 48px.

   Excluded: carousel arrows, close/dismiss controls, and the `*btns`
   WRAPPER divs (matching those would collapse the layout around them).
   ========================================================== */
body a[class*="btn"]:not([class*="btns"]):not([class*="arrow"]):not([class*="close"]):not([class*="nav-btn"]):not(.slick-arrow),
body a[class*="button"]:not([class*="buttons"]):not([class*="arrow"]):not([class*="close"]),
body button[class*="btn"]:not([class*="btns"]):not([class*="arrow"]):not([class*="close"]):not(.slick-arrow):not(.mfp-close),
body .btn, body .button,
body input[type=submit], body input[type=button],
body .shopify-payment-button__button,
body .owl-mc-btn, body .owl-mc-btn-1, body .owl-mc-btn-2,
body .owl-image-content-button, body .owl-text-banner-button,
body .owl-booking-submit, body .owl-mc-grid-item-btn, body .owl-mc-grid-item-btn-2 {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.36px !important;

    height: 48px !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: max-content !important;

    border-radius: 0 !important;
    border: 0 !important;
    text-decoration: none !important;
}

/* wrappers must not inherit the button box */
body [class*="btns"], body [class*="buttons"] {
    height: auto !important;
    min-height: 0 !important;
    padding: initial;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* icons inside buttons stay proportionate to the 48px box */
body a[class*="btn"] svg, body button[class*="btn"] svg,
body .btn svg, body .button svg {
    width: 20px !important; height: 20px !important; flex-shrink: 0;
}


/* ==========================================================
   GALLERY / GRID BANNER LABELS = CTA BUTTON SPEC  (04/08)
   ==========================================================
   Client: "the links in the middle of these images should mirror our
   CTA button style, 28px should be 18px, everywhere this module lives."

   Why the previous fix did not hold: the saved settings are already
   correct — 735 values, all 18px, across 105 owl-grid-banner instances —
   and the section emits `font-size: 18px` from them. It still rendered
   28px, and the `line-height: 24px !important` on the old one-class rule
   was not applying either, which proves that rule was losing the cascade
   to a more specific !important elsewhere in the theme.

   So this is matched at FOUR classes (0,4,1), above the three-class
   `.owl-grid-banner-item .owl-grid-banner-title .owl-grid-banner-title-box`
   chains, and placed at the end of the file to win the source-order tie.
   Values are copied from the button block above, so the two stay in step.
   ========================================================== */
body .owl-grid-banner-item .owl-grid-banner-title .owl-grid-banner-title-box,
body .owl-grid-banners .owl-grid-banner-title .owl-grid-banner-title-box,
body .owl-grid-banner-thumb .owl-grid-banner-title .owl-grid-banner-title-box,
body a .owl-grid-banner-title .owl-grid-banner-title-box,
body .owl-grid-banner-title .owl-grid-banner-title-box {
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.36px !important;
    text-decoration: none !important;
    padding: 12px 24px !important;
    border-radius: 0 !important;
    /* event-custom-style.css forces min-width:279px, which stopped the
       label hugging its text the way the CTA button does. */
    min-width: 0 !important;
    width: auto !important;
    max-width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* The label sits inside a link on most cards — kill the underline so it
   reads as a button, matching `FIND OUT MORE`. */
body .owl-grid-banner-item a,
body .owl-grid-banner-item a:hover,
body .owl-grid-banner-title a,
body .owl-grid-banner-title a:hover {
    text-decoration: none !important;
}

/* The parent must not reintroduce a size the box then inherits. */
body .owl-grid-banner-item .owl-grid-banner-title {
    font-size: 18px !important;
    line-height: 24px !important;
}


/* ==========================================================
   MENUS PAGE — CONTENT UNDER EACH IMAGE LEFT-ALIGNED  (04/08)
   Client: "make sure all the content on this page under each image is
   left aligned." Scoped to this page's own section IDs rather than the
   section TYPE, because owl-main-page-content is used on many other
   pages that are still centred by design.
   ========================================================== */
#shopify-section-9d1ebb7c-798f-4f77-83ad-5970f64c7797,
#shopify-section-9d1ebb7c-798f-4f77-83ad-5970f64c7797 *,
#shopify-section-owl_main_page_content_TVNWLj,
#shopify-section-owl_main_page_content_TVNWLj * {
    text-align: left !important;
}
/* Buttons must start at the left edge, not stay centred in their column. */
#shopify-section-9d1ebb7c-798f-4f77-83ad-5970f64c7797 [class*="btn"],
#shopify-section-9d1ebb7c-798f-4f77-83ad-5970f64c7797 [class*="button"],
#shopify-section-owl_main_page_content_TVNWLj [class*="btn"],
#shopify-section-owl_main_page_content_TVNWLj [class*="button"] {
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
}


/* ==========================================================
   WELLNESS PAGES — PAGE HEADING  (04/08)
   Client: "remove the blue background from the page heading and make
   the text white", across every page under Wellness.
   Scoped to a `template-page-wellness` body class added in theme.liquid
   for those seven handles, because `main-page` is used sitewide and the
   navy panel is correct on other pages.
   background-IMAGE is deliberately NOT touched here — clearing it is
   exactly what stripped the hero photos and painted them gold.
   ========================================================== */
body.rmyc-plain-heading, body.template-page-marina .owl-slide-content-area,
body.rmyc-plain-heading, body.template-page-marina .owl-slide-content,
body.rmyc-plain-heading, body.template-page-marina .owl-slide-content-inner {
    background-color: transparent !important;
}
body.rmyc-plain-heading, body.template-page-marina .owl-slide-heading,
body.rmyc-plain-heading, body.template-page-marina .owl-slide-content-area .owl-slide-heading,
body.rmyc-plain-heading, body.template-page-marina .owl-slide-content-area p,
body.rmyc-plain-heading, body.template-page-marina .owl-slide-content-area span {
    color: #FFFFFF !important;
}


/* ==========================================================
   COMMUNITY (BLOG) PAGES  (04/08)
   ==========================================================
   1) Sub-category tiles sat too close to the nav, which now hangs
      below the bar. Measured: `.blog_list_page` is the navy band
      (rgb(0,32,80)) with padding-top 0; its inner `.list_page`
      carries 32px. Adding 64px to the band itself, so the navy
      background grows with the gap rather than the tiles just
      shifting down inside it.
   2) "See more / See less" removed. template-blog.liquid renders the
      FULL copy in #long_text (visible by default) and the truncated
      copy in #short_text (hidden); the button only swaps them. So
      hiding the button leaves the complete text on the page.
      Done in CSS deliberately — removing the button in Liquid would
      leave its addEventListener throwing on a null element.
   ========================================================== */
body .blog_list_page {
    padding-top: 64px !important;
}
body #show_more,
body .btn-primary#show_more {
    display: none !important;
}
body #long_text  { display: block !important; }
body #short_text { display: none  !important; }


/* ==========================================================
   LEFT NAV DROPDOWN = RIGHT NAV DROPDOWN  (04/08)
   ==========================================================
   Client: "match the nav on the right side, it's the perfect reference."
   Both sides render the SAME markup (snippets/dropdown-menu.liquid ->
   ul.site-nav-dropdown > li.menu-lv-2 > a). They only look different
   because matat-base styles them through two separate selector chains:
   :515 for the right nav, :544 for the left via `.col-left`.

   Measured live on the right nav (the reference):
     ul.site-nav-dropdown  padding-left : 0
     li.menu-lv-2          padding-left : 0
     a                     padding-left : 20px
   The left nav indents the text further than the separator rule starts,
   which is the misalignment. Matching the 20px pulls the label onto the
   same line the separator begins on.
   ========================================================== */
.site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left
  .wrapper-navigation .main-menu .mb-area > .nav-bar .site-nav-dropdown,
body .site-header .col-left .site-nav-dropdown {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left
  .wrapper-navigation .main-menu .mb-area > .nav-bar .site-nav-dropdown > li.menu-lv-2,
body .site-header .col-left .site-nav-dropdown > li.menu-lv-2 {
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left
  .wrapper-navigation .main-menu .mb-area > .nav-bar .site-nav-dropdown > li a,
body .site-header .col-left .site-nav-dropdown > li.menu-lv-2 > a {
    padding-left: 20px !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}


/* ==========================================================
   IMAGE BLOCK — TEXT-RIGHT VARIANT, SPECIFICITY FIX  (04/08)
   ==========================================================
   Symptom: copy sat correctly on the 1440 line when it was on the LEFT,
   but far too far over when on the RIGHT.

   Cause, in my own CSS above:
     body .owl-image-blocks-inner:not(.owl-image-blocks-right) ...  = 0,3,1
     body .owl-image-blocks-right ...                               = 0,2,1
   `:not()` contributes its argument's specificity, so the LEFT fallback
   outranks the RIGHT rule. The `-right` modifier can sit on the slider
   rather than on .owl-image-blocks-inner, in which case `:not()` still
   matches and wins — so the right-hand column was given padding-LEFT of
   (100vw-1440)/2, measured from the half-way point instead of the
   viewport edge. At 2560 that is 1280 + 560 = 1840, which is exactly
   where the copy was landing.

   Fixed by matching the right variant at equal specificity (0,3,1) and
   placing it last, so source order settles the tie. Covers the modifier
   on the inner, the slider, or an outer ancestor.
   ========================================================== */
body .owl-image-blocks-inner.owl-image-blocks-right .owl-image-content,
body .owl-image-blocks-right .owl-image-blocks-inner .owl-image-content,
body .owl-image-blocks-slider.owl-image-blocks-right .owl-image-content,
body .owl-image-blocks-outer .owl-image-blocks-right .owl-image-content {
    padding-left: 64px !important;
    padding-right: max(24px, calc((100vw - 1440px) / 2)) !important;
}


/* ==========================================================
   CLUB REDEVELOPMENT BANNER — ANCHOR CROP TO BOTTOM  (04/08)
   Measured: object-fit cover, object-position 50% 50%, so it crops
   evenly top and bottom. Anchoring to the bottom keeps the foreground
   (the group and the ground) and takes the crop out of the sky.
   Covers both the <img> and a background-image implementation.
   ========================================================== */
body .owl-text-banner img,
body .owl-text-banner-thumb img,
body .owl-image-banner-text img,
body .owl-text-banner-sections img {
    object-fit: cover !important;
    object-position: 50% 100% !important;
}
body .owl-text-banner-thumb,
body .owl-text-banner[style*="background-image"],
body .owl-image-banner-text[style*="background-image"] {
    background-position: 50% 100% !important;
    background-size: cover !important;
}


/* ==========================================================
   GET IN TOUCH / IMAGE BLOCK — THE ACTUAL ROOT CAUSE  (04/08)
   ==========================================================
   MEASURED on build g at 2560:
     .owl-image-blocks-inner  width 1440, left 560, grid 696px 696px
     .owl-image-content       width 696, padding-left 560, padding-right 64
     -> real content width = 696 - 560 - 64 = 72px
   That 72px is why "Get in touch" set one letter per line. The COLUMN was
   never the problem, and neither was `1fr` — my earlier two diagnoses were
   both wrong.

   The padding `max(24px, (100vw-1440)/2)` exists to push copy inward to the
   1440 line when the module runs FULL-BLEED. On sub-pages the R14 rule
   already caps the section at 1440, so the column starts on that line and
   the padding is applied a second time, crushing the content.

   So: viewport-derived padding ONLY where the module is genuinely
   full-bleed (the homepage). Everywhere else, a plain gutter.
   ========================================================== */
body:not(.template-index) .owl-image-blocks-inner .owl-image-content,
body:not(.template-index) .owl-image-blocks-left .owl-image-content,
body:not(.template-index) .owl-image-blocks-right .owl-image-content,
body:not(.template-index) .owl-image-blocks-inner.owl-image-blocks-right .owl-image-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
/* Keep a wider gutter on the side that meets the image. */
body:not(.template-index) .owl-image-blocks-inner:not(.owl-image-blocks-right) .owl-image-content {
    padding-right: 64px !important;
}
body:not(.template-index) .owl-image-blocks-inner.owl-image-blocks-right .owl-image-content,
body:not(.template-index) .owl-image-blocks-right .owl-image-blocks-inner .owl-image-content {
    padding-left: 64px !important;
}

/* ==========================================================
   LINE CLAMP REMOVED  (04/08)
   `-webkit-line-clamp: 5` on .owl-image-content-des is what truncated
   "...any questio...". With the column at 72px it cut after a few
   characters; at full width it still cuts the copy at 5 lines.
   ========================================================== */
/* ---- ONE-NUMBER REWIND ----------------------------------
   Theme default was 5, which cut copy mid-word. Now 10.
   To change: edit the number below and nothing else.
     10  = current
      5  = original theme behaviour
     999 = effectively no truncation
   NOTE: -webkit-line-clamp only works with display:-webkit-box
   and -webkit-box-orient:vertical, so those must stay.
   Affects 153 owl-image-block instances across 107 templates.
   --------------------------------------------------------- */
:root { --rmyc-des-clamp: 10; }

body .owl-image-content-des,
body .owl-image-content .owl-image-content-des {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: var(--rmyc-des-clamp) !important;
    overflow: hidden !important;
    max-height: none !important;
}

/* ==========================================================
   LEFT NAV DROPDOWN — INSET THE SEPARATOR TO MATCH THE TEXT  (04/08)
   Text now starts at 20px, but the rule still spans the full panel.
   Padding cannot inset a border, so the 20px moves to the li as MARGIN
   (which shortens the border with it) and comes off the link.
   ========================================================== */
body .site-header .col-left .site-nav-dropdown > li.menu-lv-2 {
    margin-left: 20px !important;
    margin-right: 20px !important;
}
body .site-header .col-left .site-nav-dropdown > li.menu-lv-2 > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================================
   TWO BUTTON FILLS, NOT ONE  (04/08)
   ==========================================================
   Client: yellow replaces the old LIGHT BLUE; the new cream replaces
   the old CREAM. Values sampled from the Figma button set:
     gold  #EDB80F on #2E2F33
     cream #F7F3EC on #17305D

   MEASURED on build g: every button rendered rgb(237,184,15) — my
   earlier "gold fill" rule painted BOTH variants gold and flattened the
   distinction. The markup still separates them:
     owl-mc-grid-item-btn-1 (+owl-color-black) = was cream
     owl-mc-grid-item-btn-2 (+owl-color-white) = was light blue
     owl-mc-btn-1 / owl-bg-color-blue          = was light blue
   Placed last so it beats the earlier blanket rule on source order.
   ========================================================== */
body .owl-mc-grid-item-btn-1,
body a.owl-mc-grid-item-btn-1,
body .owl-mc-grid-item-btns a.owl-mc-grid-item-btn-1 {
    background: #F7F3EC !important;
    background-color: #F7F3EC !important;
    color: #17305D !important;
}
body .owl-mc-grid-item-btn-1:hover,
body a.owl-mc-grid-item-btn-1:hover {
    background: #EFE8DC !important;
    color: #17305D !important;
}
body .owl-mc-grid-item-btn-2,
body a.owl-mc-grid-item-btn-2,
body .owl-mc-btn-1,
body a.owl-mc-btn-1,
body .owl-mc-btns a.owl-mc-btn-1 {
    background: #EDB80F !important;
    background-color: #EDB80F !important;
    color: #2E2F33 !important;
}

/* ==========================================================
   MENUS PAGE LEFT-ALIGN — SELECTOR CORRECTED  (04/08)
   Shopify prefixes section ids as
   `shopify-section-template--<theme_id>__<section_id>`, so my earlier
   `#shopify-section-<section_id>` selector matched NOTHING and the
   left-align never applied. Matching on the id SUBSTRING instead.
   ========================================================== */
body [id*="656744ec-6f4b-4440"],
body [id*="656744ec-6f4b-4440"] p,
body [id*="656744ec-6f4b-4440"] h1,
body [id*="656744ec-6f4b-4440"] h2,
body [id*="656744ec-6f4b-4440"] h3,
body [id*="656744ec-6f4b-4440"] h4,
body [id*="656744ec-6f4b-4440"] span,
body [id*="656744ec-6f4b-4440"] div,
body [id*="owl_main_page_content_TVNWLj"],
body [id*="owl_main_page_content_TVNWLj"] p,
body [id*="owl_main_page_content_TVNWLj"] h1,
body [id*="owl_main_page_content_TVNWLj"] h2,
body [id*="owl_main_page_content_TVNWLj"] h3,
body [id*="owl_main_page_content_TVNWLj"] h4,
body [id*="owl_main_page_content_TVNWLj"] span,
body [id*="owl_main_page_content_TVNWLj"] div {
    text-align: left !important;
}
body [id*="656744ec-6f4b-4440"] [class*="btn"],
body [id*="owl_main_page_content_TVNWLj"] [class*="btn"] {
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
}


/* ==========================================================
   COLLAPSED TITLE BACKGROUND BOXES  (04/08)
   ==========================================================
   MEASURED: the "Contact Us" h4 is .owl-color-white and its PARENT has
   background rgb(0,32,80). White-on-navy is correct by design — it reads
   as white-on-white only because that navy box has collapsed to a small
   square, so the text overflows it onto the page. Those collapsed boxes
   are the stray "blue squares".

   Same family as the image-block padding bug: a container crushed to
   near-zero while its text escapes. Guard it so a title background box
   always wraps its own text.
   ========================================================== */
body .owl-image-content-title,
body .owl-image-content .owl-image-content-title,
body .owl-mc-title,
body .owl-center-title h4 {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    display: inline-block !important;
    overflow: visible !important;
    white-space: normal !important;
}
/* A title box must never be narrower than its text. */
body [class*="owl-"] > h4[class*="owl-color-white"],
body [class*="owl-"] > h2[class*="owl-color-white"] {
    width: auto !important;
    min-width: max-content !important;
}


/* ==========================================================
   CONTACT US SECTION  (04/08)
   ==========================================================
   Client: section title centred, sentence case, navy, no navy box;
   48px padding above; 24px between it and the content beneath;
   "Get in touch" loses its navy box and goes navy too.

   MEASURED before this: the h4 is .owl-color-white on a navy parent,
   which is why it read white-on-white once the box collapsed. Removing
   the box means the text must go navy or it disappears on the light
   ground — so colour and background are changed together, never apart.

   Sentence case: the stored text is "Contact Us", so `text-transform:
   none` would leave a capital U. lowercase + ::first-letter gives a
   true "Contact us".
   ========================================================== */
body .owl-image-blocks-outer .owl-center-title,
body .owl-image-blocks-outer .owl-center-title h4 {
    background: transparent !important;
    background-color: transparent !important;
    color: #17305D !important;
    text-align: center !important;
    text-transform: lowercase !important;
    display: block !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}
body .owl-image-blocks-outer .owl-center-title h4::first-letter {
    text-transform: uppercase !important;
}
/* 48px above the title, 24px between it and the content below. */
body .owl-image-blocks-outer {
    padding-top: 48px !important;
}
body .owl-image-blocks-outer .owl-center-title {
    margin-bottom: 24px !important;
}

/* "Get in touch" — navy box removed, type goes navy. */
body .owl-image-content .owl-image-content-title,
body .owl-image-blocks-outer .owl-image-content-title {
    background: transparent !important;
    background-color: transparent !important;
    color: #17305D !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================================
   NEWSLETTER SIGN UP — DARK GREY -> NAVY  (04/08)
   Markup is .owl-custom-newsletter (+ -inner / -content).
   Set on the wrapper and its inner so whichever one carries the
   grey in the theme's own CSS is covered.
   ========================================================== */
body .owl-custom-newsletter,
body .owl-custom-newsletter-inner,
body .owl-custom-newsletter-content,
body section .owl-custom-newsletter {
    background: #17305D !important;
    background-color: #17305D !important;
}
body .owl-custom-newsletter,
body .owl-custom-newsletter *:not(input):not(button):not(svg):not(path) {
    color: #FFFFFF !important;
}
body .owl-custom-newsletter input {
    background: transparent !important;
    color: #FFFFFF !important;
    border-bottom-color: rgba(255,255,255,.6) !important;
}
body .owl-custom-newsletter input::placeholder { color: rgba(255,255,255,.7) !important; }


/* ==========================================================
   FAQ PAGE — DIVIDERS + LEFT ALIGN  (04/08)
   Markup (sections/faq-custom-page.liquid, faq-page.liquid):
     .accordion > .accordion-item > .accordion-title / .accordion-content
   plus a Bootstrap `.panel` variant on the second template — both
   covered, since the page may use either.
   Divider sits on the ITEM, not the title, so it stays put whether the
   answer is open or closed. `:last-child` keeps the list from ending
   on a rule.
   ========================================================== */
body .faq-page .accordion-item,
body .accordion .accordion-item,
body .faq-page .panel.panel-default {
    border-bottom: 1px solid rgba(23, 48, 93, .18) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
body .faq-page .accordion-item:last-child,
body .accordion .accordion-item:last-child,
body .faq-page .panel.panel-default:last-child {
    border-bottom: 0 !important;
}
body .faq-page,
body .faq-page .accordion,
body .faq-page .accordion-item,
body .faq-page .accordion-title,
body .faq-page .accordion-content,
body .faq-page .panel-body,
body .faq-page .des_faqs,
body .faq-page h1, body .faq-page h2, body .faq-page h3,
body .faq-page h4, body .faq-page p, body .faq-page li {
    text-align: left !important;
}


/* ==========================================================
   HERO MENU — l RULE REVERTED  (04/08)
   The `position: static` override added in build l was written while
   the hero was collapsed to 0px, so the menu had nothing to overlay
   and fell under the fixed header. Build m restored the hero to 648px,
   which made that rule not just redundant but harmful: it pushed the
   social bar to 769px, below the hero (89-737), where it read as an
   empty band. Removed so the bar overlays the hero as designed.
   ========================================================== */



/* ==========================================================
   PAGE HERO COLLAPSED — Eat & Drink / Wellness  (04/08)
   ==========================================================
   owl.css sizes the hero with an aspect-ratio box:
       .owl-page-hero-image { height: 0; padding-bottom: 45% }
   One of my own broad padding resets was zeroing that padding, so the
   hero collapsed to 0 and its heading + CTA buttons piled up on top of
   each other. Same root cause as the image-block thumb earlier: an
   element whose entire height comes from percentage padding.

   MEASURED on build l, Eat & Drink @2560:
       before  padding-bottom 0px      height 0
       after   padding-bottom 648px    height 648
   Restated explicitly here so no later reset can flatten it again.
   ========================================================== */
body .owl-page-hero-image {
    height: 0 !important;
    padding-bottom: 45% !important;
    overflow: hidden !important;
}
body .owl-page-hero-images { position: relative !important; }
body .owl-page-hero-image > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* ==========================================================
   PAGE HEADER CTA BUTTONS — ORIGINAL LAYOUT RESTORED  (04/08)
   ==========================================================
   Client reference: button 1 full width, buttons 2 and 3 side by side
   at EQUAL width, button 4 full width.

   My previous fix made these a wrapping flex row, so each button sized
   to its own text — that is why they looked "all over the place".
   Wrong fix: the grid was correct, the CELL was too narrow for the
   longer label ("Book Compass Terrace Pizzeria" got 145px).

   Correct fix: keep the 2-up grid but make the columns EQUAL (1fr 1fr)
   and let the label wrap inside its own cell instead of overflowing.
   ========================================================== */
body .owl-page-header-grid-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* rows 1 and 4 — full width */
body .owl-page-header-grid-first,
body .owl-page-header-grid-third,
body .owl-page-header-grid-fourth {
    display: block !important;
    width: 100% !important;
}
/* row 2 — two EQUAL columns */
body .owl-page-header-grid-second {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    align-items: stretch !important;
}
/* buttons fill their cell; long labels wrap rather than overflow */
body .owl-page-header-grid-btn {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    white-space: normal !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
}
body .owl-page-header-grid-btn-bg {
    width: 100% !important;
    height: 100% !important;
}


/* ==========================================================
   WELLNESS PAGE — THREE FIXES  (04/08)
   ==========================================================
   1) Yellow rules under the Strength / Pilates / Yoga headings removed.
      Covered as border AND as a ::after pseudo-element, since the theme
      draws these dividers both ways in different modules.
   2) "Additional Services" cards (Sauna / Allied Health / Massage &
      Beauty) centred to match the Strength / Pilates / Yoga block above.
   3) Both long body-copy blocks set to the default body size 18/24,
      overriding the per-module sizes tuned for the retired faces.
   Scoped to .rmyc-plain-heading (the wellness + marina page group) so
   other pages using the same modules are untouched.
   ========================================================== */

/* 1. remove the yellow divider under headings */
/* Pseudo-elements ONLY. The real .owl-mc-grid-item-title must never be
   in this list: content:none / height:0 collapsed every grid + product
   heading on the site to 0px, which is what made headings look missing
   or cropped on on-water-hire, eat-drink, wellness and trading-hours. */
body .owl-mc-grid-item-title::after,
body .owl-mc-grid-item-title::before,
body .rmyc-plain-heading .owl-mc-grid-item-title::after,
body .owl-center-title h4::after,
body .owl-mc-title::after {
    border-bottom: 0 !important;
    border-top: 0 !important;
    background: none !important;
    content: none !important;
    height: 0 !important;
}

/* the heading element itself: strip the divider, keep its box intact */
body .owl-mc-grid-item-title {
    border-bottom: 0 !important;
    border-top: 0 !important;
    background: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* 2. centre the Additional Services cards */
body.rmyc-plain-heading .owl-mc-grid-item,
body.rmyc-plain-heading .owl-mc-grid-item-title,
body.rmyc-plain-heading .owl-mc-grid-item-des,
body.rmyc-plain-heading .owl-mc-grid-item-btns,
body.rmyc-plain-heading .owl-mc-grid-item * {
    text-align: center !important;
}
body.rmyc-plain-heading .owl-mc-grid-item-btns,
body.rmyc-plain-heading .owl-mc-grid-item-btn,
body.rmyc-plain-heading .owl-mc-grid-item-btn-1,
body.rmyc-plain-heading .owl-mc-grid-item-btn-2 {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}

/* 3. body copy back to the sitewide default 18/24.
   :not(heading span) — the bare `span` variants were flattening
   the text INSIDE h1.owl-mc-title ("Marine Servicing & Sales")
   to 18px, which is why the page H1s measured 48-50px on the
   element but rendered small (23/08). */
body.rmyc-plain-heading .owl-mc-des,
body.rmyc-plain-heading .owl-mc-des p,
body.rmyc-plain-heading .owl-mc-des span:not(:is(h1,h2,h3,h4,h5,h6) span),
body.rmyc-plain-heading .owl-main-page-content p,
body.rmyc-plain-heading .owl-main-page-content span:not(:is(h1,h2,h3,h4,h5,h6) span),
body.rmyc-plain-heading .rte p,
body.rmyc-plain-heading .rte span:not(:is(h1,h2,h3,h4,h5,h6) span),
body.rmyc-plain-heading .owl-mc-content p,
body.rmyc-plain-heading .owl-mc-content span:not(:is(h1,h2,h3,h4,h5,h6) span) {
    font-size: 18px !important;
    line-height: 24px !important;
}
/* and the H1's own span inherits the heading size (doubled class
   beats custom-font-size's `.owl-mc-title span` !important pin) */
body h1.owl-mc-title.owl-mc-title span {
    font-size: inherit !important;
    line-height: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
}


/* ==========================================================
   PAGE HERO — REBUILD  (05/08)
   ==========================================================
   Shared component: `owl-page-header`, 70 instances / 70 templates.

   Target: solid dark band over the hero image, centred white Cormorant
   title, one evenly-spaced row of gold buttons beneath it.

   The mess came from the markup splitting the CTAs across three fixed
   wrappers — .owl-page-header-grid-first / -second / -third — so they
   sized independently, took per-instance colours (gold, sage, olive,
   grey) and collided. `display: contents` flattens those wrappers so
   all buttons become children of ONE flex row; the row then handles
   spacing and equal heights, and works for 2, 3 or 4 buttons.
   ========================================================== */

/* a) the dark band */
body .owl-page-header .owl-slide-content-area,
body .owl-page-hero-images .owl-slide-content-area,
body .owl-slide-content-area.use-line-background:not(#rmyc-marina *) {
    background: transparent !important;
    width: 100% !important;
    max-width: none !important;
    padding: 40px 24px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
}

/* b) centred white serif title */
body .owl-page-hero-images .owl-slide-content-only-heading,
body .owl-page-header .owl-slide-content-only-heading {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
body .owl-page-hero-images .owl-slide-heading,
body .owl-page-header .owl-slide-heading,
body .owl-page-hero-images .owl-slide-content-only-heading * {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: clamp(30px, 4vw, 56px) !important;
    line-height: 1.15 !important;
    color: #FFFFFF !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    text-align: center !important;
    margin: 0 !important;
}

/* c) ONE row of buttons — flatten the three wrappers */
body .owl-page-header-grid-btns {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}
body .owl-page-header-grid-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
body .owl-page-header-grid-first,
body .owl-page-header-grid-second,
body .owl-page-header-grid-third {
    display: contents !important;
}

/* d) identical gold pills — overrides every per-instance colour class */
body .owl-page-header-grid-btn,
body a.owl-page-header-grid-btn-1, body a.owl-page-header-grid-btn-2,
body a.owl-page-header-grid-btn-3, body a.owl-page-header-grid-btn-4 {
    background: #EDB80F !important;
    background-color: #EDB80F !important;
    color: #2E2F33 !important;
    font-family: 'Avenir Next LT Pro' !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.36px !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex: 0 1 auto !important;
    max-width: 100% !important;
    position: static !important;
    overflow: visible !important;
    white-space: normal !important;
}
body .owl-page-header-grid-btn:hover { background: #D9A80B !important; color: #2E2F33 !important; }

/* the decorative span behind each label must not paint its own colour */
body .owl-page-header-grid-btn-bg {
    background: transparent !important;
    display: none !important;
}

@media (max-width: 767px) {
    body .owl-page-header .owl-slide-content-area,
    body .owl-page-hero-images .owl-slide-content-area {
        padding: 28px 20px !important;
        gap: 20px !important;
    }
    body .owl-page-header-grid-inner { gap: 12px !important; }
    body .owl-page-header-grid-btn {
        font-size: 16px !important;
        padding: 12px 18px !important;
        flex: 1 1 100% !important;
    }
}


/* ==========================================================
   PAGE HERO — SCRIM, NOT A SOLID BAND  (05/08, corrected)
   ==========================================================
   The dark area in the reference was a placeholder for a missing photo,
   not a flat fill. The hero keeps its background image; a gradient scrim
   sits over it for contrast, with the title and buttons above that.

   NB: the hero image is a percentage-padding aspect box
   (`height: 0; padding-bottom: X%`). Nothing here touches height,
   padding or display on that element — flattening it has broken this
   module three times already on this project.
   ========================================================== */
body .owl-page-hero-images,
body .owl-page-header .owl-page-hero-images {
    position: relative !important;
    isolation: isolate;
}

/* the scrim — lighter at the top so the photo still reads, deepest
   behind the title and buttons */
body .owl-page-hero-images::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        180deg,
        rgba(46, 47, 51, 0.20) 0%,
        rgba(46, 47, 51, 0.45) 40%,
        rgba(46, 47, 51, 0.75) 100%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* content sits above the scrim */
body .owl-page-hero-images .owl-slide-content-area,
body .owl-page-hero-images .owl-page-header-grid-btns,
body .owl-page-hero-images .owl-slide-content,
body .owl-page-header .owl-slide-content-area,
body .owl-page-header .owl-page-header-grid-btns {
    position: relative !important;
    z-index: 2 !important;
}

/* the photo itself stays visible and below the scrim */
body .owl-page-hero-images img,
body .owl-page-hero-image img {
    position: relative !important;
    z-index: 0 !important;
}

/* a touch of shadow so white type holds up even on a bright frame */
body .owl-page-hero-images .owl-slide-heading,
body .owl-page-header .owl-slide-heading {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35) !important;
}


/* ==========================================================
   FOOTER ADDRESS -> GOOGLE MAPS  (05/08)
   Reads as body copy, not as a link, so the footer's visual
   rhythm is unchanged. Underline appears on hover/focus only.
   The two <span>s stay block-level so the address keeps its
   two-line setting.
   ========================================================== */
body .owl-footer-col-content a.owl-footer-address-link,
body .owl-footer-col-content a.owl-footer-contact-link {
    color: inherit !important;
    font: inherit !important;
    text-decoration: none !important;
    display: block !important;
    cursor: pointer;
    transition: opacity .15s ease;
}
body .owl-footer-col-content a.owl-footer-address-link span { display: block !important; }
body .owl-footer-col-content a.owl-footer-contact-link { display: inline !important; }
body .owl-footer-col-content a.owl-footer-address-link:hover,
body .owl-footer-col-content a.owl-footer-address-link:focus-visible,
body .owl-footer-col-content a.owl-footer-contact-link:hover,
body .owl-footer-col-content a.owl-footer-contact-link:focus-visible {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    opacity: .85;
}
body .owl-footer-col-content a.owl-footer-address-link:focus-visible,
body .owl-footer-col-content a.owl-footer-contact-link:focus-visible {
    outline: 2px solid #EDB80F;
    outline-offset: 3px;
}

/* ==========================================================
   NOTION WEBSITE QA — 18 AUG 2026
   Shopify items only. Desktop block first, then mobile.
   ========================================================== */

/* ----------------------------------------------------------
   QA-D8  /search — no padding, uncapped width
   Adds the 96px top/bottom breathing room and caps at 1440.
   Side padding on .container is left alone.
   ---------------------------------------------------------- */
body .search-page .container,
body .template-search .search-page .container {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ----------------------------------------------------------
   QA-D5  Product card headings — one root cause, several symptoms
   custom-hoc.css set .product-item .product-title to 40px with
   -webkit-line-clamp:2 and min-height:108px, and drew a yellow
   (#EFE969) 1px rule via .product-top-title::after.
   That single block produced three separate QA notes:
     - "product titles are too big"        (40px)
     - "remove yellow line under heading"  (::after #EFE969)
     - "headings cut off" / "headings missing"  (the clamp)
   ---------------------------------------------------------- */
body .product-item .product-top-title::after {
    content: none !important;
    display: none !important;
}
body .product-item .product-title,
body .product-collection .product-top-title .product-title,
body .product-collection .product-top-title .product-title span {
    font-size: 24px !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}
body .product-item .product-top-title { margin-bottom: 16px !important; }

/* "You may also like" heading -> standard landing H1 */
body .related-products .widget-title .box-title .title,
body .block-product-recommendations .widget-title .box-title .title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: clamp(30px, 4vw, 56px) !important;
    line-height: 1.15 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body .related-products .widget-title .box-title { margin-bottom: 32px !important; }

/* ----------------------------------------------------------
   QA-D3/M7/M10/M14  Copy cropped by line-clamps
   event-custom-style.css clamps grid item titles to ONE line
   with a fixed 48px min-height, and descriptions to two.
   That is what crops headings on eat-drink, wellness,
   trading-hours and the event grids.
   ---------------------------------------------------------- */
body .owl-mc-grid-item-title,
body .owl-mc-grid-item-des {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    min-height: 0 !important;
    max-height: none !important;
}
/* .owl-grid-banner-title is the label WRAPPER, not text: it is the
   absolutely-positioned flex box that CENTRES the navy label over
   the card image. Forcing display:block here un-centred every
   gallery label sitewide (labels jumped to top-left) — that was a
   19/08 regression. It only needs the clamp lifted, keeping flex. */
body .owl-grid-banner-title {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* ----------------------------------------------------------
   QA-D3  Header -> body copy spacing was tight
   ---------------------------------------------------------- */
body .owl-image-content-title { margin-bottom: 24px !important; }
body .owl-image-content-des { margin-top: 24px !important; }

/* ==========================================================
   MOBILE  (<=767px)
   ========================================================== */
@media (max-width: 767px) {

    /* QA-M3  Instagram feed squished — span full width */
    body .owl-instagram-outer,
    body .owl-instagram-inner,
    body .owl-instagram-content { padding-left: 0 !important; padding-right: 0 !important; }
    body .owl-instagram-grid,
    body .owl-instagram-grid #insta-feed {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body .owl-instagram-grid #insta-feed img { width: 100% !important; height: auto !important; }

    /* QA-M8  Grid banners wrap two-up instead of stacking */
    body .owl-grid-banners {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
    body .owl-grid-banners .owl-grid-banner-item {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        flex: none !important;
    }

    /* QA-M6  Landing image height 550px */
    body:not(.template-index) .owl-page-header,
    body:not(.template-index) .owl-page-hero-images {
        min-height: 550px !important;
    }
    body:not(.template-index) .owl-page-header img,
    body:not(.template-index) .owl-page-hero-images img {
        min-height: 550px !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* ----------------------------------------------------------
   QA-D4  Booking module (marina-contact-form, on-water-hire)
   Heading was running at the section's own 60px slider with the
   wrong family; inputs were set as high as 32px per instance.
   Input sizes are now 18 in the templates; the heading is pulled
   onto the same standard as every other section heading here.
   ---------------------------------------------------------- */
body .owl-booking-outer .owl-booking-title,
body .owl-booking-sections .owl-booking-title,
body .owl-booking-sections h2.owl-booking-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    font-size: clamp(30px, 4vw, 56px) !important;
    line-height: 1.15 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    background: transparent !important;
}
body #bookingFormWrapper .form-group input,
body #bookingFormWrapper .form-group select,
body #bookingFormWrapper .form-group textarea,
body .owl-booking-inner input,
body .owl-booking-inner select,
body .owl-booking-inner textarea {
    font-family: 'Avenir Next LT Pro', sans-serif !important;
    font-size: 18px !important;
    line-height: 24px !important;
}

/* ----------------------------------------------------------
   QA-D2  Side cart tab — navy -> light blue
   Matches #329EC7, the light blue already used on the product
   buttons in this same module, so the WordPress store and the
   Shopify site read the same.
   ---------------------------------------------------------- */
body .section_icon_cart {
    background-color: #329EC7 !important;
}
body .section_icon_cart .box_icon_cart,
body .section_icon_cart a { color: #FFFFFF !important; }

/* ----------------------------------------------------------
   QA-M1  Mobile: grid-item buttons full width and centred
   Follows the /blogs/all pattern — one full-width button per
   row, label centred on both axes.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    body .owl-mc-grid-item-btns {
        display: flex !important;
        width: 100% !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    body .owl-mc-grid-item-btns > a {
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0 16px !important;
        height: 48px !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   HEADER: LOGO/NAV OVERLAP 1200-1350  (19/08)
   CAUSE: owl.css sets `grid-template-columns: 1fr auto 1fr` on
   .header-panel-bt. The centre column is `auto`, but the logo is
   position:absolute so it contributes ZERO in-flow width — the
   grid gave it 100px for a 193px logo, so it overhung ~46px each
   side onto the nav. Not a spacing problem.
   FIX: reserve real grid width for the logo. Width is derived from
   the height variable (box logo is 193x132 => ratio 1.4621), so it
   stays correct if --rmyc-logo-h ever changes.
   Logo size deliberately NOT reduced (client instruction); the
   room is found from spacing instead.
   ========================================================== */
@media (min-width: 1250px) {
    .owl-header .wrapper-header-bt .header-panel-bt .header-center {
        min-width: calc(var(--rmyc-logo-h) * 1.4621) !important;
    }
    body .owl-header .wrapper-header-bt .header-panel-bt {
        gap: 8px !important;
    }
}

/* Tighten nav spacing only in the band where room is scarce.
   NB the `.site-header` compound is required: matat-base already
   sets gap:16px via a SIX-class selector, which beats a five-class
   override even with !important. Store gap is my own N8 rule
   (48px, inline in <body>) and needs out-specifying the same way. */
@media (min-width: 1250px) and (max-width: 1370px) {
    body .site-header.owl-header .wrapper-header-bt .header-panel-bt .owl-header-right .owl-header-right-nav {
        margin-right: 8px !important;
        gap: 12px !important;
    }
    body .site-header.owl-header .wrapper-header-bt .header-panel-bt .col-left .wrapper-navigation .main-menu .mb-area > .nav-bar > .site-nav {
        gap: 8px !important;
    }
}

/* ==========================================================
   STORE BUTTON ICON  (19/08)
   Client: "looks like there is a black stroke making the line
   weight wider". Correct — the SVG path was already the right
   shape and fill (#2E2F33); a CSS `stroke` + 1px stroke-width was
   painting an outline over it. The supplied replacement file is
   byte-identical in path data, so swapping the file would have
   changed nothing. Removing the stroke is the actual fix.
   ========================================================== */
body .site-header.owl-header .owl-header-btn a svg,
body .site-header.owl-header .owl-header-btn a svg * {
    stroke: none !important;
}

/* ==========================================================
   QA BATCH 2  (19/08) — remaining Notion "Website QA" items
   ========================================================== */

/* QA-M12: Marina club co-ordinates illegible — white text sat on
   the module's grey (#F1F1F1). Client: navy background. */
body .owl-map-inner {
    background: #17305D !important;
}

/* QA-M11: stray headline style (owl-image-block content) sits
   left-aligned on mobile while everything else centres. Mobile
   stacks the image-block, so centring is safe there. Desktop
   layouts (text beside image) untouched. */
@media (max-width: 767px) {
    body .owl-image-blocks-outer .owl-image-content {
        align-items: center !important;
        text-align: center !important;
    }
    body .owl-image-blocks-outer .owl-image-content .owl-image-content-title {
        text-align: center !important;
    }
}

/* QA-D5: page-lead headings ("H1 is incorrect style").
   Pages built from owl-main-page-content open with an
   .owl-mc-sub-title carrying per-section sizes (50px/400 on
   on-water-hire) instead of the brand H1 (Cormorant 500 48/60,
   35 under 1250, 24 under 767). Applies to the sub-title in the
   FIRST content section only — either the very first section, or
   the one straight after a hero — so genuine sub-headings deeper
   into a page keep their own scale. */
:is(.main-content > .shopify-section:first-child,
    .main-content > .shopify-section.owl-page-hero-sections:first-child + .shopify-section)
  .owl-mc-sub-title {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 500 !important;
    font-size: 48px !important;
    line-height: 1.15 !important;
}
/* marina-contact-form: the hero title is an h4 ("CONTACT THE
   MARINA", 40px/400) — same treatment, colour untouched. */
.main-content > .shopify-section:first-child .owl-booking-outer h4.font-cormorant {
    font-size: 48px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
}
@media (max-width: 1249.98px) {
    :is(.main-content > .shopify-section:first-child,
        .main-content > .shopify-section.owl-page-hero-sections:first-child + .shopify-section)
      .owl-mc-sub-title,
    .main-content > .shopify-section:first-child .owl-booking-outer h4.font-cormorant {
        font-size: 35px !important;
    }
}
@media (max-width: 767px) {
    :is(.main-content > .shopify-section:first-child,
        .main-content > .shopify-section.owl-page-hero-sections:first-child + .shopify-section)
      .owl-mc-sub-title,
    .main-content > .shopify-section:first-child .owl-booking-outer h4.font-cormorant {
        font-size: 24px !important;
    }
}

/* QA-D5b: "Fields are huge" — booking/contact form inputs carried
   padding 24px 36px (72px tall at 18px type). */
body .owl-booking-outer form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
body .owl-booking-outer form textarea,
body .owl-booking-outer form select {
    padding: 12px 16px !important;
}

/* QA-M5: eat-drink mobile — navy label boxes behind gallery card
   names are twice the height they should be (72px for one line of
   18px). Padding halved on mobile only; desktop 12/24 kept. */
@media (max-width: 767px) {
    body .owl-grid-banner-title-box {
        padding: 6px 12px !important;
    }
}

/* QA-M9: wellness Strength/Pilates/Yoga titles — 16px/400 Avenir
   on mobile vs huge on desktop. Normalised to the H3 scale in the
   brand face. Scoped to .rmyc-plain-heading pages (wellness +
   marina sub-pages) so product-page uses keep their 24px from the
   earlier fix. Yellow rule under them removed (pseudo-element only
   — the element itself is deliberately NOT in this selector, per
   the collapsed-headings lesson). */
.rmyc-plain-heading .product-top-title {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 500 !important;
    font-size: 32px !important;
    line-height: 40px !important;
}
@media (max-width: 767px) {
    .rmyc-plain-heading .product-top-title {
        font-size: 24px !important;
        line-height: 32px !important;
    }
}
.rmyc-plain-heading .product-top-title::after,
.rmyc-plain-heading .product-top-title::before {
    display: none !important;
    content: none !important;
}

/* QA-M4: mobile submenu title overlapped the back arrow — the
   theme absolutely positions .icon-dropdown at left:20px while the
   title text starts at the same 20px padding. Arrow back in flow.
   MUST stay inside the mobile band: desktop dropdowns reuse the
   same .sub-menu-mobile markup and hide .menu-mb-title via a
   min-width:1250 display:none — an unscoped display:flex here
   resurrected the back rows inside desktop dropdowns (23/08). */
@media (max-width: 1249.98px) {
    body .menu-mb-title {
        display: flex !important;
        align-items: center !important;
    }
    body .menu-mb-title .icon-dropdown {
        position: static !important;
        left: auto !important;
        display: inline-flex !important;
        margin-right: 10px !important;
    }
}
/* QA-M4b: close (X) in brand aqua */
body a.close-menu-mb .icon-line,
body a.close-menu-mb .icon-line::before,
body a.close-menu-mb .icon-line::after {
    background-color: #319EC5 !important;
}

/* QA-M9 (cont): wellness page heading scale, measured at 1440:
   16/24/36/40/48/50px across one page. Normalised to brand scale,
   scoped to the page body id:
   - section leads (.owl-mc-sub-title, e.g. "Additional Services"
     50px) -> H1 48/500 (35 / 24 at the usual breakpoints via the
     first-section rule pattern)
   - grid item titles (Sauna / Allied Health / Massage, 36px)
     -> H3 24/32 like grid items on the rest of the site */
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-sub-title {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 500 !important;
    font-size: 48px !important;
    line-height: 1.15 !important;
}
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-grid-item-title {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 32px !important;
}
@media (max-width: 1249.98px) {
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-sub-title { font-size: 35px !important; }
}
@media (max-width: 767px) {
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-sub-title { font-size: 24px !important; }
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-grid-item-title { font-size: 20px !important; line-height: 28px !important; }
}

/* ==========================================================
   QA BATCH 3 — WELLNESS PAGE  (19/08, from client Figma
   screenshots node 308-348; annotations pending)
   ========================================================== */

/* W1: Strength/Pilates/Yoga "FIND OUT MORE" render as plain .btn
   with the pre-rebrand aqua (#329EC7) while every other content
   CTA is gold. Scoped to the page. */
:is(#wellness-centre-main-page, #eat-amp-drink) .main-content a.btn,
:is(#wellness-centre-main-page, #eat-amp-drink) .main-content .btn {
    background: #EDB80F !important;
    color: #2E2F33 !important;
}

/* W2: descriptions truncated ("includes sau…") —
   .product-bottom_description carries -webkit-line-clamp:5.
   Text element only; container not touched. */
:is(#wellness-centre-main-page, #eat-amp-drink) .product-bottom_description {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
}

/* W3: "Your membership at your fingertips" clipped both sides on
   mobile — .owl-image-content-title held at 48px by section vars,
   box grew to 698px in a 390px viewport. */
@media (max-width: 767px) {
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-image-content-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
    }
}

/* W4: hero band buttons uneven widths (212/186/154/342) — same
   full-width stacked treatment the client approved from /blogs/all.
   Sitewide on mobile so on-water-hire etc. match too. */
@media (max-width: 767px) {
    body .owl-page-header-grid-btns,
    body .owl-page-header-grid-inner,
    body .owl-page-header-grid-first,
    body .owl-page-header-grid-second {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* NB: must out-specify the sitewide shape rule
       `body a[class*="btn"]:not(...):not(...):not(...):not(.slick-arrow)`
       (four :not()s = 0,5,1). Same :not chain, plus the wrapper class. */
    body .owl-page-header-grid-btns a[class*="btn"]:not([class*="btns"]):not([class*="arrow"]):not([class*="close"]):not([class*="nav-btn"]):not(.slick-arrow),
    body .owl-page-header-grid-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: calc(100% - 48px) !important;
        max-width: none !important;
        margin: 0 24px 12px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}

/* W5: instagram feed tiny (107px thumbs) — this page uses the
   instafeed-new-layout markup, not the owl-instagram markup the
   homepage fix targeted. 2-up full-width grid on mobile. */
@media (max-width: 767px) {
    body .instafeed-new-layout-container {
        grid-column: 1 / -1 !important;   /* the container sits in a track of
                                             an unnamed grid inside
                                             .owl-instagram-grid - span it */
        width: 100% !important;
        max-width: 100% !important;
    }
    body .instafeed-new-layout-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body .instafeed-new-layout-item {
        width: 100% !important;
        max-width: 100% !important;
    }
    body .instafeed-new-layout-item img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ==========================================================
   QA BATCH 4 — WELLNESS, from client Figma annotations
   (node 309-733, notes placed beside each screenshot)  19/08
   ========================================================== */

/* N754 -> GLOBAL 23/08 ("all landing images are missing from
   pages"): every owl-page-hero-image is a padding-bottom aspect
   box whose img renders 0px tall without positioning — wellness,
   eat-drink, marina pages, blog banner all share the markup.
   Absolute-fill the img inside the padded box sitewide; give the
   box the full 550 on mobile. */
body .owl-page-hero-image {
    position: relative !important;
}
body .owl-page-hero-image img,
body .owl-page-hero-images > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
@media (max-width: 767px) {
    body .owl-page-hero-image {
        height: 550px !important;
        padding-bottom: 0 !important;
    }
}
/* Client 23/08 (berthing-moorings screenshot): landing images to
   450px on desktop — the aspect box gave ~648 at 1440. Wellness
   and Eat & Drink keep their approved full-height overlay heroes. */
@media (min-width: 768px) {
    body:not(#wellness-centre-main-page):not(#eat-amp-drink) .owl-page-hero-image {
        height: 450px !important;
        padding-bottom: 0 !important;
    }
}

/* N755a: header sticky is handled by the theme's own JS mechanism
   (data-sticky-pc / data-sticky-mb) now that $.fn.sticky exists —
   see jquery.sticky.js shim. CSS position:sticky is NOT used: body
   carries overflow-x:clip, which disables sticky descendants, and
   an !important sticky here would override the shim's inline
   position:fixed. Support styles only: */
.is-rmyc-sticky {
    background: #fff;
    z-index: 1000 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
/* N755b (menu button dead on wellness) is fixed in halo.js:
   an earlier ready-callback exception aborted jQuery's ready queue
   before the burger binding ran. A window-load self-heal now
   re-runs the init when the binding is missing. */

/* N756: drawer close control — kill the red block, form a proper
   aqua X (base line transparent, pseudos rotated). Scoped to the
   close anchor only; the hamburger keeps its three bars. */
body a.close-menu-mb,
body .icon-nav.close-menu-mb {
    background: transparent !important;
}
body a.close-menu-mb .icon-line {
    background-color: transparent !important;
}
body a.close-menu-mb .icon-line::before {
    background-color: #319EC5 !important;
    transform: rotate(45deg) !important;
    top: 0 !important;
}
body a.close-menu-mb .icon-line::after {
    background-color: #319EC5 !important;
    transform: rotate(-45deg) !important;
    top: 0 !important;
}

/* N751/749/747: Strength / Pilates / Yoga are H1s (not 32px) */
.rmyc-plain-heading .product-top-title {
    font-size: 48px !important;
    line-height: 1.15 !important;
}
@media (max-width: 1249.98px) {
    .rmyc-plain-heading .product-top-title { font-size: 35px !important; }
}
@media (max-width: 767px) {
    .rmyc-plain-heading .product-top-title { font-size: 24px !important; line-height: 1.25 !important; }
}

/* N744: Sauna / Allied Health / Massage & Beauty are H2s */
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-grid-item-title {
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 500 !important;
}
@media (max-width: 767px) {
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-grid-item-title { font-size: 24px !important; line-height: 32px !important; }
}

/* N752/741/746/748/750: body copy to the site standard
   (Avenir Next LT Pro 400 18/24 #2E2F33) */
:is(#wellness-centre-main-page, #eat-amp-drink) .product-bottom_description,
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-des,
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-rich-text-des,
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-image-content-des,
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-grid-item-des {
    font-family: 'Avenir Next LT Pro' !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    color: #2E2F33 !important;
}

/* N740: MindBody copy running edge to edge — side margins */
@media (max-width: 767px) {
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-image-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* N743 + R862 (23/08 "reduce spacing"): the theme's
   .owl-mc-grid-thumb is a SQUARE aspect box (padding-bottom:100%)
   with an absolute cover img. N743's height:auto shortened the img
   to natural ratio but left the square box — a big empty band sat
   between image and description. Let the thumb size itself from
   the image instead. */
#wellness-centre-main-page .owl-mc-grid-thumb {
    height: auto !important;
    padding-bottom: 0 !important;
}
#wellness-centre-main-page .owl-mc-grid-thumb img,
#wellness-centre-main-page .owl-mc-grid-item img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
}
/* EAT & DRINK grid images (Providore / Cove / Pizzeria / Catering):
   client 24/08 — uniform 1:1, image fills. The theme's own square
   aspect box + cover, re-asserted (source images vary in ratio). */
#eat-amp-drink .owl-mc-grid-thumb {
    height: 0 !important;
    padding-bottom: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}
#eat-amp-drink .owl-mc-grid-thumb img,
#eat-amp-drink .owl-mc-grid-item img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* N738/736: media inside content blocks centred on mobile */
@media (max-width: 767px) {
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-image-blocks-outer img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================
   QA BATCH 5 — WELLNESS DESKTOP (Figma node 310-837)  19/08
   Measured at 1440 before writing.
   ========================================================== */

/* D764: hero buttons over the image, centred, like other pages.
   The grey .owl-slide-content-area band (308px) sat BELOW the
   photo; overlay it instead. Desktop only — mobile keeps the
   stacked band from batch 4. */
/* SITEWIDE (client 24/08 — "grey box under the image, throughout
   the entire theme; the image needs to fill the space"): the hero
   title band (.owl-slide-content-area, grey line-background) sat
   BELOW the image in flow. Overlay it on the image everywhere —
   titles centre over the photo, empty bands vanish, the image
   fills the block. The hero-menu toolbar is separately absolute-
   anchored to the hero's bottom edge and is unaffected. */
body .owl-page-hero-images {
    position: relative !important;
}
body .owl-page-hero-images .owl-slide-content-area {
    position: absolute !important;
    inset: 0 !important;
    background: transparent !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 4 !important;
    padding: 0 24px !important;
}

/* Client: "add 96px spacing above about the wellness studio"
   (was 53). D772: "too much space" between the About copy and
   Strength (was 126 + 99 section pad) — tightened. */
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-page-hero-sections + .shopify-section > div:first-child,
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-page-hero-sections + .shopify-section .owl-main-content-outer {
    padding-top: 96px !important;
    padding-bottom: 40px !important;
}

/* D781/D826 + R856 (23/08): text columns capped at 600px —
   widened from the after-hero section to the whole page after the
   client flagged the MindBody rich-text copy running full width.
   Grid/product descriptions keep their own column widths
   (.owl-mc-grid-item-des / .product-bottom_description excluded). */
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-des,
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-rich-text-des,
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-image-content-des {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* D793: gap between the membership items and "Additional Services"
   was 297px — reduce to ~100 (products section keeps 30, the
   Additional section keeps its 70 top pad). */
:is(#wellness-centre-main-page, #eat-amp-drink) .main-content .shopify-section:has(.product-top-title) {
    padding-bottom: 0 !important;
}
/* the 297px gap dissected at 1440: 60px item tail + a 167px EMPTY
   .owl-mc-gallery div + 70px outer padding + 70px next-section top.
   Gallery removed (container is empty; nothing anchors to it),
   outer padding zeroed, next section top pad 40 -> ~100px total. */
:is(#wellness-centre-main-page, #eat-amp-drink) .main-content .shopify-section:has(.product-top-title) .owl-mc-gallery {
    display: none !important;
}
:is(#wellness-centre-main-page, #eat-amp-drink) .main-content .shopify-section:has(.product-top-title) .owl-main-content-outer {
    padding-bottom: 0 !important;
}
:is(#wellness-centre-main-page, #eat-amp-drink) .main-content .shopify-section:has(.owl-mc-grid-item-title) .owl-main-content-outer {
    padding-top: 40px !important;
}

/* D799: more padding between "Additional Services" and the
   Sauna / Allied Health columns */
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-sub-title + * ,
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-mc-grid-items {
    margin-top: 0;
}
:is(#wellness-centre-main-page, #eat-amp-drink) .main-content .shopify-section .owl-mc-sub-title {
    margin-bottom: 48px !important;
}

/* ==========================================================
   QA BATCH 6 — 23/08. Wellness round 2 (Figma 315-887), the
   Eat & Drink port rides on the :is() rescope above, plus four
   sitewide items reported the same day.
   ========================================================== */

/* R849: "membership at your fingertips" title clipped on DESKTOP
   too (W3 only fixed mobile) — force wrapping at every width.
   min-width:0 is the load-bearing line: the "title box must never
   be narrower than its text" rule (~L3145) puts min-width:
   max-content !important on every white owl h4/h2, and min-width
   BEATS max-width — without this the box can never shrink to
   wrap. Verified at 1160: 698px one-liner -> 468px two lines. */
:is(#wellness-centre-main-page, #eat-amp-drink) .owl-image-content-title {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

/* R869: grid item titles (Sauna / Allied Health / Massage &
   Beauty) centred like their descriptions. */
#wellness-centre-main-page .owl-mc-grid-item-title {
    text-align: center !important;
}

/* R885: Strength / Pilates / Yoga — the a.product-title INSIDE
   .product-top-title carries its own small size, so the earlier
   48px on the wrapper never reached it. Match the Sauna row
   (32/40, 24/32 mobile). */
:is(#wellness-centre-main-page, #eat-amp-drink) .product-item .product-title {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 500 !important;
    font-size: 32px !important;
    line-height: 40px !important;
}
@media (max-width: 767px) {
    :is(#wellness-centre-main-page, #eat-amp-drink) .product-item .product-title {
        font-size: 24px !important;
        line-height: 32px !important;
    }
}

/* SITEWIDE: page-content H1s (h1.owl-mc-title — "Marine Servicing
   & Sales" etc. on every marina-sub/main-page template) rendered
   ~18px; client: "increase to the H1 size across all pages".
   Element-qualified: span.owl-mc-title is the small rich-text
   eyebrow ("MindBody App") and must NOT grow.
   The class is DOUBLED for specificity (0,2,x): custom-font-size
   pins `.owl-mc-title.font_mainpage_*` at the section var
   (50px) with !important, which out-ranked the single-class form. */
body h1.owl-mc-title.owl-mc-title {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 500 !important;
    font-size: 48px !important;
    line-height: 1.15 !important;
}
@media (max-width: 1249.98px) {
    body h1.owl-mc-title.owl-mc-title { font-size: 35px !important; }
}
@media (max-width: 767px) {
    body h1.owl-mc-title.owl-mc-title { font-size: 24px !important; line-height: 1.25 !important; }
}

/* SITEWIDE: the navy owl-center-title bar ("CONTACT THE MARINA",
   "GET IN TOUCH") hugs its text — client: keep the style, add
   margin around the text, sentence case. The coloured DIV was
   display:inline, so vertical padding painted but could not grow
   the box (h4 overflowed the 40px strip). inline-block + h4
   padding = box wraps the padded text (verified 72px tall on
   berthing-moorings). Titles are STORED all-caps, so sentence
   case is lowercase + ::first-letter. */
body .owl-center-title[class*="owl-bg-color"]:not([class*="white"]) {
    display: inline-block !important;
    height: auto !important;
    padding: 0 !important;
    /* client 24/08: bar sat flush on the container/screen edge —
       24px side margins align it with the content gutter (equal
       margins keep centred instances centred). */
    margin-left: 24px !important;
    margin-right: 24px !important;
}
body .owl-center-title[class*="owl-bg-color"]:not([class*="white"]) h4 {
    padding: 12px 32px !important;
    text-transform: lowercase !important;
}
body .owl-center-title[class*="owl-bg-color"]:not([class*="white"]) h4::first-letter {
    text-transform: uppercase !important;
}

/* ==========================================================
   QA BATCH 7 — WELLNESS HERO REWORK (Figma 248-696)  24/08
   "Wellness Studio" as an H1 over the image, one row of short
   gold CTAs (Login / Timetable / Join — reworded in the template
   settings). The 05/08 hero-rebuild block already renders the
   flex row on desktop; here: btn-1 becomes the heading, and the
   W4 mobile full-width stacking is reversed for this page only
   (id specificity beats W4's body-scoped rules).
   ========================================================== */
:is(#wellness-centre-main-page, #eat-amp-drink) a.owl-page-header-grid-btn-1 {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
    font-family: 'Cormorant Garamond' !important;
    font-weight: 500 !important;
    font-size: 48px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 0 16px !important;   /* + the row gap 16 = 32 to the CTAs */
    text-align: center !important;
    pointer-events: none !important; /* url is empty — it is a heading now */
}
:is(#wellness-centre-main-page, #eat-amp-drink) a.owl-page-header-grid-btn-1 .owl-page-header-grid-btn-bg {
    display: none !important;
}
@media (max-width: 767px) {
    :is(#wellness-centre-main-page, #eat-amp-drink) a.owl-page-header-grid-btn-1 {
        font-size: 35px !important;
    }
    /* undo W4's stacked full-width treatment on this page: the
       short CTAs sit in one centred row like the design */
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-page-header-grid-btns,
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-page-header-grid-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-page-header-grid-first,
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-page-header-grid-second,
    :is(#wellness-centre-main-page, #eat-amp-drink) .owl-page-header-grid-third {
        display: contents !important;
    }
    :is(#wellness-centre-main-page, #eat-amp-drink) a.owl-page-header-grid-btn-2,
    :is(#wellness-centre-main-page, #eat-amp-drink) a.owl-page-header-grid-btn-3,
    :is(#wellness-centre-main-page, #eat-amp-drink) a.owl-page-header-grid-btn-4 {
        display: inline-flex !important;
        width: auto !important;
        min-width: 100px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px 24px !important;
    }
}

/* SITEWIDE (client 24/08, tender-service): rte tables pasted with
   fixed inline cell widths (px) cannot shrink — the hours table
   was 561px wide on a 435px phone, right column clipped. Client
   chose horizontal scroll over squeezed columns: below 992px the
   table becomes its own scroll container and keeps its natural
   column widths. Desktop untouched. */
@media (max-width: 991.98px) {
    body .rte .hs-responsive,
    body .rte div:has(> table) {
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* SITEWIDE (client 24/08, blogs/all "Get in touch"): the
   "copy sits on the 1440 line" rules pad the text side by
   (100vw-1440)/2 — correct on FULL-BLEED image blocks whose text
   cell grows with the viewport, but on CONTAINED instances the
   cell is fixed (~696px), so on wide screens the padding crushed
   the copy to a sliver. Cap the padding against the cell's own
   width so at least 500px of text always survives; full-bleed
   cells are wide enough that the cap never engages (verified:
   home 280px unchanged, blogs 280 -> 132 at vw 2000). */
body .owl-image-blocks-inner.owl-image-blocks-left .owl-image-content,
body .owl-image-blocks-inner:not(.owl-image-blocks-right) .owl-image-content {
    padding-left: max(24px, min(calc((100vw - 1440px) / 2), calc(100% - 564px))) !important;
}
body .owl-image-blocks-inner.owl-image-blocks-right .owl-image-content {
    padding-right: max(24px, min(calc((100vw - 1440px) / 2), calc(100% - 564px))) !important;
}

/* ==========================================================
   QA BATCH 8 — CLIENT MOBILE QA  (Figma 323-560)  24/08
   31 annotations across his phone walkthrough; Shopify items
   here, WordPress items handled in the Customizer.
   ========================================================== */

/* M1 (@1293) — hairline above the menu bar: added then REMOVED
   same day at the client's request ("i dont like it"). */

/* M2 (@2078, @46610): mobile modules sat ~20px left of centre —
   the image-block text cell keeps the desktop 24/64 asymmetric
   padding on phones. Symmetric 24s below 768. */
@media (max-width: 767.98px) {
    body .owl-image-blocks-inner .owl-image-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* M3 (@22700, @25392 + marina "Boating Communities"): the
   image-block title fixes (min-width trap + H1 mobile size) were
   wellness-scoped — every page needs them. */
body .owl-image-content-title {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}
@media (max-width: 767.98px) {
    body .owl-image-content-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }
}

/* M4 (@7235, @27341): grid-banner labels centre on multi-line */
body .owl-grid-banner-title-box {
    text-align: center !important;
}

/* M5 (@14174): drawer close — navy box, white X (was bare aqua) */
body a.close-menu-mb,
body .icon-nav.close-menu-mb {
    background: #17305D !important;
    background-color: #17305D !important;
}
body a.close-menu-mb .icon-line::before,
body a.close-menu-mb .icon-line::after {
    background-color: #fff !important;
}
/* M5b v3 (25/08): v2's unconditional display:flex overrode the
   theme's hidden-when-closed state and left a rogue X floating on
   every page. The flex centring now only applies while the drawer
   is open (html.translate-overlay); closed state falls back to
   the theme's own display handling. */
html.translate-overlay a.close-menu-mb {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
body a.close-menu-mb .icon-line {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    width: 24px !important;
    height: 2px !important;
    flex: 0 0 auto !important;
}
body a.close-menu-mb .icon-line::before,
body a.close-menu-mb .icon-line::after {
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 24px !important;
    height: 2px !important;
}

/* M6 (@17556): owl-text-banner on mobile — the content block is
   absolutely centred in a 175px box it cannot fit, so the title
   spills above the banner and clips under the section above.
   Let the content size the banner; image absolute-fills behind. */
@media (max-width: 767.98px) {
    body .owl-text-banner-outer { height: auto !important; }
    body .owl-text-banner-inner {
        position: relative !important;
        height: auto !important;
        display: block !important;
    }
    body .owl-text-banner-thumb {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    body .owl-text-banner-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    body .owl-text-banner-content {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 32px 24px !important;
        text-align: center !important;
    }
    body .owl-text-banner-title,
    body .owl-text-banner-button {
        position: static !important;
        margin: 0 !important;
    }
}

/* M7 (@5220, @9860, @20262, @30256, @33197): mobile grid sections
   — ONE clean 24px gutter and a 360px content cap. Three nested
   insets stacked to 64px per side (inner 20 + outer margin 20 +
   main padding 20 → 123px thumbs); each layer is collapsed with
   the specificity its incumbent rule demanded (measured on the
   preview: grid 342px at x24, thumbs 163px squares). */
@media (max-width: 767.98px) {
    body .owl-main-content-inner.owl-main-content-inner.owl-main-content-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body .owl-main-content-outer .owl-mc-top {
        padding: 0 !important;
    }
    body .owl-main-content-outer .owl-mc-main-outer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }
    body .owl-main-content-outer .owl-mc-main {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body .owl-main-content-outer .owl-mc-grid,
    body .owl-main-content-outer .owl-mc-grid-items {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body .owl-mc-grid-items > .owl-mc-grid-item {
        flex: 1 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

/* M8 (@13027, @10463, @33780, @12588): the venue grid items on
   eat-drink — copy sits 48 under its image / 24 above what
   follows; buttons and cream labels run full width so nothing
   wraps ragged or overlaps the neighbouring column. */
@media (max-width: 767.98px) {
    #eat-amp-drink .owl-mc-grid-item-des {
        margin-top: 48px !important;
        margin-bottom: 24px !important;
    }
    #eat-amp-drink .owl-mc-grid-item-btns a,
    #eat-amp-drink .owl-mc-grid-item .btn {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 0 12px !important;
        box-sizing: border-box !important;
    }
    /* M9 (@4414): heading-to-grid space on phones */
    :is(#wellness-centre-main-page, #eat-amp-drink) .main-content .shopify-section .owl-mc-sub-title {
        margin-bottom: 24px !important;
    }
}

/* M10 (@35346, @38185, @40841, @41181): FAQ pages — the row
   layout/gutters/icon are fixed at the source (the section's own
   mobile <style> in faq-custom-page.liquid, which sits later in
   the document and outranks anything here). matat carries only
   the type scale: headings on the H1 scale, intro at body size. */
body .faq-page h1.owl-mc-grid-title,
body .faq-page h2.owl-mc-grid-item-title {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 500 !important;
    font-size: 48px !important;
    line-height: 1.15 !important;
}
@media (max-width: 1249.98px) {
    body .faq-page h1.owl-mc-grid-title,
    body .faq-page h2.owl-mc-grid-item-title { font-size: 35px !important; }
}
@media (max-width: 767.98px) {
    body .faq-page h1.owl-mc-grid-title,
    body .faq-page h2.owl-mc-grid-item-title { font-size: 24px !important; line-height: 1.25 !important; }
}
body .faq-page p.font-avenir-next-lt {
    font-size: 18px !important;
    line-height: 24px !important;
}

/* M11 (@42834): legal/policy pages start under the header */
body .shopify-policy__container {
    padding-top: 96px !important;
}

/* ==========================================================
   QA BATCH 9 — CLIENT PRE-LAUNCH FEEDBACK  25/08
   ========================================================== */

/* C1 (Melisse + Hayley: "Our Club pages have larger fonts").
   Measured on the qa24 preview at 1440: page copy inside
   .owl-mc-content .page-rte rendered 28px on a 24px line-height
   on about-the-club and careers-with-us, against the 18/24 used
   everywhere else. The existing normaliser was scoped to
   body.rmyc-plain-heading, and these pages are not in that list
   (theme.liquid rmyc_plainhead), so they kept the theme's own
   sizes. Normalise page rich-text sitewide instead — headings
   inside the block keep their own sizes. */
   NB the `.rte` in the selector is load-bearing: custom-font-size.css
   carries `.page-rte.rte p` (three classes) and loads after matat, so
   a two-class selector loses the tie even with !important. */
body .owl-mc-content .page-rte.rte p,
body .owl-mc-content .page-rte.rte li,
body .owl-mc-content .page-rte.rte div:not([class]),
body .owl-mc-content .page-rte.rte span:not(:is(h1,h2,h3,h4,h5,h6) span) {
    font-size: 18px !important;
    line-height: 24px !important;
}
/* C1b (25/08, client follow-up): belt-and-braces for the two pages
   they named. The copy and the heading are BOTH plain elements typed
   into the page rich text (a class-less div, and a bare h2), so they
   pick up whatever the section/theme sets rather than the brand
   scale. Everything in the block goes to 18/24 except headings and
   anything inside a heading; the in-content heading is then styled
   as the brand H1 — medium weight, no letter-spacing — which is what
   the client asked for. */
   NB two containers per page: the intro sits in .owl-mc-content, but
   the careers body blocks sit in .block-paragraph-content under
   .owl-mc-main — a selector requiring .owl-mc-content misses half the
   page. Both are listed, each with three classes so they outrank the
   section's own body-id rules. */
body#about-the-club .owl-mc-content .page-rte.rte *:not(:is(h1,h2,h3,h4,h5,h6)):not(:is(h1,h2,h3,h4,h5,h6) *),
body#about-the-club .owl-mc-main .page-rte.rte *:not(:is(h1,h2,h3,h4,h5,h6)):not(:is(h1,h2,h3,h4,h5,h6) *),
body#careers-with-us .owl-mc-content .page-rte.rte *:not(:is(h1,h2,h3,h4,h5,h6)):not(:is(h1,h2,h3,h4,h5,h6) *),
body#careers-with-us .owl-mc-main .page-rte.rte *:not(:is(h1,h2,h3,h4,h5,h6)):not(:is(h1,h2,h3,h4,h5,h6) *) {
    font-size: 18px !important;
    line-height: 24px !important;
}
body#about-the-club .owl-mc-content .page-rte :is(h1,h2),
body#about-the-club .owl-mc-content .page-rte :is(h1,h2) span,
body#about-the-club .owl-mc-main .page-rte.rte :is(h1,h2),
body#careers-with-us .owl-mc-content .page-rte :is(h1,h2),
body#careers-with-us .owl-mc-content .page-rte :is(h1,h2) span,
body#careers-with-us .owl-mc-main .page-rte.rte :is(h1,h2),
body#club-information .owl-mc-content .page-rte :is(h1,h2),
body#board-of-directors .owl-mc-content .page-rte :is(h1,h2) {
    font-family: 'Cormorant Garamond' !important;
    font-weight: 500 !important;
    font-size: 48px !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
}
@media (max-width: 1249.98px) {
    body#about-the-club .owl-mc-content .page-rte :is(h1,h2),
    body#about-the-club .owl-mc-content .page-rte :is(h1,h2) span,
    body#careers-with-us .owl-mc-content .page-rte :is(h1,h2),
    body#careers-with-us .owl-mc-content .page-rte :is(h1,h2) span,
    body#club-information .owl-mc-content .page-rte :is(h1,h2),
    body#board-of-directors .owl-mc-content .page-rte :is(h1,h2) {
        font-size: 35px !important;
    }
}
@media (max-width: 767px) {
    body#about-the-club .owl-mc-content .page-rte :is(h1,h2),
    body#about-the-club .owl-mc-content .page-rte :is(h1,h2) span,
    body#careers-with-us .owl-mc-content .page-rte :is(h1,h2),
    body#careers-with-us .owl-mc-content .page-rte :is(h1,h2) span,
    body#club-information .owl-mc-content .page-rte :is(h1,h2),
    body#board-of-directors .owl-mc-content .page-rte :is(h1,h2) {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }
}

/* The leadership/careers section (main-leadership-team.liquid) emits
   its own BODY-ID rules for this copy, which no class selector can
   outrank. Same weapon: body id + one more element. */
body#careers-with-us .owl-mc-content .page-rte p,
body#careers-with-us .owl-mc-content .page-rte p span,
body#careers-with-us .owl-mc-content .page-rte div,
body#board-of-directors .owl-mc-content .page-rte p,
body#board-of-directors .owl-mc-content .page-rte div,
body#board-of-directors .owl-mc-content .page-rte div span,
body#the-leadership-team .owl-mc-content .page-rte p,
body#the-leadership-team .owl-mc-content .page-rte p span {
    font-size: 18px !important;
    line-height: 24px !important;
}

/* C2 (Melisse: "the Instagram icon has the Facebook icon").
   Theme setting hero_menu_image_4 points at icon-fb.svg, the same
   file as the Facebook item. Swapped here to a matching white
   circle glyph (icons render 20x20 in this bar).
   SELF-DISABLING: keyed to img[src*="icon-fb"], so the moment the
   correct icon is picked in Theme settings this rule stops
   applying and the real file shows instead. */
body .owl-hero-menu-item[href*="instagram"] .owl-hero-menu-image img[src*="icon-fb"] {
    display: none !important;
}
body .owl-hero-menu-item[href*="instagram"] .owl-hero-menu-image:has(img[src*="icon-fb"]) {
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='10' fill='%23fff'/><rect x='5.4' y='5.4' width='9.2' height='9.2' rx='2.8' fill='none' stroke='%2317305D' stroke-width='1.5'/><circle cx='10' cy='10' r='2.4' fill='none' stroke='%2317305D' stroke-width='1.5'/><circle cx='13.2' cy='6.8' r='0.85' fill='%2317305D'/></svg>");
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}



/* C3 (client 25/08, eat-drink venue grid): columns weren't lining up
   and the copy was centred. Two causes — the section had
   "centre grid content" on (now off in the template), and the thumbs
   relied on a padding-bottom aspect box that the differing source
   ratios could defeat. aspect-ratio is the reliable version, and
   top-aligning the items puts every image on the same line.
   Providore's "Serving sandwiches, bowls cakes" was a button with no
   link — it's now description text (template), so it reads as copy. */
#eat-amp-drink .owl-mc-grid-items {
    align-items: start !important;
}
#eat-amp-drink .owl-mc-grid-item {
    align-self: start !important;
}
#eat-amp-drink .owl-mc-grid-item .owl-mc-grid-thumb {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    padding-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}
#eat-amp-drink .owl-mc-grid-item .owl-mc-grid-thumb img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
#eat-amp-drink .owl-mc-grid-item,
#eat-amp-drink .owl-mc-grid-item-title,
#eat-amp-drink .owl-mc-grid-item-des {
    text-align: left !important;
}
#eat-amp-drink .owl-mc-grid-item-btns {
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

/* SITEWIDE: Chrome autofill painted form fields white/yellow (the
   booking forms use #F3F3F3 boxes). The inset-shadow trick keeps
   the theme grey; the long transition stops the UA colour flash. */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body textarea:-webkit-autofill,
body select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #F3F3F3 inset !important;
    -webkit-text-fill-color: #2E2F33 !important;
    caret-color: #2E2F33;
    transition: background-color 99999s ease-in-out 0s;
}