/* General body styles */
body {
    margin: 0;
    background-color: #f8f8f8;
}

/* Container holding the entire item details */
.item-detail-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;
    padding: 20px;
    max-width: 650px;
    margin: 0 auto;
}

.item-details {
    align-self: flex-start; /* Align only this child element to the left */
    text-align: left; /* Ensure text itself is aligned to the left */
    margin-top: 20px; /* Space above details */
    width: 100%; /* Optional: make it span the full width */
    padding-left: 20px;
}

/* Container for secondary images */
.secondary-images-container {
    display: grid;          /* Use flexbox for layout */
    flex-direction: column; /* Stack secondary image container vertically */
    align-items: center;    /* Center the secondary images container horizontally */
}

/* Secondary images styling */
.secondary-images {
    display: flex;          /* Use flexbox for secondary images */
    flex-direction: row;    /* Align items in a row */
    justify-content: center; /* Center the secondary images horizontally within the container */ 
    align-items: center;    /* Center the secondary images vertically within their row */ 
    gap: 10px;              /* Space between images */ 
    width: 100%;            /* Ensure full width */
}

/* Style for secondary (thumbnail) images */
.thumbnail {
    width: 80px; /* Thumbnail width */
    height: 80px; /* Thumbnail height */
    object-fit: cover; /* Ensures image maintains aspect ratio */
    margin: 5px; /* Spacing between thumbnails */
    border: 2px solid transparent; /* Transparent border by default */
    cursor: pointer; /* Pointer cursor for clickable images */
    transition: border 0.3s; /* Smooth border transition */
}

/* Active thumbnail style */
.thumbnail:hover {
    border: 2px solid #bebebe; /* Highlight border on hover */
}

/* Item header styling */
.item-header {
    text-align: center;
}

/* Detail tag styling */
.detail-tag {
    font-family: "Plus Jakarta Sans";
    font-weight: 400; 
    color: #000; /* Darker color for tags */
    letter-spacing: 2px;
}

/* Detail info styling */
.detail-info {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; 
    color: #333; /* Darker color for details */
}

.item-title { 
    font-family: 'Roboto', sans-serif;
    font-weight: 300; 
    color: #222; /* Darker color for details */
}

/* 
   ------ IMAGE ZOOM CSS ------
*/

/* Container for the image zoom feature */
#image-container {
    width: 100%;
    position: relative;
    touch-action: none;
}

#image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: 0 0;
}

/* Zoom effect */
#image-container::after {
    display: var(--display);
    content: '';
    width: 100%;
    height: 100%;
    background-color: black;
    background-image: var(--url);
    background-size: 200%;
    background-position: var(--zoom-x) var(--zoom-y);
    position: absolute;
    left: 0;
    top: 0;
}

.wrong-page-header {
    font-family: 'Roboto', sans-serif;
    font-weight: 300; 
    color: #222; /* Darker color for details */
}

/* Responsive adjustments for mobile */
@media (max-width: 600px) {
    .item-detail-container {
        padding: 10px; /* Reduced padding for mobile */
    }

    .thumbnail {
        width: 60px; /* Smaller thumbnails for mobile */
        height: 60px; 
    }

    #main-image {
        max-width: 100%; /* Ensure main image fits on smaller screens */
    }
}