/* General Product Information Styles */
.product-container-custom {
    max-width: 1000px; /* Maximum width for the container */
    margin: 40px auto; /* Center the container horizontally with margin */
    padding: 20px; /* Padding for inner spacing */
    background-color: #2c2c2c; /* Dark background color */
    border: 1px solid #333; /* Border for definition */
    border-radius: 10px; /* Rounded corners for a smoother look */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */
    display: flex; /* Flex layout for better alignment */
    flex-direction: column; /* Vertical stacking */
}

/* Product Header Styles */
.product-header-custom {
    text-align: center; /* Center-align the text */
    font-size: 24px; /* Larger font size */
    font-weight: bold; /* Bold font for emphasis */
    color: #00ff00; /* Bright green for visibility */
    margin-bottom: 20px; /* Spacing below the header */
}

/* Product Body Layout */
.product-body-custom {
    display: flex; /* Flex layout */
    justify-content: flex-start; /* Align content to the start (left) */
    align-items: flex-start; /* Align vertically at the top */
}

/* Main Product Image Styles */
.main-image {
    max-width: 300px; /* Limit the maximum width */
    border-radius: 10px; /* Rounded corners for aesthetics */
    border: 2px solid #333; /* Border for definition */
    margin-right: 20px; /* Space to the right of the image */
    cursor: pointer; /* Cursor change to indicate clickable */
}

/* Thumbnail Gallery Styles */
.thumbnail-gallery {
    display: flex; /* Flex layout for horizontal arrangement */
    flex-direction: row; /* Horizontal alignment */
    gap: 10px; /* Space between thumbnails */
    margin-top: 20px; /* Space above the gallery */
}

/* Individual Thumbnail Styles */
.thumbnail-image {
    max-width: 50px; /* Limit the width of the thumbnail */
    border-radius: 5px; /* Rounded corners for a smooth look */
    border: 1px solid #333; /* Border for definition */
    cursor: pointer; /* Cursor change for interaction */
    transition: transform 0.2s; /* Smooth transition for hover effect */
}

/* Hover Effect for Thumbnails */
.thumbnail-image:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

/* Product Details Section */
.product-details-custom {
    flex-grow: 1; /* Allow the details to grow to fill space */
    display: flex; /* Flex layout */
    flex-direction: column; /* Vertical stacking */
    justify-content: space-between; /* Distribute space evenly */
}

/* Product Description */
.product-description-custom {
    font-size: 16px; /* Standard font size */
    color: #b8f28d; /* Light green for weed-style */
    margin-bottom: 20px; /* Space below the description */
}

/* Product Price */
.product-price-custom {
    font-size: 20px; /* Larger font size for emphasis */
    color: #ffcc00; /* Bright yellow for visibility */
    text-align: right; /* Right-aligned text */
    margin-bottom: 20px; /* Space below the price */
}

/* Product Stock */
.product-stock-custom {
    font-size: 16px; /* Standard font size */
    color: #00ff00; /* Bright green */
    text-align: right; /* Right-aligned text */
    margin-bottom: 20px; /* Space below */
}

/* Product Add to Basket Button */
.product-button-custom {
    background-color: #33cc33; /* Bright green background */
    color: #1a1a1a; /* Dark text color */
    padding: 10px; /* Padding for comfort */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    font-weight: bold; /* Bold font */
    cursor: pointer; /* Cursor change on hover */
    margin-top: 20px; /* Space above the button */
}

/* Button Hover Effect */
.product-button-custom:hover {
    background-color: #28a745; /* Darker green on hover */
}

/* Lightbox Styles */
.lightbox {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position for overlay */
    top: 0; /* Top position */
    left: 0; /* Left position */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background: rgba(0, 0, 0, 0.8); /* Dark background */
    justify-content: center; /* Center the content */
    align-items: center; /* Align vertically */
    z-index: 1000; /* High z-index to be on top */
}

/* Lightbox Close Button */
.lightbox-close {
    position: absolute; /* Absolute position */
    top: 10px; /* Positioned at the top */
    right: 10px; /* Positioned at the right */
    font-size: 24px; /* Larger font size */
    color: white; /* White color for contrast */
    cursor: pointer; /* Cursor change on hover */
    text-decoration: none; /* No underline */

}

/* Lightbox Image */
.lightbox img {
    max-width: 80%; /* Limit the width */
    max-height: 80%; /* Limit the height */
    border-radius: 10px; /* Rounded corners */
}

/* No Product Found Message */
.no-product-found {
    text-align: center; /* Center-align the text */
    font-size: 20px; /* Larger font size */
    color: #ff3333; /* Red for warning */
    background-color: #f8d7da; /* Light pink background */
    padding: 20px; /* Padding for comfort */
    border-radius: 10px; /* Rounded corners */
    margin-bottom: 20px; /* Space below */
}