:root{
    --bg:#f7f8fb; --card:#fff; --accent:#2563eb; --muted:#6b7280;
    --gap:1rem; --radius:10px;
}
*{box-sizing:border-box}

body{
    margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background:var(--bg); color:#111; line-height:1.45;
    padding:1rem 1rem;
} 

#page {
  display: grid;
  max-width: 85%;
  gap: 0.4rem;
  height: auto;
  margin:0 auto;
  grid-template-areas:
    "head head"
    "nav nav"
    "main side"
    "foot foot";
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr 550px;
  grid-auto-rows: auto;
}
#page > header,
#page > nav,
#page > main,
#page > aside,
#page > footer {
  align-self: start;
  
  background:var(--card);
  border-radius:var(--radius);
}

#page > header {
  grid-area: head;
  display: grid;
  justify-content: center;
  margin-top: 0.5rem;
}

.tagline
{
    margin: 0;
    font-size:1.75rem;
    font-weight:500;
    color:black;
    justify-content: center;
    display: flex;
}
.socials{
    display:flex; gap:.5rem; align-items:center; 
    flex-wrap:wrap; justify-content:center;
}
.socials a{
    display:inline-flex; gap:.6rem; align-items:center; text-decoration:none;
    background:transparent; color:var(--muted); padding:.45rem .6rem; border-radius:8px;
    transition:all .15s ease; font-size:.95rem;
}
.socials a:hover{background:#f1f6ff; color:var(--accent); transform:translateY(-2px)}

#page > nav {
    grid-area: nav;
    align-items: center;
    display: flex;
    
    gap: 0.1rem;
}

nav > a {
    text-decoration: none;
    color: black;
    font-weight: 600;
    padding: 0.5rem 1rem;
}

nav > a:hover{
    background:#f1f6ff; 
    color:var(--accent); 
    border-radius: var(--radius);
}

#page > main {
  grid-area: main;
  display: grid;
  justify-content: center;
  height: 600px;

}

main p#storeDetails {
    font-weight: 1000;
    font-size: 1.5rem;
    margin-top: 0.25rem;
    
}

main p#hours {
    font-weight: 1000;
    font-size: 1.5rem;
    margin-top: 1rem;
}
main p#address {
    font-weight: 600;
    font-size: 1rem;
}

main p
{
    text-align: center;
    font-size: 1rem;
    color:#444; 
    margin: 0.25rem 0;
}

.time {
    font-weight: bold;
}

.map {
    margin-bottom: 0.25rem;
    width: 100%;
    height: auto;
    min-height: 300px;
}

.map > iframe {
    width: 100%;
    height: 100%;
    border:0;
    border-radius:8px;
    box-shadow:0 6px 20px rgba(20,30,60,0.04);
}

#page > aside {
  grid-area: side;
  display: grid;
  padding: auto;
  height: 600px;
  overflow: auto;
}

.small{
    display: flex;
    justify-self: center;
}

.powr-facebook-feed {
    width: 100%;
    height: auto;
}




#page > footer {
  grid-area: foot;
  display: flex;
  justify-content: center
}