/* General Font Styles */
body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: #1f0e05; /* Darker tone for headings, consistent with About page */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* 🔵 Store Hero Banner (Parallax Effect) */
.store-hero {
    position: fixed; /* Fixed position for parallax */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Full viewport height */
    color: #FFF;
    text-align: center;
    padding: 10rem 1.5rem 4rem; /* Keep existing padding for content spacing */
    z-index: -1; /* Ensures it stays behind scrolling content */
    display: flex; /* To vertically center content */
    align-items: center;
    justify-content: center;
}

.store-hero::before {
    content: '';
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)); /* Slightly darker overlay for better contrast */
    position: absolute;
    z-index: 2;
    inset: 0;
}

.store-hero-content { /* Renamed class for consistency */
    position: relative;
    z-index: 3;
    padding: 1rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.store-hero h1 {
    font-size: 3.8rem; /* Larger for impact, consistent with About page */
    margin-bottom: 1rem;
    color: #fff;
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Add text shadow for readability */
}

.store-hero p {
    font-size: 1.3rem; /* Larger font size */
    max-width: 700px;
    margin: 0 auto;
    color: #f0f0f0; /* Lighter white for readability */
    line-height: 1.5;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}

/* 🟠 Store Main Card Layout (Scrolling on top of hero) */
.store-main {
    padding: 6rem 1.5rem; /* Increased top padding to match other sections */
    background-color: #fff;
    margin-top: 100vh; /* Pushes content down to scroll over fixed hero */
    position: relative;
    z-index: 1; /* Ensures it scrolls on top */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

.store-card {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 1.5rem; /* More rounded corners */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); /* Enhanced shadow */
    overflow: hidden;
    padding: 3rem; /* Increased padding */
    gap: 3rem; /* Increased gap */
    align-items: center; /* Vertically align items in the card */
}

/* Left Column */
.store-info {
    flex: 1 1 35%; /* Adjusted flex basis */
    font-size: 1.05rem; /* Slightly larger text */
    line-height: 1.7;
    color: #444; /* Darker text for readability */
}

.store-info h2 {
    font-family: 'Playfair Display', serif; /* Fixed font to Playfair Display */
    color: #e63946; /* Vibrant red, consistent with About page */
    font-size: 2.8rem; /* Larger heading */
    margin-bottom: 1.5rem; /* Increased margin */
}

.store-info p {
    margin: 0.6rem 0; /* Increased margin */
}

.store-info .open-hours {
    margin-top: 2rem; /* Increased margin */
    font-weight: 600; /* Bolder font */
    color: #003893; /* Blue accent, consistent with About page */
    font-size: 1.1rem;
}

.btn-map {
    display: inline-block;
    margin-top: 2rem; /* Increased margin */
    background: #e63946; /* Vibrant red, consistent with About page */
    color: #fff;
    padding: 0.8rem 1.8rem; /* Larger padding for button */
    border-radius: 40px; /* More rounded button */
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
}

.btn-map:hover {
    background: #b31f1f; /* Darker red on hover */
    transform: translateY(-3px); /* Slight lift effect */
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4);
}

/* Right Column - Map */
.store-map {
    flex: 1 1 60%; /* Adjusted flex basis */
    min-height: 450px; /* Increased map height */
    max-height: 450px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Stronger shadow */
}

.store-map iframe {
  height: 450px;
}

/* Responsive */
@media (max-width: 992px) {
    .store-hero h1 {
        font-size: 3rem;
    }
    .store-hero p {
        font-size: 1.1rem;
    }
    .store-card {
        padding: 2rem;
        gap: 2rem;
    }
    .store-info h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .store-card {
        flex-direction: column;
        padding: 2rem 1.5rem; /* Adjusted padding */
    }
    .store-info, .store-map {
        flex: 1 1 100%;
        text-align: center; /* Center align text on smaller screens */
    }
    .store-info h2 {
        font-size: 2rem;
        text-align: center;
    }
    .store-info p {
        font-size: 1rem;
    }
    .store-info .open-hours {
        font-size: 1rem;
    }
    .btn-map {
        width: 100%; /* Full width button */
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .store-map {
        min-height: 300px; /* Adjust map height for mobile */
    }
    .store-hero h1 {
        font-size: 2.5rem;
    }
    .store-hero p {
        font-size: 1rem;
    }
    .store-main {
        padding: 4rem 1.5rem; /* Reduced padding on mobile */
    }
}

@media (max-width: 480px) {
    .store-hero h1 {
        font-size: 2rem;
    }
    .store-hero p {
        font-size: 0.9rem;
    }
    .store-card {
        padding: 1.5rem 1rem;
    }
    .store-info h2 {
        font-size: 1.8rem;
    }
}