/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
body { 
    margin: 0;
    padding: 0; 
    overflow-x: hidden; 
    font-family: Georgia, 'Times New Roman', serif; 
    background: #faf6f0; 
    color: #222; }

/* ===== HEADER ===== */
header { 
    background: #4040dd; 
    color: #ffffff;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    }
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { height: 44px; width: auto; }
.logo h1 { 
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
    letter-spacing: .5px;
    }
nav { display: flex; gap: 6px; }
nav a { color: #ccc; text-decoration: none; padding: 8px 14px; border-radius: 4px; font-size: .9rem; font-family: Arial, sans-serif; transition: background .2s, color .2s; }
nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
nav a.active-link { background: #5c3a1e; color: #fff; }

/* ===== MAIN CONTAINER ===== */
.main-container { min-height: calc(100vh - 70px - 50px); }

/* ===== FOOTER ===== */
footer { background: #4040dd;; color: #fff; text-align: center; padding: 14px; font-size: .82rem; font-family: Arial, sans-serif; }

/* ===== STOREFRONT ===== */
#storefront { max-width: 100%; margin: 0 auto; }
#storefront img { width: 100%; height: auto; display: block; cursor: pointer; }

/* ===== INTERIOR ===== */
#interior { position: relative; width: 100%; margin: 0 auto; display: block; }
#interior img { width: 100%; height: auto; display: block; }

/* Zone overlays — positioned as % so they scale with image */
.zone {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    text-decoration: none;
    border-radius: 6px;
    transition: background .2s;
}
.zone span {
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 1.1vw;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}
.zone:hover { background: rgba(92,58,30,.25); }
.zone:hover span { background: rgba(92,58,30,.9); }

/* Zone positions — matching the interior image layout */
/*.zone-0 { top: 18%; left: 3%;  width: 22%; height: 55%; } /* Fiction — left shelves */
/*.zone-1 { top: 18%; left: 57%; width: 20%; height: 55%; } /* Non-Fiction — right shelves */
/*.zone-2 { top: 50%; left: 33%; width: 30%; height: 22%; } /* 3rd classification — centre table */
/*.zone-3 { top: 18%; left: 83%; width: 14%; height: 55%; } /* 4th classification — far right */

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    header { flex-direction: column; height: auto; padding: 12px 16px; gap: 8px; }
    nav { flex-wrap: wrap; justify-content: center; }
    .logo h1 { font-size: 1rem; }
    .zone span { font-size: 2.5vw; }
}