/* Adjust the phone image size to match the S10 Plus screenshot */
.phone-image {
    /* --- KEY CHANGES FOR SMALLER IMAGE --- */
    width: 200px; /* Reduced the width significantly */
    height: auto; 
    max-height: 200px; /* Max height to constrain the tall phone image */
    /* ------------------------------------- */
    
    object-fit: contain;
    margin-right: 20px; 
    border: 1px solid var(--border-color);
}

/* Ensure the container height doesn't force a huge gap if the image is small */
.product-page-header {
    display: flex;
    align-items: flex-start; /* Keeps the text aligned to the top of the image */
    padding: 20px 0; /* Padding around the content, not a fixed size */
    border-bottom: 1px solid var(--border-color);
    background-color: white; /* Assuming background is white here */
    margin-bottom: 20px;
    border-radius: 4px;
}

.product-details {
    padding-top: 0; /* Remove top padding to align with the image top */
}

    .page-title {
       margin: 0 0 5px;
    font-size: 20px;text-decoration: none;
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    font-family: 'Open Sans';
    }

    .product-details p {
        
        color: var(--light-text);
        margin-bottom: 5px;
        margin: 2px 0;
    font-size: 14px;
    }
    p{
        margin: 0;
    padding: 6px 0;
    }


    /* --- Product Categories and Grid (Mostly from previous response, but refined) --- */

    /* --- Category Styling --- */
.product-category {
    background-color: transparent; 
    padding: 0;
    margin-bottom: 20px; 
}

.product-category h2 {
      font-size: 1.5em;
    font-weight: 600; 
    margin: 30px 0 15px 0; 
    color: var(--text-color);
    
    /* Ensure the category title stays left-aligned */
    text-align: left; 
}


/* --- Product Grid (Responsive Layout) --- */
.product-grid {
    display: grid;
    /* 2 columns on mobile, minimum item width of 140px */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
     gap: 20px; /* increase spacing between cards */
    padding: 0;
}

/* --- Product Item Card (The white box with border) --- */
.product-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding-bottom: 15px;
    background-color: #fff;
    transition: all 0.3s ease;
    width: 225px;
    
}
.product-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-3px);
    
    /* On hover, change the border to the accent color for highlight 
    border: 1px solid var(--accent-color); */
}


/* --- Product Image and Hover Effect --- */
.product-image-box {
    width: 225px;
    /* Fixed height for image area to ensure alignment */
    height: 280px; /* was 220px */
    padding: 10px;

    display: flex;
    justify-content: center;
    align-items: center;
    
    
    /* Key for stacking images for hover effect: */
    position: relative; 
    overflow: hidden; 
}

.product-image-box img {
    max-width: 180px; /* was 150px */
    max-height: 180px;
    object-fit: contain;
    
    /* Key: Position images absolutely within the box */
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the images */
    transition: opacity 0.3s ease; /* Smooth transition */
}

/* Hide the hover image by default */
.product-image-box .hover-img {
    opacity: 0;
}

/* Show the hover image and hide the default image on product hover */
.product-item:hover .product-image-box .default-img {
    opacity: 0; 
}
.product-item:hover .product-image-box .hover-img {
    opacity: 1; 
}
   .product-name {
    font-size: 15px;  /* was 0.85em */
    font-weight: 600;
    margin-top: -30px;
    color: var(--text-color);
    line-height: 1.3;
    padding: 5px 5px 0 5px;
    text-align: center;
    
}

.color-options {
    margin-top: 8px;
    display: flex;
    justify-content: center; 
}

.color-dot {
    display: block; 
   
    border-radius: 50%;
    border: 1px solid #ccc;
     width: 18px;
    height: 18px;
    margin: 0 5px;
    border: 1px solid #bbb;
    cursor: pointer;
    transition: border 0.2s;
}

/* Define colors for the dots */
.color-dot.black { background-color: #000; }
.color-dot.red { background-color: #a00; }
.color-dot.green { background-color: #008000; } 
.color-dot.white { background-color: #fff; border-color: #aaa; } 
.color-dot.orange { background-color: #FFA500; border-color: #aaa; } 
.color-dot.blue { background-color: #1900ffff; border-color: #aaa; } 
.color-dot.lightgreen { background-color: #00FF00; border-color: #aaa; } 
.color-dot.Burgundy { background-color: #800020; border-color: #aaa; } 

/* Add any other colors you need (e.g., orange, purple, etc.) */

.color-dot.active {
    border: 2px solid #333; /* Darker border for the active dot */
}

/* --- Media Queries for Responsiveness --- */
@media (min-width: 768px) {
    /* 4 columns on tablets */
    .product-grid {
        grid-template-columns: repeat(4, 1fr); 
    }
}

@media (min-width: 1024px) {
    /* 5 columns on desktop (or 6 columns for 'Others' section if specified) */
    .product-grid {
        grid-template-columns: repeat(5, 1fr); 
    }
}
    /* --- Responsiveness (Media Queries) --- */

    /* Tablet and larger screens (e.g., 768px and up) */
    @media (min-width: 768px) {

        /* Header: Align items better */
        .header-content {
            justify-content: space-around;
        }

        .product-grid {
            /* 4-5 columns on wider screens */
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }
    }

    /* Mobile adjustments (to handle tiny screens) */
    @media (max-width: 550px) {
        .header-content {
            flex-direction: column;
            align-items: flex-start;
        }

        .logo {
            margin-bottom: 10px;
        }

        .search-bar {
            width: 100%;
            max-width: none;
        }

        .user-actions {
            width: 100%;
            margin-top: 10px;
            margin-left: 0;
            justify-content: space-between;
        }

        .product-page-header {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .phone-image {
            margin-right: 0;
            margin-bottom: 15px;
        }
    }