/*
Theme Name: Yo and So Food So Good (E-commerce, Branded)
Description: Thème e-commerce personnalisé aux couleurs du logo.
Version: 1.2
Text Domain: yo-and-so-food
*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;800&display=swap');

:root{
  --rouge: #D74421;
  --jaune: #F3C746;
  --vert: #118F81;
  --turq: #2AAE9C;
  --bleu: #0F6F73;
  --beige: #F2D9AA;
  --vert-fonce: #125F3A;
  --text: #2d2d2d;
  --bg: var(--beige);
}

body{background:var(--bg); color:var(--text); font-family: 'Nunito', sans-serif; margin:0;}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{background:white;box-shadow:0 2px 6px rgba(0,0,0,0.06);}
.logo{width:72px;height:72px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.site-title{font-size:22px;margin:0}
.site-tag{font-size:13px;color:rgba(0,0,0,0.55)}
.nav{
  display:flex;gap:16px;align-items:center;
}
.cta-btn{background:var(--rouge);color:white;padding:10px 14px;border-radius:10px}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:48px 0}
.hero h1{font-size:36px;margin:0;color:var(--bleu);}

/* Product cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:white;padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.05)}
.card img{width:100%;height:180px;object-fit:cover;border-radius:8px}
.price{font-weight:700;color:var(--vert);}

/* Buttons */
.button{background:var(--rouge);color:white;padding:10px 12px;border-radius:8px;display:inline-block}
.button.secondary{background:var(--vert);}

/* Footer */
.site-footer{background:white;padding:24px 0;border-top:1px solid rgba(0,0,0,0.04);margin-top:40px}

/* Responsive */
@media(max-width:900px){.hero{grid-template-columns:1fr}}
@media(max-width:520px){.nav{display:none}}