/* KIDS HEADER redesigned to the shared pattern (My Rhythm / Life Vault / My
   Kitchen / Community / Care Circle): white, sage eyebrow in small caps, a large
   navy headline, one supporting line, then the actions.
   CSS ONLY — no markup changed, so the strip's own script keeps working and the
   Kids Club Shop button, child chips, quick actions and tabs are untouched. */
#page-kids .kd-strip{
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  padding:20px clamp(16px,4vw,28px) 8px !important;
  max-width:1180px; margin-left:auto; margin-right:auto;
}
/* eyebrow: the terracotta strapline becomes the sage KIDS label the others use */
/* THE TEXT ITSELF IS REWRITTEN IN JS, not with ::before content — generated
   content is not reliably exposed to screen readers, and the h1 is the page's
   only heading. These rules just style the real text. */
#page-kids .kd-strip .kd-eb{
  font-family:'Nunito',system-ui,sans-serif !important;
  font-size:.72rem !important; font-weight:800 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important;
  margin:0 0 4px !important;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}
#page-kids .kd-strip .kd-h1{
  font-family:'Nunito',system-ui,sans-serif !important;
  font-size:clamp(1.4rem,3vw,1.9rem) !important; font-weight:800 !important;
  line-height:1.2 !important; margin:0 0 6px !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#page-kids .kd-strip .kd-lede{ display:none !important; }
#page-kids .kd-strip .kd-sub{
  margin:0 0 16px !important;
  font-size:.92rem !important; font-weight:400 !important; line-height:1.6 !important;
  max-width:56ch;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
/* the shop button becomes the primary action pill the other pages use, and sits
   in the actions row rather than between the headline and the sub */
#page-kids .kd-strip .kd-shop{
  order:2;
  font-size:.86rem !important; font-weight:800 !important;
  border-radius:999px !important; padding:12px 20px !important; min-height:46px !important;
  background:#4E6640 !important; border:1px solid #4E6640 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
#page-kids .kd-strip .kd-shop:hover{ background:#445A38 !important; border-color:#445A38 !important; }
#page-kids .kd-strip{ display:flex; flex-direction:column; }
#page-kids .kd-strip .kd-band{ order:0; }
#page-kids .kd-strip .kd-eb{ order:0; }
#page-kids .kd-strip .kd-h1{ order:0; }
#page-kids .kd-strip .kd-sub{ order:1; }
#page-kids .kd-strip .kd-shop{ order:2; align-self:flex-start; }
#page-kids .kd-strip > *:not(.kd-band):not(.kd-eb):not(.kd-h1):not(.kd-sub):not(.kd-shop){ order:3; }
/* the band now carries the full banner artwork, so it stays centred in its slot
   rather than being pinned to the bottom of the old squat strip. This rule sits
   AFTER hu-kdx-band, so it would otherwise override the position set there. */
#page-kids .kd-band{ background-position:center center; }
@media (max-width:900px){ #page-kids .kd-band{ background-position:left center; } }
@media (max-width:620px){
  #page-kids .kd-strip .kd-shop{ align-self:stretch; }
}