@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap');
:root{
  --mm-red:#C0392B;
  --mm-cream:#FFF7E6;
  --mm-brown:#4A3A2F;
  --max-width:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; color:#222; background:#fff; line-height:1.45}
.container{max-width:var(--max-width); margin:0 auto; padding:20px}
.header{background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:50}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--mm-brown)}
.brand img{height:56px; width:56px; object-fit:contain; border-radius:8px}
.brand h1{margin:0; font-family:'Playfair Display', serif; color:var(--mm-red); font-size:20px}
.brand p{margin:0; font-size:12px; color:#666}

.nav{display:flex; gap:12px; align-items:center}
.nav a{color:#333; text-decoration:none; padding:8px 10px; border-radius:6px}
.nav a.button{background:var(--mm-red); color:white}

.hero{background:linear-gradient(90deg, var(--mm-cream), #fff); padding:28px 0; display:flex; gap:20px; align-items:center}
.hero .left{flex:1}
.hero h2{font-family:'Playfair Display', serif; color:var(--mm-red); font-size:34px; margin:0 0 8px}
.hero p{margin:0 0 12px; color:#444}
.hero .cta{display:flex; gap:10px}

.image-card{border-radius:10px; overflow:hidden; background:#f7f7f7}
.image-card img{width:100%; height:100%; display:block; object-fit:cover}

.grid{display:grid; gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.section{padding:28px 0}

.card{border:1px solid #eee; padding:12px; border-radius:8px; background:#fff}

.footer{background:var(--mm-brown); color:var(--mm-cream); padding:20px}
.footer a{color:var(--mm-cream); text-decoration:underline}

@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .brand img{height:44px;width:44px}
  .hero{flex-direction:column}
  .nav{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
}

@media(max-width:480px){
  .grid-4{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .brand h1{font-size:18px}
  .hero h2{font-size:26px}
}
.form-row{display:flex; gap:8px}
.form-row .input{flex:1}
.input, textarea, select{padding:10px; border:1px solid #ddd; border-radius:6px; font-size:14px}
button{cursor:pointer}
.btn{padding:10px 14px; border-radius:8px; border:none; background:var(--mm-red); color:#fff}
.secondary{background:#fff; color:var(--mm-brown); border:1px solid #ddd}
.small{padding:8px 10px; font-size:14px}
.rating{color:#f6c85f}


/* Improve featured card images and sizes */
.card img { width:100%; height:180px; object-fit:cover; border-radius:8px; }
@media(max-width:600px){
  .card img { height:220px; }
  .hero .image-card{width:100%; height:220px;}
  .hero .left{order:2}
  .hero .image-card{order:1}
  .nav{justify-content:center}
}


/* Bottom fixed mobile nav */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; display: none; background: #fff; border-top: 1px solid #eee; z-index: 9999; }
.bottom-nav .inner { max-width: var(--max-width); margin: 0 auto; display:flex; justify-content:space-around; align-items:center; padding:8px 10px; gap:6px; }
.bottom-nav a { text-decoration:none; color:#333; font-size:13px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bottom-nav a .dot { width:28px; height:28px; border-radius:8px; display:block; background:transparent; }
@media(max-width:900px){ .bottom-nav{display:block} .footer{padding-bottom:56px} }


/* Design credit (fixed but above bottom nav on mobile) */
#site-credit{position:fixed;left:12px;bottom:60px;background:rgba(255,255,255,0.95);padding:6px 10px;border-radius:6px;font-size:12px;color:#333;border:1px solid #eee;z-index:10001;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
@media(min-width:901px){ #site-credit{bottom:10px} }


/* Mobile-only footer credit */
.mobile-credit { display:none; text-align:center; font-size:12px; color:#444; padding:10px 0; }
@media(max-width:900px){ .mobile-credit { display:block; } }