/* Mobile Product Page CSS */

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

    /* --- Main Layout --- */
    /* Force vertical stack for the main specific container */
    .product-detail-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
    }

    /* --- Gallery --- */
    .gallery-wrapper {
        width: 100% !important;
        position: static !important;
        /* Reset sticky if applied */
    }

    .main-image-container {
        width: 100% !important;
        height: auto !important;
        max-height: 400px;
        /* Limit height to see details */
        margin-bottom: 1rem !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden;
    }

    .main-image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .gallery-thumbs {
        justify-content: center !important;
        /* Center thumbs */
        gap: 10px !important;
    }

    .thumb-img {
        width: 60px !important;
        height: 60px !important;
    }

    /* --- Product Details Info --- */
    .product-details-title {
        font-size: 1.8rem !important;
        margin-top: 0.5rem !important;
        line-height: 1.2 !important;
    }

    .product-meta-category {
        font-size: 0.9rem !important;
    }

    .product-price-block {
        margin: 1rem 0 !important;
        gap: 1rem !important;
        align-items: center !important;
    }

    .current-price {
        font-size: 2rem !important;
    }

    /* --- Forms & Interactives --- */

    /* Variant Selector */
    .variant-options {
        gap: 0.8rem !important;
    }

    .variant-pill {
        padding: 10px 16px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
        min-width: 80px;
        text-align: center;
    }

    /* Pincode Check */
    .check-availability-box {
        background: #fdfbf7;
        padding: 1.2rem !important;
        border-radius: 12px;
    }

    .check-availability-box input {
        width: 100% !important;
        /* Flex child but better safe */
        font-size: 1rem !important;
    }

    /* Add to Cart Area */
    .add-to-cart-wrapper {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: stretch !important;
        /* Full width children */
    }

    .qty-control-group {
        justify-content: center !important;
        width: 100% !important;
        margin-bottom: 0.5rem;
    }

    .qty-btn-minus,
    .qty-btn-plus {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
    }

    .qty-input {
        height: 50px !important;
        width: 80px !important;
        font-size: 1.2rem !important;
    }

    .btn-add-cart {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1.1rem !important;
        height: auto !important;
        min-height: 55px;
        /* Large touch target */
    }

    .btn-wishlist {
        display: none !important;
        /* Often clutter on mobile, or move it elsewhere if needed. Let's hide for clean UX or keep it if space allows. Re-enabling for now but centering */
        /* width: 100% !important; */
        /* margin-top: 1rem; */
    }

    /* Let's actually keep wishlist but absolute pos or next to title? 
       For now, let's keep it in flow but centered if we change flex direction to column.
       Actually, let's put it back to row for just buttons? No, vertical stack 'wrapper' means full width buttons.
    */
    .add-to-cart-wrapper .btn-wishlist {
        display: block !important;
        align-self: center !important;
        margin-top: 0.5rem !important;
        border: none !important;
        background: none !important;
        font-size: 2rem !important;
    }


    /* --- Accordions --- */
    .product-accordion details {
        margin-bottom: 1rem !important;
        border-bottom: 1px solid #eee;
        padding-bottom: 1rem !important;
    }

    .product-accordion summary {
        font-size: 1.1rem !important;
        padding: 10px 0 !important;
        font-weight: 600 !important;
    }

    .product-accordion .content {
        padding: 10px 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: #555;
    }


    /* --- Reviews Section --- */
    /* Target the grid container in product.php line 239 */
    div[style*="display: grid; grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .review-card {
        padding: 1.2rem !important;
    }

    .review-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 5px !important;
    }

}