/* General Reset and Font Variables */
:root {
    --white-bg: #ffffff; /* Pure white background */
    --black-bg: #000000; /* Pure white background */
    --light-bg-secondary: #fcfcfc; /* Very light section background */
    --dark-orange: #ff6600; /* Dark shade of orange for logo and accents */
    --text-color: #333;
    --light-text: #fff;
    --grey-border: #ddd;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif; /* Main body text and logo font */
    line-height: 1.6;
    background-color: var(--white-bg); /* Applies the white background */
    color: var(--text-color);
    scroll-behavior: smooth;
    font-weight: 400; /* Set default weight to normal */
}

/* Headings Font Styling */
h1, h2, h3 {
    font-family: 'Titillium Web', sans-serif;
    color: var(--text-color);
}



/* --- NEW: Close Button Styling for Contact Form --- */
.contact-form h3 {
    display: flex; /* Allows the h3 and the button to sit side-by-side */
    justify-content: space-between; /* Pushes the button to the right */
    align-items: center;
    margin-bottom: 10px;
}

.contact-form .close-btn {
    font-size: 2em; /* Make the 'x' large */
    color: #999;
    font-weight: 300;
    line-height: 1; /* Keep the 'x' centered */
    padding: 0 5px;
    transition: color 0.2s;
    text-decoration: none;
}

.contact-form .close-btn:hover {
    color: #e30000; /* Red color on hover for visual feedback */
}

.cvdiv {
    background-image: url('../images/FatherSonCarRide.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 100%;
}

/* Header and Navigation 
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background-color: var(--white-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
} */


/* Update the .navbar to accommodate the search bar using space-between */
.navbar {
    display: flex;
    justify-content: space-between; /* Distribute space between logo, search, and nav */
    align-items: center;
    padding: 15px 5%;
    background-color: var(--black-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* --- NEW: Search Bar Styling --- */
.search-bar {
    display: flex;
    align-items: center;
    border: 2px solid var(--dark-orange);
    border-radius: 5px;
    padding: 2px;
    width: 30%; /* Take up a moderate amount of space */
    max-width: 400px;
    transition: box-shadow 0.3s;
}

.search-bar:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.3); /* Subtle orange glow on focus */
}

.search-bar input[type="text"] {
    flex-grow: 1;
    padding: 8px 10px;
    border: none;
    outline: none;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
}

.search-btn {
    background-color: var(--dark-orange);
    color: var(--light-text);
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 1.1em;
    border-radius: 3px;
    margin-right: -1px; /* Tidy up the button border against the bar */
    transition: background-color 0.2s;
}

.search-btn:hover {
    background-color: #e65c00;
}

/* --- Mobile Responsiveness for Search Bar --- */
@media (max-width: 992px) {
    /* Adjust header layout for tablets: stack elements */
    .navbar {
        flex-wrap: wrap;
    }
    .logo {
        flex-grow: 1; /* Pushes logo to the left */
        margin-right: auto;
        font-family:'Maven Pro', sans-serif;
    }
    
    .search-bar {
        order: 3; /* Move search bar below logo/toggle on smaller screens */
        width: 100%;
        max-width: 100%;
        margin-top: 15px;
    }
    
    #main-nav {
        order: 4; /* Keep nav below everything */
    }
}



@media (max-width: 768px) {
    /* On small mobile, search bar takes up the full width right after the header elements */
    .search-bar {
        order: 3;
        margin-top: 10px;
    }
    /* Ensure the logo and toggle are correctly spaced */
    .navbar {
        padding: 15px 20px;
    }
}

/* Logo Styling (Dark Orange and Lato Bold) */
.logo {
    font-family: 'Lato', sans-serif;
    font-size: 2em;
    font-weight: 900;
    color: var(--dark-orange); /* Dark orange logo color */
    letter-spacing: -1px;
}

/* Navigation Links */
#main-nav a {
    color: var(--text-color);
    text-decoration: none;
    margin-left: 25px;
    font-weight: 600;
    padding: 5px 0;
    transition: color 0.3s;
}

#main-nav a:hover {
    color: var(--dark-orange);
}

.menu-toggle {
    display: none; 
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--dark-orange);
}

/* Hero Section 
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1920x600/555555/FFFFFF?text=MARKETBROS+SUPERMARKET+FRONT') no-repeat center center/cover;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--light-text);
}

.hero-content h1 {
    font-size: 3.5em;
    margin-bottom: 10px;
    color: var(--light-text);
}

.hero-content p {
    font-size: 1.5em;
    margin-bottom: 30px;
    color: #eee;
    font-weight: 400;
}
*/

/* --- New CSS for Carousel/Slider --- */

.slider-container {
    width: 100%;
    overflow: hidden; /* Important: Hides slides outside the current view */
    position: relative;
    height: 60vh; /* Fixed height for the slider area */
}

.slider-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.8s ease-in-out; /* Smooth transition for slide movement */
}

.hero-slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Dark overlay for text readability */
.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); 
}

.hero-content {
    position: relative;
    z-index: 10;
    color: var(--light-text);
}

.hero-content h1 {
    font-size: 3.5em;
    margin-bottom: 10px;
    color: var(--light-text);
}

.hero-content p {
    font-size: 1.5em;
    margin-bottom: 30px;
    color: #eee;
    font-weight: 400;
}

/* Navigation Dots */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s;
}

.active-dot, .dot:hover {
    background-color: var(--dark-orange);
}
.active-dot {
    height: 12px;
    width: 18px;
    border-radius: 40%;
}

/* Call to Action Button */
.cta-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--dark-orange);
    color: var(--light-text);
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
    border: none;
    cursor: pointer;
}

.cta-button:hover {
    background-color: #e65c00; 
    transform: translateY(-2px);
}

.secondary-cta {
    margin-top: 20px;
}

/* Content Sections */
.content-section {
    padding: 80px 5%;
    text-align: center;
}

.section-title {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: var(--dark-orange);
}

/* 1. Categories Grid */
.categories-grid-section {
    background-color: var(--light-bg-secondary);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    max-width: 1200px;
    margin: 0 auto;
}

.category-card {
    background-color: var(--white-bg);
    padding: 20px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    text-align: center;
    border: 1px solid var(--grey-border);
}

.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    background-color: #fff9f5;
}

/* 2. Top Products Section */
.top-products-section {
    background-color: var(--white-bg);
}

/* Ensure the Top Sellers section has a light background */
.top-products-section {
    background-color: var(--light-bg-secondary); /* This is the light beige color defined previously */
    padding: 40px 5%; /* Ensure consistent padding */
}

.product-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.product-placeholder {
    height: 150px;
    background-color: #eee;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    color: #666;
    border-radius: 5px;
}


/*???????????????????????????????????????*/
/* --- NEW: Responsive Image Styling --- */

/* Ensures all images fill their containers and maintain aspect ratio */
.product-placeholder img,
.category-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the image cover the area without stretching */
    display: block;
    border-radius: 6px; /* Match container border radius */
}

/* Update the containers to have the desired fixed size or aspect ratio */
.product-placeholder {
    width: 100%; /* Take up the width of the grid column */
    height: 200px; /* Fixed height for consistent look in the grid */
    margin-bottom: 10px;
    overflow: hidden; /* Hide any overflow if object-fit: cover causes it */
}

/* Also ensure the category placeholder is updated to wrap the image */
.category-placeholder {
    width: 150px; /* Specific width */
    height: 150px; /* Specific height */
    background-color: transparent; /* Remove previous background */
    border-radius: 50%; /* Circular images */
    overflow: hidden;
    margin: 0 auto 15px auto;
}
/*???????????????????????????????????????*/

/* --- Fix: Remove underline from Product Items --- */

/* Target the anchor tags used for individual products */
.product-item {
    /* Ensure the item itself looks like a card, not a link */
    background-color: var(--light-bg-secondary);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--grey-border);
    text-align: center;
    
    /* CRITICAL FIX: Remove the underline */
    text-decoration: none; 
    
    /* Ensure text colors stay dark, not blue */
    color: var(--text-color); 
    
    /* Add smooth transition for visual effect */
    transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.12);
}

/* Ensure headings/text inside the product item don't get underlined on hover */
.product-item h3, .product-item p {
    text-decoration: none !important;
}

.product-item h3 {
    font-family: 'Lato', sans-serif;
    font-size: 1.2em;
    margin-bottom: 5px;
    /* Ensure the color is not inherited link blue */
    color: var(--text-color); 
}

.product-item .price {
    font-weight: 700;
    color: var(--dark-orange);
    font-size: 1.4em;
}

/* --- NEW: Discount Badge Styling --- */

/* 1. Ensure the parent item can anchor the absolute position */
.product-item {
    /* (Your existing styles) */
    position: relative; /* CRITICAL: Allows absolute positioning of the badge */
    overflow: hidden; /* Hide the badge if it moves too far out */
}

/* 2. Style the badge itself */
.discount-badge {
    position: absolute;
    top: 15px; /* Distance from the top edge */
    right: -25px; /* Start outside the card, then rotate it */
    background-color: #e30000; /* Bright red for attention */
    color: var(--light-text);
    padding: 3px 25px;
    font-size: 0.85em;
    font-weight: 700;
    z-index: 10; /* Ensure it layers above the image */
    
    /* Rotate the badge to create the ribbon effect */
    transform: rotate(45deg); 
    
    /* Optional: Add a subtle shadow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    
    /* Optional: Smooth transition */
    transition: background-color 0.2s;
}

/* Optional: Slight color change on hover */
.product-item:hover .discount-badge {
    background-color: #a30000;
}

/* 3. Family Showcase Section */
.family-showcase-section {
    background-color: #fff9f5; /* Light accent background */
    border-top: 5px solid var(--dark-orange);
}

.family-content {
    max-width: 900px;
    margin: 0 auto;
}

/*.image-placeholder {
    height: 350px;
    background-color: #ddd; 
    border-radius: 10px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    color: #666;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    padding: 20px;
}*/

/* Update this block in your existing CSS */

.image-placeholder {
    height: 350px;
    background-color: #ddd; 
    border-radius: 10px;
    margin-bottom: 25px;
    
    /* --- CRITICAL ADDITIONS FOR COVERING THE CONTAINER --- */
    background-size: cover;       /* Scales the image to cover the entire container */
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
    
    /* Placeholder text styling (removed background color and added styles) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    color: #666;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    padding: 20px;
}

.showcase-text {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 0;
}


/* 4. About Us Story Styling */
.about-us-section {
    background-color: var(--white-bg);
}

.story-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    font-size: 1.1em;
}

.story-content p {
    margin-bottom: 20px;
}

.story-content strong {
    color: var(--dark-orange);
    font-weight: 700;
}

/* Footer 
footer {
    background-color: #333;
    color: var(--light-text);
    padding: 40px 5%;
    font-size: 0.9em;
}*/

.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    text-align: left;
}

.footer-links h4 {
    font-family: 'Titillium Web', sans-serif;
    color: var(--dark-orange);
    margin-bottom: 15px;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--light-text);
}

.footer-links p {
    margin-bottom: 8px;
}


/* --- Footer Styling --- */
footer {
    background-color: var(--text-color); /* Dark background */
    color: #f0f0f0; /* Light text */
    padding: 50px 5%;
    font-size: 0.9em;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Brand column is wider */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #444;
}

.footer-column h4 {
    color: var(--dark-orange);
    font-size: 1.1em;
    margin-bottom: 15px;
    font-weight: 700;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column a {
    color: #ccc;
    text-decoration: none;
    line-height: 2.2;
    display: block;
    transition: color 0.2s;
}

.footer-column a:hover {
    color: var(--dark-orange);
}

.footer-brand .logo {
    font-size: 1.8em;
    color: var(--light-text);
    margin-bottom: 10px;
}

.footer-brand p {
    margin-bottom: 20px;
    line-height: 1.5;
}

.social-links a {
    display: inline-block;
    margin-right: 10px;
}

.social-links img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    transition: transform 0.2s;
}

.social-links img:hover {
    transform: scale(1.1);
}

.footer-bottom {
    text-align: center;
    color: #999;
    padding-top: 10px;
    font-size: 0.8em;
}

/* Footer Responsiveness */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
    }
    .footer-brand {
        grid-column: span 2; /* Brand spans both columns */
    }
}

@media (max-width: 550px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    .footer-brand {
        grid-column: span 1; 
    }
    .footer-column {
        padding-top: 15px;
        border-top: 1px solid #444;
    }
    .footer-column:first-child {
        border-top: none;
    }
}

.newsletter input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 3px;
    font-family: 'Lato', sans-serif;
}

.newsletter .cta-button {
    width: 100%;
    text-align: center;
    padding: 10px;
}

.copyright {
    text-align: center;
    border-top: 1px solid #444;
    padding-top: 20px;
}

/* --- Responsiveness --- */

@media (max-width: 768px) {
    .navbar {
        padding: 15px 20px;
    }

    #main-nav {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 60px; 
        left: 0;
        width: 100%;
        background-color: var(--white-bg);
        box-shadow: 0 4px 4px rgba(0,0,0,0.05);
        padding: 10px 0;
        z-index: 999;
    }

    #main-nav.active {
        display: flex; 
    }

    #main-nav a {
        margin: 10px 20px;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        text-align: center;
    }

    .menu-toggle {
        display: block; 
    }

    .hero-content h1 {
        font-size: 2.2em;
    }

    .hero-content p {
        font-size: 1.1em;
    }

    .section-title {
        font-size: 2em;
    }
}


/*  ///////////////NEWLY ADDED/////////////// */
/* --- New CSS for Story Image Section --- */
.story-image-container {
    max-width: 500px; /* Constrain the width of the image */
    height: 300px;
    margin: 0 auto 35px auto; /* Center it and add space below */
    
    background-color: #eee; 
    border-radius: 12px; /* Soft rounded corners */
    border: 1px solid var(--dark-orange); /* Subtle border for emphasis */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    /* Placeholder text styling */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    color: #666;
    text-align: center;
    padding: 20px;
}

/* Ensure the text content aligns nicely below the image */
.about-us-section .story-content {
    /* Maintain existing centered alignment */
    text-align: left;
}


/* --- About Section New Flex Layout --- */

.about-flex-container {
    font-family: 'Indie Flower', sans-serif;
    max-width: 1200px; /* Limit max width for readability */
    margin: 0 auto;
    display: flex; /* Enable flex layout */
    gap: 40px;
    align-items: center; /* Vertically align content */
    text-align: left;
}

.about-content {
    flex: 2; /* Gives the text more space (2/3 width) */
    max-width: none; /* Override previous max-width to allow flex to manage it */
    padding-right: 20px;
}

.about-image-placeholder {
    flex: 1; /* Gives the image less space (1/3 width) */
    min-width: 250px;
    height: 300px; /* Set a fixed height for the image container */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Original max-width rule from about-content is now obsolete but left commented out for reference:
.about-content {
    text-align: left;
    max-width: 800px; 
    margin: 0 auto;
}
*/










/* --- New CSS for Dropdown Menu --- */

/* Parent container for the dropdown */
.dropdown {
    position: relative;
    display: inline-block; /* Allows it to sit next to other links */
    height: 100%; /* Ensures button alignment in the header */
}

/* The button/link that triggers the dropdown */
.dropbtn {
    padding: 5px 0;
    margin-left: 25px;
    font-weight: 600;
    color: var(--text-color) !important; /* Override general link color for consistency */
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.dropbtn:hover {
    color: var(--dark-orange) !important;
}

/* Dropdown Content (The actual menu) */
.dropdown-content {
    display: none; /* HIDDEN BY DEFAULT */
    position: absolute;
    background-color: var(--white-bg);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1001; /* Must be higher than the sticky header (1000) */
    border-top: 3px solid var(--dark-orange);
    padding: 10px 0;
    left: 15px; /* Adjust position relative to the main link */
    border-radius: 0 0 5px 5px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    margin-left: 0; /* Remove horizontal margin inherited from main nav */
    border-bottom: none; /* Ensure no line on mobile */
    font-weight: 400;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: var(--dark-orange);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* --- Mobile Nav Adjustments (768px and below) --- */
@media (max-width: 768px) {
    /* Main navigation links need to be block elements to stack vertically */
    #main-nav a {
        width: 100%;
        box-sizing: border-box;
    }

    /* Dropdowns must stack vertically in the mobile menu */
    .dropdown {
        width: 100%;
        text-align: center;
    }
    
    /* Dropdown button styling for mobile */
    .dropdown .dropbtn {
        width: 100%;
        margin-left: 0;
        text-align: center;
        border-bottom: 1px solid #eee; /* Maintain divider style */
    }

    /* Force mobile dropdown content to be full width and static */
    .dropdown-content {
        position: relative; /* Stacks within the flow */
        width: 100%;
        box-shadow: none; /* Remove shadow to look part of the main menu */
        border-top: none;
        padding: 0;
        left: 0;
        /* The mobile menu should NOT use the :hover rule, but require JavaScript click,
           so we ensure it remains hidden unless JS activates it. 
           However, for simplicity in a CSS-only drop-down, the hover rule is used. 
           To truly disable it on mobile, JS would be needed to handle the click event. */
    }

    /* Links inside the mobile dropdown */
    .dropdown-content a {
        padding-left: 30px; /* Indent sub-links for hierarchy */
        background-color: #fafafa;
        border-bottom: 1px solid #f1f1f1; 
    }
    
    /* 👇 NEW: Stack 'Our Story' content on smaller screens */
    .about-flex-container {
        flex-direction: column;
    }

    .about-content {
        padding-right: 0;
    }
    
    .about-image-placeholder {
        width: 100%;
        height: 250px;
        order: -1; /* Place the image above the text on mobile */
        margin-bottom: 20px;
    }
    
}





/* --- CSS for Product Detail View (Refined) --- */
.product-detail-section {
    background-color: var(--white-bg);
    text-align: left;
    padding: 60px 5%; /* Adjusted padding for better spacing */
    display: none; /* Keep hidden by default, JS will manage this */
    min-height: 80vh; /* Ensure it takes up enough vertical space */
}

.back-link {
    display: inline-flex; /* Use flex for alignment */
    align-items: center;
    gap: 8px; /* Space between arrow and text */
    margin-bottom: 30px; /* More space below */
    color: var(--text-color); /* Default text color */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.back-link:hover {
    color: var(--dark-orange); /* Highlight on hover */
}

.detail-container {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--light-bg-secondary);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* Stronger shadow for depth */
}

.detail-gallery {
    flex: 1;
    min-width: 300px;
    display: flex; /* For thumbnail layout */
    flex-direction: column;
    align-items: center;
}

.main-image-placeholder {
    width: 100%;
    /* aspect-ratio: 1 / 1; */ /* Maintain square aspect ratio if images are square */
    height: 400px; /* Fixed height for consistency */
    background-color: #eee;
    border: 1px solid var(--grey-border);
    border-radius: 8px;
    margin-bottom: 15px; /* More space below main image */
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    color: #666;
    font-family: 'Lato', sans-serif;
}

.thumbnail-placeholder {
    display: flex;
    gap: 10px; /* Space between thumbnails */
    height: 70px; /* Fixed height for thumbnails */
    width: 100%;
    background-color: #fcfcfc; /* Lighter background for thumbnails */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: #999;
    padding: 5px;
}

.detail-info {
    flex: 2;
    padding-left: 15px; /* Small left padding for better text flow */
}

.detail-title {
    font-size: 2.8em; /* Slightly smaller for better fit */
    color: var(--text-color);
    margin-bottom: 5px;
    line-height: 1.2;
}

.detail-brand {
    color: #666;
    margin-bottom: 15px; /* Less space before HR */
    font-size: 1em; /* Slightly smaller */
}

hr {
    border: none;
    border-top: 1px solid #e0e0e0; /* Lighter HR */
    margin: 20px 0;
}

.detail-price {
    font-size: 3.2em;
    color: var(--dark-orange);
    font-weight: 900;
    margin: 15px 0 10px 0;
}

.availability {
    color: green;
    font-weight: 700;
    margin-bottom: 30px;
    font-size: 1.1em;
}

.quantity-selector {
    display: flex;
    align-items: center;
    margin-bottom: 30px; /* Space before add to cart button */
}

.quantity-selector label {
    font-weight: 600;
    margin-right: 15px;
    font-size: 1.1em;
}

.quantity-selector input {
    padding: 10px; /* Increased padding */
    width: 70px; /* Slightly wider */
    border: 1px solid var(--grey-border);
    border-radius: 5px;
    text-align: center;
    font-size: 1.1em;
}

.add-to-cart-btn {
    margin-top: 0; /* Remove top margin, handled by quantity-selector */
    padding: 18px 40px; /* Larger button */
    font-size: 1.3em;
    max-width: 320px; /* Slightly wider button */
    box-shadow: 0 4px 10px rgba(255,102,0,0.2); /* Orange shadow */
}

.add-to-cart-btn:hover {
    box-shadow: 0 6px 15px rgba(255,102,0,0.3);
}

.product-description {
    margin-top: 45px; /* More space from button */
    padding-top: 25px; /* More padding */
    border-top: 1px solid #e0e0e0; /* Lighter border */
}

.product-description h3 {
    color: var(--dark-orange);
    margin-bottom: 15px;
    font-size: 1.8em; /* Slightly larger heading */
}

.product-description p, .product-description ul {
    font-size: 1em;
    line-height: 1.7;
}

.product-description ul {
    list-style-type: disc;
    padding-left: 25px;
    margin-top: 15px;
}

/* Responsive adjustments for Product Detail */
@media (max-width: 900px) {
    .detail-container {
        flex-direction: column;
        gap: 30px;
        padding: 20px;
    }
    .main-image-placeholder {
        height: 280px;
    }
    .detail-title {
        font-size: 2.2em;
    }
    .detail-price {
        font-size: 2.8em;
    }
    .add-to-cart-btn {
        max-width: 100%; /* Full width on smaller screens */
    }
    .product-detail-section {
        padding: 40px 5%;
    }
}





/* --- NEW: Contact Section Styling --- */

.contact-section {
    background-color: var(--light-bg-secondary);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Info block on the left, Form on the right */
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.contact-info-block h3 {
    color: var(--dark-orange);
    font-size: 1.8em;
    margin-bottom: 20px;
}

.contact-info-block p {
    margin-bottom: 15px;
    line-height: 1.5;
}

.contact-info-block strong {
    font-weight: 700;
    color: var(--text-color);
}

.working-hours {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    color: #666;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: var(--white-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.contact-form h3 {
    color: var(--dark-orange);
    margin-bottom: 10px;
    font-size: 1.6em;
}

.contact-form input,
.contact-form textarea {
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--dark-orange);
    box-shadow: 0 0 0 1px var(--dark-orange);
    outline: none;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .cta-button {
    align-self: flex-start;
    margin-top: 10px;
}

/* Contact Section Responsiveness */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* --- NEW: Map Container Styling (Place this near your .contact-section styles) --- */
/* --- Updated Map Styling (Place this near your .contact-section styles) --- */
.map-container {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto 0 auto;
    border: 1px solid var(--grey-border);
    border-radius: 8px;
    overflow: hidden; 
}

/* Style the actual map div */
#map {
    width: 100%;
    height: 350px; /* Define map height, matching previous placeholder height */
    background-color: #f5f5f5; /* Fallback background */
}

.map-placeholder {
    width: 100%;
    height: 350px; /* Define map height */
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: #666;
    font-weight: 600;
}

/* Update the contact grid to be 2 columns and put the info block next to the form */
.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Form on the left, Info block on the right */
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

/* Adjust responsiveness for the new grid */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}



/* --- Contact Section Styling Changes --- */

/* NEW: Rule to initially hide the form wrapper */
#contact-form-wrapper {
    display: none;
}

/* NEW: Rule to show the form wrapper when the JS adds the 'active' class */
#contact-form-wrapper.active {
    display: block; /* Ensures it occupies space in the grid */
}