/* ====================================
   COMPLETE SINGLE PRODUCT PAGE STYLES
   MS InstruVibe - FIXED VERSION
   ==================================== */

/* ========== WIDER CONTAINER ========== */
.ast-container {
    max-width: 1400px !important;
}

/* ========== MAIN LAYOUT ========== */
.custom-single-product-page {
    padding: 40px 0;
    background: #f8f9fa;
}

.product-layout-wrapper {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    position: relative;
}

.product-breadcrumb {
    margin-bottom: 30px;
    font-size: 0.9rem;
}

.product-breadcrumb a {
    color: #0066CC;
    text-decoration: none;
}

.product-breadcrumb a:hover {
    text-decoration: underline;
}

.product-main-section {
    padding: 10px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}

/* ========== 50-50 GRID LAYOUT ========== */
.product-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    margin-bottom: 0;
    align-items: start;
}

/* ========== GALLERY SECTION ========== */
.product-gallery-section {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    grid-column: 1;
    grid-row: 1 / 3;
    z-index: 1;
}

/* FIXED: Transparent background instead of grey */
.main-product-image {
    position: relative;
    border-radius: 12px;
    text-align: center;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

.main-product-image img {
    max-width: 100%;
    max-height: 600px;
    width: auto;
    height: auto;
    object-fit: contain;
    transform: none !important;
    transform-origin: center !important;
    transition: none !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* ========== NAVIGATION ARROWS - FIXED AND ULTRA VISIBLE ========== */
.gallery-nav-arrows {
    position: absolute !important;
    top: 50% !important;
    left: -20px !important;
    right: -20px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    width: calc(100% + 40px) !important;
}

.gallery-prev,
.gallery-next {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    background: #FFFFFF !important;
    border: 10px solid #0066CC !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: all !important;
    transition: all 0.3s ease !important;
    position: absolute !important;
    z-index: 99999999 !important;
    box-shadow: 0 15px 60px rgba(0, 102, 204, 1),
        0 0 0 8px rgba(255, 255, 255, 1),
        0 0 40px rgba(0, 102, 204, 1),
        0 5px 20px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.gallery-prev {
    left: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.gallery-next {
    right: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.gallery-prev:hover,
.gallery-next:hover {
    background: #0066CC !important;
    border-color: #004999 !important;
    transform: translateY(-50%) scale(1.4) !important;
    box-shadow: 0 18px 60px rgba(0, 102, 204, 1),
        0 0 0 8px rgba(0, 102, 204, 0.5),
        0 0 40px rgba(0, 102, 204, 1),
        inset 0 0 30px rgba(255, 255, 255, 0.3) !important;
}

.gallery-prev svg,
.gallery-next svg {
    stroke: #0066CC !important;
    stroke-width: 6 !important;
    width: 48px !important;
    height: 48px !important;
    fill: none !important;
    display: block !important;
    transition: stroke 0.3s ease !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)) !important;
    pointer-events: none !important;
}

.gallery-prev:hover svg,
.gallery-next:hover svg {
    stroke: white !important;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5)) !important;
}

@keyframes pulse-arrows {
    0%, 100% {
        box-shadow: 0 15px 60px rgba(0, 102, 204, 1),
            0 0 0 8px rgba(255, 255, 255, 1),
            0 0 40px rgba(0, 102, 204, 1),
            0 5px 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 20px 70px rgba(0, 102, 204, 1),
            0 0 0 12px rgba(0, 102, 204, 0.5),
            0 0 50px rgba(0, 102, 204, 1),
            0 8px 25px rgba(0, 0, 0, 0.4);
    }
}

.gallery-prev,
.gallery-next {
    animation: pulse-arrows 2s infinite !important;
}

/* ========== BADGES ========== */
.product-discount-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #FF6B00;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    z-index: 50;
}

.product-new-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #28a745;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    z-index: 50;
}

/* ========== THUMBNAILS ========== */
.thumbnail-gallery {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.thumbnail-item {
    width: 80px;
    height: 80px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
}

.thumbnail-item:hover,
.thumbnail-item.active {
    border-color: #0066CC;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}

/* ========== PRODUCT INFO ========== */
.product-info-section {
    padding: 10px 0;
    width: 100%;
    grid-column: 2;
    grid-row: 1;
}

.product-main-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* FIXED: Enhanced price styling with BOLD font */
.product-price-box {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
    padding: 25px;
    border-radius: 12px;
    border: 3px solid #c8e6c9;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(56, 142, 60, 0.15);
}

.product-price-box .price,
.product-price-box .price .woocommerce-Price-amount,
.product-price-box .price ins .woocommerce-Price-amount,
.product-price-box .price ins,
.product-price-box ins {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: #2e7d32 !important;
    letter-spacing: -1px;
    text-shadow: 0 2px 4px rgba(46, 125, 50, 0.1);
    display: inline-block;
}

.product-price-box .price del {
    color: #9e9e9e !important;
    font-size: 1.6rem !important;
    margin-right: 15px;
    font-weight: 600 !important;
    text-decoration: line-through;
}

.product-price-box .price del .woocommerce-Price-amount {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: #9e9e9e !important;
}

.product-price-box .price ins {
    text-decoration: none;
    position: relative;
}

.product-price-box .price ins::before {
    content: '₹';
    font-size: 2rem;
    vertical-align: super;
    margin-right: 2px;
}

.product-rating {
    margin-bottom: 20px;
}

.star-rating {
    color: #FFA500;
}

.product-meta-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.meta-item strong {
    min-width: 100px;
    color: #2C3E50;
}

.stock-status {
    font-weight: 600;
}

.stock-status.instock {
    color: #28a745;
}

.stock-status.outofstock {
    color: #dc3545;
}

/* ========== CART SECTION ========== */
.full-width-cart-section {
    background: transparent;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0 0 15px 0;
}

.cart-actions-row {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: fit-content;
    padding: 20px 0;
}

.quantity-selector {
    flex: 0 0 auto;
}

.quantity-selector label {
    display: none;
}

.quantity-input {
    display: flex;
    align-items: center;
    gap: 0;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.qty-btn {
    width: 50px;
    height: 50px;
    background: #f8f9fa;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    color: #2C3E50;
    transition: all 0.3s;
}

.qty-btn:hover {
    background: #0066CC;
    color: white;
}

.qty-field {
    width: 80px;
    height: 50px;
    border: none;
    border-left: 2px solid #e9ecef;
    border-right: 2px solid #e9ecef;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
}

.qty-field:focus {
    outline: none;
}

.product-action-buttons {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}

.single-btn {
    padding: 0 30px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    text-decoration: none;
    height: 50px;
    min-height: 50px;
    white-space: nowrap;
    min-width: 180px;
}

.single-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
}

.btn-add-to-cart {
    background: #ff9f00;
    color: white;
}

.btn-add-to-cart:hover {
    background: #e58100;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 159, 0, 0.4);
}

.btn-buy-now {
    background: #fb641b;
    color: white;
}

.btn-buy-now:hover {
    background: #d44f12;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 100, 27, 0.4);
}

/* ========== TRUST BADGES ========== */
.trust-badges-single {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px 0;
    align-items: center;
    background: transparent;
    border: none;
    margin-bottom: 30px;
}

.trust-item {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 10px;
}

.trust-icon {
    font-size: 2rem;
}

.trust-item strong {
    display: block;
    font-size: 0.9rem;
    color: #2C3E50;
}

.trust-item small {
    display: block;
    font-size: 0.75rem;
    color: #7F8C8D;
}

/* ========== KEY FEATURES ========== */
.product-key-features-sidebar {
    background: #f0f7ff;
    padding: 20px;
    border-radius: 10px;
    grid-column: 2;
    grid-row: 2;
}

.product-key-features-sidebar h3 {
    font-size: 1.2rem;
    color: #0066CC;
    margin-bottom: 15px;
}

.product-key-features-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-key-features-sidebar li {
    padding: 10px 0;
    border-bottom: 1px solid #d6e9ff;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.product-key-features-sidebar li:last-child {
    border-bottom: none;
}

.feature-icon {
    color: #28a745;
    font-weight: bold;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ========== TABS ========== */
.product-tabs-section {
    margin-top: 0;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #e9ecef;
    grid-column: 1 / -1;
}

.tabs-navigation {
    display: flex;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.tab-btn {
    flex: 1;
    padding: 18px 20px;
    background: transparent;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: #7F8C8D;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}

.tab-btn:hover {
    background: white;
    color: #0066CC;
}

.tab-btn.active {
    background: white;
    color: #0066CC;
    border-bottom-color: #0066CC;
}

.tabs-content {
    padding: 30px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-panel h3 {
    font-size: 1.5rem;
    color: #2C3E50;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.specs-short-description {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 4px solid #0066CC;
    border-radius: 4px;
}

.specs-short-description h4 {
    font-size: 1.2rem;
    color: #2C3E50;
    margin-bottom: 15px;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.specs-table tr {
    border-bottom: 1px solid #e9ecef;
}

.specs-table th,
.specs-table td {
    padding: 15px;
    text-align: left;
}

.specs-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #2C3E50;
    width: 30%;
}

/* ========== SIDEBAR ========== */
.product-sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sidebar-widget {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.widget-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
}

.related-products-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.related-product-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.related-product-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.related-product-item a {
    display: flex;
    gap: 15px;
    text-decoration: none;
    padding: 12px;
}

.related-product-item img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: #fafafa;
    padding: 8px;
    border-radius: 6px;
}

.related-info h4 {
    font-size: 0.95rem;
    color: #2C3E50;
    margin-bottom: 5px;
    line-height: 1.4;
}

.related-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #388e3c;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.category-list li:last-child {
    border-bottom: none;
}

.category-list a {
    color: #2C3E50;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

.category-list a:hover {
    color: #0066CC;
    padding-left: 10px;
}

.help-widget {
    background: linear-gradient(135deg, #0066CC 0%, #1A1F2E 100%);
    color: white;
}

.help-widget .widget-title {
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.help-widget p {
    margin-bottom: 15px;
    opacity: 0.9;
}

.contact-btn {
    display: block;
    background: white;
    color: #0066CC;
    padding: 12px 20px;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 15px;
    transition: all 0.3s;
}

.contact-btn:hover {
    background: #FF6B00;
    color: white;
    transform: translateY(-2px);
}

.contact-info p {
    margin: 8px 0;
    font-size: 0.9rem;
}

.contact-info a {
    color: white;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

.out-of-stock-message {
    background: #fff3cd;
    border: 2px solid #ffc107;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.out-of-stock-message p {
    margin: 0;
    font-weight: 600;
    color: #856404;
}

/* ========== RESPONSIVE ========== */
@media (min-width: 1201px) {
    .product-layout-wrapper {
        grid-template-columns: 1fr 350px;
    }

    .product-sidebar {
        order: 2;
    }
}

@media (min-width: 993px) and (max-width: 1200px) {
    .product-layout-wrapper {
        grid-template-columns: 1fr 300px;
    }

    .product-sidebar {
        order: 2;
    }
}

@media (max-width: 992px) {
    .product-layout-wrapper {
        grid-template-columns: 1fr;
    }

    .product-sidebar {
        order: 999 !important;
        margin-top: 40px;
    }

    .product-main-section {
        order: 1;
    }

    .product-grid-new {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .product-gallery-section {
        grid-column: 1;
        grid-row: 1;
    }

    .product-info-section {
        grid-column: 1;
        grid-row: 2;
    }

    .product-key-features-sidebar {
        grid-column: 1;
        grid-row: 3;
    }

    .product-tabs-section {
        grid-column: 1;
    }

    .cart-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .product-action-buttons {
        width: 100%;
    }

    .quantity-selector,
    .quantity-input {
        width: 100%;
        justify-content: center;
    }
	
	.zoom-overlay {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .main-product-image {
        min-height: 400px;
        padding: 30px 20px;
    }

    .gallery-prev,
    .gallery-next {
        width: 80px !important;
        height: 80px !important;
        border: 8px solid #0066CC !important;
    }

    .gallery-prev svg,
    .gallery-next svg {
        width: 40px !important;
        height: 40px !important;
        stroke-width: 5 !important;
    }

    .trust-badges-single {
        grid-template-columns: 1fr;
    }

    .tabs-navigation {
        flex-wrap: wrap;
    }

    .tab-btn {
        flex: 0 0 50%;
    }

    .product-main-title {
        font-size: 1.4rem;
    }

    .product-price-box .price,
    .product-price-box .price ins,
    .product-price-box .price .woocommerce-Price-amount {
        font-size: 2.8rem !important;
    }
}

@media (max-width: 480px) {
    .product-main-title {
        font-size: 1.3rem;
    }

    .product-price-box .price,
    .product-price-box .price ins,
    .product-price-box .price .woocommerce-Price-amount {
        font-size: 2.5rem !important;
    }

    .product-price-box .price del {
        font-size: 1.6rem !important;
    }

    .thumbnail-item {
        width: 60px;
        height: 60px;
    }

    .product-action-buttons {
        flex-direction: column;
    }

    .gallery-prev,
    .gallery-next {
        width: 70px !important;
        height: 70px !important;
        border: 6px solid #0066CC !important;
    }

    .gallery-prev svg,
    .gallery-next svg {
        width: 36px !important;
        height: 36px !important;
        stroke-width: 5 !important;
    }

    .main-product-image {
        padding: 20px 10px;
        min-height: 300px;
    }
}

/* ====================================
   NUCLEAR OPTION - FORCE ARROWS ABOVE EVERYTHING
   Add this CSS with highest priority
   ==================================== */

/* Fix stacking context on ALL parent elements */
.custom-single-product-page,
.ast-container,
.product-layout-wrapper,
.product-main-section,
.product-grid-new,
.product-gallery-section {
    position: relative !important;
    z-index: auto !important;
    transform: none !important;
    isolation: auto !important;
}

/* Main image container - create new stacking context */
.main-product-image {
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
    isolation: isolate !important;
}

/* Arrows container - OUTSIDE normal stacking */
.gallery-nav-arrows {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147483647 !important; /* Maximum possible z-index */
    pointer-events: none !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
}

/* Individual arrow buttons - MAXIMUM VISIBILITY */
.gallery-prev,
.gallery-next {
    /* CRITICAL: Use fixed positioning to escape all stacking contexts */
    position: fixed !important;
    
    /* Size - Large and visible */
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    
    /* Styling - Blue for production, change to red for testing */
    background: #0066CC !important;
    border: 8px solid #FFFFFF !important;
    border-radius: 50% !important;
    
    /* Maximum z-index possible */
    z-index: 2147483647 !important;
    
    /* Visibility */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* Interaction */
    cursor: pointer !important;
    pointer-events: all !important;
    
    /* Flexbox */
    align-items: center !important;
    justify-content: center !important;
    
    /* Shadow for depth */
    box-shadow: 0 10px 40px rgba(0, 102, 204, 0.8),
                0 0 20px rgba(255, 255, 255, 1),
                0 5px 15px rgba(0, 0, 0, 0.4) !important;
    
    /* Remove any hiding properties */
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    transform: none !important;
    
    /* Animation */
    transition: all 0.3s ease !important;
}

/* Position arrows using JavaScript - we'll calculate position dynamically */
.gallery-prev {
    /* Left side - position will be set by JavaScript */
}

.gallery-next {
    /* Right side - position will be set by JavaScript */
}

.gallery-prev:hover,
.gallery-next:hover {
    background: #004999 !important;
    transform: scale(1.2) !important;
    box-shadow: 0 15px 50px rgba(0, 102, 204, 1),
                0 0 30px rgba(255, 255, 255, 1),
                0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* SVG styling */
.gallery-prev svg,
.gallery-next svg {
    width: 48px !important;
    height: 48px !important;
    stroke: white !important;
    stroke-width: 3 !important;
    fill: none !important;
    display: block !important;
    pointer-events: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.gallery-prev:hover svg,
.gallery-next:hover svg {
    stroke: white !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)) !important;
}

/* Pulsing animation */
@keyframes pulse-arrows-fixed {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(0, 102, 204, 0.8),
                    0 0 20px rgba(255, 255, 255, 1),
                    0 5px 15px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 15px 50px rgba(0, 102, 204, 1),
                    0 0 30px rgba(255, 255, 255, 1),
                    0 8px 20px rgba(0, 0, 0, 0.5);
    }
}

.gallery-prev,
.gallery-next {
    animation: pulse-arrows-fixed 2s infinite !important;
}

/* Override ANY theme or plugin styles */
body .gallery-prev,
body .gallery-next,
html body .gallery-prev,
html body .gallery-next {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147483647 !important;
}

/* For testing - add red background */
/* Uncomment this to make arrows RED for visibility testing
.gallery-prev,
.gallery-next {
    background: #FF0000 !important;
}
*/

/* Zoom Overlay - Flipkart Style */
.zoom-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    z-index: 999999;
    display: none;
    overflow: hidden;
}

.zoom-overlay.active {
    display: block;
}

.zoom-overlay img {
    position: absolute;
    width: 200%;
    height: auto;
    min-height: 200%;
    object-fit: contain;
    transform-origin: top left;
}

/* Zoom Lens - Shows where you're hovering */
.zoom-lens {
    position: absolute;
    border: 3px solid #0066CC;
    background: rgba(0, 102, 204, 0.1);
    pointer-events: none;
    display: none;
    z-index: 10;
}

.zoom-lens.active {
    display: block;
}