/* Jannah Skin — Product Info Page
   Tokens: cream #F6F1E6 / cream-2 #EFE8D8 / ink #2B2E22
           sage #6B7A5E / sage-dark #4B5A40 / terracotta #C1774E / muted #8A8570 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --cream:#F6F1E6;
  --cream-2:#EFE8D8;
  --ink:#2B2E22;
  --sage:#6B7A5E;
  --sage-dark:#4B5A40;
  --terracotta:#C1774E;
  --muted:#8A8570;
  --line: rgba(43,46,34,0.12);
  --radius: 20px;
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 20px 60px;
}

/* ---------- Header ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 22px;
}

.badge{
  width:46px;height:46px;border-radius:50%;
  border:1.5px solid var(--sage);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:10px;font-weight:500;letter-spacing:0.02em;
  color:var(--sage-dark);
  text-align:center;line-height:1.1;
  flex-shrink:0;
}

.langtoggle{
  display:flex;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:var(--cream-2);
}
.langtoggle button{
  border:0;background:transparent;
  font-family:var(--font-body);
  font-size:12.5px;font-weight:600;
  padding:7px 14px;
  color:var(--muted);
  cursor:pointer;
  letter-spacing:0.03em;
  transition: background .15s ease, color .15s ease;
}
.langtoggle button.active{
  background:var(--sage);
  color:var(--cream);
}
.langtoggle button:focus-visible{outline:2px solid var(--terracotta); outline-offset:-2px;}

/* ---------- Hero ---------- */
.hero{margin-bottom:26px;}
.hero .eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--terracotta);
  margin:0 0 6px;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(26px,7vw,34px);
  line-height:1.12;
  margin:0 0 4px;
  color:var(--ink);
}
.hero .subtitle{
  font-family:var(--font-display);
  font-style:italic;
  font-size:15px;
  color:var(--sage-dark);
  margin:0 0 10px;
}
.hero .actives{
  font-size:12.5px;
  color:var(--muted);
  margin:0 0 4px;
}
.hero .volume{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink);
  background:var(--cream-2);
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  margin-top:8px;
}

/* ---------- Sections ---------- */
section{margin-bottom:28px;}
section > h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:18px;
  color:var(--sage-dark);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
section > p{margin:0 0 10px;font-size:14.5px;}

.tagrow{
  display:flex;flex-wrap:wrap;gap:8px;
}
.tag{
  font-size:12.5px;
  background:var(--cream-2);
  border:1px solid var(--line);
  color:var(--ink);
  padding:7px 12px;
  border-radius:999px;
}

.ingredient{margin-bottom:14px;}
.ingredient:last-child{margin-bottom:0;}
.ingredient .iname{
  font-weight:600;font-size:14.5px;color:var(--ink);
  margin:0 0 3px;
}
.ingredient .idesc{
  font-size:13.5px;color:#514F41;margin:0;
}

ol.steps{margin:0;padding-left:20px;}
ol.steps li{font-size:14px;margin-bottom:8px;}
ol.steps li:last-child{margin-bottom:0;}

.warnbox{
  background: rgba(193,119,78,0.08);
  border:1px solid rgba(193,119,78,0.35);
  border-radius:14px;
  padding:16px 18px;
}
.warnbox h2{border-bottom:none;padding-bottom:0;color:var(--terracotta);}
.warnbox ul{margin:0;padding-left:18px;}
.warnbox li{font-size:13.5px;margin-bottom:6px;color:var(--ink);}
.warnbox li:last-child{margin-bottom:0;}

.inci-box{
  background:var(--ink);
  color:var(--cream);
  border-radius:16px;
  padding:18px 18px 16px;
}
.inci-box h2{
  color:var(--cream);
  border-bottom:1px solid rgba(246,241,230,0.2);
  font-size:16px;
}
.inci-box p{
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.7;
  color:#D9D4C4;
  margin:0;
}

.infogrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
}
.infogrid .cell .label{
  font-family:var(--font-mono);
  font-size:10px;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--muted);margin:0 0 3px;
}
.infogrid .cell .value{
  font-size:13.5px;color:var(--ink);margin:0;
}

.certbadges{display:flex;gap:10px;margin-bottom:10px;}
.certbadge{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--sage-dark);
  background:var(--cream-2);border-radius:999px;padding:6px 12px;
}

footer{
  text-align:center;
  padding-top:18px;
  border-top:1px solid var(--line);
}
footer p{font-size:12.5px;color:var(--muted);margin:0 0 4px;}
footer a{color:var(--sage-dark);text-decoration:none;}

/* language visibility */
[data-lang]{display:none;}
[data-lang].lang-active{display:block;}

@media (max-width:380px){
  .infogrid{grid-template-columns:1fr;}
}