/**
 * WooCommerce Single Product Page - Mobile Layout Fix
 * SciuuuS Kids - Blocksy Child Theme
 *
 * Strategy:
 * - Product title rendered via PHP hook ABOVE gallery (visible on mobile only)
 * - Price stays in its original position in the summary
 * - Gallery goes full-bleed (edge-to-edge) on mobile
 * - Thumbnails converted to compact horizontal strip
 * - No overflow:hidden (preserves zoom/lightbox)
 * - No position:sticky (avoids overlap issues)
 *
 * @package Blocksy_Child_SciuuusKids
 * @version 1.2.0
 */

/* ==========================================================================
   Desktop: Hide the mobile-only product header
   ========================================================================== */

.mobile-product-header {
    display: none !important;
}

/* Belt-and-suspenders: explicitly hide above mobile breakpoint */
@media (min-width: 769px) {
    .mobile-product-header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   Mobile styles (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* ==========================================================================
       Mobile Product Header - Title above gallery
       ========================================================================== */

    .mobile-product-header {
        display: block !important;
        padding: 14px 15px 10px;
        background: var(--brand-white, #fff);
        grid-column: 1 / -1;
    }

    /* Match existing .product_title styles from woocommerce-product.css at 768px */
    .mobile-product-header .mobile-product-title {
        font-family: var(--font-primary, Quicksand) !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: var(--brand-black, #000) !important;
        margin: 0 !important;
        padding: 0 !important;
        letter-spacing: -0.2px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-align: left !important;
    }


    /* ==========================================================================
       Full-Bleed Gallery - Edge to Edge
       ========================================================================== */

    /* Break gallery out of container padding */
    .single-product .ct-product-gallery-container,
    .single-product .woocommerce-product-gallery {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
        max-width: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    .single-product .woocommerce-product-gallery figure {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Blocksy slider container */
    .single-product .ct-media-container {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ==========================================================================
       Main Product Image - Fill Width, Limit Height
       ========================================================================== */

    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
    .single-product .woocommerce-product-gallery img.wp-post-image,
    .single-product .ct-media-container > .ct-image-container img {
        width: 100% !important;
        max-height: 400px;
        object-fit: contain !important;
        object-position: center center !important;
        display: block;
        border-radius: 0 !important;
    }

    /* ==========================================================================
       Thumbnail Gallery - Horizontal Scrollable Strip
       ========================================================================== */

    .single-product .woocommerce-product-gallery .flex-control-thumbs,
    .single-product .ct-product-gallery-container .flex-control-thumbs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px !important;
        padding: 8px 15px !important;
        margin: 0 !important;
        list-style: none !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs li,
    .single-product .ct-product-gallery-container .flex-control-thumbs li {
        flex: 0 0 70px !important;
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs li img,
    .single-product .ct-product-gallery-container .flex-control-thumbs li img {
        width: 70px !important;
        height: 70px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        border: 2px solid transparent;
        cursor: pointer;
        transition: border-color 0.2s ease;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
    .single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover,
    .single-product .ct-product-gallery-container .flex-control-thumbs li img.flex-active {
        border-color: var(--brand-orange, #FC7D06);
    }

    /* Thin scrollbar */
    .single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar,
    .single-product .ct-product-gallery-container .flex-control-thumbs::-webkit-scrollbar {
        height: 4px;
    }

    .single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb,
    .single-product .ct-product-gallery-container .flex-control-thumbs::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }

    /* ==========================================================================
       Layout Spacing - Tighten Gap Between Gallery and Summary
       ========================================================================== */

    .single-product .product-entry-wrapper {
        gap: 12px !important;
        margin-bottom: 20px !important;
    }
}

/* Match existing .product_title at 480px breakpoint */
@media (max-width: 480px) {
    .mobile-product-header .mobile-product-title {
        font-size: 24px !important;
        letter-spacing: 0 !important;
    }
}