/* ================================================================
   Greek Library of London: Children's department
   public/css/children.css

   Loaded only on pages whose activePage is 'children' (the
   department's catalogue and welcome page, and a children's book
   page), see layouts/public.php. Every selector is `kd-` prefixed or
   scoped under .opac-body--kids, so nothing here can reach the rest
   of the public site.

   Look: "Explorers, toned down" (mockups/children-catalogue-options.html,
   option D). The main OPAC's building blocks (#f7f8fb page, white
   cards, #e6e8ef borders, soft shadows, Poppins + Commissioner, red
   and black pill buttons) with the children's events typeface, Bang
   Whack Pow, on headlines only, and the system's soft tints for the
   colourful tiles. Body text never uses the display face: comic
   lettering stops being easy to read at small sizes.

   Colour: tints are backgrounds only. Text sits on white or a tint
   in --kd-ink, or uses a "deep" shade that clears 4.5:1 on both.
   ================================================================ */

/* The children's events face (Brittney Murphy, 2013). Full Greek,
   accents and final sigma included. Self-hosted locally only: check
   the font's web licence before this file is deployed. */
@font-face {
    font-family: 'Bang Whack Pow';
    src: url('../fonts/bang-whack-pow.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.opac-body--kids {
    --kd-display:    'Bang Whack Pow', var(--font-display, 'Poppins', 'Commissioner', sans-serif);

    --kd-bg:         #f7f8fb;
    --kd-line:       #e6e8ef;
    --kd-ink:        #0b1023;
    --kd-ink-soft:   #4b5263;
    --kd-red:        #d90a2c;
    --kd-red-deep:   #a8071f;

    --kd-sun:        #ffe58a;
    --kd-sky:        #c9d6f5;
    --kd-grass:      #bfeee8;
    --kd-coral:      #ffd3de;
    --kd-grape:      #ddd3fb;
    --kd-peach:      #ffd9c2;

    --kd-sun-tint:   #fff6d6;
    --kd-sky-tint:   #e8eefb;
    --kd-grass-tint: #e3f6f3;
    --kd-coral-tint: #fdeaef;
    --kd-grape-tint: #efeafd;
    --kd-peach-tint: #fdebdf;

    /* Text-safe shades (≥ 4.5:1 on white and on every tint above). */
    --kd-sun-deep:   #7a5300;
    --kd-sky-deep:   #00378f;
    --kd-grass-deep: #0f6e4c;
    --kd-coral-deep: #b3262f;
    --kd-grape-deep: #5b3cc4;
    --kd-peach-deep: #9a3d0c;
    --kd-green:      #16a34a;

    --kd-radius:     22px;
    --kd-radius-sm:  14px;
    --kd-lift:       0 3px 0 var(--kd-line), 0 8px 22px rgba(11, 16, 35, 0.05);
    --kd-lift-hover: 0 5px 0 var(--kd-line), 0 14px 28px rgba(11, 16, 35, 0.08);
    --kd-ease:       150ms ease;

    background:
        radial-gradient(circle at 0 0, var(--kd-sun-tint) 0, transparent 26rem),
        radial-gradient(circle at 100% 18%, var(--kd-sky-tint) 0, transparent 28rem),
        var(--kd-bg);
}

/* The active nav pill takes the department's yellow instead of black. */
.opac-body--kids .opac-nav__item--active,
.opac-body--kids .opac-nav__item--active:hover {
    background: var(--kd-sun);
    color: var(--kd-ink);
}

/* Six tones, cycled across tiles and stats. */
/* The department runs narrower than the OPAC's 1440px, so the
   five-column book grid keeps covers at a picture-book size. */
.opac-body--kids .opac-main { max-width: 1250px; }

.kd-tone-0 { --tone-tint: var(--kd-sun-tint);   --tone-deep: var(--kd-sun-deep); --tone-mid: var(--kd-sun); }
.kd-tone-1 { --tone-tint: var(--kd-sky-tint);   --tone-deep: var(--kd-sky-deep); --tone-mid: var(--kd-sky); }
.kd-tone-2 { --tone-tint: var(--kd-grass-tint); --tone-deep: var(--kd-grass-deep); --tone-mid: var(--kd-grass); }
.kd-tone-3 { --tone-tint: var(--kd-coral-tint); --tone-deep: var(--kd-coral-deep); --tone-mid: var(--kd-coral); }
.kd-tone-4 { --tone-tint: var(--kd-grape-tint); --tone-deep: var(--kd-grape-deep); --tone-mid: var(--kd-grape); }
.kd-tone-5 { --tone-tint: var(--kd-peach-tint); --tone-deep: var(--kd-peach-deep); --tone-mid: var(--kd-peach); }

.kd-link {
    color: var(--kd-ink);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--kd-red);
    padding-bottom: 1px;
    white-space: nowrap;
}
.kd-link:hover { color: var(--kd-red-deep); }

.opac-body--kids a:focus-visible,
.opac-body--kids button:focus-visible,
.opac-body--kids select:focus-visible {
    outline: 3px solid var(--kd-grape-deep);
    outline-offset: 3px;
}


/* ================================================================
   Staff preview strip
   ================================================================ */
.kd-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding: 0.7rem 1rem;
    border-radius: var(--kd-radius-sm);
    background: var(--kd-grape-tint);
    color: var(--kd-grape-deep);
    font-size: 0.88rem;
    font-weight: 500;
}


/* ================================================================
   Catalogue: hello card + just arrived
   ================================================================ */
.kd-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.4rem;
    margin-top: 1.5rem;
}
.kd-top > * { min-width: 0; }

.kd-hello {
    position: relative;
    overflow: hidden;
    padding: clamp(1.6rem, 4vw, 2.2rem) clamp(1.4rem, 4vw, 2.3rem);
    border: 1px solid var(--kd-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--kd-lift);
}
.kd-hello > :not(.kd-hello__shape) { position: relative; z-index: 1; }
.kd-hello__shape { position: absolute; z-index: 0; pointer-events: none; }
.kd-hello__shape--1 {
    right: -50px; top: -60px;
    width: 190px; height: 190px;
    border-radius: 50%;
    background: var(--kd-coral-tint);
}
.kd-hello__shape--2 {
    right: 46px; bottom: -30px;
    width: 80px; height: 80px;
    border-radius: 20px;
    background: var(--kd-sky-tint);
    transform: rotate(18deg);
}
.kd-hello__title {
    margin: 0 0 0.6rem;
    max-width: 15ch;
    font-family: var(--kd-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 5.2vw, 3.9rem);
    line-height: 1.04;
    letter-spacing: 0.01em;
    color: var(--kd-ink);
}
.kd-hello__title mark {
    padding: 0 0.15em;
    border-radius: 10px;
    background: var(--kd-sun);
    color: var(--kd-ink);
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
.kd-hello__sub {
    margin: 0 0 1.4rem;
    max-width: 46ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--kd-ink-soft);
}

/* -- Search: the OPAC's pill, with the red button -- */
.kd-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 620px;
    padding: 0.3rem 0.3rem 0.3rem 1.1rem;
    border: 1.5px solid var(--kd-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: border-color var(--kd-ease);
}
.kd-search:focus-within { border-color: var(--kd-ink); }
.kd-search__icon { display: flex; flex-shrink: 0; color: var(--kd-ink-soft); }
.kd-search__input {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--kd-ink);
}
.kd-search__input::placeholder { color: #6b7280; opacity: 1; }
.kd-search__btn {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 1.4rem;
    border: none;
    border-radius: 999px;
    background: var(--kd-red);
    box-shadow: 0 3px 0 var(--kd-red-deep);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--kd-ease), transform var(--kd-ease);
}
.kd-search__btn:hover  { background: #c00927; }
.kd-search__btn:active { transform: translateY(1px); }

.kd-new {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem;
    border: 1px solid var(--kd-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--kd-lift);
}
.kd-new__join { margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--kd-line); }
.kd-new__join p { margin: 0 0 0.75rem; font-size: 0.92rem; color: var(--kd-ink-soft); }
.kd-new__join-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.kd-new__title {
    margin: 0;
    font-family: var(--kd-display);
    font-weight: 400;
    font-size: 1.65rem;
    color: var(--kd-ink);
}
.kd-new__covers {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kd-new__book { display: block; }
.kd-new__book img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 18px -8px rgba(11, 16, 35, 0.4);
    transition: transform var(--kd-ease);
}
.kd-new__covers li:nth-child(1) img { transform: rotate(-3deg); }
.kd-new__covers li:nth-child(3) img { transform: rotate(3deg); }
.kd-new__book:hover img { transform: translateY(-4px) rotate(0); }
.kd-new .kd-link { align-self: flex-start; margin-top: auto; }


/* ================================================================
   Section heads + worlds (shelf tiles)
   ================================================================ */
.kd-section { margin-top: 2.4rem; }
.kd-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0 0 0.9rem;
}
.kd-section__head--results { margin-top: 2.4rem; }
.kd-section__title {
    margin: 0;
    font-family: var(--kd-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.15rem);
    letter-spacing: 0.01em;
    color: var(--kd-ink);
}
.kd-section__title em {
    font-style: normal;
    color: var(--kd-grape-deep);
}

.kd-worlds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.9rem;
}
.kd-world {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 140px;
    padding: 1rem;
    border: 1px solid rgba(11, 16, 35, 0.06);
    border-radius: 20px;
    background: var(--tone-tint);
    color: var(--kd-ink);
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(11, 16, 35, 0.06);
    cursor: pointer;
    transition: transform var(--kd-ease), box-shadow var(--kd-ease), border-color var(--kd-ease);
}
.kd-world:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 0 rgba(11, 16, 35, 0.08), 0 12px 22px rgba(11, 16, 35, 0.06);
}
.kd-world--active {
    border: 2px solid var(--kd-ink);
    box-shadow: 0 3px 0 var(--kd-ink);
}
.kd-world__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #fff;
    color: var(--kd-ink);
    box-shadow: 0 2px 6px rgba(11, 16, 35, 0.08);
}
.kd-world__name {
    margin-top: auto;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
}
.kd-world--format { background: #fff; }
.kd-theme-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0 0.85rem;
    border: 1px solid var(--kd-line);
    border-radius: 999px;
    background: #fff;
    color: var(--kd-ink);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--kd-ease), border-color var(--kd-ease);
}
.kd-theme-chip:hover { background: var(--kd-sun-tint); border-color: var(--kd-ink); }
.kd-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -0.4rem 0 1.1rem;
    padding: 0;
    list-style: none;
}
.kd-world__count {
    font-size: 0.8rem;
    color: var(--kd-ink-soft);
}


/* ================================================================
   Toolbar
   ================================================================ */
.kd-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0 0 1.4rem;
    padding: 0.55rem 0.7rem 0.55rem 1rem;
    border: 1px solid var(--kd-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.kd-toolbar__count {
    margin-right: auto;
    font-size: 0.88rem;
    color: var(--kd-ink-soft);
}

.kd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    color: var(--kd-ink);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.kd-toggle__track {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #d4d7e0;
    transition: background var(--kd-ease);
}
.kd-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform var(--kd-ease);
}
.kd-toggle--on .kd-toggle__track { background: var(--kd-green); }
.kd-toggle--on .kd-toggle__thumb { transform: translateX(18px); }

/* Age groups: a segmented control (shelves A 0-5, B 6-9, C 10+). */
.kd-seg {
    display: inline-flex;
    padding: 4px;
    gap: 2px;
    border-radius: 999px;
    background: #eceef3;
}
.kd-seg__item {
    min-height: 36px;
    min-width: 44px;
    padding: 0 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--kd-ink);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--kd-ease), box-shadow var(--kd-ease);
}
.kd-seg__item:hover { background: rgba(255, 255, 255, 0.6); }
.kd-seg__item:focus-visible { outline: 2px solid var(--kd-ink); outline-offset: 2px; }
.kd-seg__item--on {
    background: #fff;
    box-shadow: 0 1px 3px rgba(20, 24, 40, 0.14);
}

/* Single starting ages inside the picked group, on their own row. */
.kd-ages {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--kd-line);
}
.kd-ages__item {
    min-height: 34px;
    padding: 0 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--kd-line);
    border-radius: 999px;
    color: var(--kd-ink);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--kd-ease), border-color var(--kd-ease);
}
.kd-ages__item span { font-weight: 500; color: var(--kd-ink-soft); }
.kd-ages__item:hover { background: #eceef3; }
.kd-ages__item:focus-visible { outline: 2px solid var(--kd-ink); outline-offset: 2px; }
.kd-ages__item--on { background: var(--kd-ink); border-color: var(--kd-ink); color: #fff; }
.kd-ages__item--on span { color: rgba(255, 255, 255, 0.75); }
.kd-ages__item--on:hover { background: var(--kd-ink); }

.kd-sort { display: flex; align-items: center; gap: 0.5rem; }
.kd-sort__label { font-size: 0.85rem; color: var(--kd-ink-soft); }
.kd-sort__select {
    min-height: 40px;
    padding: 0 2.2rem 0 0.95rem;
    border: 1px solid var(--kd-line);
    border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230b1023' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
    -webkit-appearance: none;
            appearance: none;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--kd-ink);
    cursor: pointer;
}


/* ================================================================
   Book grid
   ================================================================ */
/* «Όλα τα θέματα»: every heading with 3+ books in a pop-up window,
   A to Ω, with a find box. The head stays put; the list scrolls. */
.kd-alltopics__open { display: flex; justify-content: center; margin-top: 1.1rem; }
.kd-alltopics__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.3rem;
    border: 1.5px solid var(--kd-ink);
    border-radius: 999px;
    background: #fff;
    color: var(--kd-ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--kd-ease);
}
.kd-alltopics__toggle:hover { background: var(--kd-sun-tint); }
.kd-alltopics {
    /* main.css zeroes every margin; a modal dialog centres on auto. */
    margin: auto;
    width: min(960px, calc(100vw - 32px));
    max-height: min(82vh, 820px);
    padding: 0;
    border: 0;
    border-radius: var(--kd-radius);
    background: #fff;
    color: var(--kd-ink);
    box-shadow: 0 24px 60px rgba(11, 16, 35, 0.25);
    overflow: hidden;
}
.kd-alltopics[open] { display: flex; flex-direction: column; }
.kd-alltopics::backdrop { background: rgba(11, 16, 35, 0.45); }
.kd-alltopics__head { flex: 0 0 auto; padding: 1.4rem 1.6rem 0; border-bottom: 1px solid var(--kd-line); }
.kd-alltopics__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.9rem; }
.kd-alltopics__title { margin: 0; font-family: var(--kd-display); font-size: 1.7rem; font-weight: 400; }
.kd-alltopics__sub { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--kd-ink-soft); }
.kd-alltopics__close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #f0f1f5;
    color: var(--kd-ink);
    cursor: pointer;
}
.kd-alltopics__close:hover { background: var(--kd-coral-tint); }
.kd-alltopics__find {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-bottom: 0.8rem;
    padding: 0 0.9rem;
    border: 1.5px solid var(--kd-line);
    border-radius: 999px;
    color: var(--kd-ink-soft);
}
.kd-alltopics__find:focus-within { border-color: var(--kd-ink); }
.kd-alltopics__find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--kd-ink); }
/* The pill around it shows focus; the site-wide input focus ring would double it. */
.kd-alltopics__find input:focus,
.kd-alltopics__find input:focus-visible { border: 0; outline: 0; box-shadow: none; }
.kd-alltopics__letters { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 0.9rem; }
.kd-alltopics__letters[hidden] { display: none; }
.kd-alltopics__letters a {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f0f1f5;
    color: var(--kd-ink);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.kd-alltopics__letters a:hover { background: var(--kd-sun); }
.kd-alltopics__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.2rem 1.6rem 1.6rem; position: relative; }
.kd-alltopics__groups { columns: 3 240px; column-gap: 1.6rem; }
.kd-alltopics__group { break-inside: avoid; margin-bottom: 1.1rem; }
.kd-alltopics__group[hidden],
.kd-alltopics__group li[hidden] { display: none; }
.kd-alltopics__group h4 { margin: 0 0 0.4rem; font-family: var(--kd-display); font-size: 1.35rem; font-weight: 400; color: var(--kd-sky-deep); }
.kd-alltopics__group ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kd-alltopics__group a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0 0.7rem;
    border: 1px solid var(--kd-line);
    border-radius: 999px;
    color: var(--kd-ink);
    font-size: 0.84rem;
    text-decoration: none;
    transition: background var(--kd-ease);
}
.kd-alltopics__group a:hover { background: var(--kd-sky-tint); }
.kd-alltopics__group a[aria-current] { border-color: var(--kd-ink); background: var(--kd-sun); }
.kd-alltopics__group a span { font-size: 0.72rem; font-weight: 600; color: var(--kd-ink-soft); }
.kd-alltopics__none { margin: 0; color: var(--kd-ink-soft); }
@media (max-width: 640px) {
    .kd-alltopics { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0 0; border-radius: var(--kd-radius) var(--kd-radius) 0 0; }
    .kd-alltopics__head { padding: 1.1rem 1rem 0; }
    .kd-alltopics__letters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
    .kd-alltopics__letters::-webkit-scrollbar { display: none; }
    .kd-alltopics__letters a { flex: 0 0 auto; }
    .kd-alltopics__body { padding: 1rem 1rem 1.4rem; }
    .kd-alltopics__groups { columns: 1; }
}

/* The book grid: world-tinted cards, each cover at its own shape on a
   fixed stage, plus two 2-wide feature tiles a page (slots 0 and 9).
   Five columns, four on tablet, two on a phone; with 18 books a page
   every row is full (ChildrenController::PER_PAGE). */
.kd-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 1.4rem 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.kd-grid__feature { grid-column: span 2; }
.kd-grid__feature--right { grid-column: -3 / span 2; }
.kd-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    padding: 0.85rem 0.85rem 1rem;
    border: 1px solid rgba(11, 16, 35, 0.06);
    border-radius: var(--kd-radius);
    background: var(--tone-tint);
    color: var(--kd-ink);
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(11, 16, 35, 0.06);
    cursor: pointer;
    transition: transform var(--kd-ease), box-shadow var(--kd-ease);
}
.kd-card:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(11, 16, 35, 0.08), 0 12px 22px rgba(11, 16, 35, 0.06); }
.kd-card:focus-visible { outline: 3px solid var(--kd-grape-deep); outline-offset: 3px; }
/* Children's books are tall, square and landscape: the stage keeps
   every card the same height and the cover sits on its floor at its
   own proportions instead of being cropped to one shape. */
.kd-card__stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 4 / 5;
    container-type: size;
    margin-bottom: 0.5rem;
}
.kd-card__book { position: relative; display: block; }
.kd-card__cover {
    display: block;
    width: auto;
    height: auto;
    max-width: 100cqw;
    max-height: 100cqh;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 18px -10px rgba(11, 16, 35, 0.45);
    transform: rotate(var(--tilt, 0deg));
    transition: transform 200ms ease;
}
.kd-card:hover .kd-card__cover { transform: rotate(0deg); }
.kd-card__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66cqw;
    aspect-ratio: 2 / 3;
    background: #fff;
    color: var(--tone-deep);
}
.kd-card__age {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--tone-mid);
    color: var(--tone-deep);
    box-shadow: 0 2px 6px rgba(11, 16, 35, 0.15);
    font-family: var(--kd-display);
    font-size: 1.1rem;
    line-height: 1;
    transform: rotate(8deg);
}
.kd-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.3rem; min-width: 0; }
.kd-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.3;
}
.kd-card__author {
    font-size: 0.82rem;
    color: var(--kd-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kd-card__avail {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}
.kd-card__avail::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.kd-card__avail--yes { color: var(--kd-grass-deep); }
.kd-card__avail--no  { color: var(--kd-ink-soft); }

/* The book page's "more books" row: one row of the grid's cards.
   Five on desktop; the fifth goes on tablet (4 columns) so the row
   stays full, and a phone shows two rows of two. */
.kd-related__grid { margin-top: 1rem; }
@media (max-width: 960px) {
    .kd-related__grid > li:nth-child(5) { display: none; }
}

/* Feature tile: cover beside the text, one row tall. */
.kd-card--feature {
    flex-direction: row;
    align-items: center;
    gap: 1.4rem;
    padding: 1.1rem 1.4rem;
}
.kd-card--feature .kd-card__stage { flex: 0 0 46%; margin: 0; }
.kd-card--feature .kd-card__age { width: 56px; height: 56px; font-size: 1.35rem; }
.kd-card--feature .kd-card__body { flex: 1; justify-content: center; gap: 0.6rem; }
.kd-card--feature .kd-card__title {
    -webkit-line-clamp: 3;
    font-family: var(--kd-display);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 400;
    line-height: 1.08;
}
.kd-card__blurb { font-size: 0.88rem; line-height: 1.6; color: var(--kd-ink); }
.kd-card--feature .kd-card__avail { margin-top: 0.3rem; }
.kd-card__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 1.1rem;
    border-radius: 999px;
    background: var(--kd-red);
    color: #fff;
    box-shadow: 0 3px 0 var(--kd-red-deep);
    font-size: 0.88rem;
    font-weight: 600;
}

.kd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    border: 1px solid var(--kd-line);
    border-radius: var(--kd-radius);
    background: #fff;
    text-align: center;
    color: var(--kd-ink-soft);
}
.kd-empty p { margin: 0; max-width: 36ch; }

/* The shared pagination partial, in the department's colours. */
.opac-body--kids .pagination__page--active {
    background: var(--kd-ink);
    border-color: var(--kd-ink);
    color: #fff;
}


/* ================================================================
   Welcome page (no books): same card language
   ================================================================ */
.kd-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    margin-top: 1.5rem;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
    border: 1px solid var(--kd-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--kd-lift);
    overflow: hidden;
    isolation: isolate;
}
.kd-hero--welcome { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.kd-hero__copy { position: relative; z-index: 1; max-width: 640px; }

.kd-eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 1rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: var(--kd-sun-tint);
    color: var(--kd-sun-deep);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.kd-hero__title {
    margin: 0;
    font-family: var(--kd-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--kd-ink);
}
/* The highlighted words: a yellow marker, like the catalogue's hello. */
.kd-rainbow {
    font-style: normal;
    padding: 0 0.15em;
    border-radius: 10px;
    background: var(--kd-sun);
    color: var(--kd-ink);
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
.kd-hero__sub {
    margin: 1.1rem 0 0;
    max-width: 46ch;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--kd-ink-soft);
}
.kd-notice {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: 0.6rem 1rem;
    border-radius: var(--kd-radius-sm);
    background: var(--kd-sky-tint);
    color: var(--kd-sky-deep);
    font-weight: 500;
    font-size: 0.92rem;
}

/* Doodles: soft shapes around the welcome hero. */
.kd-doodles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.kd-doodle { position: absolute; }
.kd-doodle--sun      { top: -18px;  right: -14px; width: 120px; height: 120px; animation: kd-spin 40s linear infinite; }
.kd-doodle--star1    { top: 18%;    right: 22%;  animation: kd-bob 5s ease-in-out infinite; }
.kd-doodle--star2    { bottom: 16%; right: 8%;   animation: kd-bob 6s ease-in-out infinite reverse; }
.kd-doodle--plane    { bottom: 12%; right: 30%;  transform: rotate(-8deg); }
.kd-doodle--squiggle { bottom: 22px; left: -20px; }
.kd-doodle--dot1, .kd-doodle--dot2, .kd-doodle--dot3 { border-radius: 50%; }
.kd-doodle--dot1 { width: 14px; height: 14px; top: 26px;  left: 46%;  background: var(--kd-coral); }
.kd-doodle--dot2 { width: 10px; height: 10px; top: 58%;   right: 4%;  background: var(--kd-sky); }
.kd-doodle--dot3 { width: 18px; height: 18px; bottom: 34%; right: 40%; background: var(--kd-grape-tint); }
.kd-hero--welcome .kd-doodle--star1,
.kd-hero--welcome .kd-doodle--plane,
.kd-hero--welcome .kd-doodle--dot3 { display: none; }

@keyframes kd-spin { to { transform: rotate(360deg); } }
@keyframes kd-bob  { 50% { transform: translateY(-8px) rotate(8deg); } }

/* Fanned cover stack. */
.kd-stack { position: relative; z-index: 1; height: 280px; }
.kd-stack__cover {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 10px;
    border: 4px solid #fff;
    box-shadow: 0 14px 26px -10px rgba(11, 16, 35, 0.35);
    transform:
        translate(-50%, -50%)
        translateX(calc((var(--i) - 2) * 58px))
        rotate(calc((var(--i) - 2) * 7deg));
}
.kd-stack__cover:nth-child(3) { z-index: 3; }
.kd-stack__cover:nth-child(2), .kd-stack__cover:nth-child(4) { z-index: 2; }

.kd-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}
.kd-feature {
    padding: 1.5rem 1.4rem;
    border: 1px solid rgba(11, 16, 35, 0.06);
    border-radius: 20px;
    background: var(--tone-tint);
    box-shadow: 0 3px 0 rgba(11, 16, 35, 0.06);
}
.kd-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 0.9rem;
    border-radius: 14px;
    background: #fff;
    color: var(--kd-ink);
    box-shadow: 0 2px 6px rgba(11, 16, 35, 0.08);
}
.kd-feature__title { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 600; color: var(--kd-ink); }
.kd-feature__text  { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--kd-ink-soft); }

.kd-how {
    margin-top: 1.4rem;
    padding: clamp(1.5rem, 4vw, 2.3rem);
    border: 1px solid var(--kd-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--kd-lift);
}
.kd-how__title {
    margin: 0 0 0.6rem;
    font-family: var(--kd-display);
    font-weight: 400;
    font-size: 1.9rem;
    color: var(--kd-ink);
}
.kd-how__text { margin: 0; max-width: 62ch; line-height: 1.6; color: var(--kd-ink-soft); }
.kd-how__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }

.kd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 1.5rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-weight: 600;
    font-size: 0.93rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--kd-ease), transform var(--kd-ease);
}
.kd-btn:active { transform: translateY(1px); }
.kd-btn--primary { background: var(--kd-red); color: #fff; box-shadow: 0 3px 0 var(--kd-red-deep); }
.kd-btn--primary:hover { background: #c00927; }
.kd-btn--ghost { background: #fff; color: var(--kd-ink); border-color: var(--kd-ink); }
.kd-btn--ghost:hover { background: var(--kd-sun-tint); }

.kd-back { margin: 2.5rem 0 1rem; }
.kd-back__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    color: var(--kd-ink-soft);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}
.kd-back__link:hover { color: var(--kd-ink); text-decoration: underline; }


/* ================================================================
   A children's book page (opac/show.php in kids mode)
   The shared book page, with a cover card, stat tiles and the
   display face on the title. Everything functional (reserve,
   wishlist, report, copies, shelf browse) is the shared code.
   ================================================================ */
.kd-book-badge {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.6rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: var(--kd-sun-tint);
    color: var(--kd-sun-deep);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}
.kd-book-badge:hover { background: var(--kd-sun); color: var(--kd-ink); }

.kd-cover-card {
    position: relative;
    padding: 1.5rem;
    border: 1px solid rgba(11, 16, 35, 0.06);
    border-radius: 24px;
    background: var(--kd-sun-tint);
    box-shadow: var(--kd-lift);
}
/* Children's books come in every shape, so the cover keeps its own
   proportions here instead of main.css's cropped 2:3. */
.opac-body--kids .kd-cover-card .bk-detail__cover {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(60vh, 440px);
    aspect-ratio: auto;
    object-fit: contain;
    margin-inline: auto;
    border-radius: 10px;
    transform: rotate(-2deg);
    box-shadow: 0 18px 30px -12px rgba(11, 16, 35, 0.4);
}
.opac-body--kids .kd-cover-card .bk-detail__cover--placeholder { width: 100%; aspect-ratio: 2 / 3; }
.kd-cover-card__sticker {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: -10px;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-family: var(--kd-display);
    font-size: 1.15rem;
    line-height: 1.2;
    transform: rotate(6deg);
    box-shadow: 0 2px 8px rgba(11, 16, 35, 0.15);
}
.kd-cover-card__sticker--in  { background: #e6f5ec; color: #0f5a2c; }
.kd-cover-card__sticker--out { background: #fff; color: var(--kd-ink-soft); }

.opac-body--kids .bk-detail__title {
    font-family: var(--kd-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 4.4vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: 0.01em;
    color: var(--kd-ink);
}
.opac-body--kids .bk-detail__author-link,
.opac-body--kids .bk-detail__meta-link,
.opac-body--kids .bk-related__cat-link {
    color: var(--kd-sky-deep);
}

.kd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 170px));
    gap: 0.7rem;
    margin: 1rem 0 1.2rem;
    padding: 0;
    list-style: none;
}
.kd-stat {
    padding: 0.75rem 0.9rem;
    border-radius: 16px;
    background: var(--tone-tint);
}
.kd-stat b {
    display: block;
    font-family: var(--kd-display);
    font-weight: 400;
    font-size: 1.85rem;
    line-height: 1.1;
    color: var(--kd-ink);
}
.kd-stat span { font-size: 0.82rem; color: var(--kd-ink-soft); }

/* Two columns: the cover card, and one white card holding the info
   column and the action column (reserve, wishlist, favourites,
   share). They stay two elements, so the reserve logic is the shared
   page's own; the borders just join them into one card. */
.opac-body--kids .bk-detail {
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas:
        "cover info"
        "cover side";
    column-gap: 2rem;
    row-gap: 0;
}
.opac-body--kids .bk-detail__cover-col { grid-area: cover; }
.opac-body--kids .bk-detail__info-col {
    grid-area: info;
    padding: 2rem 2.2rem 0.4rem;
    border: 1px solid var(--kd-line);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background: #fff;
}
.opac-body--kids .bk-detail__sidebar {
    grid-area: side;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 2.2rem 2rem;
    border: 1px solid var(--kd-line);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    box-shadow: var(--kd-lift);
}
/* The sticker and "where you'll find it" already say this. */
.opac-body--kids .bk-sidebar__avail,
.opac-body--kids .bk-sidebar__copies-summary { display: none; }
.opac-body--kids .bk-detail__sidebar > form { margin: 0; }
.opac-body--kids .bk-mystatus,
.opac-body--kids .bk-sidebar__hint { flex-basis: 100%; margin: 0; }
.opac-body--kids .bk-sidebar__hint { order: 9; font-size: 0.85rem; text-align: left; }
.opac-body--kids .bk-detail__sidebar .bk-btn svg { margin: 0 !important; vertical-align: 0 !important; }

.opac-body--kids .bk-detail__sidebar .bk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: auto;
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: 999px;
    border: 1.5px solid var(--kd-ink);
    background: #fff;
    color: var(--kd-ink);
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: none;
    transition: transform var(--kd-ease), background var(--kd-ease);
}
.opac-body--kids .bk-detail__sidebar .bk-btn:hover:not(:disabled) { transform: translateY(-1px); background: var(--kd-sun-tint); }
.opac-body--kids .bk-detail__sidebar .bk-btn--primary {
    border-color: var(--kd-red);
    background: var(--kd-red);
    color: #fff;
    box-shadow: 0 3px 0 var(--kd-red-deep);
}
.opac-body--kids .bk-detail__sidebar .bk-btn--primary:hover:not(:disabled) { background: #c00927; }
.opac-body--kids .bk-detail__sidebar .bk-btn--primary:disabled {
    border-color: #d4d7e0;
    background: #eef0f5;
    color: var(--kd-ink-soft);
    box-shadow: none;
}
/* Wishlist is the second action: black, like the mockup's. */
.opac-body--kids .bk-detail__sidebar form[action$="/wishlist"] .bk-btn,
.opac-body--kids .bk-detail__sidebar .bk-action--reserve + .bk-btn--ghost {
    background: var(--kd-ink);
    color: #fff;
    box-shadow: 0 3px 0 #000;
}
.opac-body--kids .bk-detail__sidebar form[action$="/wishlist"] .bk-btn:hover,
.opac-body--kids .bk-detail__sidebar .bk-action--reserve + .bk-btn--ghost:hover { background: #1c2340; }

.kd-by { margin-right: 0.3em; color: var(--kd-ink-soft); }
.kd-by-sep { margin: 0 0.3em; color: var(--kd-ink-soft); }
.opac-body--kids .bk-detail__author { font-size: 1.05rem; font-weight: 500; }
.opac-body--kids .bk-detail__author-link { text-decoration: underline; text-underline-offset: 3px; }

/* Description / details as tabs at every width, so the details
   table doesn't push the buttons out of the card. */
.opac-body--kids .bk-tabs {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.4rem;
    border-bottom: 1px solid var(--kd-line);
}
.opac-body--kids .bk-tabs__tab {
    padding: 0 0 0.7rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--kd-ink-soft);
    cursor: pointer;
}
.opac-body--kids .bk-tabs__tab--active { color: var(--kd-ink); border-bottom-color: var(--kd-red); }
.opac-body--kids .bk-tabs__panel { margin-top: 1rem; }
.opac-body--kids .bk-tabs__panel--inactive { display: none; }
.opac-body--kids .bk-detail__desc { font-size: 1rem; line-height: 1.75; }

.opac-body--kids .bk-related__title {
    font-family: var(--kd-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    letter-spacing: 0.01em;
}
.opac-body--kids .bk-related__grid .opac-card {
    padding: 0.6rem 0.6rem 0.8rem;
    border: 1px solid var(--kd-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--kd-lift);
    transition: transform var(--kd-ease), box-shadow var(--kd-ease);
}
.opac-body--kids .bk-related__grid .opac-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--kd-lift-hover);
}
.opac-body--kids .bk-related__grid .opac-card__cover { border-radius: 10px; }


/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 960px) {
    .kd-top { grid-template-columns: minmax(0, 1fr); }
    .kd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kd-new__covers { grid-template-columns: repeat(3, minmax(0, 110px)); }
}

@media (max-width: 900px) {
    .kd-hero--welcome { grid-template-columns: minmax(0, 1fr); }
    .kd-stack { height: 220px; }
    .kd-stack__cover { width: 104px; transform: translate(-50%, -50%) translateX(calc((var(--i) - 2) * 44px)) rotate(calc((var(--i) - 2) * 7deg)); }
    .kd-features { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .kd-doodle--sun { width: 84px; height: 84px; top: -22px; right: -22px; }
    .kd-doodle--star1, .kd-doodle--plane, .kd-doodle--dot3 { display: none; }
    .kd-search { padding-left: 0.9rem; }
    .kd-search__btn { padding: 0 1rem; }
    .kd-search__icon { display: none; }

    /* One scrolling row of worlds instead of a tall wall of tiles. */
    .kd-worlds {
        display: flex;
        overflow-x: auto;
        margin-inline: -16px;
        padding: 0 16px 0.5rem;
        scrollbar-width: none;
    }
    .kd-worlds::-webkit-scrollbar { display: none; }
    .kd-world { flex: 0 0 150px; min-height: 128px; }

    .kd-toolbar { border-radius: 16px; }
    .kd-toolbar__count { order: 3; flex-basis: 100%; margin: 0; }
    .kd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.8rem; }
    .kd-grid__feature,
    .kd-grid__feature--right { grid-column: 1 / -1; }
    .kd-card--feature { gap: 1rem; padding: 1rem; }
    .kd-card--feature .kd-card__stage { flex-basis: 44%; }
    .kd-card__blurb,
    .kd-card__cta { display: none; }
    .kd-cover-card { max-width: 300px; margin: 0 auto; }
}

@media (max-width: 900px) {
    .opac-body--kids .bk-detail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "cover" "info" "side";
        row-gap: 0;
    }
    .opac-body--kids .bk-detail__cover-col { justify-self: center; width: 100%; max-width: 300px; margin-bottom: 1.5rem; }
    .opac-body--kids .bk-detail__info-col { padding: 1.5rem 1.25rem 0.4rem; }
    .opac-body--kids .bk-detail__sidebar { padding: 0.8rem 1.25rem 1.5rem; justify-content: center; }
    .opac-body--kids .kd-cover-card .bk-detail__cover { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .kd-doodle { animation: none !important; }
    .kd-card,
    .kd-world,
    .kd-new__book img,
    .kd-search,
    .kd-btn { transition: none; }
    .kd-card:hover,
    .kd-world:hover { transform: none; }
    .kd-card__cover,
    .kd-card:hover .kd-card__cover { transform: none; transition: none; }
}