/*
 * MexStrength Mobile Fix — mobile-fix.css
 * Version:   1.2.0
 * Author:    Infinity Driv
 *
 * TABLE OF CONTENTS
 * ─────────────────────────────────────────────────────────
 *  1.  DOUBLE HEADER          — hide desktop nav links inside black top bar
 *  2.  MOBILE HEADER          — tighten white logo/hamburger bar height
 *  3.  PRODUCT CARD TITLES    — fix overlapping / strikethrough text
 *  4.  FLOATING CART          — stop bubble overlapping body content
 *  5.  PRODUCT PAGE — ATC     — Add to Cart button full width
 *  6.  PRODUCT PAGE — PAYMENT — payment buttons full width & aligned
 *  7.  PRODUCT PAGE — GALLERY — thumbnail tap-targets & layout
 *  8.  PRODUCT PAGE — SWATCH  — broken color-variant images (old domain)
 *  9.  PRODUCT PAGE — TABS    — broken description images collapse
 * 10.  PRODUCT PAGE — META    — hide "Categories:" on single product
 * 11.  PRODUCT PAGE — VARS    — Size/Color dropdowns full width
 * 12.  SHOP / COLLECTION      — hide "Categories:" on loop cards
 * 13.  SHOP                   — woocommerce notice compact spacing
 * 14.  FOOTER                 — compact oversized accordion links
 * 15.  FOOTER                 — prevent scroll-trap (overflow fix)
 * ─────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════
   0. MOBILE NAV POPUP — Elementor Popup #15073
   ─────────────────────────────────────────────────────────
   ROOT CAUSES (confirmed by live DOM inspection):
   A. Logo (data-id="09a6c6e") renders at 495px — full popup
      width — because no max-width is set on it. Natural size
      is 510×255px so it fills the entire panel.
   B. Popup position is "sticky" instead of "fixed", so the
      browser scrolls the page to bring the popup into view,
      jumping the user to the footer area.
   C. Body scroll is NOT locked when the popup opens, so the
      page underneath remains scrollable.
   ═══════════════════════════════════════════════════════════ */

/* ── A. Fix oversized logo inside the popup ─────────────── */

/* Logo widget container */
#elementor-popup-modal-15073 .elementor-element-09a6c6e {
    width: auto !important;
    max-width: 140px !important;
}

/* Logo image itself */
#elementor-popup-modal-15073 .elementor-element-09a6c6e img {
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
    display: block !important;
}

/* Logo column container (c61bfe0) — stop it stretching full width */
#elementor-popup-modal-15073 .elementor-element-c61bfe0 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 160px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 16px 16px 8px !important;
}

/* ── B. Fix popup position — must be fixed not sticky ───── */

#elementor-popup-modal-15073 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    background: rgba(0, 0, 0, 0.5) !important; /* dim backdrop */
}

/* Popup content panel — slide-in from left, full height */
#elementor-popup-modal-15073 .dialog-widget-content {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 80vw !important;
    max-width: 320px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ── C. Lock body scroll when popup is open ─────────────── */

/* Elementor adds .elementor-location-header--sticky and
   dialog-prevent-scroll to body/html when a popup opens */
body.elementor-popup-prevent-scroll,
html.elementor-popup-prevent-scroll {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* Fallback: if Elementor uses a different class */
body:has(#elementor-popup-modal-15073[style*="flex"]) {
    overflow: hidden !important;
}

/* ── D. Nav menu inside popup — clean vertical list ─────── */

/* Nav menu widget inside popup */
#elementor-popup-modal-15073 .elementor-element-7a7ffca {
    width: 100% !important;
    padding: 0 !important;
}

#elementor-popup-modal-15073 .elementor-nav-menu,
#elementor-popup-modal-15073 .elementor-nav-menu--dropdown {
    width: 100% !important;
    padding: 0 !important;
}

/* Each menu item */
#elementor-popup-modal-15073 .menu-item {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#elementor-popup-modal-15073 .menu-item a {
    display: block !important;
    padding: 14px 20px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #222 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}

#elementor-popup-modal-15073 .menu-item a:hover,
#elementor-popup-modal-15073 .menu-item a:active {
    background: #f8f8f8 !important;
    color: #c0392b !important;
}

/* ── E. Close button — visible and accessible ────────────── */

#elementor-popup-modal-15073 .dialog-close-button {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10000 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: #f0f0f0 !important;
    border-radius: 50% !important;
    font-size: 1.2rem !important;
}



@media (max-width: 767px) {

/* ═══════════════════════════════════════════════════════════
   1. DOUBLE HEADER
   Both b055913 (black promo bar) and d750809 (white mobile
   nav) show on mobile, burning ~340px before content.
   The black bar contains: left-nav (192b366) + GET FREE SAMPLE
   (e9e98e8) + right-nav (fd9bc68). Hide the two nav strips;
   keep only the promo text.
   ═══════════════════════════════════════════════════════════ */

    .elementor-element-192b366,
    .elementor-element-fd9bc68 {
        display: none !important;
    }

    .elementor-element-b055913 {
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .elementor-element-e9e98e8 {
        padding: 6px 16px !important;
        min-height: 0 !important;
    }


/* ═══════════════════════════════════════════════════════════
   2. MOBILE HEADER — white logo/hamburger bar (d750809)
   Too tall and logo is right-aligned rather than centred.
   ═══════════════════════════════════════════════════════════ */

    .elementor-element-d750809 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        min-height: 0 !important;
    }

    .elementor-element-d750809 .elementor-widget-theme-site-logo {
        text-align: center !important;
    }

    .elementor-element-d750809 .elementor-widget-theme-site-logo img {
        margin: 0 auto !important;
        display: block !important;
        max-width: 160px !important;
    }

    .elementor-element-d750809 .elementor-widget-nav-menu {
        display: flex !important;
        align-items: center !important;
    }


/* ═══════════════════════════════════════════════════════════
   3. PRODUCT CARD TITLES — Trending / Latest Products
   Screenshot 3: titles overlap with review count and price,
   appearing with strikethrough-style layering. Caused by
   absolute positioning inside fixed-height cards.
   ═══════════════════════════════════════════════════════════ */

    ul.products li.product,
    .products .product {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
    }

    ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product h2,
    ul.products li.product .product-title {
        position: static !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        text-decoration: none !important;
        font-size: 0.875rem !important;
        line-height: 1.3 !important;
        margin-top: 8px !important;
        margin-bottom: 4px !important;
    }

    ul.products li.product .price {
        position: static !important;
        display: block !important;
        margin-top: 4px !important;
    }

    ul.products li.product .thumbnail-wrapper {
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    ul.products li.product .thumbnail-wrapper img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    ul.products li.product .product-wrapper,
    ul.products li.product .product-content {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }


/* ═══════════════════════════════════════════════════════════
   4. FLOATING CART — fkcart bubble
   z-index 10999 covers text and buttons throughout the page.
   ═══════════════════════════════════════════════════════════ */

    .fkcart-toggler {
        bottom: 20px !important;
        right: 16px !important;
        z-index: 999 !important;
    }

    .fkcart-floating-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    .fkcart-toggler .fkcart-count {
        top: -4px !important;
        right: -4px !important;
    }


/* ═══════════════════════════════════════════════════════════
   5. PRODUCT PAGE — Add to Cart button
   Fixed at ~170px wide. Should be full-width on mobile.
   ═══════════════════════════════════════════════════════════ */

    form.cart {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    form.cart .quantity {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    form.cart .quantity input.qty {
        flex: 1 !important;
        text-align: center !important;
    }

    .single_add_to_cart_button,
    .woocommerce .single_add_to_cart_button.button {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        box-sizing: border-box !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
    }


/* ═══════════════════════════════════════════════════════════
   6. PRODUCT PAGE — Payment buttons (Google Pay / PayPal /
   Venmo / Pay Later). Misaligned and wider than screen.
   ═══════════════════════════════════════════════════════════ */

    .ppc-button-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .ppc-button-wrapper > div,
    .ppc-button-wrapper iframe,
    .ppc-button-wrapper .paypal-buttons {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }

    .gpay-button-container,
    .wc-block-components-express-payment,
    .wc-block-components-express-payment__event-buttons,
    .paypal-button-container,
    #paypal-button-container {
        width: 100% !important;
        box-sizing: border-box !important;
    }


/* ═══════════════════════════════════════════════════════════
   7. PRODUCT PAGE — Gallery thumbnails
   Screenshot 4: 7 thumbs overflow right with no gap.
   Fix to 4-per-row flex wrap with proper spacing.
   ═══════════════════════════════════════════════════════════ */

    .woocommerce-product-gallery {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .flex-control-thumbs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 0 4px !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .flex-control-thumbs li {
        width: calc(25% - 5px) !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .flex-control-thumbs li img {
        width: 100% !important;
        height: auto !important;
        border-radius: 4px !important;
        object-fit: cover !important;
    }


/* ═══════════════════════════════════════════════════════════
   8. PRODUCT PAGE — Broken color swatch images
   Screenshot 4: Under "Color" label there is a large white
   void where swatch images should render. Images point to
   old domain mexstrengthltd.com and 404. The broken <img>
   element still occupies its natural 100x100px + alt text
   pushing a huge gap. CSS makes them compact placeholders.
   NOTE: Permanently fix by re-uploading images in WP Media.
   ═══════════════════════════════════════════════════════════ */

    .woocommerce-product-details__short-description img {
        display: inline-block !important;
        width: 72px !important;
        height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        object-fit: cover !important;
        border-radius: 6px !important;
        border: 1px solid #e0e0e0 !important;
        background-color: #f2f2f2 !important;
        vertical-align: top !important;
        margin: 3px !important;
        /* Collapse alt-text height on broken images */
        font-size: 0 !important;
        color: transparent !important;
    }

    /* Make the paragraph wrapper a flex row of swatch tiles */
    .woocommerce-product-details__short-description p {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: flex-start !important;
        margin-bottom: 8px !important;
    }

    /* WooCommerce Variation Swatches plugin — image swatches */
    .wvs-wrap .wvs-type-image img,
    .variable-items-wrapper .wvs-type-image img {
        width: 48px !important;
        height: 48px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        border: 2px solid #ddd !important;
        font-size: 0 !important;
        color: transparent !important;
    }

    .wvs-wrap .wvs-type-image li,
    .variable-items-wrapper .wvs-type-image li {
        width: 56px !important;
        height: 56px !important;
        margin: 4px !important;
    }


/* ═══════════════════════════════════════════════════════════
   9. PRODUCT PAGE — Description tab broken images
   Screenshots 4 & 6: large white voids in the Description
   tab. Images from old domain 404 but retain their declared
   size, creating ~300px empty blocks.
   ═══════════════════════════════════════════════════════════ */

    .woocommerce-tabs .panel img,
    .woocommerce-Tabs-panel img,
    #tab-description img,
    #tab-additional_information img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin-bottom: 12px !important;
    }

    /* Cap description images so a broken one cannot be a 300px void */
    .woocommerce-tabs .panel p img,
    #tab-description p img {
        max-height: 280px !important;
        object-fit: contain !important;
        background-color: #f8f8f8 !important;
        border: 1px dashed #ccc !important;
        border-radius: 4px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
        /* Collapse alt-text height on broken images */
        font-size: 0 !important;
        color: transparent !important;
    }

    /* Broken images with no src */
    .woocommerce-tabs .panel img[src=""],
    .woocommerce-tabs .panel img:not([src]) {
        display: none !important;
    }

    /* Constrain paragraph widths inside tabs */
    #tab-description p,
    .woocommerce-Tabs-panel--description p {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }


/* ═══════════════════════════════════════════════════════════
   10. PRODUCT PAGE — "Categories:" meta below share icons
   Screenshot 6: "Categories: Weightlifting Belts,
   Weightlifting Neoprene Belts" — redundant on a product
   page already in that category.
   ═══════════════════════════════════════════════════════════ */

    .single-product .posted_in,
    .single-product .product_meta .posted_in {
        display: none !important;
    }


/* ═══════════════════════════════════════════════════════════
   11. PRODUCT PAGE — Variation dropdowns (Size / Color)
   Screenshot 4: The Size dropdown and Color swatch area
   appear far below the price with excess whitespace above.
   Dropdowns are not full-width.
   ═══════════════════════════════════════════════════════════ */

    table.variations {
        width: 100% !important;
        display: block !important;
        border: none !important;
    }

    table.variations tbody,
    table.variations tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    table.variations td,
    table.variations th {
        display: block !important;
        width: 100% !important;
        padding: 3px 0 !important;
        border: none !important;
    }

    table.variations td.label,
    table.variations th.label {
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        padding-bottom: 4px !important;
    }

    table.variations td.value select,
    .variations td select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 12px !important;
        border-radius: 4px !important;
        font-size: 0.9rem !important;
    }

    .reset_variations {
        display: inline-block !important;
        margin-top: 6px !important;
        font-size: 0.8rem !important;
    }

    /* Woo Variation Swatches — swatch item list */
    .wvs-wrap,
    .variable-items-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 6px !important;
    }

    .wvs-wrap li,
    .variable-items-wrapper li {
        margin: 0 !important;
        list-style: none !important;
    }

    /* Colour type swatches (circular dots) */
    .wvs-type-color li,
    .variable-items-wrapper .wvs-type-color li {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        border: 2px solid #ccc !important;
        overflow: hidden !important;
    }


/* ═══════════════════════════════════════════════════════════
   12. SHOP / COLLECTION — "Categories:" on product loop cards
   Product cards show e.g. "Categories: Weightlifting Belts,
   Weightlifting Nylon Quick Release Belts" above the title.
   Wastes ~2 lines per card on a small screen.
   ═══════════════════════════════════════════════════════════ */

    .product-categories,
    ul.products li.product .product-categories,
    ul.products li.product .meta-wrapper .product-categories,
    .meta-wrapper .product-categories {
        display: none !important;
    }


/* ═══════════════════════════════════════════════════════════
   13. SHOP — WooCommerce notices
   "Coupon code applied successfully" banner creates a large
   gap between the filter bar and the product grid.
   ═══════════════════════════════════════════════════════════ */

    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error {
        padding: 10px 14px !important;
        font-size: 0.875rem !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .woocommerce-message::before,
    .woocommerce-info::before {
        display: none !important;
    }


/* ═══════════════════════════════════════════════════════════
   14. FOOTER — oversized accordion nav links
   Screenshots 5 & 7: "Categories" and "Quick Links" render
   as large white accordion boxes with ~70px per item.
   ═══════════════════════════════════════════════════════════ */

    .elementor-location-footer .elementor-widget-nav-menu li,
    .elementor-location-footer ul li,
    .elementor-location-footer .widget ul li,
    .elementor-location-footer .menu-item {
        padding: 10px 16px !important;
        min-height: 0 !important;
        height: auto !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        font-size: 0.875rem !important;
        line-height: 1.3 !important;
    }

    .elementor-location-footer .elementor-widget-nav-menu li:last-child,
    .elementor-location-footer ul li:last-child {
        border-bottom: none !important;
    }

    .elementor-location-footer .elementor-widget-nav-menu li a,
    .elementor-location-footer ul li a {
        font-size: 0.875rem !important;
        line-height: 1.3 !important;
        padding: 0 !important;
        display: block !important;
    }

    .elementor-location-footer .elementor-widget-heading .elementor-heading-title {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
        padding-bottom: 6px !important;
    }


/* ═══════════════════════════════════════════════════════════
   15. FOOTER — scroll-trap prevention
   Scrolling was locking at the footer — caused by
   overflow:hidden on a parent container.
   ═══════════════════════════════════════════════════════════ */

    footer,
    .site-footer,
    #colophon,
    .elementor-location-footer,
    .elementor-location-footer .e-con,
    .elementor-location-footer .elementor-section,
    .elementor-location-footer .e-con-inner {
        overflow: visible !important;
    }

} /* end @media (max-width: 767px) */


/* ═══════════════════════════════════════════════════════════
   TABLET — 768px–1024px
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {

    .single_add_to_cart_button {
        min-width: 280px !important;
    }

    .ppc-button-wrapper {
        margin-left: 0 !important;
    }

    .flex-control-thumbs {
        gap: 6px !important;
    }

    .product-categories,
    ul.products li.product .product-categories {
        display: none !important;
    }

    .elementor-location-footer .elementor-widget-nav-menu li,
    .elementor-location-footer ul li {
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
    }

    #tab-description p img,
    .woocommerce-Tabs-panel--description p img {
        max-width: 100% !important;
        height: auto !important;
    }

}