/* Product Page - Ensure Edge-to-Edge Image on Mobile */

@media (max-width: 768px) { /* Mobile view */
    .main-container.product-page-container {
        padding-left: 0;
        padding-right: 0;
    }

    /* Reinforce that product-detail within this specific container also has no side padding */
    .main-container.product-page-container .product-detail {
        padding-left: 0;
        padding-right: 0;
        border-left: none;  /* Remove side borders if any were present */
        border-right: none;
        border-radius: 0;   /* No radius if edge-to-edge */
        box-shadow: none;   /* No shadow if edge-to-edge */
    }

    /* Ensure the gallery and image within this structure are also edge-to-edge */
    .main-container.product-page-container .product-gallery .gallery-main {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    .main-container.product-page-container .product-gallery .gallery-main img {
        border-radius: 0;
    }

    /* The product-info section should retain its internal padding to keep text off the edges */
    .main-container.product-page-container .product-info {
        padding-left: 15px;
        padding-right: 15px;
        /* If product-detail had padding-top/bottom, and info is the last child,
           you might want to add padding-bottom here too. */
        padding-bottom: 15px;
    }
}
/* Product Page Breadcrumb Fixes - Refined */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem 1.5rem; /* Adjusted padding */
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-text-muted, #6c757d); /* Use global variable from global-redesign.css */
    background-color: var(--color-bg-surface, #fff); /* Match product detail background */
    border-radius: var(--border-radius, 0.5rem); /* Use global variable */
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0,0,0,0.05)); /* Use global variable */
}
.breadcrumb-item {
    display: flex;
    align-items: center;
    min-width: 0; /* Important for flex items that need to truncate children */
}
.breadcrumb-item a {
    color: var(--color-primary, #007bff); /* Use global variable */
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px; /* Max width for category links */
}
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-separator { margin: 0 0.5em; color: var(--color-text-muted, #6c757d); }
.breadcrumb-current {
    color: var(--color-text-base, #333) !important; /* Ensure this overrides link colors if any */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block; /* Helps with overflow and max-width */
    max-width: 250px; /* Adjust as needed */
    vertical-align: middle; /* Better alignment with other items */
}
@media (max-width: 768px) {
    .breadcrumb { font-size: 0.85rem; padding: 0.75rem 1rem; }
    .breadcrumb-item a { max-width: 120px; }
    .breadcrumb-current { max-width: 180px; }
}
@media (max-width: 480px) {
    .breadcrumb-item a { max-width: 80px; }
    .breadcrumb-current { max-width: 120px; }
}

/* === Product Page Redesign - Image Gallery Enhancements === */
.product-gallery .gallery-main {
    background-color: #fdfdfd; transition: box-shadow 0.3s ease;
    overflow: hidden; margin-bottom: 15px; 
    position: relative;
    /* border-radius and border removed for edge-to-edge */
}

/* Desktop Edge-to-Edge for .product-gallery itself - Cline: Temporarily commented out for debugging product-info */
/*
@media (min-width: 769px) { 
    .main-container.product-page-container .product-gallery {
        width: 100vw;
        position: relative; 
        left: 50%;
        transform: translateX(-50%);
        margin-left: -1px; 
        margin-right: -1px; 
        padding-left: 0; 
        padding-right: 0; 
        border-radius: 0;
    }
    .main-container.product-page-container .product-gallery .gallery-main {
        width: 100%; 
        border-radius: 0; 
        border: none; 
    }
    .main-container.product-page-container .product-gallery .gallery-main img {
        border-radius: 0; 
    }
}
*/

.product-gallery .gallery-main:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } /* This might look odd if truly edge-to-edge */
.product-gallery .gallery-main img {
    transition: transform 0.4s ease-in-out; display: block; width: 100%; height: auto; 
    max-height: 70vh; /* Changed to viewport height for better responsiveness in edge-to-edge */
    object-fit: contain; border-radius: 6px;
    cursor: zoom-in; /* Add zoom-in cursor to main image */
}
.product-gallery .gallery-thumbnails { position: relative; padding: 0 35px; display: flex; gap: 10px; overflow-x: auto; }
.product-gallery .thumbnails-container { scrollbar-width: thin; scrollbar-color: #ccc #f0f0f0; }
.product-gallery .thumbnails-container::-webkit-scrollbar { height: 6px; }
.product-gallery .thumbnails-container::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
.product-gallery .thumbnails-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.product-gallery .thumbnail {
    border: 2px solid transparent; padding: 2px; background-clip: padding-box;
    width: 80px; height: 80px; object-fit: cover; border-radius: 6px; cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.product-gallery .thumbnail.active,
.product-gallery .thumbnail:hover {
    border-color: #0069d9; box-shadow: 0 0 10px rgba(0, 105, 217, 0.4); transform: scale(1.05);
}
.product-gallery .gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8); border: 1px solid #ddd; color: #333;
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    z-index: 10; font-size: 14px;
}
.product-gallery .gallery-nav:hover {
    background-color: #007bff; color: #fff; border-color: #007bff; box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.product-gallery .gallery-nav.prev { left: 0px; }
.product-gallery .gallery-nav.next { right: 0px; }
.zoom-lens { display: none; /* Zoom is disabled */ }

/* Product Page Redesign - Layout */
.main-container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }

.product-detail { 
    background-color: #fff;
    padding: 20px; 
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
    margin-bottom: 40px;
    /* Default to stacked for mobile-first */
    display: flex;
    flex-direction: column;
}

.product-gallery { 
    width: 100%; /* Full width in stacked mobile layout */
    margin-bottom: 30px;
    display: flex; /* Internal flex for gallery components */
    flex-direction: column;
}

.product-info { 
    width: 100%; /* Full width in stacked mobile layout */
    text-align: left;
    display: flex; /* Internal flex for info components */
    flex-direction: column;
}

    /* Desktop: Side-by-side layout */
@media (min-width: 769px) { /* Or your preferred desktop breakpoint e.g. 992px */
    .product-detail {
        flex-direction: row; /* Arrange gallery and info side-by-side */
        gap: 30px; /* Space between gallery and info columns */
    }
    .product-gallery {
        width: 65%; /* Increased width for gallery */
        /* flex: 0 0 65%; */
        margin-bottom: 0; /* No margin-bottom if side-by-side */
    }
    .product-info {
        width: 35%; /* Decreased width for info */
        /* flex: 1 1 35%; */
    }
}
.product-info .product-title {
    font-family: 'Poppins', sans-serif; font-size: 2rem; text-align: left;
    font-weight: 700; color: #222; margin-bottom: 0.75rem; line-height: 1.2;
}
.product-info .product-meta { font-size: 0.9rem; color: #666; margin-bottom: 1rem; }
.product-info .product-meta .sku { margin-left: 10px; }
.product-info .product-price { margin-bottom: 1.5rem; }
.product-info .product-price .current-price {
    font-family: 'Poppins', sans-serif; font-size: 2.25rem; font-weight: 700;
    color: #28a745; letter-spacing: -0.5px;
}
.product-info .product-price .currency-symbol { font-size: 1.8rem; margin-right: 2px; }

.product-form .form-group { margin-bottom: 1.5rem; }
.product-form .form-group label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: #444; }
.product-form .form-group select {
    width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px;
    font-size: 1rem; background-color: #fff; transition: border-color 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 10.707L3.646 6.354a.5.5 0 0 1 .708-.708L8 9.293l3.646-3.647a.5.5 0 0 1 .708.708L8 10.707z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
}
.product-form .form-group select:focus {
    border-color: #007bff; outline: none; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.2);
}
.product-form .btn-primary {
    display: block; width: 100%; background-color: #007bff; color: #fff; text-align: center;
    padding: 15px 20px; font-size: 1.1rem; font-weight: 600; border: none; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}
.product-form .btn-primary:hover { background-color: #0056b3; box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3); }
.product-form .btn-primary:active { transform: translateY(1px); }

.product-sections { margin-top: 40px; border-top: 1px solid #eee; padding-top: 30px; }
.product-tabs { display: flex; border-bottom: 2px solid #eee; margin-bottom: 20px; }
.product-tabs .tab-btn {
    padding: 12px 20px; font-size: 1rem; font-weight: 500; color: #555;
    background-color: transparent; border: none; border-bottom: 3px solid transparent;
    cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; margin-right: 10px;
}
.product-tabs .tab-btn:hover { color: #007bff; }
.product-tabs .tab-btn.active { color: #007bff; border-bottom-color: #007bff; font-weight: 600; }
.tab-content .tab-panel { padding: 20px 0; color: #444; line-height: 1.7; }
.tab-content .tab-panel h3, .tab-content .tab-panel h4 {
    font-family: 'Poppins', sans-serif; color: #333; margin-bottom: 10px;
}

/* Responsive adjustments for WIDE (stacked) layout */
@media (max-width: 992px) {
    .product-detail { padding: 25px; }
    .product-gallery .gallery-main img { max-height: 500px; }
    .product-info .product-title { font-size: 1.8rem; }
    .product-info .product-price .current-price { font-size: 2rem; }
}

@media (max-width: 768px) { /* Mobile - Wide Image Adjustments */
    .product-detail {
        padding: 0; /* Remove padding for edge-to-edge potential */
        padding-top: 15px; /* Keep some top/bottom padding or add to children */
        padding-bottom: 15px;
        border-radius: 0; 
        box-shadow: none; 
        margin-bottom: 20px;
    }
    .product-gallery {
        margin-bottom: 20px;
    }
    .product-gallery .gallery-main {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-bottom: 10px;
    }
    .product-gallery .gallery-main img {
        max-height: 450px; /* Adjusted from 400px */
        border-radius: 0;
    }
    .product-gallery .gallery-thumbnails { padding: 0 10px; }
    .product-gallery .gallery-nav.prev { left: 5px; }
    .product-gallery .gallery-nav.next { right: 5px; }

    .product-info {
        padding: 0 15px; /* Horizontal padding for info text */
        text-align: center; /* Center text for mobile */
    }
    .product-info .product-title {
        font-size: 1.5rem; /* Adjusted from 1.6rem */
        text-align: center;
    }
    .product-info .product-price { justify-content: center; }
    .product-form .form-group label { text-align: left; }
    .product-form .btn-primary { font-size: 1rem; padding: 12px 15px; }
    .product-tabs { overflow-x: auto; }
    .product-tabs .tab-btn { white-space: nowrap; }
}

/* Lightbox Styles - Professional Version with Transitions */
#imageLightbox { 
    display: none; /* Hidden by default */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Dark overlay */
    z-index: 10000; /* High z-index */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Fade transition */
    cursor: pointer; /* Overlay click to close */
    align-items: center; /* For flex centering if active */
    justify-content: center; /* For flex centering if active */
}

#imageLightbox.active { 
    display: flex; /* Use flex to center content */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.lightbox-content-wrapper { /* New wrapper for image and controls */
    position: relative;
    display: flex; /* Allow content to define size up to max */
    max-width: 90%;
    max-height: 90vh;
    cursor: default; /* Don't close if clicking image itself */
}

.lightbox-content {
    display: block;
    max-width: 100%; /* Max width relative to wrapper */
    max-height: 100%; /* Max height relative to wrapper */
    object-fit: contain;
    border-radius: 4px; /* Optional: slight rounding */
    box-shadow: 0 5px 20px rgba(0,0,0,0.3); /* Optional: subtle shadow */
}

.lightbox-controls { /* Container for top-right icons */
    position: absolute;
    top: -40px; /* Position above the image, adjust as needed */
    right: 0px; 
    display: flex;
    gap: 10px;
}

.lightbox-close-btn {
    /* position: absolute; */ /* Now part of lightbox-controls */
    /* top: 15px; */
    /* right: 15px; */ /* Adjusted for consistency */
    color: #fff;
    font-size: 28px; /* Adjusted size */
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px;
    transition: color 0.2s ease;
}

.lightbox-close-btn:hover {
    color: #ccc;
}

/* Zoom trigger icon - to be added to the main image container */
.product-gallery .gallery-main .zoom-trigger-icon { 
    position: absolute;
    top: 15px; /* Adjusted position */
    right: 15px; /* Adjusted position */
    background-color: rgba(0,0,0,0.6); /* Slightly darker background */
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px; /* Adjusted size */
    height: 36px; /* Adjusted size */
    font-size: 18px; /* Adjusted size */
    line-height: 36px; /* Vertically center icon if it's text */
    text-align: center; /* Horizontally center icon if it's text */
    cursor: pointer;
    display: flex; /* Kept for flex alignment if icon is an SVG/FontAwesome */
    align-items: center;
    justify-content: center;
    z-index: 5; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Added subtle shadow */
    transition: background-color 0.2s ease; /* Smooth hover */
}
.product-gallery .gallery-main .zoom-trigger-icon:hover { 
    background-color: rgba(0,0,0,0.9); /* Darker on hover */
}