/* Short product pages for the Geared Kids app shelf. */
body.kids-product-page { background: #fffdf4; }
.kids-product-page h1, .kids-product-page h2, .kids-product-page h3 { line-height: 1.06; }
.kids-product-page h1 { font-size: clamp(3rem, 5.5vw, 5rem); max-width: 15ch; }
.kids-product-page h1 span { color: #6232b4; }
.kids-product-page h2 { font-size: clamp(2.4rem, 4vw, 3.5rem); }
.kids-product-page h3 { font-size: 1.8rem; }
.kids-product-page p { line-height: 1.7; }
.kids-product-page .topbar { padding-bottom: 24px; }
.kids-product-section { width: min(calc(100% - 40px), var(--max-width)); margin: 0 auto; }
.kids-product-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 44px; padding: 44px; border-radius: 52px 28px 52px 28px; background: #ffde66; margin-bottom: 64px; }
.farm-page .kids-product-hero { background: #bdebf4; }
.kids-intro { color: #354b5c; font-size: 1.15rem; }
.kids-product-art { margin: 0; padding: 10px; border-radius: 28px; background: white; transform: rotate(3deg); box-shadow: 8px 10px 0 #21304015; }
.kids-product-art img { width: 100%; height: auto; border-radius: 20px; }
.kids-store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 24px 0 16px; }
.kids-store-row .store-badge img { width: auto; height: 50px; }
.kids-store-row .store-badge-google img { height: 46px; }
.kids-note { font-size: 0.9rem; color: #354b5c; }
.kids-section-heading { max-width: 740px; text-align: center; margin: 0 auto 32px; }
.kids-product-activities { padding-bottom: 64px; scroll-margin-top: 24px; }
.kids-activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kids-activity { padding: 30px; border-radius: 34px 56px 34px 34px; background: #d7ef90; }
.kids-activity:nth-child(2) { background: #ffc4dd; border-radius: 56px 34px 34px 34px; }
.kids-activity:nth-child(3) { background: #d9c9fa; border-radius: 34px 34px 56px 34px; }
.kids-activity p { color: #354b5c; margin-bottom: 0; }
.kids-play-mark { display: inline-block; margin-bottom: 24px; font-family: "Baloo 2", sans-serif; font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; color: #51259d; transform: rotate(-5deg); }
.kids-product-questions { max-width: 850px; padding-bottom: 64px; scroll-margin-top: 24px; }
.kids-questions { margin-top: 24px; }
.kids-questions details { border-bottom: 1px solid #21304026; padding: 22px 0; }
.kids-questions summary { font-size: 1.15rem; font-weight: 800; cursor: pointer; }
.kids-questions p { color: #354b5c; margin-bottom: 0; }
.kids-questions a { text-decoration: underline; text-underline-offset: 4px; }
.kids-product-download { padding: 40px 28px; border-radius: 48px 28px 48px 28px; background: #bdebf4; text-align: center; scroll-margin-top: 24px; }
.farm-page .kids-product-download { background: #ffde66; }
.kids-product-download .kids-store-row { justify-content: center; }
.kids-more-apps { padding: 48px 0; text-align: center; }
.kids-more-apps .text-link { display: block; margin-top: 24px; }
.kids-footer { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding: 20px 0 32px; }
.kids-footer a { text-decoration: underline; text-underline-offset: 4px; }
.kids-skip-link { position: absolute; top: -100px; left: 16px; padding: 12px 18px; background: white; z-index: 10; border-radius: 12px; }
.kids-skip-link:focus { top: 16px; }
.kids-questions summary:focus-visible { outline: 3px solid #6533bc; outline-offset: 5px; }
@media (max-width: 900px) {
    .kids-product-hero { grid-template-columns: 1fr; padding: 32px; }
    .kids-product-art { width: min(100%, 580px); }
    .kids-activity-grid { grid-template-columns: 1fr; }
    .kids-activity { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 0 24px; align-items: center; }
    .kids-play-mark { grid-column: 1; grid-row: 1 / 3; margin: 0; font-size: 2.4rem; }
    .kids-activity h3, .kids-activity p { grid-column: 2; }
}
@media (max-width: 560px) {
    .kids-product-page .topbar { flex-direction: column; gap: 12px; }
    .kids-product-page .topnav { width: 100%; justify-content: center; }
    .kids-product-page .topnav a { width: auto; padding: 10px; font-size: 0.9rem; }
    .kids-product-hero { padding: 26px 22px; }
    .kids-product-art { transform: none; }
    .kids-store-row { gap: 10px; }
    .kids-store-row .store-badge img { height: 43px; }
    .kids-store-row .store-badge-google img { height: 40px; }
    .kids-activity { display: block; padding: 24px; }
    .kids-play-mark { margin-bottom: 18px; }
}

/* Character greetings share the phonics page's finite, replayable dance. */
.kids-page-trail { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.kids-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 1rem; }
.kids-breadcrumb a { color: #51259d; text-decoration: underline; text-underline-offset: 4px; font-weight: 800; }
.kids-breadcrumb [aria-current] { font-weight: 800; }
.kids-character-welcome { display: flex; align-items: center; gap: 12px; color: #51259d; font-family: "Baloo 2", sans-serif; font-size: 1.2rem; font-weight: 700; }
.kids-character-welcome small { display: block; font-family: "Nunito", sans-serif; font-size: .75rem; font-weight: 600; }
.kids-character-dancer { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 80px; min-height: 80px; padding: 4px; border: 0; border-radius: 18px; background: transparent; cursor: pointer; }
.kids-character-dancer img { display: block; width: 72px; height: 72px; object-fit: contain; transform-origin: 50% 85%; }
.kids-character-dancer:hover { background: #d9c9fa55; }
.kids-character-dancer:focus-visible { outline: 3px solid #6232b4; outline-offset: 4px; }
@media (max-width: 560px) {
    .kids-page-trail { gap: 10px; }
    .kids-breadcrumb { gap: 8px; font-size: .9rem; }
    .kids-character-welcome span { display: none; }
    .kids-character-dancer { min-width: 64px; min-height: 64px; }
    .kids-character-dancer img { width: 56px; height: 56px; }
}