/* Product Page Specific Styles - Mobile & Desktop Optimizations */

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
    /* Improved mobile layout */
    .product-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Better mobile image handling */
    .main-image-container {
        aspect-ratio: 1/1 !important;
        border-radius: 8px !important;
    }
    
    /* Improved mobile typography */
    .product-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    
    .product-price {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Better mobile buttons */
    .action-buttons {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .add-to-cart-btn, .order-now-btn {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }
    
    /* Improved mobile quantity selector */
    .quantity-selector {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .quantity-control {
        align-self: stretch !important;
        max-width: 200px !important;
    }
    
    /* Better mobile tabs */
    .tab-navigation {
        flex-direction: column !important;
        border-bottom: none !important;
    }
    
    .tab-btn {
        border-bottom: none !important;
        border-right: 3px solid transparent !important;
        justify-content: flex-start !important;
        padding: 1rem !important;
        text-align: left !important;
        font-size: 0.875rem !important;
    }
    
    .tab-btn.active {
        border-right-color: #007bff !important;
        border-bottom-color: transparent !important;
        background-color: #f8f9fa !important;
    }
    
    .tab-content {
        padding: 1.5rem !important;
    }
    
    /* Improved mobile thumbnails */
    .thumbnail-gallery {
        justify-content: center !important;
        gap: 0.5rem !important;
    }
    
    .thumbnail-item {
        width: 60px !important;
        height: 60px !important;
        border-radius: 6px !important;
    }
    
    /* Better mobile meta info */
    .product-meta {
        padding: 1rem !important;
        gap: 0.5rem !important;
    }
    
    .meta-item {
        font-size: 0.875rem !important;
    }
    
    /* Improved mobile features */
    .product-features {
        padding: 1rem !important;
    }
    
    .features-list li {
        font-size: 0.875rem !important;
        gap: 0.5rem !important;
    }
    
    /* Better mobile shipping info */
    .shipping-item {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }
    
    .shipping-icon {
        align-self: center !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
    
    /* Improved mobile reviews */
    .review-header {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: flex-start !important;
    }
    
    .review-item {
        padding: 1rem !important;
    }
    
    /* Better mobile specs */
    .specs-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    .spec-item {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Improved mobile breadcrumb */
    .breadcrumb-nav {
        padding: 0.75rem 0 !important;
    }
    
    .breadcrumb {
        font-size: 0.75rem !important;
        flex-wrap: wrap !important;
    }
    
    /* Better mobile container padding */
    .container {
        padding: 0 1rem !important;
    }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
    .product-title {
        font-size: 1.25rem !important;
    }
    
    .product-price {
        font-size: 1.25rem !important;
    }
    
    .tab-content {
        padding: 1rem !important;
    }
    
    .product-meta {
        padding: 0.75rem !important;
    }
    
    .product-features {
        padding: 0.75rem !important;
    }
    
    .reviews-summary {
        padding: 1rem !important;
    }
    
    .review-item {
        padding: 0.75rem !important;
    }
    
    .shipping-item {
        padding: 0.75rem !important;
    }
    
    .spec-item {
        padding: 0.5rem !important;
    }
    
    .thumbnail-item {
        width: 50px !important;
        height: 50px !important;
    }
    
    .quantity-control {
        max-width: 150px !important;
    }
    
    .quantity-input {
        width: 50px !important;
        font-size: 0.875rem !important;
    }
}

/* Desktop Enhancements */
@media (min-width: 769px) {
    /* Improved desktop layout */
    .product-detail-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    
    /* Better desktop image handling */
    .main-image-container {
        aspect-ratio: 4/3 !important;
        border-radius: 12px !important;
    }
    
    /* Enhanced desktop typography */
    .product-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .product-price {
        font-size: 1.75rem !important;
    }
    
    /* Improved desktop buttons */
    .action-buttons {
        flex-direction: row !important;
        gap: 1rem !important;
    }
    
    .add-to-cart-btn, .order-now-btn {
        flex: 1 !important;
        min-width: 150px !important;
    }
    
    /* Better desktop tabs */
    .tab-navigation {
        flex-direction: row !important;
    }
    
    .tab-btn {
        border-bottom: 3px solid transparent !important;
        border-right: none !important;
        justify-content: center !important;
        padding: 1rem 1.5rem !important;
    }
    
    .tab-btn.active {
        border-bottom-color: #007bff !important;
        border-right-color: transparent !important;
    }
    
    /* Enhanced desktop thumbnails */
    .thumbnail-item {
        width: 80px !important;
        height: 80px !important;
        border-radius: 8px !important;
    }
    
    /* Better desktop hover effects */
    .main-image:hover {
        transform: scale(1.02) !important;
    }
    
    .thumbnail-item:hover {
        transform: scale(1.05) !important;
    }
    
    .add-to-cart-btn:hover, .order-now-btn:hover {
        transform: translateY(-2px) !important;
    }
}

/* Tablet Optimizations */
@media (min-width: 481px) and (max-width: 768px) {
    .product-detail-grid {
        gap: 2rem !important;
    }
    
    .product-title {
        font-size: 1.75rem !important;
    }
    
    .product-price {
        font-size: 1.625rem !important;
    }
    
    .action-buttons {
        flex-direction: row !important;
        gap: 0.75rem !important;
    }
    
    .add-to-cart-btn, .order-now-btn {
        flex: 1 !important;
    }
    
    .thumbnail-item {
        width: 70px !important;
        height: 70px !important;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    .main-image,
    .thumbnail-item,
    .add-to-cart-btn,
    .order-now-btn,
    .zoom-btn {
        transition: none !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .product-meta,
    .product-features,
    .shipping-item,
    .spec-item,
    .review-item {
        border: 2px solid #000000 !important;
    }
    
    .tab-btn.active {
        border-bottom-color: #000000 !important;
        background-color: #ffffff !important;
        color: #000000 !important;
    }
}

/* Print Styles */
@media print {
    .breadcrumb-nav,
    .action-buttons,
    .tab-navigation,
    .related-products,
    .zoom-btn {
        display: none !important;
    }
    
    .product-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .main-image-container {
        max-width: 300px !important;
        margin: 0 auto 1rem !important;
    }
    
    .product-title {
        font-size: 1.5rem !important;
        color: #000000 !important;
    }
    
    .product-price {
        font-size: 1.25rem !important;
        color: #000000 !important;
    }
}

/* Focus States for Accessibility */
.add-to-cart-btn:focus,
.order-now-btn:focus,
.quantity-btn:focus,
.tab-btn:focus,
.thumbnail-item:focus {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}

/* Loading States */
.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .zoom-btn {
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    .thumbnail-item:hover {
        transform: none !important;
    }
    
    .main-image:hover {
        transform: none !important;
    }
    
    .add-to-cart-btn:hover,
    .order-now-btn:hover {
        transform: none !important;
    }
    
    /* Larger touch targets */
    .quantity-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    .tab-btn {
        min-height: 44px !important;
    }
    
    .thumbnail-item {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}