/*
 * MARBLELIFE Sitewide Style & Mobile Fixes
 * v1.2.1
 * Performance-first: CSS only, except for a tiny footer script that disables
 * the legacy cloned sticky header on mobile.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: clip;
    }

    /* The screenshot shows the main boxed site wrapper ending early on the
       right. Force the theme's primary wrappers to use the full viewport. */
    #full-header,
    #full-header > #header.boxed,
    #header.boxed,
    #wrapper.boxed,
    #wrapper,
    #wrapper > #container,
    #wrapper > #container.boxed,
    #wrapper > #container.products-loop,
    #container.boxed,
    #footer,
    #footer > .boxed {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
    }

    /* Keep normal content columns from retaining desktop widths. */
    #content,
    #content.main-side,
    .main-side,
    .main-sidebar,
    #sidebar,
    .site-main,
    .woocommerce,
    .woocommerce-page {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        clear: both;
    }

    /* SiteOrigin calculates negative margins for stretched rows. Inside the
       old boxed theme those calculations can leave the mobile canvas narrow
       or create horizontal overflow. On phones, the parent is already full
       width, so keep stretched rows inside that parent. */
    .siteorigin-panels-stretch,
    .panel-row-style.siteorigin-panels-stretch,
    [data-stretch-type="full"],
    [data-stretch-type="full-stretched"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .panel-layout,
    .panel-grid,
    .panel-grid-cell,
    .panel-row-style,
    .so-panel,
    .panel-widget-style {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* The legacy theme clones #float-header and positions the clone using
       desktop measurements. The companion PHP footer fix also stops its
       10ms timer; this CSS ensures no clone can flash on mobile. */
    #float-header.cloned,
    .cloned#float-header {
        display: none !important;
    }

    #float-header.original,
    #float-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #mega-menu-wrap-corp-header-menu,
    #mega-menu-wrap-new-header-menu,
    #mega-menu-wrap-header-menu,
    .mega-menu-wrap,
    .mega-menu-toggle,
    .max-mega-menu {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Top utility menu and long text should wrap instead of widening the page. */
    #full-header .menu-top-menu-container,
    #full-header .menu-top-menu-container ul,
    #full-header .menu-top-menu-container li,
    #full-header .menu-top-menu-container a,
    #footer,
    #footer p,
    #footer a,
    .product_meta,
    .woocommerce-product-details__short-description {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    #full-header .menu-top-menu-container ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Forms and embedded content are frequent overflow sources on this site. */
    form,
    fieldset,
    table,
    iframe,
    embed,
    object,
    input,
    select,
    textarea,
    .wp_autosearch_form_wrapper,
    .woocommerce-product-gallery,
    .woocommerce-product-gallery__wrapper {
        max-width: 100% !important;
    }

    table {
        width: 100%;
    }

    /* Footer SiteOrigin rows should never determine viewport width. */
    #footer .panel-layout,
    #footer .panel-grid,
    #footer .panel-row-style,
    #footer .panel-grid-cell,
    #footer .so-panel,
    #footer .textwidget {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Final safeguard only after fixing the actual wide elements above. */
    #page,
    #wrapper,
    #container,
    #full-header,
    #footer {
        overflow-x: clip;
    }
}


/* ================================================================
 * v1.1.0 MOBILE HEADER REFINEMENT
 * These rules are intentionally mobile-only and do not alter desktop.
 * ================================================================ */
@media (max-width: 900px) {
    /* Reduce the oversized utility-link area while preserving every link. */
    #full-header .menu-top-menu-container {
        padding: 6px 12px 8px !important;
    }

    #full-header .menu-top-menu-container ul {
        align-items: center;
        gap: 2px 0;
        margin: 0 !important;
        padding: 0 !important;
    }

    #full-header .menu-top-menu-container li {
        line-height: 1.25 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #full-header .menu-top-menu-container a {
        display: block;
        font-size: 12px !important;
        line-height: 1.3 !important;
        padding: 5px 7px !important;
    }

    /* Keep the brand strong without letting the logo consume most of the
       first screen on a phone. */
    #full-header img[alt="Marblelife Products Logo"] {
        display: block !important;
        width: min(82vw, 350px) !important;
        max-width: 82vw !important;
        height: auto !important;
        margin: 10px auto 8px !important;
    }

    /* Compact the telephone/consultation block shown directly beneath the
       logo. The icon and number remain large enough to tap and read. */
    #full-header .consult_us {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 5px 14px 10px !important;
    }

    #full-header .consult_us > a,
    #full-header .consult_us h3 {
        float: none !important;
        margin: 0 !important;
    }

    #full-header .consult_us h3 {
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    #full-header .consult_us h3 > span {
        font-size: 13px !important;
        line-height: 1.15 !important;
    }

    #full-header .consult_us .custom_number {
        display: inline-block !important;
        font-size: 25px !important;
        line-height: 1.05 !important;
        margin-top: 2px !important;
        white-space: nowrap;
    }

    #full-header .consult_us .ml_icon,
    #full-header .consult_us .ml_icon_consult {
        transform: scale(.82);
        transform-origin: center center;
    }

    /* Reduce the vertical footprint of the two Max Mega Menu mobile bars. */
    #mega-menu-wrap-corp-header-menu .mega-menu-toggle,
    #mega-menu-wrap-new-header-menu .mega-menu-toggle,
    #mega-menu-wrap-header-menu .mega-menu-toggle {
        min-height: 48px !important;
        height: 48px !important;
    }

    #mega-menu-wrap-corp-header-menu .mega-menu-toggle .mega-toggle-blocks-center,
    #mega-menu-wrap-new-header-menu .mega-menu-toggle .mega-toggle-blocks-center,
    #mega-menu-wrap-header-menu .mega-menu-toggle .mega-toggle-blocks-center {
        height: 48px !important;
        align-items: center !important;
    }

    #mega-menu-wrap-corp-header-menu .mega-toggle-label,
    #mega-menu-wrap-new-header-menu .mega-toggle-label,
    #mega-menu-wrap-header-menu .mega-toggle-label {
        font-size: 15px !important;
        line-height: 1.15 !important;
    }

    /* Reduce accidental whitespace between header SiteOrigin rows. */
    #full-header .panel-grid,
    #full-header .panel-row-style,
    #full-header .panel-grid-cell,
    #full-header .so-panel,
    #full-header .panel-widget-style {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ============================================================
     * COMPACT BRAVOWP FLOATING CART
     * The plugin prints most styles inline, therefore !important is
     * deliberate here so mobile presentation can safely override them.
     * ============================================================ */
    #bravowp-woo-floatingcart {
        left: 8px !important;
        right: 8px !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        border-radius: 9px !important;
        overflow: hidden !important;
        box-shadow: 0 6px 22px rgba(0,0,0,.22) !important;
    }

    #bravowp-woo-floatingcart-titlepane {
        min-height: 42px !important;
        padding: 8px 42px 8px 12px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    #bravowp-woo-floatingcart-titlepane > div {
        display: inline-block !important;
        margin: 0 0 0 8px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        vertical-align: baseline !important;
    }

    #bravowp-woo-floatingcart-titlepane-upicon,
    #bravowp-woo-floatingcart-titlepane-downicon {
        width: 14px !important;
        height: 14px !important;
        right: 12px !important;
        top: 50% !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
    }

    #bravowp-woo-floatingcart-bodypane {
        max-width: 100% !important;
        max-height: min(62vh, 480px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    #bravowp-woo-floatingcart-bodypane > div {
        max-width: 100% !important;
    }

    #bravowp-woo-floatingcart-bodypane a {
        box-sizing: border-box !important;
    }

    #bravowp-woo-floatingcart-footerpane {
        height: 4px !important;
    }

    /* Leave room at the bottom of mobile pages so the compact cart does not
       cover the final line of content or footer controls. */
    body {
        padding-bottom: 58px !important;
    }
}

@media (max-width: 480px) {
    #full-header .menu-top-menu-container a {
        font-size: 11px !important;
        padding: 4px 5px !important;
    }

    #full-header img[alt="Marblelife Products Logo"] {
        width: min(84vw, 320px) !important;
        max-width: 84vw !important;
    }

    #full-header .consult_us .custom_number {
        font-size: 22px !important;
    }

    #mega-menu-wrap-corp-header-menu .mega-toggle-label,
    #mega-menu-wrap-new-header-menu .mega-toggle-label,
    #mega-menu-wrap-header-menu .mega-toggle-label {
        font-size: 14px !important;
    }

    #bravowp-woo-floatingcart-titlepane {
        font-size: 12px !important;
        padding-left: 10px !important;
    }

    #bravowp-woo-floatingcart-titlepane > div {
        margin-left: 6px !important;
        font-size: 11px !important;
    }
}


/* ================================================================
 * v1.2.1 CONSERVATIVE STOREFRONT POLISH
 * This release intentionally does NOT convert the legacy product loop
 * to CSS Grid. The theme owns product widths/floats; we only improve
 * the visual treatment so promotional banners and sidebars stay intact.
 * ================================================================ */

:root {
    --ml-site-blue: #087dc1;
    --ml-site-blue-dark: #075f94;
    --ml-site-green: #2f641f;
    --ml-site-green-bright: #76b82a;
    --ml-site-ink: #25302a;
    --ml-site-muted: #68736d;
    --ml-site-line: #e1e7e3;
    --ml-site-soft: #f7f9f8;
    --ml-site-radius: 8px;
}

/* Keep the multi-buy category promotion outside the product-card flow. */
#content.main-side > .mlmb-promo-banner,
.products-loop #content > .mlmb-promo-banner,
.woocommerce.archive .mlmb-promo-banner {
    clear: both !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    box-sizing: border-box !important;
}

/* Slightly tighten the large deal banner on archive pages without
   changing the Multi Buy plugin markup or functionality. */
#content.main-side > .mlmb-promo-banner,
.products-loop #content > .mlmb-promo-banner {
    padding: 20px 22px !important;
}

#content.main-side > .mlmb-promo-banner h2,
.products-loop #content > .mlmb-promo-banner h2 {
    font-size: clamp(24px, 2.5vw, 32px) !important;
}

#content.main-side > .mlmb-promo-banner .mlmb-promo-tiers,
.products-loop #content > .mlmb-promo-banner .mlmb-promo-tiers {
    gap: 10px !important;
    margin-bottom: 12px !important;
}

#content.main-side > .mlmb-promo-banner .mlmb-promo-tier,
.products-loop #content > .mlmb-promo-banner .mlmb-promo-tier {
    padding: 12px 14px !important;
}

/* Preserve the theme's native desktop product widths/floats. */
.products-loop #content > .product,
#content.main-side > .product,
.up-sells .products-loop #content > .product,
.related .products-loop #content > .product,
.cross-sells .products-loop #content > .product {
    box-sizing: border-box !important;
    background: #fff;
    border: 1px solid var(--ml-site-line);
    border-radius: var(--ml-site-radius);
    box-shadow: 0 2px 10px rgba(28, 42, 34, .055);
    padding: 12px !important;
}

.products-loop #content > .product .img-con,
#content.main-side > .product .img-con,
.up-sells .products-loop #content > .product .img-con,
.related .products-loop #content > .product .img-con,
.cross-sells .products-loop #content > .product .img-con {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    padding: 6px;
    overflow: hidden;
}

.products-loop #content > .product .img-con img,
#content.main-side > .product .img-con img,
.up-sells .products-loop #content > .product .img-con img,
.related .products-loop #content > .product .img-con img,
.cross-sells .products-loop #content > .product .img-con img {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    max-height: 180px !important;
    margin: 0 auto !important;
    object-fit: contain;
}

.products-loop #content > .product .entry-title,
#content.main-side > .product .entry-title,
.up-sells .products-loop #content > .product .entry-title,
.related .products-loop #content > .product .entry-title,
.cross-sells .products-loop #content > .product .entry-title {
    font-size: 15px !important;
    line-height: 1.32 !important;
    margin: 4px 0 6px !important;
}

.products-loop #content > .product .entry-title a,
#content.main-side > .product .entry-title a,
.up-sells .products-loop #content > .product .entry-title a,
.related .products-loop #content > .product .entry-title a,
.cross-sells .products-loop #content > .product .entry-title a {
    color: var(--ml-site-ink) !important;
    text-decoration: none !important;
}

.products-loop #content > .product .stars,
#content.main-side > .product .stars,
.up-sells .products-loop #content > .product .stars,
.related .products-loop #content > .product .stars,
.cross-sells .products-loop #content > .product .stars {
    color: #e4a51d;
    font-size: 14px;
    line-height: 1;
    margin: 2px 0 7px !important;
}

.products-loop #content > .product .price,
#content.main-side > .product .price,
.up-sells .products-loop #content > .product .price,
.related .products-loop #content > .product .price,
.cross-sells .products-loop #content > .product .price {
    color: var(--ml-site-green) !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.35 !important;
    margin: 0 0 9px !important;
}

.products-loop #content > .product .variations,
#content.main-side > .product .variations,
.up-sells .products-loop #content > .product .variations,
.related .products-loop #content > .product .variations,
.cross-sells .products-loop #content > .product .variations {
    width: 100% !important;
    margin-bottom: 7px !important;
}

.products-loop #content > .product select,
#content.main-side > .product select,
.up-sells .products-loop #content > .product select,
.related .products-loop #content > .product select,
.cross-sells .products-loop #content > .product select {
    max-width: 100% !important;
    min-height: 36px !important;
    border: 1px solid #d5dcd7;
    border-radius: 4px;
    background: #fff;
}

.products-loop #content > .product .cart-btn .button,
#content.main-side > .product .cart-btn .button,
.up-sells .products-loop #content > .product .cart-btn .button,
.related .products-loop #content > .product .cart-btn .button,
.cross-sells .products-loop #content > .product .cart-btn .button {
    border-radius: 4px !important;
    background: var(--ml-site-blue) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.products-loop #content > .product .cart-btn .button:hover,
#content.main-side > .product .cart-btn .button:hover,
.up-sells .products-loop #content > .product .cart-btn .button:hover,
.related .products-loop #content > .product .cart-btn .button:hover,
.cross-sells .products-loop #content > .product .cart-btn .button:hover {
    background: var(--ml-site-blue-dark) !important;
}

/* Sidebar cards: modernize without changing sidebar dimensions. */
.main-sidebar .widget,
#sidebar .widget {
    border-radius: 6px;
}

/* Footer: retain the successful v1.1 mobile behavior and only clean
   spacing/typography. No forced layout IDs or negative-margin overrides. */
#footer {
    background: #f5f7f8;
    color: #3d4943;
}

#footer .widget-title {
    color: #233029;
    line-height: 1.25;
    margin-bottom: 8px;
}

#footer .menu,
#footer .menu ul {
    list-style: none;
    padding-left: 0;
}

#footer .menu li {
    margin-bottom: 5px;
}

#footer .menu a {
    color: #526159;
    text-decoration: none;
}

#footer .menu a:hover,
#footer .menu a:focus {
    color: var(--ml-site-blue);
    text-decoration: underline;
}

/* Standard form polish that does not restructure WooCommerce forms. */
#wrapper input[type="text"],
#wrapper input[type="email"],
#wrapper input[type="tel"],
#wrapper input[type="password"],
#wrapper input[type="number"],
#wrapper select,
#wrapper textarea {
    border: 1px solid #d2dad5;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
}

/* Mobile product cards stack safely while preserving desktop theme layout. */
@media (max-width: 900px) {
    #content.main-side > .mlmb-promo-banner,
    .products-loop #content > .mlmb-promo-banner {
        margin: 0 0 18px !important;
        padding: 16px !important;
    }

    #content.main-side > .mlmb-promo-banner .mlmb-promo-tiers,
    .products-loop #content > .mlmb-promo-banner .mlmb-promo-tiers {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .products-loop #content > .product,
    #content.main-side > .product,
    .up-sells .products-loop #content > .product,
    .related .products-loop #content > .product,
    .cross-sells .products-loop #content > .product {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        padding: 12px !important;
    }

    .products-loop #content > .product .img-con,
    #content.main-side > .product .img-con {
        min-height: 160px;
    }
}