/* Superfood Kitchen — reuses the .kb-* editorial system; adds only what's specific. */
#page-sf-feature .sf-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:52px 0 40px; }
.sf-ing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sf-ing{ border-radius:20px; padding:18px 12px; text-align:center; border:1px solid #E8E4DC; background:#fff; }
.sf-ing-e{ font-size:1.9rem; line-height:1; }
.sf-ing-n{ font-size:0.76rem; font-weight:800; color:#20354B !important; -webkit-text-fill-color:#20354B !important; margin-top:8px; }
.sf-ing.c-green{ background:#EFF5EC; } .sf-ing.c-red{ background:#FBEFEE; } .sf-ing.c-orange{ background:#FDF2E7; }
.sf-ing.c-yellow{ background:#FCF7E4; } .sf-ing.c-purple{ background:#F2EFF7; } .sf-ing.c-white{ background:#F7F5F1; }

/* tabs */
.sf-tabs{ display:flex; gap:8px; overflow-x:auto; padding:4px 0 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.sf-tabs::-webkit-scrollbar{ display:none; }
.sf-tab{ flex:0 0 auto; border:1px solid #E8E4DC; background:#fff; border-radius:50px; padding:10px 17px; font-family:inherit;
  font-size:0.82rem; font-weight:800; color:#687383 !important; -webkit-text-fill-color:#687383 !important; cursor:pointer; min-height:44px; transition:.15s; }
.sf-tab:hover{ border-color:#cfc9bd; }
.sf-tab.is-on{ border-color:#B9CDB4; background:#DCE7D7; color:#31503a !important; -webkit-text-fill-color:#31503a !important; }

/* colour board */
.sf-board{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:18px; }
.sf-colour{ border:1px solid #E8E4DC; border-radius:20px; padding:16px 12px; text-align:center; cursor:pointer; font-family:inherit; transition:.16s; background:#fff; }
.sf-colour:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(32,53,75,.08); }
.sf-colour.is-on{ border-color:#B9CDB4; box-shadow:inset 0 0 0 2px #B9CDB4; }
.sf-colour-dot{ width:34px; height:34px; border-radius:50%; margin:0 auto 10px; }
.sf-colour-n{ font-size:0.78rem; font-weight:800; color:#20354B !important; -webkit-text-fill-color:#20354B !important; }
.sf-colour-c{ font-size:0.68rem; color:#8b929b !important; -webkit-text-fill-color:#8b929b !important; margin-top:3px; }
.sf-encourage{ background:#EFF4ED; border:1px solid #DDE7DA; border-radius:20px; padding:16px 20px; margin-top:18px; font-size:0.9rem;
  font-weight:700; color:#31503a !important; -webkit-text-fill-color:#31503a !important; }

/* stats */
.sf-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
.sf-stat{ background:#fff; border:1px solid #E8E4DC; border-radius:20px; padding:18px; }
.sf-stat-l{ font-size:0.68rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:#8b929b !important; -webkit-text-fill-color:#8b929b !important; margin:0; }
.sf-stat-v{ font-family:Georgia,serif; font-size:1.7rem; font-weight:700; color:#4d6a50 !important; -webkit-text-fill-color:#4d6a50 !important; margin:8px 0 0; }
.sf-stat-s{ font-size:0.74rem; color:#687383 !important; -webkit-text-fill-color:#687383 !important; margin:2px 0 0; }
.sf-bar{ height:8px; border-radius:50px; background:#EFEBE3; overflow:hidden; margin-top:12px; }
.sf-bar span{ display:block; height:100%; background:#8FB58A; border-radius:50px; }

/* swap results */
.sf-swap{ background:#fff; border:1px solid #E8E4DC; border-radius:22px; padding:20px; margin-top:12px; }
.sf-swap-h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sf-swap-from{ font-weight:800; color:#687383 !important; -webkit-text-fill-color:#687383 !important; font-size:0.9rem; }
.sf-swap-to{ font-family:Georgia,serif; font-size:1.12rem; font-weight:700; color:#20354B !important; -webkit-text-fill-color:#20354B !important; }
.sf-swap-rows{ margin-top:13px; display:flex; flex-direction:column; gap:9px; }
.sf-swap-row{ display:grid; grid-template-columns:118px 1fr; gap:12px; font-size:0.85rem; line-height:1.55; }
.sf-swap-k{ font-weight:800; color:#4d6a50 !important; -webkit-text-fill-color:#4d6a50 !important; }
.sf-swap-v{ color:#5a626c !important; -webkit-text-fill-color:#5a626c !important; }
.sf-allergen{ background:#FBF3E6; border:1px solid #EFE0C4; border-radius:14px; padding:11px 14px; margin-top:12px; font-size:0.8rem;
  line-height:1.55; color:#7a6338 !important; -webkit-text-fill-color:#7a6338 !important; }

/* disclaimer + sources */
.sf-disclaimer{ background:#FBFAF7; border:1px solid #E8E4DC; border-radius:20px; padding:18px 20px; margin-top:24px; }
.sf-disclaimer p{ font-size:0.82rem; line-height:1.65; color:#687383 !important; -webkit-text-fill-color:#687383 !important; margin:0; }
.sf-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; font-size:0.72rem; color:#8b929b !important; -webkit-text-fill-color:#8b929b !important; }
.sf-meta span{ background:#F6F4EF; border-radius:50px; padding:4px 11px; }

/* wellness team */
.sf-res{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid #E8E4DC; border-radius:20px; padding:18px; }
.sf-res-ic{ width:44px; height:44px; flex:0 0 44px; border-radius:14px; background:#DCE7D7; color:#4d6a50; display:flex; align-items:center; justify-content:center; }
.sf-res-ic svg{ width:20px; height:20px; }
.sf-res-t{ font-size:0.96rem; font-weight:800; color:#20354B !important; -webkit-text-fill-color:#20354B !important; margin:0; }
.sf-res-w{ font-size:0.78rem; color:#6F9272 !important; -webkit-text-fill-color:#6F9272 !important; margin:3px 0 0; font-weight:700; }
.sf-res-n{ font-size:0.83rem; line-height:1.6; color:#687383 !important; -webkit-text-fill-color:#687383 !important; margin:8px 0 0; }

@media (max-width:1024px){
  #page-sf-feature .sf-hero{ grid-template-columns:1fr; gap:28px; }
  .sf-board{ grid-template-columns:repeat(3,1fr); }
  .sf-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  #page-sf-feature .sf-hero{ padding:28px 0 22px; }
  .sf-board{ grid-template-columns:repeat(2,1fr); }
  .sf-ing-grid{ grid-template-columns:repeat(3,1fr); }
  .sf-swap-row{ grid-template-columns:1fr; gap:2px; }
}