/* =========================================
   NATURE COAST — MOBILE SHOP + HEADER
   ========================================= */

@media (max-width: 768px) {

    /* MOBILE HEADER IMAGE */
    .site-header {
        background-image: url("https://naturecoastpeptides.com/wp-content/uploads/2026/07/nature-coast-mobile-header.png") !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #ffffff !important;

        min-height: 135px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hide the regular desktop logo */
    .site-branding,
    .custom-logo-link,
    .custom-logo {
        display: none !important;
    }

    /* Keep the menu button visible */
    .main-navigation {
        position: relative !important;
        z-index: 10 !important;
        margin: 0 !important;
        padding: 10px 10px 0 !important;
    }

    .menu-toggle {
        float: right !important;
        margin: 0 !important;
    }

    /* Hide the cart total at the top */
    .site-header-cart {
        display: none !important;
    }

    /* Keep the bottom mobile bar and cart visible */
    .storefront-handheld-footer-bar,
    .storefront-handheld-footer-bar .cart {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* REMOVE EXTRA SPACE ABOVE SHOP */
    .site-content,
    .content-area,
    .site-main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .woocommerce-products-header {
        margin: 0 0 18px !important;
        padding: 15px 0 0 !important;
    }

    .woocommerce-products-header__title {
        margin: 0 !important;
    }

    /* HIDE SORTING AND RESULT COUNT */
    .woocommerce-ordering,
    .woocommerce-result-count {
        display: none !important;
    }

    /* THREE PRODUCTS ACROSS */
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .woocommerce ul.products::before,
    .woocommerce ul.products::after {
        display: none !important;
        content: none !important;
    }

    .woocommerce ul.products li.product {
        width: auto !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .woocommerce ul.products li.product img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 8px !important;
    }

    .woocommerce ul.products li.product h2,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        min-height: 32px !important;
        margin: 0 0 6px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .woocommerce ul.products li.product .price {
        margin: 0 0 8px !important;
        font-size: 13px !important;
    }

    .woocommerce ul.products li.product .button {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 7px 4px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}
/* Put mobile menu button directly under the logo */
@media screen and (max-width: 768px) {

    /* Stack the logo and navigation vertically */
    .site-header .col-full {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Logo takes up its own full row */
    .site-branding {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        order: 1 !important;
    }

    /* Center and enlarge the logo */
    .site-branding img,
    img.custom-logo {
        display: block !important;
        width: 100% !important;
        max-width: 410px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* Navigation becomes a new row below the logo */
    .storefront-primary-navigation {
        position: static !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 18px 0 0 !important;
        padding: 0 !important;
        order: 2 !important;
    }

    .main-navigation {
        position: static !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Menu button centered underneath */
    button.menu-toggle,
    .menu-toggle {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        display: block !important;
        width: 92% !important;
        max-width: 500px !important;
        min-height: 58px !important;
        margin: 0 auto !important;
        padding: 14px 20px !important;
        font-size: 19px !important;
        text-align: center !important;
        border: 2px solid #333333 !important;
        background: #ffffff !important;
    }

    /* Add space between menu and page content */
    .site-content {
        padding-top: 24px !important;
    }
}
/* FIX MOBILE LOGO + MENU POSITIONING */
@media screen and (max-width: 768px) {

    /* Give the logo its own full row */
    .site-header .site-branding {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: 115px !important;
        margin: 0 0 20px !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
        z-index: 2 !important;
    }

    /* Keep logo centered and fully visible */
    .site-header .site-branding img,
    .site-header img.custom-logo {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 700px !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* Put navigation completely below logo */
    .storefront-primary-navigation {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1 !important;
    }

    .main-navigation {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Menu button */
    button.menu-toggle {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: calc(100% - 30px) !important;
        min-height: 58px !important;
        margin: 0 auto !important;
        padding: 14px 20px !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        font-size: 19px !important;
        text-align: center !important;
        background: #ffffff !important;
        border: 2px solid #333333 !important;
        box-sizing: border-box !important;
    }

    /* Hide Storefront's misplaced hamburger lines */
    button.menu-toggle::before,
    button.menu-toggle::after,
    button.menu-toggle span::before {
        display: none !important;
    }

    /* Add a clean hamburger inside the button */
    button.menu-toggle::first-letter {
        margin-right: 8px;
    }

    /* Space between menu and page title */
    .site-content {
        padding-top: 35px !important;
    }
}
/* Hide the Site Title and Tagline */
.site-title,
.site-description {
    display: none !important;
/* Hide the Storefront site title and tagline */
.site-branding .site-title,
.site-branding .site-description,
.site-header .site-title,
.site-header .site-description {
    display: none !important;
}