/* =====================================================
   MOBILE PRODUCT PAGE - OPTIMIZED FOR TOUCH
   Mobile-first product page experience
   ===================================================== */

/* ===== TABLET OPTIMIZATIONS (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    .vlvp-product-main {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 30px;
    }
    
    .vlvp-single-product {
        padding: 30px 20px;
    }
}

/* ===== MOBILE OPTIMIZATIONS (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* Remove all border-radius for mobile */
    .vlvp-hero,
    .vlvp-thumbs li,
    .vlvp-summary,
    .vlvp-sku-specs,
    .vlvp-specifications,
    .single_add_to_cart_button,
    .vlvp-trust-badges,
    .vlvp-share,
    .vlvp-short-description,
    .vlvp-related-products .product,
    .vlvp-related-products img,
    .woocommerce-product-gallery__image,
    .variations select,
    .quantity input {
        border-radius: 0 !important;
    }
    
    /* Override desktop gallery grid/flex layout */
    .vlvp-product-main .vlvp-gallery {
        grid-column: unset !important;
        flex: unset !important;
        order: 0 !important;
    }
    
    /* Override desktop product-etsy-layout.css */
    .single-product .vlvp-gallery {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }
    
    /* Main product container */
    .vlvp-single-product {
        padding: 0;
        max-width: 100%;
    }
    
    /* Single column layout */
    .vlvp-product-main {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 30px;
    }
    
    /* ===== MOBILE GALLERY - SWIPEABLE WITH PEEK PREVIEW ===== */
    /* Override product-etsy-layout.css for mobile */
    .single-product .vlvp-gallery,
    .vlvp-product-main .vlvp-gallery,
    .vlvp-gallery {
        width: 100% !important;
        margin-bottom: 0 !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        align-items: stretch !important;
        overflow: visible !important;
    }
    
    /* Swipeable gallery container wrapper */
    .vlvp-gallery-swiper {
        position: relative !important;
        width: 100% !important;
        overflow: hidden !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }
    
    /* Swipeable images container - ULTRA SMOOTH */
    .vlvp-gallery-track {
        display: flex !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important; /* iOS momentum scrolling */
        scroll-behavior: smooth !important;
        gap: 0 !important;
        padding: 0 !important;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        /* Better touch responsiveness */
        touch-action: pan-x !important;
        -webkit-scroll-snap-type: x mandatory !important;
    }
    
    .vlvp-gallery-track::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Prevent text selection during swipe */
    .vlvp-gallery-slide {
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-touch-callout: none !important;
    }
    
    .vlvp-gallery-slide img {
        pointer-events: none !important; /* Prevents long-press menu */
    }
    
    /* Individual swipeable image - FULL WIDTH */
    .vlvp-gallery-slide {
        flex: 0 0 100% !important; /* Full width - no peek */
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
        height: 350px !important;
        background: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        border-radius: 0 !important;
        padding: 20px 16px !important;
    }
    
    .vlvp-gallery-slide img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        min-width: 200px !important;
        min-height: 200px !important;
    }
    
    /* Pagination dots indicator - MODERN & CLEAR */
    .vlvp-gallery-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 18px 0 !important;
        background: #fff !important;
        border-bottom: 1px solid #e0e0e0 !important;
        position: relative !important;
    }
    
    /* "Swipe" indicator */
    .vlvp-gallery-dots::before {
        content: 'Swipe to view more' !important;
        position: absolute !important;
        top: -28px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 11px !important;
        color: #999 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        pointer-events: none !important;
        opacity: 0.9 !important;
        font-weight: 500 !important;
    }
    
    .vlvp-gallery-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #d1d5db !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
    
    .vlvp-gallery-dot.active {
        background: #3B82A0 !important;
        width: 24px !important;
        height: 8px !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 6px rgba(59, 130, 160, 0.3) !important;
    }
    
    /* Tap effect */
    .vlvp-gallery-dot:active {
        transform: scale(0.9) !important;
    }
    
    /* HIDE the original hero and use swipeable gallery instead */
    .vlvp-hero {
        display: none !important;
    }
    
    /* Hide any WooCommerce default gallery on mobile */
    .woocommerce-product-gallery__image {
        display: none !important;
    }
    
    .woocommerce-product-gallery:not(.vlvp-gallery-swiper) {
        display: none !important;
    }
    
    /* Hide any static product images below swipeable gallery */
    .vlvp-gallery-swiper ~ .woocommerce-product-gallery,
    .vlvp-gallery-swiper ~ .vlvp-hero,
    .vlvp-gallery-swiper ~ img {
        display: none !important;
    }
    
    /* Show hero only if swipeable gallery fails to load */
    .no-swipe-gallery .vlvp-hero {
        order: 1 !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        border-bottom: 1px solid #e0e0e0 !important;
        padding: 20px 16px !important;
        background: #fff !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        height: 350px !important;
        position: relative !important;
    }
    
    /* Hero image - smart sizing for all dimensions */
    .vlvp-hero-img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Ensure very small images don't look tiny */
    @supports (object-fit: contain) {
        .vlvp-hero-img[width] {
            width: auto !important;
            height: auto !important;
            min-width: 200px !important;
            min-height: 200px !important;
        }
    }
    
    /* Hide traditional thumbnails on mobile - using swipe instead */
    .vlvp-thumbs {
        display: none !important;
        order: 3 !important;
    }
    
    /* If swipeable gallery exists, hide thumbs completely */
    .vlvp-gallery-swiper ~ .vlvp-thumbs {
        display: none !important;
    }
    
    /* Fallback: Show horizontal thumbnails if swipe not available */
    .no-swipe .vlvp-thumbs {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        background: #fff !important;
        border-bottom: 1px solid #e0e0e0 !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .vlvp-thumbs li {
        flex-shrink: 0 !important;
        width: 70px !important;
        height: 70px !important;
        border: 2px solid #ddd !important;
        border-radius: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .vlvp-thumbs li.active {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 1px var(--primary-color) !important;
    }
    
    /* Thumbnail images - crop to fill square nicely */
    .vlvp-thumbs img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }
    
    /* Alternative: contain for thumbnails if images are too varied */
    .vlvp-thumbs.contain-mode img {
        object-fit: contain !important;
    }
    
    /* Hide gallery arrows on mobile */
    .vlvp-gallery-arrow,
    .vlvp-gallery-prev,
    .vlvp-gallery-next {
        display: none !important;
    }
    
    /* Force vertical layout - override any flexbox/grid on gallery */
    @supports (display: grid) {
        .vlvp-gallery {
            display: flex !important;
            grid-template-columns: unset !important;
        }
    }
    
    /* ===== MOBILE PRODUCT SUMMARY ===== */
    .vlvp-summary {
        padding: 20px 16px;
        background: #fff;
    }
    
    /* Product title */
    .vlvp-summary h1,
    .product_title {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin: 0 0 12px 0 !important;
        font-weight: 700 !important;
        color: #1a1a1a !important;
    }
    
    /* Price */
    .vlvp-summary .price,
    .woocommerce-Price-amount {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: var(--primary-color) !important;
        margin: 0 0 16px 0 !important;
        display: block !important;
    }
    
    /* Stock/Availability */
    .stock,
    .vlvp-summary .stock {
        font-size: 0.9rem !important;
        margin-bottom: 16px !important;
        padding: 8px 12px !important;
        background: #f0f9ff !important;
        border-left: 3px solid var(--primary-color) !important;
        border-radius: 0 !important;
    }
    
    .stock.in-stock {
        color: #059669 !important;
    }
    
    .stock.out-of-stock {
        background: #fef2f2 !important;
        border-left-color: #dc2626 !important;
        color: #dc2626 !important;
    }
    
    /* ===== MOBILE VARIATIONS (Color/Size options) ===== */
    .variations_form,
    .variations {
        margin-bottom: 20px !important;
    }
    
    .variations tr {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 16px !important;
    }
    
    .variations label {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .variations select {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 1rem !important;
        border: 2px solid #ddd !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #333 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        background-size: 12px !important;
    }
    
    .variations select:focus {
        border-color: var(--primary-color) !important;
        outline: none !important;
    }
    
    /* Reset variation button */
    .reset_variations {
        display: inline-block !important;
        font-size: 0.85rem !important;
        color: var(--primary-color) !important;
        text-decoration: underline !important;
        margin-top: 8px !important;
    }
    
    /* ===== MOBILE QUANTITY & ADD TO CART ===== */
    .cart {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }
    
    /* Quantity selector */
    .quantity {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .quantity label {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 !important;
    }
    
    .quantity input[type="number"] {
        width: 80px !important;
        height: 48px !important;
        padding: 0 12px !important;
        font-size: 1rem !important;
        border: 2px solid #ddd !important;
        border-radius: 0 !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
    
    /* Add to Cart button */
    .single_add_to_cart_button,
    button[name="add-to-cart"] {
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        background: var(--primary-color) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    .single_add_to_cart_button:hover,
    .single_add_to_cart_button:active {
        background: var(--primary-dark) !important;
        transform: none !important;
    }
    
    .single_add_to_cart_button:disabled {
        background: #ccc !important;
        cursor: not-allowed !important;
    }
    
    /* ===== MOBILE PRODUCT DETAILS (SKU & SPECS) ===== */
    .vlvp-sku-specs {
        margin: 20px 0 !important;
        padding: 16px !important;
        background: #f8f9fa !important;
        border: 1px solid #e9ecef !important;
        border-radius: 0 !important;
    }
    
    .vlvp-sku {
        font-size: 0.85rem !important;
        color: #666 !important;
        margin-bottom: 12px !important;
    }
    
    .vlvp-specifications h4 {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: #333 !important;
        margin: 0 0 10px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .vlvp-specifications ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .vlvp-specifications li {
        font-size: 0.9rem !important;
        line-height: 1.8 !important;
        color: #555 !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    .vlvp-specifications li:last-child {
        border-bottom: none !important;
    }
    
    .vlvp-specifications strong {
        color: #333 !important;
        font-weight: 600 !important;
    }
    
    /* ===== MOBILE DESCRIPTION ===== */
    .vlvp-short-description {
        margin: 20px 0 !important;
        padding: 16px 0 !important;
        border-top: 1px solid #e9ecef !important;
    }
    
    .vlvp-short-description h4 {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #333 !important;
        margin: 0 0 12px 0 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .vlvp-short-description .vlvp-description-content,
    .vlvp-short-description p {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
        color: #555 !important;
        margin: 0 0 12px 0 !important;
    }
    
    /* ===== MOBILE TRUST BADGES ===== */
    .vlvp-trust-badges {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 20px 0 !important;
        padding: 16px !important;
        background: #f8f9fa !important;
        border-radius: 0 !important;
    }
    
    .vlvp-trust-badges > div {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px !important;
        background: #fff !important;
        border: 1px solid #e9ecef !important;
        border-radius: 0 !important;
    }
    
    .vlvp-trust-badges strong {
        font-size: 0.9rem !important;
        color: #333 !important;
        font-weight: 600 !important;
    }
    
    .vlvp-trust-badges span {
        font-size: 0.85rem !important;
        color: #666 !important;
    }
    
    /* ===== MOBILE SHARE ICONS ===== */
    .vlvp-share {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 20px 0 !important;
        padding: 16px 0 !important;
        border-top: 1px solid #e9ecef !important;
    }
    
    .vlvp-share span {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #333 !important;
    }
    
    .vlvp-share a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        background: #f8f9fa !important;
        color: #555 !important;
        border-radius: 0 !important;
        text-decoration: none !important;
        transition: all 0.2s !important;
    }
    
    .vlvp-share a:hover,
    .vlvp-share a:active {
        background: var(--primary-color) !important;
        color: #fff !important;
    }
    
    /* ===== MOBILE RELATED PRODUCTS ===== */
    .vlvp-related-products {
        padding: 30px 16px !important;
        background: #f8f9fa !important;
    }
    
    .vlvp-related-products h2 {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        color: #333 !important;
        margin: 0 0 20px 0 !important;
        text-align: center !important;
    }
    
    .vlvp-related-products .products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .vlvp-related-products .product {
        background: #fff !important;
        border: 1px solid #e9ecef !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    
    .vlvp-related-products .product img {
        width: 100% !important;
        height: 140px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    
    .vlvp-related-products .woocommerce-loop-product__title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin: 8px !important;
        font-weight: 600 !important;
        color: #333 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    .vlvp-related-products .price {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--primary-color) !important;
        margin: 0 8px 8px 8px !important;
    }
    
    .vlvp-related-products .button {
        width: calc(100% - 16px) !important;
        margin: 0 8px 8px 8px !important;
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        background: var(--primary-color) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 0 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    /* Even more compact */
    .vlvp-summary {
        padding: 16px 12px !important;
    }
    
    /* Smaller fixed height for small screens */
    .vlvp-hero {
        padding: 16px 12px !important;
        height: 300px !important; /* Smaller fixed height */
    }
    
    .vlvp-hero-img {
        max-height: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure small images still look good */
    @supports (object-fit: contain) {
        .vlvp-hero-img[width] {
            min-width: 180px !important;
            min-height: 180px !important;
        }
    }
    
    /* Single column related products on very small screens */
    .vlvp-related-products .products {
        grid-template-columns: 1fr !important;
    }
    
    .vlvp-related-products .product {
        display: flex !important;
        flex-direction: row !important;
    }
    
    .vlvp-related-products .product img {
        width: 120px !important;
        height: 120px !important;
        flex-shrink: 0 !important;
    }
    
    .vlvp-related-products .woocommerce-loop-product__title {
        font-size: 0.95rem !important;
    }
    
    /* Smaller thumbnails */
    .vlvp-thumbs li {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* Tighter spacing */
    .vlvp-product-main {
        margin-bottom: 20px !important;
    }
    
    .vlvp-related-products {
        padding: 20px 12px !important;
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .single_add_to_cart_button,
    .vlvp-thumbs li,
    .vlvp-share a,
    .variations select {
        min-height: 44px !important;
    }
    
    /* Remove hover effects */
    .vlvp-thumbs li:hover {
        border-color: #ddd !important;
    }
    
    .vlvp-thumbs li.active {
        border-color: var(--primary-color) !important;
    }
    
    /* Add tap feedback */
    .single_add_to_cart_button:active {
        opacity: 0.8 !important;
    }
}