/* ==========================================================================
   KIDS CLUB — Food Friends Universe overhaul (Sep 2026)
   Prefix kdc-. No class contains "hero", "-card", "-tile", "-tag", "-pill"
   or "-badge" — every one of those is a global repaint trap in this file.
   Nothing here restyles the site header, the nav or the footer.
   ========================================================================== */
#page-kids{ background:#ffffff !important; }
#kdcRoot{
  --kn:#243447; --kn2:#31465F; --kmut:#5A6B7D;
  --ksky1:#DCEEFB; --ksky2:#EFF8FF; --kline:#E7ECF1;
  --kpurple:#6B3FA0; --kberry:#8E3A62; --kcitrus:#B8651A; --khoney:#9A6B12;
  --kpod:#2F6E49; --kpasta:#A34E2B; --kgarden:#3C6F2E;
  --kblush:#F7E7E7; --kblushd:#A8536A;
  font-family:'Nunito',system-ui,sans-serif; color:var(--kn); display:block;
}
#kdcRoot *{ box-sizing:border-box; }
#kdcRoot p{ margin:0; }
#kdcRoot svg, .kdc-ov svg{ width:20px; height:20px; flex:0 0 auto; }
.kdc-act-ic svg{ width:24px !important; height:24px !important; }
#kdcRoot section{ padding:0; }
.kdc-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
.kdc-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap; }
.kdc-h2{ font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.55rem,2.6vw,2.1rem);
  font-weight:800; color:var(--kn) !important; margin:0 0 6px; }
.kdc-lede{ color:var(--kn2); font-size:1rem; line-height:1.55; margin:0 0 20px !important; }
.kdc-sc{ font-family:'Caveat',cursive; }
#kdcRoot :focus-visible{ outline:3px solid #2F6E49; outline-offset:3px; border-radius:14px; }

/* ---- 1. the universe banner --------------------------------------------- */
.kdc-top{ position:relative; margin-left:calc(50% - 50vw); width:100vw; overflow:hidden;
  background:linear-gradient(180deg,var(--ksky1) 0%,var(--ksky2) 62%,#ffffff 100%);
  padding:26px 0 34px; }
.kdc-top::before, .kdc-top::after{ content:''; position:absolute; border-radius:50%;
  background:rgba(255,255,255,.85); pointer-events:none; }
.kdc-top::before{ width:190px; height:70px; left:4%; top:38px;
  box-shadow:70px 14px 0 -8px rgba(255,255,255,.85), 140px -6px 0 -14px rgba(255,255,255,.8); }
.kdc-top::after{ width:150px; height:56px; right:6%; top:96px;
  box-shadow:-60px 16px 0 -8px rgba(255,255,255,.8); }
.kdc-top-in{ position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 20px;
  text-align:center; }
.kdc-art{ display:block; width:min(100%,720px); height:auto; margin:0 auto; }
.kdc-eat{ font-size:.86rem; letter-spacing:.2em; text-transform:uppercase; font-weight:800;
  color:var(--kn2); margin:14px 0 4px !important; }
.kdc-say{ font-size:1.02rem; color:var(--kn2); max-width:46ch; margin:0 auto !important;
  line-height:1.55; }
.kdc-enter{ display:inline-flex; align-items:center; gap:10px; min-height:54px; margin-top:18px;
  padding:14px 28px; border:0; border-radius:50px; cursor:pointer; font:inherit; font-weight:800;
  font-size:1.05rem; background:#2F6E49 !important; color:#fff !important;
  box-shadow:0 8px 20px rgba(47,110,73,.3); }
.kdc-enter:hover{ background:#255C3C !important; }
.kdc-notes{ display:flex; justify-content:center; gap:clamp(16px,6vw,90px); flex-wrap:wrap;
  margin-top:20px; }
.kdc-note{ font-family:'Caveat',cursive; font-size:1.45rem; line-height:1.2; color:var(--kn2);
  text-align:center; }
.kdc-note b{ display:block; font-weight:700; color:var(--kpurple); }

/* ---- 2. choose your adventure ------------------------------------------- */
.kdc-sec{ padding:44px 0 0; }
.kdc-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(232px,1fr);
  gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 18px;
  -webkit-overflow-scrolling:touch; }
.kdc-rail > *{ scroll-snap-align:start; }
.kdc-rail::-webkit-scrollbar{ height:8px; }
.kdc-rail::-webkit-scrollbar-thumb{ background:#D9E2E9; border-radius:8px; }
#kdcRoot .ffu-cell{ margin:0 !important; border-radius:20px; overflow:hidden;
  box-shadow:0 6px 18px rgba(36,52,71,.10); transition:transform .18s ease, box-shadow .18s ease;
  background:#fff; }
#kdcRoot .ffu-cell:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(36,52,71,.16); }
#kdcRoot .ffu-cell img{ display:block; width:100%; height:auto; border-radius:20px; }
.kdc-soon{ position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:1005/1565; border-radius:20px; padding:20px 18px; text-align:center;
  border:2px dashed rgba(36,52,71,.18); box-shadow:0 6px 18px rgba(36,52,71,.07); }
.kdc-soon-n{ font-family:'Playfair Display',Georgia,serif; font-size:1.3rem; font-weight:800;
  line-height:1.15; margin-bottom:8px; }
.kdc-soon-d{ font-size:.9rem; line-height:1.5; color:var(--kn2); margin-bottom:14px !important; }
.kdc-soon-s{ display:inline-block; align-self:center; padding:8px 16px; border-radius:50px;
  background:rgba(255,255,255,.85); font-size:.78rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; }
.kdc-soon-e{ position:absolute; top:22px; left:0; right:0; font-size:2.6rem; }
.kdc-swipe{ font-size:.82rem; color:var(--kmut); margin-top:-6px !important; }

/* ---- 4. play, learn & collect ------------------------------------------- */
.kdc-acts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.kdc-act{ display:flex; flex-direction:column; text-align:left; border:1px solid rgba(36,52,71,.08);
  border-radius:20px; padding:18px; min-height:196px; cursor:pointer; font:inherit; color:var(--kn);
  box-shadow:0 4px 14px rgba(36,52,71,.06); transition:transform .18s ease, box-shadow .18s ease; }
.kdc-act:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(36,52,71,.13); }
.kdc-act-ic{ width:46px; height:46px; border-radius:16px; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.8); margin-bottom:12px; }
.kdc-act-ic svg{ width:24px; height:24px; }
.kdc-act-n{ font-family:'Playfair Display',Georgia,serif; font-size:1.08rem; font-weight:800;
  line-height:1.25; margin-bottom:5px; }
.kdc-act-d{ font-size:.87rem; line-height:1.45; color:var(--kn2); flex:1 1 auto; }
.kdc-act-c{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-weight:800;
  font-size:.88rem; }
.kdc-act-l{ display:inline-block; margin-top:8px; font-size:.74rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--kn2); }

/* ---- 5. food passport ---------------------------------------------------- */
.kdc-pp{ margin-top:22px; border:1px solid var(--kline); border-radius:24px; padding:24px;
  background:linear-gradient(180deg,#FFFDF7,#FFFFFF); box-shadow:0 6px 20px rgba(36,52,71,.06); }
.kdc-pp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  flex-wrap:wrap; }
.kdc-who{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 18px; }
.kdc-whob{ min-height:44px; padding:10px 16px; border-radius:50px; border:1px solid var(--kline);
  background:#fff !important; cursor:pointer; font:inherit; font-weight:700; font-size:.88rem;
  color:var(--kn2) !important; }
.kdc-whob.is-on{ background:#2F6E49 !important; color:#fff !important; border-color:#2F6E49; }
.kdc-stamps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.kdc-stamp{ border:1px solid var(--kline); border-radius:18px; padding:16px; text-align:center;
  background:#fff; }
.kdc-stamp-e{ font-size:1.9rem; line-height:1; }
.kdc-stamp-n{ font-weight:800; font-size:.92rem; margin:8px 0 2px; }
.kdc-stamp-v{ font-size:.82rem; color:var(--kn2); }
.kdc-stamp-b{ margin-top:10px; min-height:44px; width:100%; padding:10px; border-radius:12px;
  border:1px solid #2F6E49; background:#fff !important; color:#2F6E49 !important; cursor:pointer;
  font:inherit; font-weight:800; font-size:.84rem; }
.kdc-stamp-b:hover{ background:#EDF5EF !important; }
.kdc-bar{ height:12px; border-radius:50px; background:#EEF2F5; overflow:hidden; margin-top:16px; }
.kdc-bar i{ display:block; height:100%; border-radius:50px; background:#2F6E49; }
.kdc-fine{ font-size:.8rem; color:var(--kmut); line-height:1.55; margin-top:14px !important; }

/* ---- little seedlings / shop / grown-ups -------------------------------- */
.kdc-seedband{ margin:48px 0 0; margin-left:calc(50% - 50vw); width:100vw;
  background:linear-gradient(120deg,#1B2B3D,#243447 55%,#2C4A3B); color:#fff; }
.kdc-seedin{ max-width:1180px; margin:0 auto; padding:34px 20px; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:28px; align-items:center; }
.kdc-seedtxt{ min-width:0; }
#kdcSeed .ls-entry-inner{ background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:0 !important; margin:0 !important; }
#kdcSeed .ls-entry-title{ font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.6rem,3vw,2.2rem) !important; font-weight:800; color:#fff !important; }
#kdcSeed .ls-entry-sub{ color:rgba(255,255,255,.88) !important; font-size:1.02rem !important; }
.kdc-seedcta{ margin-top:16px; }
.kdc-seednote{ font-family:'Caveat',cursive; font-size:1.6rem; color:#CFE3D4;
  margin-top:14px !important; }
.kdc-seedart img{ display:block; width:100%; height:auto; border-radius:20px;
  box-shadow:0 14px 34px rgba(0,0,0,.28); }
.kdc-shop{ margin-top:44px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px;
  align-items:center; border:1px solid var(--kline); border-radius:24px; padding:26px 28px;
  background:linear-gradient(120deg,#FFF7E8,#FFFDF8); }
.kdc-grown{ margin:34px 0 10px; border-radius:24px; padding:26px 28px;
  background:var(--kblush) !important; border:1px solid #EFD5D6;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; }
.kdc-grown h2{ color:var(--kn) !important; }
.kdc-b{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px;
  padding:13px 24px; border-radius:50px; border:0; cursor:pointer; font:inherit; font-weight:800;
  font-size:.96rem; background:#243447 !important; color:#fff !important; white-space:nowrap; }
.kdc-b:hover{ background:#1A2735 !important; }
.kdc-b.is-green{ background:#2F6E49 !important; }
.kdc-b.is-green:hover{ background:#255C3C !important; }
.kdc-b.is-ghost{ background:#fff !important; color:var(--kn) !important; border:1px solid var(--kline); }
.kdc-more-l{ display:block; margin:10px auto 0; background:transparent !important; border:0;
  font:inherit; font-size:.88rem; font-weight:800; color:var(--kn2) !important; cursor:pointer;
  min-height:44px; text-decoration:underline; }
#kdcGrownBody{ margin-top:18px; }
#kdcGrownBody[hidden]{ display:none; }
#kdcRoot .kd-kids, #kdcRoot .kd-qa, #kdcRoot .kd-tabs{ margin-bottom:12px; }

/* ---- 6. the rest of the club -------------------------------------------- */
.kdc-morehead{ margin-top:46px; padding-top:26px; border-top:1px solid var(--kline); }

/* ---- sheets -------------------------------------------------------------- */
.kdc-ov{ position:fixed; inset:0; z-index:99999; background:rgba(36,52,71,.45); display:none;
  align-items:center; justify-content:center; padding:20px; }
.kdc-ov.is-open{ display:flex; }
.kdc-box{ width:100%; max-width:580px; max-height:calc(100dvh - 48px); overflow-y:auto;
  background:#fff; border-radius:24px; padding:24px; box-shadow:0 24px 60px rgba(36,52,71,.32);
  font-family:'Nunito',system-ui,sans-serif; color:var(--kn); }
.kdc-box h3{ font-family:'Playfair Display',Georgia,serif; font-size:1.45rem; font-weight:800;
  margin:0 0 8px; color:var(--kn) !important; }
.kdc-x{ float:right; width:44px; height:44px; border-radius:50%; border:1px solid var(--kline);
  background:#fff !important; cursor:pointer; font-size:1rem; }
.kdc-q{ font-size:1.06rem; font-weight:800; line-height:1.4; margin:14px 0 12px !important; }
.kdc-opt{ display:block; width:100%; text-align:left; min-height:52px; padding:13px 16px;
  margin-bottom:10px; border-radius:14px; border:1px solid var(--kline); background:#fff !important;
  cursor:pointer; font:inherit; font-size:.98rem; color:var(--kn); }
.kdc-opt:hover{ background:#F4F8F5 !important; }
.kdc-opt.is-right{ background:#E7F3EA !important; border-color:#2F6E49; font-weight:800; }
.kdc-opt.is-wrong{ background:#FBEEEE !important; border-color:#C08088; }
.kdc-prog{ font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--kmut); }

/* ---- touch targets on the existing controls that moved in here ---------- */
#kdcRoot .ff-filter{ min-height:44px; padding-top:10px; padding-bottom:10px; }
#kdcRoot .tts-inline-btn{ min-height:44px; min-width:44px; }
#kdcRoot .ff-dl-card button, #kdcRoot .ce-chip{ min-height:44px; }
#kdcRoot .ff-back > button{ min-height:44px !important; display:inline-flex !important;
  align-items:center; justify-content:center; }
#kdcRoot .ff2-tex-btn, #kdcRoot .ls-btn{ min-height:44px; }
#kdcMore button{ min-height:44px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1100px){
  .kdc-acts{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kdc-stamps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px){
  .kdc-acts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kdc-shop, .kdc-grown{ grid-template-columns:minmax(0,1fr); text-align:left; }
  .kdc-seedin{ grid-template-columns:minmax(0,1fr); }
  .kdc-rail{ grid-auto-columns:minmax(206px,74%); }
}
@media (max-width:600px){
  .kdc-top{ padding:16px 0 26px; }
  .kdc-notes{ gap:14px; }
  .kdc-note{ font-size:1.3rem; }
  .kdc-acts{ grid-template-columns:minmax(0,1fr); }
  .kdc-act{ min-height:0; }
  .kdc-stamps{ grid-template-columns:minmax(0,1fr); }
  .kdc-rail{ grid-auto-columns:minmax(200px,80%); }
  .kdc-h2{ font-size:1.45rem; }
  .kdc-box{ padding:18px 16px; }
}
@media (prefers-reduced-motion:reduce){
  #page-kids *, #kdcRoot *{ transition:none !important; animation:none !important; }
  .kdc-act:hover, #kdcRoot .ffu-cell:hover{ transform:none; }
}