/*
 * MubleStore template — bs2-bs5-bridge.css
 *
 * Adapted from canonical Serenity bs2-bs5-bridge.css per Skill 33 §Phase 3a.
 *
 * Strip decisions applied for MubleStore:
 *   - REMOVED: sticky-header #top-handler background rule (MubleStore's template.css
 *     defines its own #top-handler style — bridge rule would clobber the dark bar).
 *   - KEPT: testimonials, manufacturers/owl, megamenu hover-gap (MubleStore uses all)
 *
 * Additions per Skill 33 (locked from prior template runs):
 *   - !important flex/width/max-width on .row-fluid > .spanN + .row > .spanN
 *   - float:none / margin-left/right:0 on span children
 *   - list-style: none reset on ul.row-fluid + .menu-nav + #social-links + #log-panel
 *   -  so absolute header sizes to container
 *   - Mobile stacking of both .row-fluid and .row children at 100%
 */

/* ---------- BS2 .row-fluid → BS5 flex row ---------- */

/* .row-fluid layout defers to template.css — bridge only fills BS2 grid math for module content */

.row-fluid > [class*="span"] { box-sizing: border-box; min-height: 1px; }

.row-fluid > .span1   { flex: 0 0 8.333333% !important;  width: 8.333333% !important;  max-width: 8.333333% !important;  }
.row-fluid > .span2   { flex: 0 0 16.666667% !important; width: 16.666667% !important; max-width: 16.666667% !important; }
.row-fluid > .span3   { flex: 0 0 25% !important;        width: 25% !important;        max-width: 25% !important;        }
.row-fluid > .span4   { flex: 0 0 33.333333% !important; width: 33.333333% !important; max-width: 33.333333% !important; }
.row-fluid > .span5   { flex: 0 0 41.666667% !important; width: 41.666667% !important; max-width: 41.666667% !important; }
.row-fluid > .span6   { flex: 0 0 50% !important;        width: 50% !important;        max-width: 50% !important;        }
.row-fluid > .span7   { flex: 0 0 58.333333% !important; width: 58.333333% !important; max-width: 58.333333% !important; }
.row-fluid > .span8   { flex: 0 0 66.666667% !important; width: 66.666667% !important; max-width: 66.666667% !important; }
.row-fluid > .span9   { flex: 0 0 75% !important;        width: 75% !important;        max-width: 75% !important;        }
.row-fluid > .span10  { flex: 0 0 83.333333% !important; width: 83.333333% !important; max-width: 83.333333% !important; }
.row-fluid > .span11  { flex: 0 0 91.666667% !important; width: 91.666667% !important; max-width: 91.666667% !important; }
.row-fluid > .span12  { flex: 0 0 100% !important;       width: 100% !important;       max-width: 100% !important;       }

/* Same set for BS5 .row containers that have BS2 .span children (mixed markup) */

.row > [class*="span"] { box-sizing: border-box; min-height: 1px; }

.row > .span1   { flex: 0 0 8.333333% !important;  width: 8.333333% !important;  max-width: 8.333333% !important;  }
.row > .span2   { flex: 0 0 16.666667% !important; width: 16.666667% !important; max-width: 16.666667% !important; }
.row > .span3   { flex: 0 0 25% !important;        width: 25% !important;        max-width: 25% !important;        }
.row > .span4   { flex: 0 0 33.333333% !important; width: 33.333333% !important; max-width: 33.333333% !important; }
.row > .span5   { flex: 0 0 41.666667% !important; width: 41.666667% !important; max-width: 41.666667% !important; }
.row > .span6   { flex: 0 0 50% !important;        width: 50% !important;        max-width: 50% !important;        }
.row > .span7   { flex: 0 0 58.333333% !important; width: 58.333333% !important; max-width: 58.333333% !important; }
.row > .span8   { flex: 0 0 66.666667% !important; width: 66.666667% !important; max-width: 66.666667% !important; }
.row > .span9   { flex: 0 0 75% !important;        width: 75% !important;        max-width: 75% !important;        }
.row > .span10  { flex: 0 0 83.333333% !important; width: 83.333333% !important; max-width: 83.333333% !important; }
.row > .span11  { flex: 0 0 91.666667% !important; width: 91.666667% !important; max-width: 91.666667% !important; }
.row > .span12  { flex: 0 0 100% !important;       width: 100% !important;       max-width: 100% !important;       }

/* Standalone .spanN (outside .row-fluid / .row) — float-based BS2 behaviour, NO !important on width so above rules win */

.span1, .span2, .span3, .span4, .span5, .span6,
.span7, .span8, .span9, .span10, .span11, .span12 {
    box-sizing: border-box;
    float: left;
    min-height: 1px;
    margin-left: 20px;
}

.span1:first-child, .span2:first-child, .span3:first-child, .span4:first-child,
.span5:first-child, .span6:first-child, .span7:first-child, .span8:first-child,
.span9:first-child, .span10:first-child, .span11:first-child, .span12:first-child {
    margin-left: 0;
}

/* Standalone .spanN widths converted from BS2 fixed pixels to percentages of the parent
   (locked 2026-07-03 Tim mublestore footer regression). Fixed pixels (60/140/220px etc)
   were designed for the BS2 940 grid — theyre now too narrow when the parent container
   is 1170-1200px, leaving empty right-side space in the footer + other module rows. */
.span1  { width: 6.382979% !important;  min-width: 60px;  }
.span2  { width: 14.893617% !important; min-width: 140px; }
.span3  { width: 23.404255% !important; min-width: 220px; }
.span4  { width: 31.914894% !important; min-width: 300px; }
.span5  { width: 40.425532% !important; min-width: 380px; }
.span6  { width: 48.93617%  !important; min-width: 460px; }
.span7  { width: 57.446809% !important; min-width: 540px; }
.span8  { width: 65.957447% !important; min-width: 620px; }
.span9  { width: 74.468085% !important; min-width: 700px; }
.span10 { width: 82.978723% !important; min-width: 780px; }
.span11 { width: 91.489362% !important; min-width: 860px; }
.span12 { width: 100%       !important; }

/* ---------- BS2 .offset* ---------- */

.row-fluid > .offset1   { margin-left: 8.333333%  !important; }
.row-fluid > .offset2   { margin-left: 16.666667% !important; }
.row-fluid > .offset3   { margin-left: 25%        !important; }
.row-fluid > .offset4   { margin-left: 33.333333% !important; }
.row-fluid > .offset5   { margin-left: 41.666667% !important; }
.row-fluid > .offset6   { margin-left: 50%        !important; }
.row-fluid > .offset7   { margin-left: 58.333333% !important; }
.row-fluid > .offset8   { margin-left: 66.666667% !important; }
.row-fluid > .offset9   { margin-left: 75%        !important; }
.row-fluid > .offset10  { margin-left: 83.333333% !important; }
.row-fluid > .offset11  { margin-left: 91.666667% !important; }

/* ---------- BS2 .pull-left / .pull-right → BS5 equivalents ---------- */

.pull-left  { float: left  !important; }
.pull-right { float: right !important; }

/* ---------- BS2 .hidden-phone / .visible-phone (block context) ---------- */

@media (max-width: 767px) {
    .hidden-phone  { display: none !important; }
    .visible-phone { display: block !important; }
}
@media (min-width: 768px) {
    .visible-phone { display: none  !important; }
    .hidden-phone  { display: block !important; }
}

/* ---------- BS2 button aliases ---------- */

.btn-inverse  { background-color: #212529; border-color: #212529; color: #fff; }
.btn-inverse:hover  { background-color: #000; border-color: #000; color: #fff; }
.btn-default  { background-color: #6c757d; border-color: #6c757d; color: #fff; }
.btn-default:hover  { background-color: #5c636a; border-color: #5c636a; color: #fff; }

/* ---------- List-style reset — templates that lost BS2's implicit ul reset ---------- */

ul.row-fluid,
ul.vmproduct,
ul.sl-products,
ul.vmproduct-list,
.menu-nav,
.menu-nav ul,
#log-panel,
#quick-menu ul,
#social-links {
    list-style: none !important;
    padding-left: 0 !important;
}

/* ---------- Testimonials section (KEPT for MubleStore) ---------- */

#testimonials .container {
    min-height: auto;
}

#testimonials .container .row-fluid {
    padding: 50px 0px;
}

#testimonials {
    margin-bottom: 0;
}

.customers-box-handler .owl-theme .owl-controls .owl-pagination {
    margin-top: 10px;
}

/* ---------- Manufacturers/Partners carousel (KEPT for MubleStore) ---------- */

.man-main-handler {
    padding-bottom: 0;
}

.man-main-handler .owl-wrapper-outer {
    padding: 0;
}

.man-main-handler .owl-pagination,
.moduletable_manufacturers .owl-pagination {
    margin-top: 10px;
}

.moduletable_manufacturers .owl-item {
    padding: 0 10px;
}

.moduletable_manufacturers .owl-item img {
    max-height: 80px;
    width: auto;
    margin: 0 auto;
}

/* ---------- Cart product images — force aspect-ratio preservation ---------- */

span.cart-images img,
.cart-images img,
.cart-product-image img,
.cartpanel img.featuredProductImage,
td .cart-images img {
    width: 45px !important;
    height: auto !important;
    max-height: 60px !important;
    object-fit: contain;
}

.cartpanel .vm_cart_products img,
.cartpanel img {
    width: 45px !important;
    height: auto !important;
    max-height: 60px !important;
    object-fit: contain;
}

/* ---------- Related-products / featured / latest grid images ---------- */

.moduletable_products img.featuredProductImage,
.moduletable_products .pr-img-handler img,
.vmgroup_products img.featuredProductImage,
.vmgroup_products .pr-img-handler img,
.vmproduct .pr-img-handler img,
.pr-img-handler img.featuredProductImage,
.pr-img-handler img,
.show-pop-up-image img.featuredProductImage,
.featured-view img.featuredProductImage,
.latest-view img.featuredProductImage,
.topten-view img.featuredProductImage,
.recent-view img.featuredProductImage {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.vmproduct li img,
.vmgroup_products li img,
.moduletable_products li img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

.vmproduct .spacer .pr-img-handler {
    overflow: hidden;
}

/* ---------- Category-view images ---------- */

.category-view .category img,
.category-view .row-fluid .category img,
.category .spacer img,
.row-fluid .spacer img,
.category-view .spacer img,
.category-view .category .spacer h2 a img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.category-view .category .spacer,
.category .spacer {
    overflow: hidden;
}

/* ---------- Breadcrumbs — strip list bullets, inline display ---------- */

.breadcrumb,
ul.breadcrumb,
#breadcrumb-line .breadcrumb,
[role="navigation"] .breadcrumb {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.breadcrumb > li,
ul.breadcrumb > li {
    list-style: none !important;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.breadcrumb > li::before,
.breadcrumb > li::marker {
    content: none !important;
}

.breadcrumb .divider {
    display: inline-block;
    padding: 0 0.35em;
    white-space: normal;
}

/* ---------- UNIVERSAL image aspect-ratio defense ---------- */

img[width][height]:not([class*="icon"]):not([class*="socicon"]):not([class*="emoji"]):not([alt*="separator"]) {
    max-width: 100% !important;
    height: auto !important;
}

.main-image img,
.vm-additional-images img,
.vm-additional-images a img,
.vm-product-media-container img,
.vm-product-media-container a img,
.product-fields-list img,
.product-related-products img,
.product-field-display img,
.product-field-type-R img,
.virtuemart_view_productdetails img,
.productdetails-view img,
.product-container img,
.vmproduct img,
.vmgroup_products img,
.category-view img,
.featured-view img,
.latest-view img,
.topten-view img,
.recent-view img,
.related-products-view img,
.browse-view img,
.search-result-products img,
.com-content-article img,
.article-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* ---------- Megamenu hover-gap fix (KEPT for MubleStore) ---------- */

#megamenu-handler #mega-menu.menu-nav > li > ul.ul-container {
    transition: top 0s linear 500ms;
}

#megamenu-handler #mega-menu.menu-nav > li:hover > ul.ul-container,
#megamenu-handler #mega-menu.menu-nav > li.sfHover > ul.ul-container {
    /* CS-PATCH: dropdown-flush-to-li (locked 2026-07-05 John site) — was top: 90px
       which created a 70px visual gap between the visible menu text and the dropdown,
       and if the mouse crossed that gap too slowly the sfHover state timed out and
       the dropdown disappeared before it could be reached. top: 100% puts the
       dropdown immediately below the parent LI so there's no dead zone. */
    top: 100% !important;
    transition-delay: 0s;
}

/* ---------- Container + header positioning (Skill 33 mandatory) ---------- */



/* ---------- Mobile responsiveness — collapse multi-col rows on small screens ---------- */

@media (max-width: 767px) {
    .row-fluid {
        flex-direction: column;
    }
    .row-fluid > [class*="span"],
    .row > [class*="span"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    .span1, .span2, .span3, .span4, .span5, .span6,
    .span7, .span8, .span9, .span10, .span11, .span12 {
        width: 100% !important;
        margin-left: 0 !important;
    }
    header.span12.th-abs,
    header.span12 {
        position: relative;
    }
    .container.main-bg {
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Skill 33: after modernize-stack strips the legacy bootstrap.min.css (BS2),
   BS5 \.container defaults to max-width 1320px at desktop — but the donor
   was designed around the BS2 1170px container width. Restore it here so
   the header/menu/slideshow/product grid all align to their original box. */



@media (max-width: 767px) {
    
}


/* BS2 container restoration REMOVED — was fighting template.css positioning system */



/* ---------- BS2 container widths (minimal — cascade winner only via !important on max-width) ---------- */
/* Restores what BS2 bootstrap.min.css provided before modernize-stack Phase 5d stripped it.
   NO body-scoping (would kill template.css positioning), NO !important on other props (would break
   float layout for #site-name-handler). Just the max-width cap so BS5's default 1320 doesnt widen the box. */
/* Container: BS2-era 1170px fixed width at desktop (matches live donor). Full-width was
   the wrong direction 2026-07-03 — Tim wants the SET-WIDTH layout preserved for slideshow /
   top menu / category tiles / hot-offer / blog, with FULL-width overrides only on the
   Customer Review + Footer sections (added separately below). */
.container:not(.container-fluid):not(.container-lr):not(.tbm) { max-width: 1170px !important; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
@media (max-width: 1199px) { .container:not(.container-fluid):not(.container-lr):not(.tbm) { max-width: 940px !important; } }
@media (max-width: 991px)  { .container:not(.container-fluid):not(.container-lr):not(.tbm) { max-width: 724px !important; } }
@media (max-width: 767px)  { .container:not(.container-fluid):not(.container-lr):not(.tbm) { max-width: 100% !important; padding-left: 15px; padding-right: 15px; } }

/* ---------- CS-PATCH: mobile-content-padding (locked 2026-07-05 John site) ---------- */
/* Body content was rendering flush against the viewport edges (x:0) on mobile — no
   breathing room. Match the hamburger's 15px right offset on both sides of the body
   content. Applied INSIDE .global-container (not on .global-container itself, which
   would shift the fixed #top-handler descendant's static position and push the
   hamburger past the right edge). */
@media (max-width: 767px) {
    .global-container > *:not(#top-handler):not(header),
    .item-page,
    .items-leading,
    .items-row,
    .blog article,
    .article-info,
    main,
    #component-main,
    .component-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    /* Prevent double-padding when a .container is nested inside a padded wrapper */
    .global-container > * .container:not(.container-fluid):not(.container-lr):not(.tbm) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Guarantee the fixed header spans the full viewport regardless of any ancestor
       padding that might have shifted its "static position" origin. */
    #top-handler.fixed,
    header#top-handler {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* ---------- MOBILE VIEWPORT FIXES (locked 2026-07-03 mublestore) ---------- */
@media (max-width: 767px) {
    /* Site-name breathing room from the left edge */
    #site-name-handler,
    #sn-position,
    #sn-position .h1 {
        left: 15px !important;
        padding-left: 0 !important;
    }
    #sn-position .h1 {
        position: relative !important;
        margin-top: 15px !important;
    }

    /* Slideshow: use natural aspect ratio (1170x400 on this donor) so container matches
       image height instead of leaving 130px of whitespace below the image. */
    #ph-camera-slideshow,
    .camera_wrap,
    #slideshow-handler {
        aspect-ratio: 1170 / 400 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden;
    }
    /* Center the cl-handler icon strip (hamburger/user/pencil/search/cart) on mobile — its stuck to the right otherwise */
    #cl-handler {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        float: none !important;
    }
    #cl-handler > * {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        height: 40px !important;
        min-height: 40px !important;
        line-height: 40px !important;
        position: relative;
    }
    /* Every descendant inside a cl-handler child must be baseline-aligned to center */
    #cl-handler > * > *,
    #cl-handler > * > * > * {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
        line-height: 40px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Icons themselves — force vertical center by absolute-positioning at top:50% + translateY */
    #cl-handler i,
    #cl-handler svg,
    #cl-handler img {
        vertical-align: middle !important;
        display: inline-block !important;
        line-height: 1 !important;
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        font-size: 18px !important;
    }
    /* Kill any :before / :after positioning offsets that push icons off-center */
    #cl-handler *::before,
    #cl-handler *::after {
        vertical-align: middle !important;
    }

    /* Force every icon inside cl-handler to visually center in a 40px box regardless of intrinsic offset */
    #cl-handler > * {
        line-height: 40px !important;
    }
    #cl-handler > * > * {
        line-height: 40px !important;
    }
    #cl-handler > * i,
    #cl-handler > * > * i,
    #cl-handler > * > * > * i {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        vertical-align: middle !important;
        line-height: 40px !important;
        font-size: 18px !important;
        display: inline-block !important;
        margin: 0 !important;
    }
    /* Alignment via flex on each child — grid was expanding search-bar unintentionally */
    #cl-handler > * {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .camera_wrap .camera_src img,
    .camera_wrap img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }


    /* Camera.js target dims collapse on mobile (60px) — force them to fill the container */
    .camera_wrap, .camera_target, .cameraContent, .camera_slide, .camera_target_content {
        height: 100% !important;
        min-height: 250px !important;
    }
    .camera_wrap img, .camera_target img, .cameraContent img, .camera_slide img {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    
    /* Camera.js sets inline style="left:-Xpx" on the current slide img (positional
       calculation broke on mobile viewport resize). Force img back to left:0. */
    .cameraSlide .imgLoaded,
    .cameraSlide img,
    .camera_wrap .cameraSlide img {
        left: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

        /* Second menu row centered on mobile */
    #st-navigation,
    #menu ul.menu-nav,
    #menu-handler ul.menu-nav,
    #megamenu-handler ul.menu-nav {
        text-align: center !important;
        margin-left: 0 !important;
    }
    body.mobile-menu-open ul.menu-nav > li {
        text-align: center !important;
    }

    /* Hamburger button — proper hit area + not overlapping mubleStore */
    #mobile-menu-toggle {
        right: 15px !important;
        top: 10px !important;
        transform: none !important;
        margin: 0 !important;
    }
}


/* ---------- HEADER LAYOUT RESTORATION (locked 2026-07-03 mublestore Tim annotated) ---------- */
/* Desktop: #st-navigation must sit RIGHT of the 235px-wide #site-name-handler (float:left).
   On live this comes from template.cs #st-navigation { margin-left: 235px } (unnamed media query).
   On stage the rule isnt firing so #st-navigation flows below the logo into y=104 and menus overlap the slider. */
@media (min-width: 768px) {
    /* CS-PATCH: header-row-flex (locked 2026-07-05 John site v2) — was `display: block`
       + float:left on #site-name-handler + margin-left:235 on #st-navigation (BS2-era fixed
       column layout). Flex layout lets #site-name-handler shrink-wrap to the customer's
       Logo Width (topwidth) AND #st-navigation tuck immediately after with no dead zone. */
    .container-lr > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
    }
    /* Clearfix no longer needed — flex handles containment */
    .container-lr > .row:after {
        display: none !important;
    }
    #site-name-handler {
        flex: 0 0 auto !important;    /* respect customer's topwidth for logo container width */
        float: none !important;
    }

    /* #cl-handler + #tpr-nav: on live these are float:right within #st-navigation .row.
       BS5 flex on parent .row was killing the float; now that .row is display:block, the
       floats work but we must ensure #st-navigation > .row is a positioned context so the
       floated icons dont escape. Also collapse the icon strips vertical space. */
    #st-navigation > .row { position: relative !important; min-height: 22px; }
    #cl-handler {
        position: absolute !important;
        top: 25px !important;
        right: 15px !important;
        left: auto !important;
        width: auto !important;
        display: inline-block !important;
        float: none !important;
        margin: 0 !important;
    }
    #cl-handler > * { display: inline-block; vertical-align: middle; }


    #st-navigation {
        /* CS-PATCH: st-navigation-flex-tuck (locked 2026-07-05 John site v2) — was
           `margin-left: 235px !important; max-width: calc(100% - 235px)` which pinned the
           menu 235px from the container's left edge REGARDLESS of the customer's Logo Width
           (topwidth) param. Customer setting topwidth=100 would shrink the logo container
           to 100px but leave a 135px dead zone before the menu. Reverting to margin-left: 0
           and flex: 1 lets the menu tuck right against the logo container (whatever width
           the customer set for it) with just a small padding-left for visual breathing room. */
        margin-left: 0 !important;
        padding-left: 20px !important;
        width: auto !important;
        max-width: none !important;
        float: none !important;
        flex: 1 1 auto !important;
        /* CS-PATCH: st-navigation-overflow (locked 2026-07-05 John site) — was `overflow: hidden`
           which clipped the mega-menu dropdown items 3+. `#st-navigation` sits BELOW
           `.body-innerwrapper` and `.global-container` in the ancestor chain — so it survived
           every earlier "escape outer wrapper" attempt. Must be visible for dropdowns to
           extend into the body content region. */
        overflow: visible !important;
    }
    /* Constrain the header to its normal single-row height so children dont stack */
    #top-handler {
        min-height: 104px;
    }
    #top {
        min-height: 104px;
        position: relative;
    }
    /* Keep the two menu rows stacked inside #st-navigation, not spread across it */
    #menu, #megamenu-handler {
        display: block !important;
        float: none !important;
        width: 100% !important;
        clear: both;
    }
    /* Top-right icons (login/pencil/search/cart) — pull them to the right end of #top-nav-handler
       so they stay in the header row, not off in space to the far right */
    #top-nav-handler,
    #quick-menu,
    #top-quick-nav {
        position: absolute !important;
        top: 25px !important;
        right: 20px !important;
        z-index: 5;
    }
    /* Vertical center the mubleStore in the 104px header.
       CS-PATCH: image-logo-collapse-fix (locked 2026-07-05 John site) — when the customer
       uses H1TitleImgText=true (image logo mode), .h1 is position:absolute so it has no
       in-flow content. Making #sn-position a flex child with no in-flow content collapses
       it to width:0, which zeros the image's max-width:100% and hides the logo. Text-title
       mode (H1TitleImgText=false) doesn't collapse because the text is in flow. Fix:
       force width:100% on #sn-position + .snc-handler so they inherit the parent's width. */
    #site-name-handler,
    #sn-position {
        display: flex !important;
        align-items: center !important;
        min-height: 104px;
    }
    #sn-position,
    .snc-handler {
        width: 100% !important;
    }
    #sn-position .h1 {
        margin: 0 !important;
    }
}


/* ---------- MENU DROPDOWN Z-INDEX (locked 2026-07-03 Tim mublestore) ---------- */
/* Submenu dropdowns from hovering the top menu were hiding BEHIND the slideshow.
   The slideshow container has z-index 999 (camera.js). Menu dropdowns need higher.
   CS-PATCH: header-stack-lift (locked 2026-07-05 John site) — the whole header
   stack lifted from 9999-10002 into the 100000+ range so component overlays
   (VirtueMart lightbox, category-tile hover state, hot-offer decoration, etc.)
   can't accidentally out-layer the mega-menu dropdown. The `#top-handler` value
   sets the ceiling for its descendants' effective z-index (fixed-position creates
   a stacking context), so lifting the whole tree together is the reliable fix. */
#st-navigation,
#menu-handler,
#megamenu-handler {
    position: relative;
    z-index: 100001 !important;
}
ul.menu-nav li ul,
#menu ul.menu-nav li ul,
#st-navigation ul li ul,
#megamenu-handler ul.menu-nav > li > ul.ul-container,
#megamenu-handler .megamenu-background {
    z-index: 100002 !important;
}
ul.menu-nav li:hover > ul,
ul.menu-nav li.sfHover > ul {
    z-index: 100003 !important;
}
/* Make sure the header top-handler stays above the slideshow too */
header#top-handler,
#top-handler.fixed {
    z-index: 100000 !important;
}



/* ---------- FIXED 1200px LAYOUT (locked 2026-07-03 Tim mublestore) ---------- */
/* Tim decision: entire template is fixed-width 1200px, centered. Nothing goes full-viewport.
   .global-container is the outer wrapper — center it. Also cap the standard content .container
   at 1200 so anything nested (slideshow / tiles / testimonials / footer) also fits inside 1200. */
.global-container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    /* CS-PATCH: dropdown-escape-container (locked 2026-07-05 John site) — template.css sets
       .global-container overflow:hidden which clips any absolutely-positioned descendant that
       extends past its box, including the mega-menu dropdown. #top-handler is position:fixed
       so it escapes, but its child dropdown at position:absolute renders into .global-container's
       clip region.
       IMPORTANT: overflow-x + overflow-y can NOT be split (spec: if one axis is not visible,
       the visible axis is upgraded to auto — still clips). Must use overflow: visible on both
       axes. Horizontal-scroll prevention moved to html/body below where it doesn't establish a
       clip context around the mega-menu ancestor tree. */
    overflow: visible !important;
}
/* .body-innerwrapper is an ANCESTOR of .global-container; if it clips (template.css sets
   overflow-x:hidden which the browser upgrades to overflow-y:auto per spec — creating a
   scroll/clip context), the dropdown gets hidden there instead. Force it visible too. */
.body-innerwrapper {
    overflow: visible !important;
}
/* Prevent horizontal scroll from oversized slideshow content — applied at the html+body
   level where it doesn't establish a clip region on the mega-menu ancestor tree. */
html, body {
    overflow-x: hidden;
}
.container:not(.container-fluid):not(.container-lr):not(.tbm) {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .container:not(.container-fluid):not(.container-lr):not(.tbm) {
        max-width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
    }
    .global-container { max-width: 100% !important; }
}
/* #footer and #testimonials revert to normal in-flow behaviour (no negative-margin escape) */
#testimonials, #customers-handler, #bot-modules, #bot-modules-2, #footer, #footer-handler,
#bottom-long, #bottom-long-2, #bottom-long-3 {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ---------- Customer Review parallax breakout (locked 2026-07-03 Tim mublestore) ---------- */
/* Tim design 2026-07-03: the parallax background photo behind Customer Review should extend
   to full viewport width, but the white testimonial box inside stays at its current width
   (centered). Use negative-margin escape on the parallax wrapper only, keep inner .container
   at its original narrow width for the content. */
@media (min-width: 768px) {
    html body #testimonials.parallax-handler,
    html body .container-fluid.testimonials-handler {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        position: relative;
        overflow: hidden;
    }
    /* Constrain the section height so the parallax + centered content match live's proportions */
    html body #testimonials.parallax-handler {
        min-height: 500px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 0;
    }
    /* Background parallax must fill the parent so the photo covers the whole section */
    html body #testimonials .background-parallax {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        z-index: 1;
        background-size: cover !important;
        background-position: center center !important;
    }
    /* Inner .container floats above the parallax */
    html body #testimonials > .container,
    html body #testimonials .container:not(.container-fluid) {
        position: relative !important;
        z-index: 2 !important;
    }
    /* White testimonial box stays at narrow width, centered inside parallax bg */
    html body #testimonials > .container,
    html body #testimonials .container:not(.container-fluid) {
        max-width: 500px !important;
        width: auto !important;
        margin: 0 auto !important;
        padding: 30px !important;
    }
    /* Background parallax image must fill the new full-width wrapper */
    html body #testimonials .background-parallax {
        background-size: cover !important;
        background-position: center center !important;
    }
}


/* ---------- Footer module grid — flex distribution (locked 2026-07-03 Tim) ---------- */
/* .tf-module wraps 5 moduletable columns with BS2 span classes. Static widths only add
   up to ~91% (BS2 grid math was with margins). Convert to flex distribution so all 5
   columns fill the row edge-to-edge in the 1200px footer. */
#bottom-bg .tf-module,
#footer .tf-module,
#footer-holder .tf-module,
.footer-content-handler .tf-module {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 20px;
    width: 100% !important;
    max-width: 100% !important;
}
#bottom-bg .tf-module > .moduletable,
#footer .tf-module > .moduletable,
#footer-holder .tf-module > .moduletable,
.footer-content-handler .tf-module > .moduletable {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
}
/* span4 gets double share so it stays wider than span2 (matches BS2 4:2 ratio) */
#bottom-bg .tf-module > .moduletable.span4,
#footer .tf-module > .moduletable.span4,
#footer-holder .tf-module > .moduletable.span4,
.footer-content-handler .tf-module > .moduletable.span4 {
    flex: 2 1 0 !important;
}


/* ---------- HEADER + TESTIMONIALS + FOOTER FIXES (locked 2026-07-03 Tim mublestore) ---------- */

/* Header must be full-viewport-width fixed even though its ancestor .global-container caps
   the rest of the template at 1200px. The header wraps a centered 1200 max-width row inside. */
header#top-handler,
#top-handler.fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
}
/* Header inner content stays centered inside the 100vw fixed bar */
header#top-handler > .container,
#top-handler > .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Testimonials — remove the flex on the section itself (broke the slider showing 1-at-a-time) */
html body #testimonials.parallax-handler {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    min-height: 500px;
    padding: 80px 0;
}
/* Inner container matches the OUTER 1200 template width. BS5 grid inside (col-md-6.offset-md-3)
   handles the actual testimonial-box centering at 50% width offset 25% from left. */
html body #testimonials > .container,
html body #testimonials .container:not(.container-fluid) {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1200px !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 30px 15px !important;
}
/* The BS5 grid item that HOLDS the testimonial slider — this is the visible white box */
html body #testimonials .col-md-6.offset-md-3,
html body #testimonials [class*="col-md-6"] {
    background: rgba(255, 255, 255, 0.92) !important;
    padding: 40px 30px !important;
    border-radius: 4px;
    min-height: 300px;
}
/* Owl-item width is set by Owl JS inline (usually 258 or matching container-width/items-shown).
   Dont override — the earlier width:100% was making each item as wide as the whole wrapper. */
html body #testimonials .owl-item {
    padding: 20px !important;
    box-sizing: border-box;
}
/* Owl carousel: the outer wrapper clips overflow so only one item shows at a time; the
   wrapper INSIDE keeps its natural width (sum of items) so translate3d sliding works. */
html body #testimonials .owl-carousel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}
html body #testimonials .owl-carousel .owl-wrapper-outer {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}
/* Wrapper keeps its inline width set by Owl JS (like 1032px for 4 items × 258); dont override */
/* Owl-wrapper must be flex-row so items sit horizontally (not stacking) — Owl JS
   uses translate3d to slide, but that needs items IN A ROW. My display:block was making
   them stack vertically. */


/* The testimonial slider (customers-slider / .customersModule ul) — force one-at-a-time
   display by making list items float:left with width 100% and overflow:hidden on parent */


/* Copyright + Payment icons on the same row (bottom of footer) — copyright LEFT, icons RIGHT */
#foo-left-right {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}
#foo-left-right > .tf-module {
    float: none !important;
    width: auto !important;
    max-width: 50% !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
}
#foo-left-right > .tf-module:first-child {
    text-align: left !important;
}
#foo-left-right > .tf-module:last-child {
    text-align: right !important;
}
#foo-left-right > .clear {
    display: none !important;  /* the clearfix .clear is not needed in flex layout */
}
/* If the payment icon module has a wrapper needing right-align */
#foo-left-right .tf-module img {
    display: inline-block !important;
    vertical-align: middle;
    margin-left: 6px;
}


/* Mobile: footer .tf-module must stack columns vertically (5 cells stacked) */
@media (max-width: 767px) {
    #bottom-bg .tf-module,
    #footer .tf-module,
    #footer-holder .tf-module,
    .footer-content-handler .tf-module {
        flex-direction: column !important;
        gap: 30px !important;
    }
    #bottom-bg .tf-module > .moduletable,
    #footer .tf-module > .moduletable,
    #footer-holder .tf-module > .moduletable,
    .footer-content-handler .tf-module > .moduletable {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
    /* Copyright + payment icons stack too on mobile */
    #foo-left-right {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }
    #foo-left-right > .tf-module {
        max-width: 100% !important;
        text-align: center !important;
    }
    #foo-left-right > .tf-module:first-child,
    #foo-left-right > .tf-module:last-child {
        text-align: center !important;
    }
}


/* Testimonial box: white bg needs dark text (was white-on-white) */
html body #testimonials .col-md-6,
html body #testimonials [class*="col-md-6"] {
    color: #333 !important;
}
html body #testimonials .col-md-6 *,
html body #testimonials [class*="col-md-6"] * {
    color: inherit !important;
}
/* testimonial box text color */
html body #testimonials h1,
html body #testimonials h2,
html body #testimonials h3,
html body #testimonials h4,
html body #testimonials .ts-label,
html body #testimonials .tes-content,
html body #testimonials .tes-identify {
    color: #333 !important;
}
/* CUSTOMER REVIEW title in the parallax area — keep white since its outside the box */
html body #testimonials > .container > .row > .ts-label,
html body #testimonials > .container > .ts-label {
    color: #fff !important;
}

/* 3) Testimonial content must wrap inside the box — was overflowing at 2078px */
html body #testimonials .tes-content,
html body #testimonials .module-content,
html body #testimonials .tab-pane,
html body #testimonials .slick-item-handler {
    width: auto !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}


/* hide script text on mobile — some script tags rendered as text due to display cascade issues */
@media (max-width: 767px) {
    script { display: none !important; }
    style { display: none !important; }
    #cl-handler script,
    #cart-panel2,
    .cartpanel script {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}


/* OWL WIDTH RESPECTED (locked 2026-07-03 Tim mublestore) — Owl JS sets inline width, we do not override */
html body #testimonials .owl-item {
    box-sizing: border-box !important;
    padding: 20px !important;
}
html body #testimonials .owl-item * {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}


/* ---------- MOBILE HEADER + FOOTER FINAL (locked 2026-07-03 Tim) ---------- */
@media (max-width: 767px) {
    /* Body padding-top so slideshow renders BELOW the fixed 122px mobile header */
    body {
        padding-top: 122px !important;
    }
    /* But NOT inside the header itself (would double-space it) */
    body #top-handler {
        margin-top: -122px !important;
    }
    /* Hamburger down a couple more px */
    #mobile-menu-toggle {
        top: 15px !important;
    }
    /* Hide the search-position (input field) on mobile — magnifying glass icon in the icon row is enough */
    #search-position-handler,
    #search-position,
    #search-position .search-panel-mobile,
    #search-position input[type="search"],
    #search-position .search-icon {
        display: none !important;
    }
    /* Keep the magnifying glass icon visible if its part of the icon row */
    #cl-handler .search-icon,
    #cl-handler > *[class*="search"] {
        display: inline-flex !important;
    }
    /* Footer columns must have real content-height on mobile (was collapsing to 1px) */
    #bottom-bg .tf-module > .moduletable {
        min-height: auto !important;
        height: auto !important;
        padding: 15px 20px !important;
    }
    /* Copyright + Payment icons — extra top padding so they dont visually overlap the last column */
    #foo-left-right {
        margin-top: 30px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(0,0,0,0.1);
    }
}


/* ---------- FINAL MOBILE FIXES 2026-07-03d (Tim: log-panel icons + testimonial height + cart badge) ---------- */
@media (max-width: 767px) {
    /* Log-panel icons (avatar + pencil) render 17px too low because of the ul>li>a>i structure.
       Force the whole structure to display: flex; align-items: center so icons sit at 40px middle. */
    #cl-handler .log-panel,
    #cl-handler .log-panel li,
    #cl-handler .log-panel li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        line-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    #cl-handler .log-panel {
        gap: 20px !important;
    }
    #cl-handler .log-panel li a i,
    #cl-handler .log-panel i {
        line-height: 1 !important;
        font-size: 18px !important;
        vertical-align: middle !important;
        margin: 0 !important;
        display: inline-block !important;
    }
    /* Testimonials container too tall on mobile (was 967px). Reduce padding + min-height. */
    html body #testimonials.parallax-handler {
        min-height: auto !important;
        padding: 40px 0 !important;
    }
    /* Reduce empty space below testimonial box */
    html body #testimonials > .container {
        padding: 20px 15px !important;
    }
    /* Cart badge (red 0 PRODUCTS) needs bottom margin so it doesnt touch the divider line */
    #vmCartModule,
    #cl-handler .vmCartModule,
    #cl-handler .cart-icon {
        margin-bottom: 8px !important;
    }
}


/* Kill col-md-6 min-height that was making the testimonial box 747px tall with content compressed at top */
html body #testimonials .col-md-6,
html body #testimonials [class*="col-md-6"] {
    min-height: 0 !important;
}
@media (max-width: 767px) {
    html body #testimonials .col-md-6,
    html body #testimonials [class*="col-md-6"] {
        padding: 20px 15px !important;
    }
    /* Also: cap the owl-item mobile height so tall testimonials dont push the box vertical */
    html body #testimonials .owl-item {
        padding: 15px !important;
    }
}


/* Owl height auto on mobile — let each owl-item be natural content height instead of matching
   the tallest item (which was making the box 737px tall with short first testimonial). */
@media (max-width: 767px) {
    html body #testimonials .owl-item {
        height: auto !important;
        max-height: none !important;
    }
    html body #testimonials .owl-wrapper,
    html body #testimonials .owl-wrapper-outer,
    html body #testimonials .owl-carousel {
        height: auto !important;
        max-height: none !important;
    }
    /* Also allow #testimonials height to shrink to content */
    html body #testimonials.parallax-handler {
        min-height: auto !important;
        padding: 30px 0 !important;
    }
}


/* ---------- Testimonial content shrink on mobile ---------- */
@media (max-width: 767px) {
    /* Cut everything padding/gap-wise inside the testimonial section */
    html body #testimonials.parallax-handler {
        padding: 20px 0 !important;
    }
    html body #testimonials .col-md-6,
    html body #testimonials [class*="col-md-6"] {
        padding: 15px 12px !important;
    }
    html body #testimonials .owl-item {
        padding: 10px !important;
    }
    html body #testimonials .customers-box-handler {
        padding-top: 15px !important;
    }
    /* Testimonial profile picture: smaller on mobile so total content is shorter */
    html body #testimonials .tes-identify img,
    html body #testimonials .tes-picture img,
    html body #testimonials img[width="200"],
    html body #testimonials img[height="200"] {
        max-width: 100px !important;
        max-height: 100px !important;
        width: 100px !important;
        height: 100px !important;
    }
    /* Reduce testimonial text size */
    html body #testimonials .tes-content,
    html body #testimonials .module-content {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    /* Kill excess bottom margin/padding from Owl controls */
    html body #testimonials .owl-controls,
    html body #testimonials .owl-pagination {
        margin-top: 5px !important;
        padding-top: 0 !important;
    }
    /* Constrain the max height of col-md-6 on mobile so it doesnt stretch to tallest owl item */
    html body #testimonials .col-md-6,
    html body #testimonials [class*="col-md-6"] {
        max-height: 500px !important;
        overflow: hidden !important;
    }
}


/* Hide mobile-menu-indicator on desktop — the JS injects <span class="mobile-menu-indicator">
   into every parent menu-item anchor for the mobile accordion. On desktop those + signs render
   under menu items and shouldnt be visible. */
@media (min-width: 768px) {
    .mobile-menu-indicator { display: none !important; }
}


/* ---------- MOBILE HEADER UN-FIX (locked 2026-07-04 John site) ---------- */
@media (max-width: 767px) {
    /* Un-fix the header so it scrolls with content on mobile (mobile users want screen real estate) */
    #top-handler,
    header#top-handler,
    #top-handler.fixed {
        position: relative !important;
        top: auto !important;
    }
    body {
        padding-top: 0 !important;
    }
    body #top-handler {
        margin-top: 0 !important;
    }

    /* Hide the desktop top-nav menu on mobile — hamburger drawer handles navigation.
       Was leaking items below the logo as text. */
    #st-navigation,
    #menu-handler,
    #megamenu-handler,
    #st-navigation ul.menu-nav {
        display: none !important;
    }
    /* Re-show inside the hamburger drawer when body.mobile-menu-open */
    body.mobile-menu-open #st-navigation,
    body.mobile-menu-open #menu-handler,
    body.mobile-menu-open #megamenu-handler,
    body.mobile-menu-open ul.menu-nav {
        display: block !important;
    }
}


/* ---------- MEGA-MENU DROPDOWN HARD-HIDE (locked 2026-07-04 John site) ---------- */
/* Problem: level-2 mega-menu items were rendering inline in the header row on desktop,
   pushing article content down. Force them to position:absolute + hidden-until-hover. */
@media (min-width: 768px) {
    /* All level-2+ dropdowns absolutely positioned + hidden by default */
    #st-navigation ul.menu-nav ul,
    #st-navigation ul.menu-nav ul.ul-container,
    #megamenu-handler ul.menu-nav ul,
    #megamenu-handler ul.menu-nav ul.ul-container,
    #mega-menu li > ul,
    #mega-menu li > ul.ul-container {
        position: absolute !important;
        top: -9999px !important;
        left: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 10001 !important;
        transition: opacity 0.15s linear, visibility 0s linear 0.15s, top 0s linear 500ms;
    }
    /* Show on hover of parent li */
    #st-navigation ul.menu-nav > li:hover > ul,
    #st-navigation ul.menu-nav > li.sfHover > ul,
    #st-navigation ul.menu-nav > li:hover > ul.ul-container,
    #st-navigation ul.menu-nav > li.sfHover > ul.ul-container,
    #megamenu-handler ul.menu-nav > li:hover > ul,
    #megamenu-handler ul.menu-nav > li.sfHover > ul,
    #megamenu-handler ul.menu-nav > li:hover > ul.ul-container,
    #megamenu-handler ul.menu-nav > li.sfHover > ul.ul-container,
    #mega-menu > li:hover > ul,
    #mega-menu > li:hover > ul.ul-container {
        top: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition-delay: 0s;
    }
    /* Also ensure parent li has position:relative so dropdown positions correctly */
    #st-navigation ul.menu-nav > li,
    #megamenu-handler ul.menu-nav > li,
    #mega-menu > li {
        position: relative !important;
    }
}


/* ---------- CS-PATCH: hide-classic-nav (locked 2026-07-06 John site v4) ---------- */
/* Two DIFFERENT hides at two DIFFERENT scopes:

   (a) `#st-navigation .quick-menu` + `#st-navigation ul.menu` — the classic mod_menu
       output from the quick-menu module. This is NEVER the intended visible menu on
       any modernized template (Phase 5m mega-menu is canonical). Hide at ALL viewports.

   (b) `.responsive-menu` — the `<div class="responsive-menu">` inside
       `<nav id="menu"><div class="main-menu-handler">...` renders modules assigned to
       position-1. On the STAGE reference install (demo.energizethemes.com/qs-wizard-test)
       this is used as the SECONDARY UTILITY MENU on desktop (HOME · SHOP · USING JOOMLA
       etc.) — a different menutype from the main mega-menu. On mobile, if it renders
       inline it leaks through the tinted Phase 5m drawer showing the full flat tree of
       items and children. So: hide on mobile ONLY, keep visible on desktop as intended.
   V3 error (2026-07-05): removed the media-query scope from (b) so it killed the desktop
   second menu on John's install. V4 restores the scope. */
#st-navigation > .row > .quick-menu,
#st-navigation .quick-menu,
body #st-navigation ul.menu {
    display: none !important;
}
@media (max-width: 767px) {
    #menu .main-menu-handler .responsive-menu,
    #menu .responsive-menu,
    .responsive-menu {
        display: none !important;
    }
}


/* ---------- CS-PATCH: header-height-auto-expand (locked 2026-07-05 John site) ---------- */
/* When the customer's uploaded logo image is taller than the configured
   Header Height (topheight) param, header + all its size-locked children auto-grow
   to fit the logo instead of clipping it into the content region below.
   Also constrains the logo image itself so it fits the configured logo container. */
@media (min-width: 768px) {
    #top-handler,
    #top-handler > .container,
    #top-handler > .container-fluid,
    #top-handler .inner-handler,
    #top-handler #top,
    #top-handler .container-lr {
        height: auto !important;
        min-height: 100px;
    }
    #site-name-handler,
    #sn-position,
    .snc-handler {
        height: auto !important;
        min-height: 100px;
    }
    /* Free the .h1 from position:absolute so the logo drives header height, but keep
       it POSITION:RELATIVE (not static) so the template's inline `left: <H1TitlePositionX>px;
       top: <H1TitlePositionY>px` from the PHP style block still work as visual offsets.
       Position:static would ignore left/top; position:relative applies them as offsets
       from the natural flow position — same layout footprint, customer-tunable positioning. */
    #sn-position .h1 {
        position: relative !important;
        margin: 0 !important;
    }
    /* Logo image fits its container width; height keeps aspect ratio */
    #sn-position .h1 img {
        max-width: 100%;
        height: auto;
        width: auto;
        display: block;
    }
}

/* ---------- CS-PATCH: header-height-sync-JS (locked 2026-07-05 John site) ---------- */
/* Content padding sync — see companion inline JS in index.php that measures the
   actual rendered #top-handler height and sets .body-innerwrapper padding-top to
   match, so tall logos don't overlap content beneath the fixed header. */


/* ---------- CS-PATCH: mobile-menu-accordion (locked 2026-07-05 John site) ---------- */
/* Mobile off-canvas menu was showing ALL sub-menu items expanded flat under each
   parent — no accordion behaviour, huge list, hard to scan. Standard pattern:
   only top-level items visible by default; tap a parent with children to expand
   just that branch; +/− indicators show current state. Companion JS in index.php
   handles the tap-to-toggle via .cs-mobile-open class.

   MubleStore's mobile menu renders into UL.menucanvas (separate DOM built by the
   offcanvas library) NOT #mega-menu — hence the .menucanvas selectors below. */
@media (max-width: 767px) {
    /* Hide submenus by default when the mobile menu is open */
    #mega-menu > li > ul,
    #mega-menu > li > ul.ul-container,
    #st-navigation ul.menu > li > ul,
    #st-navigation ul.menu-nav > li > ul,
    ul.menucanvas > li > ul {
        display: none !important;
    }
    /* Show when the parent li has been tapped and marked .cs-mobile-open */
    #mega-menu > li.cs-mobile-open > ul,
    #mega-menu > li.cs-mobile-open > ul.ul-container,
    #st-navigation ul.menu > li.cs-mobile-open > ul,
    #st-navigation ul.menu-nav > li.cs-mobile-open > ul,
    ul.menucanvas > li.cs-mobile-open > ul {
        display: block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding-left: 20px !important;
        transform: none !important;
    }
    /* +/− indicator for parents with children */
    #mega-menu > li.deeper > a::after,
    #mega-menu > li.parent > a::after,
    #st-navigation ul.menu > li.deeper > a::after,
    #st-navigation ul.menu > li.parent > a::after,
    ul.menucanvas > li.deeper > a::after,
    ul.menucanvas > li.parent > a::after {
        content: '+';
        float: right;
        font-weight: bold;
        padding-left: 10px;
    }
    #mega-menu > li.cs-mobile-open > a::after,
    #st-navigation ul.menu > li.cs-mobile-open > a::after,
    ul.menucanvas > li.cs-mobile-open > a::after {
        content: '−';
    }
    /* Style child items in the expanded accordion */
    #mega-menu > li.cs-mobile-open > ul > li,
    #st-navigation ul.menu > li.cs-mobile-open > ul > li,
    ul.menucanvas > li.cs-mobile-open > ul > li {
        list-style: none;
        padding: 8px 0;
    }
    /* Breathing room between menu items at mobile */
    #mega-menu > li,
    #st-navigation ul.menu > li,
    #st-navigation ul.menu-nav > li,
    ul.menucanvas > li {
        padding: 14px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        height: auto !important;
        min-height: 0 !important;
    }
    #mega-menu > li:last-child,
    #st-navigation ul.menu > li:last-child,
    #st-navigation ul.menu-nav > li:last-child,
    ul.menucanvas > li:last-child {
        border-bottom: none;
    }
    /* CS-PATCH: mobile-menu-long-item-wrap (locked 2026-07-05 John site) — long
       menu items (like "BASIC TRAINING COURSES ON YOUR JOB SITE OR CLASSROOM")
       were wrapping to a second line but getting bottom-clipped because the
       template's default styling constrained anchor height. `height: auto` +
       explicit line-height 1.4 with real vertical padding lets wrapped text
       take the full space it needs. word-wrap safeguards against a very long
       single word (unlikely on a menu label but cheap insurance). */
    #mega-menu > li > a,
    #st-navigation ul.menu > li > a,
    #st-navigation ul.menu-nav > li > a,
    ul.menucanvas > li > a {
        display: block !important;
        /* Right padding of 60px reserves the space for the .mobile-menu-indicator chip
           (34x34 at right:15px) without crowding the link text. Was `8px 15px` which
           left ~5px gap between text and chip — now 60px right side. */
        padding: 14px 60px 14px 20px !important;
        line-height: 1.4 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: visible !important;
    }
    /* Nested children in an open accordion — indent + slightly tighter than top level */
    #mega-menu > li.cs-mobile-open > ul > li > a,
    #st-navigation ul.menu > li.cs-mobile-open > ul > li > a,
    ul.menucanvas > li.cs-mobile-open > ul > li > a {
        display: block !important;
        padding: 8px 15px !important;
        line-height: 1.4 !important;
        height: auto !important;
        min-height: 0 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}


/* ---------- CS-PATCH: mobile-phase5m-width-override (locked 2026-07-06 John site v8) ---------- */
/* THE STANDARD across all modernized templates (Expression, Vio, this MubleStore) is
   the Phase 5m mobile hamburger pattern (Skill 33 Expression pattern) — the CSS + JS
   inline in index.php around lines 1064-1300.
   Full-width forcing + semi-transparent dark background so the site shows through
   dimmed behind the menu (Tim's ask: don't leave the viewport as a blank white void).

   CS-PATCH: mobile-drawer-decouple (locked 2026-07-06 John site v8) — the mobile
   drawer USED to render #megamenu-handler content, which is driven by the template
   style's selectmegamenu param. If the desktop layout wants that param pointed at a
   small utility menu (with the main menu moved to position-1's .responsive-menu
   utility strip), the mobile drawer follows suit and shows the utility items — which
   is not what the customer wants (mobile hamburger should show the MAIN menu).
   Fix: on mobile, HIDE the #megamenu-handler inside the drawer, and SHOW the
   .responsive-menu instead. That way desktop keeps its two-row layout (main menu on
   top row via position-1, utility below via mega-menu) while mobile hamburger
   renders the position-1 main menu directly. Companion Phase 5m JS update targets
   ul#nav (the .responsive-menu's ul) for the accordion + indicator logic. */
@media (max-width: 767px) {
    /* Force full-width on BOTH menu container chains when the Phase 5m drawer opens.
       Overrides desktop-computed inline widths leftover on either UL. */
    body.mobile-menu-open #megamenu-handler,
    body.mobile-menu-open #megamenu-handler .megamenu-background,
    body.mobile-menu-open #megamenu-handler .mega-menu-responsive-handler,
    body.mobile-menu-open #mega-menu,
    body.mobile-menu-open ul#mega-menu.menu-nav,
    body.mobile-menu-open .responsive-menu,
    body.mobile-menu-open .main-menu-handler,
    body.mobile-menu-open #nav,
    body.mobile-menu-open ul#nav.menu-nav {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Swap what's visible in the mobile drawer:
       - HIDE #megamenu-handler (the utility mega-menu row from selectmegamenu param)
       - SHOW .responsive-menu (the position-1 main menu with HOME etc.)
       Note: this OVERRIDES the CS-PATCH: hide-classic-nav mobile hide of .responsive-menu.
       The hide is only needed when the drawer is CLOSED. Open state gets .responsive-menu
       visible as the drawer content. */
    body.mobile-menu-open #megamenu-handler {
        display: none !important;
    }
    body.mobile-menu-open .responsive-menu,
    body.mobile-menu-open #menu .main-menu-handler .responsive-menu,
    body.mobile-menu-open #menu .responsive-menu {
        display: block !important;
    }
    /* Apply the drawer's tinted background + accordion styling to the responsive-menu
       instead of the megamenu-handler (which is now hidden). */
    body.mobile-menu-open .responsive-menu,
    body.mobile-menu-open .main-menu-handler {
        background: transparent !important;
    }
    /* CS-PATCH: mobile-drawer-tinted-bg (locked 2026-07-05 John site v7) — Tim's color
       choice `#21252996` = dark slate with ~59% alpha. Semi-transparent so the site
       content behind the drawer shows through dimmed instead of being pure white.
       Applied to #megamenu-handler (the outer drawer). Inner backgrounds forced
       transparent so the dim tint isn't stacked or overpainted by inner white bg.
       Note: for the ET-release build we'll drive this from the template style's
       primary color (Tim's follow-up ask: "shaded version of whatever the theme is
       that has been selected"). For now, static #21252996 as a good default. */
    body.mobile-menu-open #megamenu-handler {
        background: #21252996 !important;
    }
    /* Intermediate wrapper chain transparent so the outer #megamenu-handler tint
       shows through — but the LIs themselves stay opaque white (see index.php Phase 5m
       rule for ul.menu-nav li). LIs get their own white background as opaque item cards. */
    body.mobile-menu-open #megamenu-handler .megamenu-background,
    body.mobile-menu-open #megamenu-handler .mega-menu-responsive-handler,
    body.mobile-menu-open #mega-menu,
    body.mobile-menu-open ul#mega-menu.menu-nav {
        background: transparent !important;
    }
    /* Menu items: dark text on the opaque white LI cards (index.php Phase 5m
       explicitly sets the LI backgrounds to #ffffff). */
    body.mobile-menu-open #mega-menu > li > a,
    body.mobile-menu-open #mega-menu > li a,
    body.mobile-menu-open #mega-menu > li ul > li > a {
        color: #333 !important;
        text-shadow: none !important;
    }
    /* Accordion-expanded sub-menu block: opaque light-grey to differentiate from
       parent items */
    body.mobile-menu-open #mega-menu > li ul {
        background: #f7f7f7 !important;
    }
    /* CS-PATCH: mobile-menu-indicator-chip (locked 2026-07-05 John site) — was a
       plain +/− text glyph pushed against the link text with no spacing. Restyled as
       a 34x34 circular chip with thin border, centered FA icon (fa-plus / fa-minus
       swapped by Phase 5m JS at index.php ~1301), subtle brand-neutral colors so it
       reads as an intentional interactive control instead of floating punctuation. */
    body.mobile-menu-open #mega-menu .mobile-menu-indicator,
    body.mobile-menu-open ul.menu-nav .mobile-menu-indicator {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 34px !important;
        height: 34px !important;
        line-height: 30px !important;
        text-align: center !important;
        border: 1.5px solid #cccccc !important;
        border-radius: 50% !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #666666 !important;
        background: rgba(255, 255, 255, 0.6) !important;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    }
    /* FA icon inside the chip — properly sized + centered */
    body.mobile-menu-open .mobile-menu-indicator > i.fa {
        font-size: 14px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        color: inherit !important;
    }
    /* Expanded state — darker chip to read as "activated" */
    body.mobile-menu-open #mega-menu > li.expanded > a > .mobile-menu-indicator,
    body.mobile-menu-open ul.menu-nav li.expanded > a > .mobile-menu-indicator,
    body.mobile-menu-open .mobile-menu-indicator.mmi-minus {
        border-color: #333333 !important;
        color: #333333 !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }
    /* Hide the LEGACY offcanvas hamburger link + panel — Phase 5m is the standard.
       Extra selectors for maximum specificity to beat template.css / any inherited flex. */
    a.open-off-canvas,
    .open-off-canvas,
    #top-handler a.open-off-canvas,
    #top-handler .open-off-canvas,
    #cl-handler a.open-off-canvas,
    #cl-handler .open-off-canvas,
    #tpr-nav .open-off-canvas,
    #offcanvas,
    #offcanvas.off-canvas,
    #offcanvas-handler,
    .offcanvas-cover {
        display: none !important;
        visibility: hidden !important;
    }
}