/* Mobile-specific styles for Product Detail Page */
@media (max-width: 768px) {
    .product-detail-grid {
        flex-direction: column;
        place-items: center;
        gap: 20px;
    }
    
    h1.productDetailName {
        display: none
    }

    h1.productDetailName.mobile-version {
        font-size: 1.5em;
        display: block;
        text-align: left;
        word-wrap: break-word; /* Ensure long words without spaces will wrap */
        text-align: center;
    }

    .product-image-gallery {
        order: 2; /* Image container second */
    }

    .product-image-gallery .main-image {
        margin-bottom: 20px;
    }

    .thumbnail-gallery {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap; /* Allow thumbnails to wrap on smaller screens */
    }

    .product-info {
        order: 3; /* Product title, price, and description third */
        text-align: center; /* Center-align the text for a cleaner look */
        margin-top: 20px; /* Add some space between the gallery and the info */
    }

    .product-info .product-price {
        font-size: 1.4em;
    }

    .product-info .product-description {
        width: 100%;
        text-align: left; /* Justify the text for better readability */
        line-height: 1.8; /* Increase line height for better readability */
        padding: 0 15px; /* Add some padding to the sides */
        font-size: .95em;
    }

    .product-info .button {
        display: block;
        width: 100%;
        margin-bottom: 10px; /* Add some space between buttons */
    }

    .back-to-products {
        margin-right: 0; /* Remove the margin from the back to products button */
    }
}

@media (max-width: 450px) {
    .product-detail-section .page-listing li a {
        font-size: 13.5px
    }
}