:root{
  --bg:#f5fff9;
  --bg2:#eefcff;
  --card:rgba(255,255,255,0.86);
  --text:#0b1a14;
  --muted:rgba(11,26,20,0.62);
  --line:rgba(11,26,20,0.12);
  --primary:#2fd6a3;
  --primary2:#35b6ff;
  --shadow:0 18px 60px rgba(0,0,0,0.10);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%; max-width:100%; overflow-x:hidden}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(47,214,163,0.22), transparent 55%),
    radial-gradient(900px 500px at 80% 20%, rgba(53,182,255,0.22), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

img,svg{max-width:100%; height:auto; display:block}

.container{width:min(1120px, calc(100% - 32px)); margin:0 auto}

a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible{outline:3px solid rgba(53,182,255,0.35); outline-offset:2px; border-radius:14px}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,255,249,0.72);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:12px 0;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{border-radius:12px}
.nav-desktop{display:flex; gap:10px; align-items:center}
.nav-desktop a{
  padding:10px 12px;
  border-radius:14px;
  font-weight:700;
  color:rgba(11,26,20,0.78);
}
.nav-desktop a:hover{background:rgba(53,182,255,0.10)}
.header-actions{display:flex; align-items:center; gap:10px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:16px;
  font-weight:800;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.70);
  white-space:nowrap;
}
.btn:hover{filter:brightness(0.99)}
.btn-primary{
  border:none;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow:0 10px 30px rgba(53,182,255,0.22);
}
.btn-ghost{background:rgba(255,255,255,0.55)}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.70);
  font-size:18px;
  line-height:1;
}

.nav-mobile{
  border-top:1px solid var(--line);
  background:rgba(245,255,249,0.82);
}
.nav-mobile-inner{
  padding:12px 0 16px;
  display:grid;
  gap:10px;
}
.nav-mobile-inner a{
  padding:12px 12px;
  border-radius:16px;
  background:rgba(255,255,255,0.70);
  border:1px solid var(--line);
  font-weight:800;
}
.nav-mobile-inner a:hover{filter:brightness(0.99)}
.nav-mobile-cta{display:flex; gap:10px; flex-wrap:wrap; padding-top:6px}

main{padding:18px 0 28px}

.pageTop{padding:18px 0}
.h1{font-size:clamp(28px, 3.2vw, 46px); margin:0 0 10px; letter-spacing:-0.3px}
.h2{font-size:22px; margin:0 0 8px}
.lead{margin:0; color:var(--muted); font-size:16px; line-height:1.6}

.section{padding:18px 0}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.pad{padding:18px}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.grid{display:grid; gap:14px}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid.cards{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width: 900px){
  .nav-desktop{display:none}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .grid.cols-3, .grid.cols-2{grid-template-columns:1fr}
  .grid.cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* Diet cards */
.card__img{
  width:100%;
  height:170px;
  object-fit:cover;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
  border-bottom:1px solid var(--line);
}
.card__body{padding:16px}
.card__title{font-weight:900; margin:0 0 6px}
.card__text{margin:0; color:var(--muted); line-height:1.6}

/* Detail hero */
.hero{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:14px;
  align-items:stretch;
}
.hero .media{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,0.55);
  overflow:hidden;
}
.hero .media img{width:100%; height:100%; object-fit:cover}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
}

.kicker{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow:0 12px 28px rgba(53,182,255,0.18);
  margin-bottom:10px;
}

.site-footer{
  border-top:1px solid var(--line);
  background:rgba(245,255,249,0.72);
  padding:18px 0;
}
.footer-row{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.footer-brand{display:flex; gap:12px; align-items:center}
.footer-title{font-weight:900}
.footer-sub{color:var(--muted); font-size:14px; margin-top:2px}
.footer-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Safety: never allow horizontal scroll from long strings */
*{min-width:0}

.back{
  display:inline-flex;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.55);
  font-weight:800;
  margin-bottom:12px;
}
.back:hover{filter:brightness(0.99)}

.detail{display:grid; grid-template-columns: 1fr 1fr; gap:14px; align-items:start}
.detail__media{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,0.55)}
.detail__img{width:100%; height:320px; object-fit:cover}
.detail__content{padding:6px 2px}
.k{font-weight:900; margin:0 0 8px}
.list{margin:0; padding-left:18px; color:rgba(11,26,20,0.82); line-height:1.7}
.list li{margin:6px 0}
@media (max-width: 900px){
  .detail{grid-template-columns:1fr}
  .detail__img{height:220px}
}

/* Fix: hero grid classes used in HTML */
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:14px;
  align-items:center;
}
@media (max-width: 900px){
  .hero__grid{grid-template-columns:1fr}
}
/* Hero card / image wrapper */
.hero__card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,0.55);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height:260px;
}
.hero__imgWrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Center page headers a bit more on desktop */
.pageTop .container{
  text-align:center;
}