/* KidsNova visual system and responsive layout. */
/* Base tokens and reset rules. */
:root {
        --cream: #f8f4ee;
        --paper: #fffdf9;
        --ink: #1f2933;
        --muted: #69737c;
        --navy: #243448;
        --rose: #e7aaa3;
        --blue: #b9d7df;
        --lilac: #d9cde5;
        --gold: #c89658;
        --line: #e9e1d7;
        --shadow: 0 18px 50px #3e2d1c1a;
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        background: var(--cream);
        color: var(--ink);
        font-family: "DM Sans", sans-serif;
      }
      button,
      input,
      select {
        font: inherit;
      }
      button {
        cursor: pointer;
      }
      img {
        max-width: 100%;
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .legal-page {
        max-width: 820px;
        padding-top: 72px;
        padding-bottom: 96px;
      }
      .legal-page h1 {
        margin: 10px 0 12px;
      }
      .legal-page h2 {
        margin: 34px 0 10px;
      }
      .legal-page p {
        line-height: 1.75;
        color: var(--muted);
      }
      .announcement {
        background: var(--navy);
        color: #fff;
        padding: 10px 24px;
        display: flex;
        justify-content: center;
        gap: 22px;
        font-size: 12px;
        letter-spacing: 0.04em;
        position: relative;
      }
      .announcement button {
        background: none;
        border: 0;
        color: #fff;
        position: absolute;
        right: 22px;
        top: 7px;
        font-size: 20px;
      }
      header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fffdf9f0;
        border-bottom: 1px solid var(--line);
        backdrop-filter: blur(14px);
      }
      .nav {
        max-width: 1280px;
        margin: auto;
        padding: 19px 28px;
        display: flex;
        align-items: center;
        gap: 32px;
      }
      .logo {
        margin-right: auto;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
      }
      .logo img {
        width: 120px;
        height: 60px;
        object-fit: contain;
      }
      .navlinks {
        display: flex;
        gap: 23px;
        font-size: 13px;
        color: var(--muted);
      }
      .navlinks a:hover {
        color: var(--ink);
      }
      .nav-actions {
        display: flex;
        gap: 8px;
      }
      .icon-btn {
        border: 0;
        background: none;
        color: var(--navy);
        font-size: 18px;
        padding: 6px;
        position: relative;
      }
      .cart-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 8px 12px;
        background: #fff;
        font-size: 13px;
        font-weight: 700;
        transition: background 160ms ease, transform 160ms ease;
      }
      .cart-btn:hover,
      .cart-btn:focus-visible {
        background: var(--paper);
        transform: translateY(-1px);
      }
      .cart-icon {
        display: inline-block;
        font-size: 18px;
        line-height: 1;
      }
      .cart-label {
        color: var(--navy);
      }
      .count {
        background: var(--rose);
        color: #fff;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        font: 10px "DM Sans";
        position: absolute;
        top: 0;
        right: -2px;
        display: grid;
        place-items: center;
      }
      .checkout-success {
        text-align: center;
        padding: 22px 8px 8px;
      }
      .checkout-success-icon {
        width: 56px;
        height: 56px;
        margin: 0 auto 14px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #25d366;
        color: #fff;
        font-size: 30px;
        font-weight: 700;
      }
      .checkout-success h3 {
        margin: 0 0 8px;
        font-size: 24px;
      }
      .checkout-success p {
        color: var(--muted);
        line-height: 1.6;
        margin: 0 auto 20px;
        max-width: 410px;
      }
      .custom-success {
        text-align: center;
        padding: 25px 5px;
      }
      .custom-success h2 {
        margin: 0 0 10px;
      }
      .custom-success .lead {
        max-width: 480px;
        margin: 0 auto 20px;
      }
      .wrap {
        max-width: 1280px;
        padding: 0 28px;
        margin: auto;
      }
      .hero {
        min-height: 610px;
        display: grid;
        grid-template-columns: 1fr 1.03fr;
        align-items: center;
        gap: 45px;
        padding-top: 35px;
      }
      .eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 11px;
        color: var(--gold);
        font-weight: 700;
      }
      h1,
      h2,
      h3 {
        font-family: "Playfair Display", serif;
        font-weight: 700;
        margin: 0;
      }
      h1 {
        font-size: clamp(50px, 6vw, 82px);
        line-height: 1.02;
        letter-spacing: -0.055em;
        max-width: 610px;
        margin: 18px 0;
      }
      h2 {
        font-size: clamp(32px, 4vw, 52px);
        letter-spacing: -0.04em;
      }
      .lead {
        color: var(--muted);
        line-height: 1.75;
        max-width: 480px;
        font-size: 16px;
      }
      .hero-actions {
        display: flex;
        gap: 12px;
        margin-top: 30px;
        flex-wrap: wrap;
      }
      .btn {
        border: 1px solid var(--navy);
        padding: 14px 21px;
        border-radius: 3px;
        font-size: 13px;
        font-weight: 700;
        transition: 0.2s;
      }
      .btn-primary {
        background: var(--navy);
        color: #fff;
      }
      .btn-primary:hover {
        background: #354b64;
        transform: translateY(-2px);
      }
      .btn-light {
        background: transparent;
      }
      .btn-light:hover {
        background: #fff;
      }
      .hero-art {
        position: relative;
        min-height: 505px;
        overflow: hidden;
        touch-action: pan-y;
      }
      /* Hero images are layered so the active slide can fade in cleanly. */
      .hero-art img {
        width: 83%;
        height: 500px;
        object-fit: cover;
        margin-left: auto;
        border-radius: 210px 210px 4px 4px;
        position: absolute;
        inset: 0 0 auto auto;
        opacity: 0;
        transform: translateX(28px);
        transition: opacity 0.55s ease, transform 0.55s ease;
      }
      .hero-art img.is-active {
        opacity: 1;
        transform: translateX(0);
      }
      .hero-note {
        position: absolute;
        bottom: 20px;
        left: 12px;
        background: var(--paper);
        padding: 18px 20px;
        box-shadow: var(--shadow);
        width: 205px;
        height: 190px;
        box-sizing: border-box;
        border-left: 3px solid var(--rose);
        z-index: 2;
      }
      .hero-note > div {
        position: absolute;
        top: 18px;
        right: 20px;
        bottom: 18px;
        left: 20px;
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateX(18px);
        transition: opacity 0.55s ease, transform 0.55s ease,
          visibility 0s linear 0.55s;
      }
      .hero-note > div.is-active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition-delay: 0s;
      }
      .hero-note strong {
        display: block;
        font: 18px "Playfair Display";
        margin-bottom: 6px;
      }
      .hero-note small {
        color: var(--muted);
        line-height: 1.5;
      }
      .hero-carousel-controls {
        position: absolute;
        right: 8%;
        bottom: 20px;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 2;
      }
      /* Product, category, and content section layouts. */
      .hero-carousel-controls button {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: var(--paper);
        color: var(--navy);
        box-shadow: var(--shadow);
      }
      .hero-carousel-dots {
        display: flex;
        gap: 5px;
      }
      .hero-carousel-dots button {
        width: 8px;
        height: 8px;
        padding: 0;
        background: #ffffff99;
        box-shadow: none;
      }
      .hero-carousel-dots button.is-active {
        background: var(--navy);
        transform: scale(1.25);
      }
      .section {
        padding: 90px 0;
      }
      .section-head {
        display: flex;
        justify-content: space-between;
        align-items: end;
        margin-bottom: 30px;
        gap: 20px;
      }
      .section-head p {
        color: var(--muted);
        max-width: 370px;
        line-height: 1.6;
        margin: 0;
      }
      .text-link {
        border-bottom: 1px solid var(--ink);
        padding-bottom: 4px;
        font-size: 13px;
        white-space: nowrap;
      }
      .experience-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
      }
      .experience {
        min-height: 270px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        color: #fff;
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
      }
      .experience:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(transparent 25%, #141a23c7);
      }
      .experience > * {
        position: relative;
      }
      .experience h3 {
        font-size: 27px;
        margin-bottom: 5px;
      }
      .experience p {
        font-size: 13px;
        margin: 0;
        opacity: 0.9;
      }
      .feature {
        background: var(--blue);
        display: grid;
        grid-template-columns: 1.08fr 1fr;
        align-items: center;
        gap: 60px;
        padding: 55px 7%;
        margin: 20px 0;
      }
      .feature-image {
        position: relative;
      }
      .feature-carousel {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1;
        background: #eee8df;
        border-radius: 22px;
        touch-action: pan-y;
      }
      .feature-carousel > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transform: translateX(24px);
        transition: opacity 0.45s ease, transform 0.45s ease;
      }
      .feature-carousel > img.is-active {
        opacity: 1;
        transform: translateX(0);
      }
      .feature-carousel-controls {
        position: absolute;
        right: 14px;
        bottom: 14px;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .feature-carousel-controls button {
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: var(--navy);
        box-shadow: 0 4px 12px #2434482b;
      }
      .feature-carousel-dots {
        display: flex;
        gap: 5px;
      }
      .feature-carousel-dots button {
        width: 8px;
        height: 8px;
        border: 0;
        background: #ffffffb8;
        box-shadow: none;
      }
      .feature-carousel-dots button.is-active {
        background: var(--navy);
        transform: scale(1.25);
      }
      .feature-image img {
        width: 100%;
        height: 400px;
        object-fit: cover;
      }
      .feature-image .feature-carousel > img {
        width: 100%;
        height: 100%;
      }
      .feature-stamp {
        position: absolute;
        top: -18px;
        right: -18px;
        background: var(--gold);
        color: #fff;
        width: 105px;
        height: 105px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        text-align: center;
        font-size: 11px;
        line-height: 1.3;
      }
      .feature h2 {
        margin: 13px 0;
      }
      .steps {
        display: grid;
        gap: 15px;
        margin: 28px 0;
      }
      .step {
        display: flex;
        gap: 14px;
        align-items: center;
        font-size: 13px;
      }
      .step b {
        background: #fff;
        color: var(--navy);
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 50%;
      }
      .age-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }
      .age {
        padding: 30px;
        min-height: 150px;
      }
      .age:nth-child(1) {
        background: #f0d6d1;
      }
      .age:nth-child(2) {
        background: #dceaf0;
      }
      .age:nth-child(3) {
        background: #e5dbea;
      }
      .age h3 {
        font-size: 28px;
        margin-bottom: 8px;
      }
      .age p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
      }
      .product-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
      }
      .product-card {
        position: relative;
      }
      .product-image {
        background: #eee8df;
        position: relative;
        overflow: hidden;
      }
      .product-image img {
        aspect-ratio: 1;
        width: 100%;
        object-fit: cover;
        transition: 0.45s;
      }
      .product-card:hover img {
        transform: scale(1.04);
      }
      .heart {
        position: absolute;
        right: 10px;
        top: 10px;
        background: #fff;
        border: 0;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-size: 18px;
        z-index: 1;
      }
      .heart.active {
        color: #bd6d70;
      }
      .badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: var(--navy);
        color: #fff;
        padding: 5px 8px;
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .product-info {
        padding: 13px 2px;
      }
      .product-info h3 {
        font-size: 19px;
        margin: 5px 0;
      }
      .product-info p {
        color: var(--muted);
        font-size: 12px;
        margin: 0 0 9px;
      }
      .price {
        font-weight: 700;
      }
      .old {
        color: #a5a09a;
        text-decoration: line-through;
        margin-left: 7px;
        font-weight: 400;
      }
      .quick-add {
        border: 0;
        background: none;
        color: var(--navy);
        padding: 8px 0;
        font-size: 12px;
        font-weight: 700;
        border-bottom: 1px solid var(--navy);
      }
      .story-showcase {
        background: var(--paper);
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        align-items: center;
        padding: 70px 8%;
        gap: 70px;
      }
      .book-stack {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 310px;
      }
      .story-video {
        width: min(100%, 360px);
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 18px;
        background: #111;
        box-shadow: 18px 18px 0 var(--lilac);
      }
      .story-video iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }
      .book {
        width: 190px;
        height: 265px;
        padding: 25px 20px;
        background: var(--rose);
        color: #fff;
        box-shadow: 18px 18px 0 var(--lilac);
        transform: rotate(-7deg);
      }
      .book small {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 9px;
      }
      .book h3 {
        font-size: 32px;
        margin-top: 60px;
        line-height: 1;
      }
      .story-copy p {
        color: var(--muted);
        line-height: 1.75;
        max-width: 450px;
      }
      .word-row {
        display: flex;
        gap: 9px;
        flex-wrap: wrap;
        margin: 24px 0;
      }
      .word-row span {
        border: 1px solid var(--line);
        padding: 9px 13px;
        font: 15px "Playfair Display";
        background: #fff;
      }
      .reviews {
        background: var(--navy);
        color: #fff;
      }
      .reviews .section-head p {
        color: #ced6dc;
      }
      .review-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
      .review {
        border-top: 1px solid #637286;
        padding-top: 20px;
      }
      .stars {
        color: #e8b26a;
        letter-spacing: 3px;
      }
      .review p {
        line-height: 1.7;
        color: #eef0f2;
        font: 18px "Playfair Display";
      }
      .review small {
        color: #bbc5ce;
      }
      .newsletter {
        background: var(--rose);
        padding: 55px 8%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 25px;
      }
      .newsletter h2 {
        font-size: 38px;
      }
      .newsletter p {
        max-width: 420px;
        line-height: 1.6;
      }
      .email {
        display: flex;
        min-width: 380px;
      }
      .email input {
        padding: 14px;
        border: 0;
        flex: 1;
        background: #fff;
      }
      .email button {
        border: 0;
        padding: 0 18px;
        background: var(--navy);
        color: #fff;
        font-weight: 700;
      }
      footer {
        background: #1b2736;
        color: #fff;
        padding: 55px 0 25px;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.6fr repeat(3, 1fr);
        gap: 35px;
      }
      footer h3 {
        font-size: 25px;
        margin-bottom: 15px;
      }
      footer p,
      footer a {
        color: #b9c2cb;
        font-size: 13px;
        line-height: 2;
        display: block;
      }
      .copyright {
        border-top: 1px solid #3a4858;
        margin-top: 40px;
        padding-top: 20px;
        color: #8794a0;
        font-size: 12px;
      }
      .drawer,
      .overlay {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: none;
      }
      .drawer.open,
      .overlay.open {
        display: block;
      }
      .scrim {
        position: absolute;
        inset: 0;
        background: #141c266e;
      }
      .drawer-panel {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: min(410px, 92vw);
        background: var(--paper);
        padding: 28px;
        transform: translateX(100%);
        transition: 0.3s;
        overflow: auto;
      }
      .drawer.open .drawer-panel {
        transform: translateX(0);
      }
      .drawer-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--line);
        padding-bottom: 18px;
      }
      .drawer-head h2 {
        font-size: 28px;
      }
      .close {
        border: 0;
        background: none;
        font-size: 25px;
      }
      .cart-row {
        display: flex;
        gap: 12px;
        padding: 17px 0;
        border-bottom: 1px solid var(--line);
      }
      .cart-row img {
        width: 62px;
        height: 75px;
        object-fit: cover;
      }
      .cart-row h3 {
        font: 16px "Playfair Display";
      }
      .cart-row p {
        font-size: 12px;
        color: var(--muted);
      }
      .cart-total {
        display: flex;
        justify-content: space-between;
        font-weight: 700;
        padding: 22px 0;
      }
      .empty {
        color: var(--muted);
        text-align: center;
        padding: 50px 0;
      }
      .search-panel {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: var(--paper);
        padding: 25px max(28px, calc((100vw - 1224px) / 2));
        min-height: 270px;
      }
      .search-bar {
        display: flex;
        border-bottom: 2px solid var(--navy);
        align-items: center;
      }
      .search-bar input {
        border: 0;
        background: none;
        outline: 0;
        font-size: 24px;
        padding: 12px 0;
        flex: 1;
      }
      .search-results {
        display: flex;
        gap: 18px;
        padding-top: 20px;
        color: var(--muted);
        font-size: 13px;
      }
      .modal {
        position: fixed;
        inset: 0;
        z-index: 40;
        display: none;
        place-items: center;
        background: #141c268c;
        padding: 20px;
      }
      .modal.open {
        display: grid;
      }
      .modal-box {
        max-width: 640px;
        width: 100%;
        background: var(--paper);
        padding: 35px;
        max-height: 90vh;
        overflow: auto;
      }
      .modal-box h2 {
        margin-bottom: 15px;
      }
      .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .form-grid label {
        font-size: 12px;
        color: var(--muted);
      }
      .form-grid input,
      .form-grid select,
      .form-grid textarea {
        width: 100%;
        margin-top: 6px;
        padding: 12px;
        border: 1px solid var(--line);
        background: #fff;
      }
      .form-grid textarea {
        min-height: 85px;
        grid-column: 1/-1;
      }
      .catalog-view {
        display: none;
      }
      .catalog-view.active {
        display: block;
      }
      .catalog-toolbar {
        display: flex;
        gap: 10px;
        margin: 28px 0;
        flex-wrap: wrap;
      }
      .catalog-toolbar select,
      .catalog-toolbar input {
        border: 1px solid var(--line);
        background: #fff;
        padding: 12px;
      }
      .chat {
        position: fixed;
        right: 22px;
        bottom: 22px;
        z-index: 12;
        border: 0;
        background: #25d366;
        color: #fff;
        padding: 14px 18px;
        border-radius: 30px;
        font-weight: 700;
        box-shadow: var(--shadow);
        text-decoration: none;
        transition: background 160ms ease, transform 160ms ease,
          box-shadow 160ms ease;
      }
      .chat::before {
        content: "✆";
        display: inline-block;
        margin-right: 8px;
        font-size: 18px;
        line-height: 0;
        vertical-align: -1px;
      }
      .chat:hover,
      .chat:focus-visible {
        background: #128c7e;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(18, 140, 126, 0.28);
      }
      .detail-view {
        display: none;
        padding: 70px 0;
      }
      .detail-view.active {
        display: block;
      }
      .detail-back {
        border: 0;
        background: none;
        color: var(--muted);
        padding: 0;
        margin-bottom: 28px;
        font-size: 13px;
      }
      .detail-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 70px;
        align-items: start;
      }
      .detail-gallery {
        background: #eee8df;
        padding: 28px;
        touch-action: pan-y;
      }
      .detail-gallery img {
        width: 100%;
        aspect-ratio: 0.9;
        object-fit: cover;
      }
      .detail-thumbs {
        display: flex;
        gap: 10px;
        margin-top: 12px;
        overflow-x: auto;
      }
      .detail-thumbs button {
        border: 1px solid var(--line);
        padding: 0;
        background: #fff;
        width: 66px;
      }
      .detail-thumbs img {
        aspect-ratio: 1;
        object-fit: cover;
      }
      .detail-copy h1 {
        font-size: clamp(42px, 5vw, 68px);
        margin: 14px 0;
      }
      .detail-copy .stars {
        margin: 18px 0;
      }
      .detail-meta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 22px 0;
      }
      .detail-meta span {
        background: #fff;
        border: 1px solid var(--line);
        padding: 9px 12px;
        font-size: 12px;
      }
      .detail-price {
        font-size: 25px;
        font-weight: 700;
        margin: 22px 0;
      }
      .detail-description {
        color: var(--muted);
        line-height: 1.8;
        max-width: 490px;
      }
      .detail-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 28px;
        flex-wrap: wrap;
      }
      .quantity {
        display: flex;
        border: 1px solid var(--line);
        height: 47px;
      }
      .quantity button {
        border: 0;
        background: #fff;
        width: 38px;
      }
      .quantity output {
        width: 38px;
        display: grid;
        place-items: center;
        font-size: 14px;
      }
      .detail-note {
        background: var(--blue);
        padding: 18px;
        margin-top: 28px;
        font-size: 13px;
        line-height: 1.6;
      }
      .detail-tabs {
        border-top: 1px solid var(--line);
        margin-top: 60px;
        padding-top: 35px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }
      .detail-tabs h3 {
        font-size: 22px;
        margin-bottom: 8px;
      }
      .detail-tabs p {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.7;
        margin: 0;
      }
      .reader {
        position: fixed;
        inset: 0;
        z-index: 50;
        display: none;
        place-items: center;
        background: #141c26e8;
        padding: 20px;
      }
      .reader.open {
        display: grid;
      }
      .reader-box {
        width: min(920px, 100%);
        max-height: 94vh;
        overflow: auto;
        background: var(--paper);
        padding: 22px;
        box-shadow: var(--shadow);
      }
      .reader-head,
      .reader-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }
      .reader-head {
        border-bottom: 1px solid var(--line);
        padding-bottom: 14px;
      }
      .reader-head h2 {
        font-size: 28px;
      }
      .reader-page {
        display: grid;
        place-items: center;
        min-height: 55vh;
        padding: 18px 0;
        background: #eee8df;
        touch-action: pan-y;
      }
      .reader-page img {
        max-height: 62vh;
        width: auto;
        object-fit: contain;
      }
      .reader-page-stage {
        position: relative;
        display: grid;
        place-items: center;
        width: min(100%, 760px);
        height: min(62vh, 760px);
        max-width: 100%;
        max-height: 62vh;
        isolation: isolate;
      }
      .reader-page-stage > img {
        position: relative;
        z-index: 1;
        display: block;
        backface-visibility: hidden;
      }
      .reader-page-stage > img.page-incoming {
        animation: page-fade-in 900ms ease both;
      }
      .reader-turn-sheet {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: var(--turn-image) center / contain no-repeat;
        background-color: #eee8df;
        box-shadow: 0 8px 18px #24344822;
        opacity: 0;
        pointer-events: none;
        backface-visibility: hidden;
        will-change: transform, opacity;
      }
      .reader-turn-sheet.turn-next {
        animation: page-fold-next 900ms cubic-bezier(.22,.61,.36,1) both;
        transform-origin: left center;
      }
      .reader-turn-sheet.turn-previous {
        animation: page-fold-previous 900ms cubic-bezier(.22,.61,.36,1) both;
        transform-origin: right center;
      }
      @keyframes page-fade-in {
        0% { opacity: 0; }
        35% { opacity: 0.55; }
        100% { opacity: 1; }
      }
      @keyframes page-fold-next {
        0% { opacity: 1; transform: perspective(1100px) rotateY(0); }
        38% { opacity: 0.78; box-shadow: 18px 8px 28px #24344844; }
        100% { opacity: 0; transform: perspective(1100px) rotateY(-180deg); }
      }
      @keyframes page-fold-previous {
        0% { opacity: 1; transform: perspective(1100px) rotateY(0); }
        38% { opacity: 0.78; box-shadow: -18px 8px 28px #24344844; }
        100% { opacity: 0; transform: perspective(1100px) rotateY(180deg); }
      }
      @media (prefers-reduced-motion: reduce) {
        .reader-turn-sheet.turn-next,
        .reader-turn-sheet.turn-previous {
          animation: none;
          opacity: 0;
        }
        .reader-page-stage > img.page-incoming {
          animation: none;
          opacity: 1;
        }
      }
      .reader-controls {
        padding-top: 14px;
      }
      .reader-controls button {
        border: 1px solid var(--navy);
        background: #fff;
        padding: 10px 16px;
      }
      .reader-controls button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      .reviews,
      #journal,
      .newsletter,
      .age-grid,
      .age-section {
        display: none;
      }
      @media (max-width: 850px) {
        .nav {
          gap: 12px;
        }
        .nav-actions {
          margin-left: auto;
        }
        .navlinks {
          display: none;
        }
        .hero,
        .feature,
        .story-showcase,
        .detail-layout {
          grid-template-columns: 1fr;
        }
        .hero {
          padding-top: 60px;
        }
        .hero-art {
          min-height: 390px;
        }
        .hero-art img {
          height: 380px;
          width: 90%;
        }
        .hero-carousel-controls {
          right: 5%;
        }
        .experience-grid,
        .product-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .newsletter {
          display: block;
        }
        .email {
          display: flex;
          width: 100%;
        }
        .email input {
          min-width: 0;
        }
        .reader {
          padding: 8px;
        }
        .reader-box {
          padding: 14px;
        }
        .reader-page {
          min-height: 52vh;
        }
        .reader-page img {
          max-width: 100%;
        }
        .reader-controls button {
          padding: 12px 10px;
        }
        .reader-controls span {
          font-size: 12px;
          white-space: nowrap;
        }
        .email {
          min-width: 0;
          margin-top: 20px;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 520px) {
        html,
        body {
          width: 100%;
          max-width: 100%;
          overflow-x: hidden;
        }
        .wrap,
        .nav,
        main,
        footer {
          max-width: 100%;
        }
        .nav {
          min-width: 0;
        }
        .logo {
          min-width: 0;
          white-space: nowrap;
        }
        .logo img {
          width: 96px;
          height: 48px;
        }
        .nav-actions {
          min-width: 0;
          flex-shrink: 0;
        }
        .hero,
        .feature,
        .story-showcase,
        .detail-layout,
        .modal-box {
          min-width: 0;
          max-width: 100%;
        }
        .hero {
          min-height: 0;
          padding-top: 32px;
          gap: 18px;
        }
        .hero > :first-child .lead,
        .hero > :first-child .hero-actions {
          display: none;
        }
        .hero > :first-child h1 {
          margin: 12px 0 0;
          font-size: clamp(36px, 12vw, 48px);
        }
        .hero-note small {
          display: none;
        }
        .hero-note {
          height: auto;
          top: auto;
          min-height: 0;
          padding: 12px 16px;
          bottom: 56px;
        }
        .hero-note > div {
          position: static;
        }
        .hero-note > div:not(.is-active) {
          display: none;
        }
        .hero-note > div.is-active {
          display: block;
        }
        .hero-note strong {
          margin: 0;
          font-size: 16px;
          line-height: 1.25;
        }
        .hero-art,
        .feature-art,
        .story-art,
        .detail-gallery {
          max-width: 100%;
          overflow: hidden;
        }
        .modal {
          padding: 10px;
        }
        .modal-box {
          padding: 22px 16px;
        }
        .announcement {
          padding-right: 45px;
          text-align: center;
        }
        .nav {
          padding: 15px 18px;
        }
        .logo {
          font-size: 22px;
        }
        .product-video {
          margin-top: 32px;
        }
        .product-video h3 {
          margin: 0 0 12px;
        }
        .product-video iframe {
          width: min(100%, 720px);
          aspect-ratio: 16 / 9;
          border: 0;
          border-radius: 18px;
          box-shadow: var(--shadow);
        }
        .icon-btn {
          font-size: 16px;
          padding: 8px 4px;
        }
        .wrap {
          padding: 0 18px;
        }
        h1 {
          font-size: clamp(42px, 14vw, 53px);
        }
        .section {
          padding: 65px 0;
        }
        .section-head {
          display: block;
        }
        .section-head p {
          margin-top: 12px;
        }
        .padded-section-head > div:first-child {
          padding-left: 10px;
        }
        .padded-section-head > .text-link {
          margin-left: 10px;
        }
        .experience-grid {
          grid-template-columns: 1fr 1fr;
        }
        .product-grid,
        .age-grid,
        .review-grid {
          grid-template-columns: 1fr;
        }
        .experience {
          min-height: 220px;
          padding: 15px;
        }
        .experience h3 {
          font-size: 22px;
        }
        .feature {
          padding: 35px 20px;
        }
        .story-showcase {
          padding: 45px 20px;
        }
        .form-grid {
          grid-template-columns: 1fr;
        }
        .form-grid textarea {
          grid-column: auto;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 18px;
        }
        .footer-grid > :first-child {
          grid-column: 1/-1;
        }
        .hero-actions .btn {
          width: 100%;
          text-align: center;
        }
        .detail-layout {
          gap: 30px;
        }
        .detail-gallery {
          padding: 14px;
        }
        .detail-tabs {
          grid-template-columns: 1fr;
          gap: 25px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          scroll-behavior: auto !important;
          transition: none !important;
          animation: none !important;
        }
      }
      /* Playful visual language for children and parents browsing together. */
      :root {
        --cream: #fff8e9;
        --paper: #ffffff;
        --ink: #24324a;
        --muted: #667085;
        --navy: #3857a6;
        --rose: #ff7e8a;
        --blue: #b9ecf1;
        --lilac: #ded2ff;
        --gold: #ffb52e;
        --line: #e9e4f5;
        --shadow: 0 16px 35px #3857a626;
      }
      body {
        background:
          radial-gradient(circle at 8% 20%, #ffe0e8 0 40px, transparent 41px),
          radial-gradient(circle at 92% 44%, #d8f7e5 0 55px, transparent 56px),
          var(--cream);
      }
      h1,
      h2,
      h3,
      .logo {
        font-family: "Fredoka", sans-serif;
        letter-spacing: -0.02em;
      }
      h1 {
        color: var(--navy);
      }
      .eyebrow {
        color: #e88900;
        letter-spacing: 0.12em;
      }
      header {
        background: #ffffffeb;
        border-bottom: 2px solid #f1dff0;
      }
      .logo {
        color: var(--navy);
        font-size: 28px;
      }
      .logo span {
        color: var(--rose);
      }
      .navlinks a {
        padding: 9px 13px;
        border-radius: 999px;
        font-weight: 700;
      }
      .navlinks a:hover {
        background: #fff0b8;
        color: var(--navy);
      }
      .icon-btn {
        background: #eef0ff;
        border-radius: 50%;
        width: 38px;
        height: 38px;
      }
      .icon-btn.cart-btn {
        width: auto;
        height: auto;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 999px;
      }
      .count {
        background: var(--rose);
      }
      .hero {
        position: relative;
      }
      .hero:before {
        content: "✦";
        position: absolute;
        top: 70px;
        left: 2%;
        color: var(--gold);
        font-size: 34px;
        transform: rotate(-15deg);
      }
      .hero-art img {
        border: 10px solid #fff;
        box-shadow: 12px 15px 0 #ffd5df;
      }
      .hero-note {
        border: 0;
        border-radius: 20px;
        box-shadow: var(--shadow);
      }
      .hero-note strong {
        font-family: "Fredoka", sans-serif;
        color: var(--navy);
      }
      .btn {
        border: 0;
        border-radius: 999px;
        padding: 15px 23px;
      }
      .btn-primary {
        background: var(--navy);
        box-shadow: 0 5px 0 #263b78;
      }
      .btn-primary:hover {
        background: #4b6ec7;
        transform: translateY(-2px);
      }
      .btn-light {
        background: #fff;
        border: 2px solid #ffc9d5;
        color: var(--navy);
      }
      .experience {
        border-radius: 24px;
        border: 5px solid #fff;
        box-shadow: var(--shadow);
      }
      .experience:nth-child(1) {
        border-color: #ffd4df;
      }
      .experience:nth-child(2) {
        border-color: #b9ecf1;
      }
      .feature {
        border-radius: 32px;
        overflow: hidden;
        background: #c8f2f2;
        box-shadow: var(--shadow);
      }
      .feature-image img {
        border-radius: 24px;
      }
      .feature-stamp {
        background: var(--rose);
        border: 5px solid #fff;
        font-weight: 700;
      }
      .step b {
        background: #fff4bc;
        color: var(--navy);
      }
      .product-grid {
        gap: 24px;
      }
      .product-card {
        background: #fff;
        border-radius: 22px;
        padding: 9px;
        box-shadow: var(--shadow);
        transition: transform 0.2s;
      }
      .product-card:hover {
        transform: translateY(-5px);
      }

      /* The catalog gallery is intentionally visual-only; details open on click. */
      #catalog-grid .product-card {
        padding: 0;
        cursor: pointer;
      }

      #catalog-grid .product-image {
        border-radius: 22px;
        border: 4px solid #ffb7c5;
        box-shadow:
          inset 0 0 0 2px #ffffffb8,
          0 10px 24px #ff9eaf45;
      }

      #catalog-grid .product-image img {
        aspect-ratio: 1 / 1;
      }

      #catalog-grid .product-info {
        display: none;
      }

      #catalog-grid .badge {
        display: block;
        z-index: 2;
      }

      #catalog-grid .view-product {
        position: absolute;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        border: 0;
        border-radius: 999px;
        background: var(--paper);
        color: var(--navy);
        padding: 11px 24px;
        font-weight: 700;
        box-shadow: var(--shadow);
        opacity: 1;
        transition: opacity 0.2s, transform 0.2s;
        z-index: 2;
      }

      #catalog-grid .view-product:hover {
        transform: translateX(-50%) translateY(-2px);
      }

      /* Featured cards keep the cover and story-reading action uncluttered. */
      #featured-grid .view-product,
      #featured-grid .product-info > p:nth-of-type(2),
      #featured-grid .product-info .quick-add:not(.reader-button) {
        display: none;
      }

      #featured-grid .reader-button {
        display: inline-block;
      }
      .product-image {
        border-radius: 17px;
      }
      .badge {
        background: var(--rose);
        border-radius: 999px;
        font-weight: 700;
      }
      .product-info {
        padding: 13px 7px 8px;
      }
      .product-info h3 {
        color: var(--navy);
      }
      .quick-add {
        border-bottom: 2px solid var(--rose);
        color: var(--navy);
      }
      .story-showcase {
        border-radius: 32px;
        overflow: hidden;
        box-shadow: var(--shadow);
      }
      .book {
        border-radius: 14px;
        background: var(--rose);
        box-shadow: 18px 18px 0 var(--lilac);
      }
      .chat {
        background: #25d366;
        border: 4px solid #fff;
      }
      .custom-form-modal .modal-box {
        max-width: 760px;
        border-radius: 28px;
        border: 5px solid #ffd4df;
      }
      .custom-form-modal .form-grid {
        gap: 16px;
      }
      .custom-form-modal .form-grid label {
        color: var(--ink);
        font-weight: 700;
      }
      .custom-form-modal .form-grid input,
      .custom-form-modal .form-grid select,
      .custom-form-modal .form-grid textarea {
        border: 2px solid #e9e4f5;
        border-radius: 14px;
        background: #fffafc;
      }
      .custom-form-modal .form-grid input:focus,
      .custom-form-modal .form-grid select:focus,
      .custom-form-modal .form-grid textarea:focus {
        border-color: var(--rose);
        box-shadow: 0 0 0 4px #ff7e8a26;
      }
      .custom-form-section {
        grid-column: 1 / -1;
        color: var(--navy);
        border-bottom: 2px dashed #ffc9d5;
        padding-bottom: 7px;
        margin-top: 8px;
      }
      .custom-form-hint {
        grid-column: 1 / -1;
        color: var(--muted);
        font-size: 12px;
        margin: -7px 0 0;
      }
      .custom-photo-tips {
        grid-column: 1 / -1;
        margin: 0;
        border: 2px solid #ffd4df;
        border-radius: 16px;
        overflow: hidden;
        background: #fffafc;
      }
      .custom-photo-tips img {
        display: block;
        width: 100%;
        max-height: 260px;
        object-fit: contain;
        background: #fff;
      }
      .custom-photo-tips figcaption {
        padding: 9px 12px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.4;
      }
      .custom-choice {
        display: flex !important;
        gap: 10px;
        align-items: center;
        color: var(--ink) !important;
      }
      .custom-choice input {
        width: auto !important;
        accent-color: var(--rose);
      }
      .custom-consent {
        grid-column: 1 / -1;
        display: flex !important;
        gap: 10px;
        align-items: flex-start;
        font-size: 12px;
        line-height: 1.5;
      }
      .custom-consent input {
        width: auto !important;
        margin-top: 3px;
        accent-color: var(--rose);
      }
      .custom-error {
        grid-column: 1 / -1;
        color: #c2415a;
        font-size: 12px;
        display: none;
      }
      .personalized-examples {
        background: #fff0f5;
        border-radius: 28px;
        padding: 30px;
        margin-bottom: 28px;
        border: 3px dashed #ffc2d2;
      }
      .story-filter {
        border: 2px solid #e9e4f5;
        border-radius: 14px;
        background: #fff;
        padding: 12px 14px;
      }
      .story-tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin: 8px 0;
      }
      .story-tag {
        display: inline-block;
        background: #fff0b8;
        color: var(--navy);
        border-radius: 999px;
        padding: 5px 9px;
        font-size: 11px;
        font-weight: 700;
      }

      /* Shared readability scale for every homepage section. */
      body {
        font-size: 16px;
      }

      .section {
        padding: clamp(72px, 8vw, 112px) 0;
      }

      .section-head {
        margin-bottom: clamp(32px, 4vw, 48px);
      }

      .section-head h2,
      .feature h2,
      .story-copy h2,
      .newsletter h2 {
        font-size: clamp(36px, 4.5vw, 58px);
        line-height: 1.08;
      }

      .section-head p,
      .feature .lead,
      .story-copy p,
      .newsletter p,
      .review p {
        font-size: clamp(17px, 1.35vw, 20px);
        line-height: 1.65;
      }

      .experience h3,
      .age h3 {
        font-size: clamp(25px, 2.4vw, 34px);
        line-height: 1.12;
      }

      .experience p,
      .age p,
      .product-info p,
      .step,
      .text-link {
        font-size: 16px;
        line-height: 1.55;
      }

      .product-info h3 {
        font-size: clamp(20px, 1.8vw, 25px);
        line-height: 1.2;
      }

      .story-showcase {
        padding: clamp(56px, 7vw, 90px) 8%;
      }

      .word-row span {
        font-size: 17px;
        padding: 11px 15px;
      }

      footer p,
      footer a {
        font-size: 15px;
        line-height: 1.75;
      }

      @media (max-width: 520px) {
        .section-head h2,
        .feature h2,
        .story-copy h2,
        .newsletter h2 {
          font-size: clamp(32px, 10vw, 44px);
        }

        .section-head p,
        .feature .lead,
        .story-copy p,
        .newsletter p,
        .review p {
          font-size: 17px;
        }

        .experience p,
        .age p,
        .product-info p,
        .step,
        .text-link {
          font-size: 15px;
        }
      }