/* KIDS brought into line with the other five pages, at her request: the 698px
   Food Friends banner is hidden, the same photo-band treatment goes behind the
   existing HU Kids header, and a "Make it yours" Widget Wall strip sits under it.
   NOTHING ELSE ON THE PAGE IS TOUCHED — the strip's own content, the Kids Club
   Shop CTA, the Little Chef Explorer and the Food Friends Universe all stay. */
#page-kids .ff-universe-hero{ display:none !important; }

/* the band, behind the strip's own heading block */
#page-kids .kd-strip{ position:relative; }
#page-kids .kd-strip > *{ position:relative; z-index:1; }
#page-kids .kd-band{
  display:block;
  /* inset a touch: the broccoli girl sits hard against the artwork's own right
     edge, so right:0 made her look cropped by the header */
  position:absolute; top:6px; right:8px; bottom:6px;
  width:min(46%,520px);
  background-image:url("assets/img/img-ea896f431b24.webp");
  /* ART REPLACED (Aug 2026) with her full "Welcome to the Food Friends Universe"
     banner, trimmed to its content (1199x504) and its near-white ground flattened
     to pure white so it has no visible box edge against the white header.
     THE WHOLE ARTWORK IS USED AS-IS this time - no cut-outs, no wordmark surgery.
     Measured at band size (520px) the wordmark reads cleanly, which was the thing
     that failed on the previous, smaller-typeset banner. `contain` therefore shows
     all of it, and the white letterboxing is invisible on the white header. */
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  z-index:0;
  pointer-events:none;
  opacity:1;
}
/* the artwork is real branding now rather than a faded backdrop, so the header
   copy is held clear of it instead of the band being ghosted back */
@media (min-width:901px){
  #page-kids .kd-strip .kd-eb,
  #page-kids .kd-strip .kd-h1,
  #page-kids .kd-strip .kd-sub{ max-width:calc(100% - min(50%,560px)) !important; }
}
/* 901-1180px the 46% band left the headline too narrow and it wrapped to two
   lines. The band gives back 6% through that range - measured, the wordmark is
   still legible at the smaller size. */
@media (min-width:901px) and (max-width:1180px){
  #page-kids .kd-band{ width:40%; }
  #page-kids .kd-strip .kd-eb,
  #page-kids .kd-strip .kd-h1,
  #page-kids .kd-strip .kd-sub{ max-width:58% !important; }
}
/* Below 900px there is no room beside the copy, so the banner stops being a
   backdrop and becomes a real banner ABOVE the eyebrow (flex order:0 already puts
   it first). It used to be hidden outright under 620px, which lost the branding
   on phones entirely. */
@media (max-width:900px){
  #page-kids .kd-band{
    position:static;
    width:100%; max-width:560px;
    aspect-ratio:1199/504;
    margin:0 0 10px;
    background-position:left center;
  }
}
@media (max-width:620px){ #page-kids .kd-band{ max-width:440px; } }

/* Make it yours — the same strip the other five carry */
#page-kids .kd-mine{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  max-width:1180px; margin:0 auto 8px; padding:16px 20px;
  background:#F4F6F1 !important; border:1px solid #E2E8DD !important; border-radius:20px;
  font-family:'Nunito',system-ui,sans-serif;
}
#page-kids .kd-mine-ic{
  flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#E2EBDD; font-size:1.05rem;
  color:#41533C !important; -webkit-text-fill-color:#41533C !important;
}
#page-kids .kd-mine-t{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:200px; }
#page-kids .kd-mine-t strong{ font-size:.95rem; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
#page-kids .kd-mine-t span{ font-size:.84rem; line-height:1.5; color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important; }
#page-kids .kd-mine-b{
  flex:none; cursor:pointer; font:inherit; font-size:.84rem; font-weight:800; border-radius:999px;
  padding:11px 18px; min-height:44px;
  background:#fff !important; border:1px solid #DDD7C9 !important;
  color:#3D4A3A !important; -webkit-text-fill-color:#3D4A3A !important;
}
#page-kids .kd-mine-b:hover{ background:#EEF4EC !important; border-color:#CFE0C8 !important; }
#page-kids .kd-mine-b:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
@media (max-width:430px){ #page-kids .kd-mine-b{ width:100%; } }