/* Breadcrumb Styling */
.product-breadcrumb{color:#666;font-size:.75rem;padding:.1rem 0;margin-bottom:.5rem;border-bottom:1px solid #f1f1f1}
.breadcrumb-item+.breadcrumb-item::before{color:#ccc;font-size:.7rem}
@media (min-width:768px){.product-top-row{margin-top:-50px}}
/* Thumbnail Gallery */
.thumbnail-gallery{max-height:400px;overflow-y:auto;scrollbar-width:none}
.thumbnail-gallery::-webkit-scrollbar{display:none}
.thumbnail-item{cursor:pointer;position:relative}
.thumbnail-item.selected::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid #e01e5a;pointer-events:none}
/* Thumbnail Navigation Arrows */
.thumbnail-nav-wrapper{width:100%}
.thumbnail-nav-btn{width:36px;height:36px;background-color:rgba(255,255,255,.95);border-radius:8px;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.12);backdrop-filter:blur(10px)}
.thumbnail-nav-btn:hover{background-color:#fff;border-color:#999;box-shadow:0 4px 12px rgba(0,0,0,.2);transform:translateY(-2px)}
.thumbnail-nav-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.thumbnail-nav-btn i{font-size:16px;color:#444;line-height:1;font-weight:600}
.thumbnail-nav-btn:hover i{color:#000}
/* Main Product Image */
.main-image-container{position:relative;cursor:pointer}
.main-product-image{width:100%}
@media (max-width:767.98px){.product-top-row{margin-top:0!important}.thumbnail-gallery{max-height:none;overflow-y:hidden;overflow-x:auto;display:flex;flex-direction:row!important;gap:8px;padding-bottom:6px;-webkit-overflow-scrolling:touch}.thumbnail-item{margin-bottom:0!important;flex:0 0 auto}.thumbnail-img{width:72px;height:auto}.thumbnail-nav-wrapper{display:none!important}.main-image-container{margin-bottom:10px}.product-details{padding:12px 8px!important}}
/* Full-Size Modal Styling */
.modal-fullscreen{padding:0}
.modal-fullscreen .modal-content{height:100vh;border:none;border-radius:0}
.modal-image-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Enhanced Image Quality and Zoom Support */
.modal-main-image{max-height:90vh;max-width:90%;object-fit:contain;transition:transform .3s ease;cursor:zoom-in;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated}
.modal-main-image.zoomed{cursor:grab;cursor:-webkit-grab}
.modal-main-image.zoomed:active{cursor:grabbing;cursor:-webkit-grabbing}

/* Touch support for mobile devices */
@media (max-width: 768px) {
    .modal-main-image {
        max-height: 85vh;
        max-width: 95%;
        touch-action: manipulation;
    }
    
    .modal-controls {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 20;
    }
    
    .modal-controls .btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .modal-nav-arrow {
        width: 50px;
        height: 50px;
    }
}

/* High-quality image rendering */
.modal-main-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Zoom transition effects */
.modal-image-container {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-main-image.zoomed {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading states for progressive image loading */
.modal-main-image.loading {
    opacity: 0.7;
    filter: blur(2px);
}

.modal-main-image.loaded {
    opacity: 1;
    filter: blur(0);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Enhanced zoom controls */
.modal-controls .btn {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    transition: all 0.3s ease;
}

.modal-controls .btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Zoom indicator */
.zoom-level-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zoom-level-indicator.visible {
    opacity: 1;
}
.modal-pagination{font-size:14px;font-weight:500}
.modal-controls{position:absolute;top:10px;right:10px;z-index:20}
.modal-controls .btn{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .3s ease}
.modal-controls .btn:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,.3)}
/* Modal Navigation Arrows */
.modal-nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:60px;background-color:rgba(0,0,0,.7);border-radius:12px;border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:10;backdrop-filter:blur(10px)}
.modal-nav-arrow:hover{background-color:rgba(0,0,0,.9);border-color:rgba(255,255,255,.6);transform:translateY(-50%) scale(1.1);box-shadow:0 8px 25px rgba(0,0,0,.4)}
.modal-nav-prev{left:30px}
.modal-nav-next{right:30px}
.modal-nav-arrow i{font-size:24px;color:#fff;font-weight:600}
.modal-nav-arrow:hover i{color:#fff}
.zoom-icon{position:absolute;bottom:20px;right:20px;z-index:10}
/* Product Details */
.product-title{font-weight:600;color:#333}
.product-medium{color:#666}
.artist-name{color:#666}
.product-price{display:flex;align-items:center;margin-bottom:1rem}
.price-tag{font-size:1.75rem;font-weight:600;color:#000}
.price-tag::before{content:'$';color:#000}
.original-price{font-size:1.5rem;font-weight:400;text-decoration:line-through;color:#999;margin-right:10px}
.product-details-list{list-style-type:disc;padding-left:1.25rem;line-height:1.6}
/* Buttons */
.btn-primary{background-color:#ff3366;border:none}
.btn-primary:hover{background-color:#e62e5c}
/* Delivery Section */
.delivery-title{font-size:1rem;font-weight:600}
.returns-info{border-top:1px solid #eee;padding-top:1rem}
/* Vertical Tabs Styling */
.vertical-tabs{border-right:1px solid #dee2e6}
.vertical-tabs .nav-link{border:none;border-radius:0;padding:1rem 1.5rem;margin-bottom:.5rem;color:#495057;position:relative;transition:all .2s ease;display:flex;align-items:center}
.vertical-tabs .nav-link:hover{background-color:#f8f9fa}
.vertical-tabs .nav-link.active{color:#ff3366;background-color:transparent;font-weight:600}
.vertical-tabs .nav-link.active::before{content:'';position:absolute;top:0;right:-1px;bottom:0;width:2px;background-color:#ff3366}
.vertical-tabs .tab-icon{margin-right:10px;font-size:1.1rem}
/* Tab Content Styling */
#product-tabs-content{min-height:400px;background-color:#fff;box-shadow:0 .125rem .25rem rgba(0,0,0,.075)}
.tab-pane h3{color:#333;border-bottom:1px solid #eee;padding-bottom:.75rem;margin-bottom:1.5rem}
.tab-pane h4{color:#555}
.artwork-details li,.shipping-details li,.returns-details li{position:relative;padding-left:1.5rem;margin-bottom:.5rem;list-style:none}
.shipping-details,.returns-details{list-style-type:none;padding-left:0}
.artwork-details li::before,.shipping-details li::before,.returns-details li::before{content:'•';position:absolute;left:0;color:#ff3366}
/* Accordion Styling */
.accordion-button:not(.collapsed){color:#ff3366;background-color:rgba(255,51,102,.05)}
.accordion-button:focus{box-shadow:0 0 0 .25rem rgba(255,51,102,.25)}
/* Responsive adjustments */
@media (max-width:767.98px){.vertical-tabs{border-right:none;border-bottom:1px solid #dee2e6;margin-bottom:1rem}.vertical-tabs .nav-link.active::before{right:0;bottom:-1px;width:100%;height:2px}}
/* Artist Artworks Section Styles */
.section-title{font-size:1.75rem;font-weight:600;margin-bottom:1.5rem;position:relative;padding-bottom:.75rem;border-bottom:1px solid #eee}
.section-content{transition:opacity .3s ease}
.section-content.loading{opacity:.6}
.section-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;display:none}
.loader{width:48px;height:48px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 2s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
/* Product Card Styles */
.product-card{background-color:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:transform .3s ease,box-shadow .3s ease;height:100%;position:relative}
.product-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,.1)}
.product-img-container{position:relative;padding-top:100%;overflow:hidden}
.product-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product-card:hover .product-img{transform:scale(1.05)}
.product-info{padding:1rem}
.product-title{font-size:1rem;font-weight:500;margin-bottom:.5rem;line-height:1.4}
.product-title a{color:#333;text-decoration:none}
.product-title a:hover{color:#000}
.product-meta{font-size:.85rem;color:#777;margin-top:.5rem}
.sold-badge{position:absolute;top:10px;right:10px;background-color:#cc0000;color:#fff;font-weight:700;padding:5px 10px;font-size:.8rem;letter-spacing:1px;z-index:2;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2)}
/* Pagination Styles */
.pagination-container{display:flex;justify-content:center;align-items:center;margin-top:2.5rem;margin-bottom:1.5rem;position:relative}
.pagination-counter{position:absolute;right:0;color:#777;font-size:.9rem}
.pagination{display:flex;list-style:none;padding:0;margin:0;gap:5px}
.pagination li{margin:0}
.pagination .page-item .page-link{color:#333;background-color:#fff;border:1px solid #ddd;padding:.5rem .75rem;transition:all .3s ease;font-weight:500;border-radius:4px;min-width:40px;text-align:center}
.pagination .page-item.active .page-link{background-color:#000;border-color:#000;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.pagination .page-item .page-link:hover:not(.disabled):not(.active){background-color:#f2f2f2;border-color:#999;color:#000;transform:translateY(-2px);box-shadow:0 3px 8px rgba(0,0,0,.1)}
.pagination .page-item.disabled .page-link{color:#aaa;pointer-events:none;background-color:#f9f9f9;border-color:#ddd} 

/* Mobile touch optimizations */
@media (max-width: 768px) {
    .modal-main-image {
        max-height: 85vh;
        max-width: 95%;
        touch-action: manipulation;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    .modal-controls {
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 20;
    }
    
    .modal-controls .btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
        touch-action: manipulation;
    }
    
    .modal-nav-arrow {
        width: 50px;
        height: 50px;
        touch-action: manipulation;
    }
    
    .zoom-level-indicator {
        top: 60px;
        left: 10px;
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* High-quality image rendering for all devices */
.modal-main-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Enhanced zoom controls with better visibility */
.modal-controls .btn {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.modal-controls .btn:hover,
.modal-controls .btn:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.modal-controls .btn:active {
    transform: scale(0.95);
}

/* Improved zoom indicator */
.zoom-level-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.zoom-level-indicator.visible {
    opacity: 1;
}

/* Loading animation for progressive image loading */
@keyframes imageLoad {
    0% {
        opacity: 0;
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

.modal-main-image.loading {
    animation: imageLoad 0.5s ease-out;
}

/* Smooth zoom transitions */
.modal-image-container {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.modal-main-image.zoomed {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}