/* ==========================================================================
   v2 Upptäck: /bok/, kategorier, taggar, serier, universum, nya, barn, återblickar.
   Laddas efter v2.css på alla sidor, så allt är prefixat .v2u / .v2 .v2u-*.
   ========================================================================== */

.v2 .v2u .page-header h1 { margin-bottom: .35rem; }
.v2 .v2u .page-description { color: #3E4148; max-width: none; }
.v2u-sec { margin: 0 0 3rem; }
.v2u-subhead { font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 1.5rem 0 .6rem; }
.v2u-lead { color: var(--ink-soft); margin: -.4rem 0 1rem; max-width: none; }
.v2u-n { font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.v2u-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.v2u-chips .v2-chip svg { color: var(--ink-soft); }

/* Vägar in: ikonruta + namn + en rad */
.v2u-ways {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
    margin: 0 0 3rem;
}
.v2u-way {
    display: flex; align-items: center; gap: .85rem;
    padding: .85rem 1rem .85rem .85rem; min-height: 44px;
    border: 1px solid var(--line); border-radius: 18px; color: var(--ink);
    transition: border-color .15s ease;
}
.v2u-way:hover { border-color: var(--line-strong); color: var(--ink); }
.v2u-way .v2-tile-icon { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 16px; }
.v2u-way-text { min-width: 0; line-height: 1.3; }
.v2u-way-text b { display: block; font-size: .98rem; }
.v2u-way-text span { display: block; font-size: .82rem; color: var(--ink-soft); }

/* Genrer: ikonrutor */
.v2u-genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.v2u-genre {
    display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
    padding: 1rem; border-radius: 18px; background: var(--wash); color: var(--ink);
    transition: background-color .15s ease;
}
.v2u-genre:hover { background: #ECEBE7; color: var(--ink); }
.v2u-genre-icon { width: 44px; height: 44px; border-radius: 14px; background: #fff; display: grid; place-items: center; margin-bottom: .4rem; }
.v2u-genre-icon svg { width: 24px; height: 24px; }
.v2u-genre b { font-size: .95rem; line-height: 1.25; }

/* Serier med omslagsfläkt */
.v2u-serlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.v2u-serrow {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 18px; color: var(--ink);
}
.v2u-serrow:hover { border-color: var(--line-strong); color: var(--ink); }
.v2u-serrow-text { min-width: 0; line-height: 1.35; }
.v2u-serrow-text b { display: block; font-family: var(--font-display); font-size: 1.12rem; }
.v2u-serrow-text > span { display: block; font-size: .85rem; color: var(--ink-soft); }
.v2 .v2u-serrow-text .v2u-ser-n { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; color: var(--series); font-weight: 700; font-size: .8rem; }
.v2u-ser-n svg { width: 15px; height: 15px; }
.v2u-fan--one .v2-fan-cover:nth-child(1) { left: 20px; top: 2px; transform: none; }

/* Lyssna-bandet */
.v2u-listen {
    display: flex; gap: 1.1rem; align-items: flex-start;
    margin: 0 0 3rem; padding: 1.4rem; border-radius: 22px; background: var(--lamp);
}
.v2u-listen .v2-tile-icon { flex: 0 0 56px; background: #fff; }
.v2u-listen h2 { font-size: var(--h2-card); margin: 0 0 .25rem; }
.v2u-listen p { margin: 0 0 .9rem; color: #3E4148; }
.v2u-listen-links { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Återblicksrad */
.v2u-recaprow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.v2u-recap { display: flex; flex-direction: column; gap: .15rem; color: var(--ink); line-height: 1.3; }
.v2u-recap:hover { color: var(--ink); }
.v2u-recap-cover {
    position: relative; display: block; aspect-ratio: 2 / 3; margin-bottom: .5rem;
    border-radius: 6px; overflow: hidden; background: var(--wash);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px rgba(20, 22, 28, .1);
}
.v2u-recap-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2u-recap-cover .cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: .5rem; text-align: center; font-size: .8rem; color: var(--ink-soft); }
.v2u-recap b { font-size: .92rem; font-weight: 600; }
.v2u-recap > span:not(.v2u-recap-cover) { font-size: .8rem; color: var(--series); font-weight: 600; }

.v2u-date { font-size: .78rem; color: var(--ink-soft); font-weight: 600; }

@media (max-width: 1079px) {
    .v2u-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2u-serlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2u-recaprow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
    .v2u-sec { margin-bottom: 2.5rem; }
    .v2u-ways { grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 2.5rem; }
    .v2u-way { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .9rem; }
    .v2u-way .v2-tile-icon { width: 48px; height: 48px; flex-basis: auto; }
    .v2u-genres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
    .v2u-genre { padding: .8rem .7rem; }
    .v2u-genre b { font-size: .84rem; }
    .v2u-genre-icon { width: 40px; height: 40px; }
    .v2u-serlist { grid-template-columns: 1fr; gap: .6rem; }
    /* Svepbara rader i mobilen */
    .v2 .v2u-row, .v2u-recaprow {
        display: grid; grid-auto-flow: column; grid-template-columns: none;
        grid-auto-columns: 42%; overflow-x: auto; scrollbar-width: none;
        margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; scroll-snap-type: x mandatory;
    }
    .v2 .v2u-row > *, .v2u-recaprow > * { scroll-snap-align: start; }
    .v2 .v2u-row::-webkit-scrollbar, .v2u-recaprow::-webkit-scrollbar { display: none; }
    .v2u-recaprow { grid-auto-columns: 34%; }
    .v2u-listen { flex-direction: column; gap: .8rem; padding: 1.2rem; }
}

/* Hubb: finjustering efter första varvet */
@media (min-width: 1080px) {
    .v2u-genres { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .v2 .v2u-hub .v2u-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem 1rem; }
}
@media (max-width: 719px) {
    .v2u-way { flex-direction: row; align-items: center; gap: .6rem; padding: .7rem .75rem; border-radius: 16px; }
    .v2u-way .v2-tile-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 13px; }
    .v2u-way .v2-tile-icon svg { width: 21px; height: 21px; }
    .v2u-way-text b { font-size: .88rem; }
    .v2u-way-text span { font-size: .74rem; }
}

/* ==========================================================================
   Alla kategorier
   ========================================================================== */
.v2u-catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 3rem; }
.v2u-cat { display: flex; flex-direction: column; gap: .8rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 20px; }
.v2u-cat-main { display: flex; align-items: center; gap: .9rem; color: var(--ink); min-height: 76px; }
.v2u-cat-main:hover { color: var(--ink); }
.v2u-cat-main:hover h2 { color: var(--accent); }
.v2u-cat .v2u-genre-icon { flex: 0 0 48px; width: 48px; height: 48px; margin: 0; background: var(--wash); }
.v2u-cat-title { flex: 1; min-width: 0; }
.v2 .v2u-cat-title h2 { font-size: var(--h2-card); line-height: 1.2; margin: 0 0 .15rem; }
.v2u-cat .v2-fan--sm { flex: 0 0 96px; }
.v2u-cat-desc { margin: 0; font-size: .9rem; line-height: 1.5; color: #3E4148; }
.v2u-cat-subs { display: flex; flex-wrap: wrap; gap: .4rem; }
.v2u-more h2 { margin-bottom: .8rem; }
@media (max-width: 1079px) { .v2u-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
    .v2u-catgrid { grid-template-columns: 1fr; gap: .75rem; }
    .v2u-cat { padding: 1rem; }
}

/* ==========================================================================
   Alla taggar
   ========================================================================== */
.v2u-moods { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.v2u-mood {
    display: flex; flex-direction: column; gap: .3rem;
    padding: 1rem 1.1rem; border-radius: 18px; background: var(--lamp); color: var(--ink);
}
.v2u-mood:hover { background: #F1EBE3; color: var(--ink); }
.v2u-mood-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.v2u-mood-head b { font-family: var(--font-display); font-size: 1.15rem; }
.v2u-mood-text { font-size: .86rem; line-height: 1.45; color: #3E4148; }

.v2u-tagtools {
    position: sticky; top: 72px; z-index: 5; background: rgba(255, 255, 255, .97);
    padding: .5rem 0 .75rem; margin-bottom: .5rem; display: grid; gap: .6rem;
}
.v2u-filter {
    display: flex; align-items: center; gap: .6rem; max-width: 520px;
    padding: 0 1rem; min-height: 48px; border: 1.5px solid var(--control-line); border-radius: 14px; background: #fff;
}
.v2u-filter[hidden] { display: none; }
.v2u-filter:focus-within { border-color: var(--ink); }
.v2u-filter svg { width: 19px; height: 19px; color: var(--ink-soft); flex: 0 0 auto; }
.v2u-filter input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 1rem var(--font-body); padding: .6rem 0; }
.v2u-letters { display: flex; flex-wrap: wrap; gap: .15rem; }
.v2u-letters a {
    display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: 10px;
    font-weight: 700; font-size: .88rem; color: var(--ink);
}
.v2u-letters a:hover { background: var(--wash); color: var(--ink); }
.v2u-letter-group { scroll-margin-top: 190px; padding: 1rem 0; border-top: 1px solid var(--line); }
.v2u-letter-group[hidden] { display: none; }
.v2 .v2u-letter { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 .6rem; }
.v2u-chips [hidden] { display: none; }
.v2u-nomatch { color: var(--ink-soft); }
@media (max-width: 719px) {
    .v2u-moods { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .v2u-mood { padding: .85rem .9rem; }
    .v2u-mood-head { flex-direction: column; gap: 0; }
    .v2u-mood-head b { font-size: 1.05rem; }
    .v2u-mood-text { font-size: .8rem; }
    .v2u-tagtools { top: calc(60px + env(safe-area-inset-top, 0px)); margin-inline: -1rem; padding-inline: 1rem; border-bottom: 1px solid var(--line); }
    .v2u-letters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: .5rem; }
    .v2u-letters::-webkit-scrollbar { display: none; }
    .v2u-letters a { min-width: 40px; height: 40px; flex: 0 0 auto; }
    .v2u-letter-group { scroll-margin-top: 200px; }
}
/* Stämningskort med omslagsfläkt, teman i två spalter på dator */
.v2u-mood { flex-direction: row; align-items: center; gap: .9rem; }
.v2u-mood .v2-fan--sm { flex: 0 0 96px; }
.v2u-mood-head { flex-direction: column; gap: .1rem; align-items: flex-start; min-width: 0; }
.v2u-mood-head b { font-size: 1.02rem; overflow-wrap: break-word; hyphens: auto; }
.v2 .v2u-mood .v2u-n { color: #5A5750; }
@media (min-width: 1080px) {
    #v2u-themes { column-count: 2; column-gap: 2.5rem; }
    #v2u-themes > * { break-inside: avoid; }
}
.v2u-letter-group { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: start; }
.v2 .v2u-letter { margin: .35rem 0 0; }
@media (max-width: 719px) {
    .v2u-mood { flex-direction: column; align-items: flex-start; gap: .4rem; }
    .v2u-mood .v2-fan--sm { height: 70px; }
    .v2u-letter-group { grid-template-columns: 2rem minmax(0, 1fr); }
}

/* ==========================================================================
   Taggsida
   ========================================================================== */
.v2u-tagicon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--wash); margin-bottom: .75rem; }
.v2u-tagicon svg { width: 26px; height: 26px; }
.v2u-tagicon.is-mood { background: var(--lamp); color: var(--accent); }
.v2u-moodswitch { display: flex; gap: .4rem; flex-wrap: wrap; margin: -.5rem 0 2rem; }
.v2u-toc { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1.25rem; }
.v2 .v2u-tag .tag-subgroup { scroll-margin-top: 90px; }
.v2 .v2u-tag .tag-subgroup-title { text-align: left; }
.v2 .v2u-tag .tag-subgroup-intro { font-family: var(--font-read); max-width: none; text-align: left; margin-inline: 0; }
.v2 .v2u-tag .book-relation-note { font-size: .82rem; line-height: 1.45; color: #3E4148; }
.v2 .v2u-outro { max-width: none; margin: 2.5rem 0; padding: 0; background: none; border: 0; }
.v2 .v2u-outro p { font-family: var(--font-read); font-size: 1.04rem; line-height: 1.72; text-align: left; }
.v2u-related h2 { margin: 0 0 .8rem; }
.v2 .v2u-tag .book-faq { margin-bottom: 3rem; }
.v2u-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 2.5rem; }
@media (max-width: 719px) {
    .v2u-moodswitch, .v2u-toc {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin-inline: -1rem; padding-inline: 1rem;
    }
    .v2u-moodswitch::-webkit-scrollbar, .v2u-toc::-webkit-scrollbar { display: none; }
    .v2u-toc .v2-cf-lab { flex: 0 0 auto; }
    .v2u-next { grid-template-columns: 1fr; gap: .5rem; }
}
.v2 .v2u .book-info, .v2 .v2u .book-info .author, .v2 .v2u .book-content { text-align: left; }
.v2 .v2u .book-info .author { margin-inline: 0; }

/* ==========================================================================
   Delat: kryssrutechips (serie- och barnfilter), filterknapp, läsyta
   ========================================================================== */
.v2u-read { max-width: var(--measure); margin: 0 0 2rem; }
.v2 .v2u-read p { font-family: var(--font-read); font-size: 1.02rem; line-height: 1.7; color: #3E4148; text-align: left; }

.v2 .v2u .series-filter-group legend,
.v2 .v2u .barn-filter-group legend { font-size: .7rem; letter-spacing: .1em; }
.v2 .v2u .series-filter-clear, .v2 .v2u .barn-filter-clear { color: var(--accent); text-decoration: none; min-height: 44px; }
.v2u-filterbtn {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1rem;
    border: 1px solid var(--control-line); border-radius: 999px; background: #fff;
    font: 600 .92rem var(--font-body); color: var(--ink); cursor: pointer;
}
.v2u-filterbtn[hidden] { display: none; }
.v2u-filterbtn svg { width: 17px; height: 17px; }
.v2u-filterbtn[aria-expanded="true"] { border-color: var(--ink); }
.v2u-toggle-n { background: var(--ink); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 .45rem; }
.v2u-toggle-n[hidden] { display: none; }


/* ==========================================================================
   Alla serier
   ========================================================================== */
.v2u-unilink {
    display: inline-flex; align-items: center; gap: .85rem; margin: 0 0 2rem;
    padding: .75rem 1.1rem .75rem .75rem; border-radius: 18px; background: var(--series-wash); color: var(--ink);
}
.v2u-unilink:hover { color: var(--ink); }
.v2u-unilink .v2-tile-icon { width: 44px; height: 44px; border-radius: 14px; background: #fff; }
.v2u-unilink b { color: var(--series); }
.v2u-sfilterbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.v2 .v2u .v2u-sfilter {
    max-width: none; margin: 0 0 2rem; padding: 0; border: 0; box-shadow: none; background: none;
    gap: 1rem 2rem;
}
.v2 .v2u .v2u-sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.v2 .v2u .v2u-scard {
    position: relative; display: flex; flex-direction: row; align-items: flex-start; gap: 1rem;
    padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: #fff;
}
.v2 .v2u .v2u-scard:hover { border-color: var(--line-strong); }
.v2u-scard .v2-fan--sm { margin-top: .25rem; }
.v2u-fan-empty { display: grid; place-items: center; background: var(--series-wash); color: var(--series); border-radius: 12px; }
.v2u-fan-empty svg { width: 28px; height: 28px; }
.v2u-scard-text { min-width: 0; flex: 1; }
.v2 .v2u-scard h3 { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; margin: 0 0 .1rem; }
.v2 .v2u-scard h3 a { color: var(--ink); }
.v2u-scard .series-card-link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.v2u-scard-author { font-size: .85rem; color: var(--ink-soft); margin: 0 0 .35rem; }
.v2u-scard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .8rem; color: var(--ink-soft); margin: 0 0 .4rem; }
.v2 .v2u-scard .v2u-ser-n { display: inline-flex; align-items: center; gap: .25rem; color: var(--series); font-weight: 700; }
.v2u-status--ongoing { background: var(--series-wash); color: var(--series); }
.v2u-scard-desc { font-size: .85rem; line-height: 1.45; color: #3E4148; margin: 0; }
.v2u-scard-uni { position: relative; z-index: 1; font-size: .8rem; margin: .45rem 0 0; color: var(--ink-soft); }
.v2 .v2u-scard-uni a { color: var(--series); font-weight: 700; }
.v2 .v2u .series-pagination { margin: 2rem 0 3rem; }
.v2 .v2u-tips { max-width: none; margin: 3rem 0; padding: 0; background: none; border: 0; box-shadow: none; }
.v2 .v2u-tips h2 { text-align: left; }
.v2 .v2u-tips li { font-family: var(--font-read); line-height: 1.6; }
@media (max-width: 1079px) { .v2 .v2u .v2u-sgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 719px) {
    .v2 .v2u .v2u-sgrid { grid-template-columns: 1fr; gap: .6rem; }
    .v2 .v2u .v2u-scard { padding: .9rem; }
    .v2u-collapsible { display: none !important; }
    .v2u-collapsible.is-open { display: flex !important; }
    .v2u-sfilterbar { position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 20; background: rgba(255, 255, 255, .97); margin-inline: -1rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); }
    .v2u-unilink { display: flex; }
}
/* Serier: filter i sidopanel på dator, intro efter listan */
@media (min-width: 720px) { .v2u-filterbtn { display: none !important; } }
@media (min-width: 1080px) {
    .v2u-slayout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
    .v2u-sside { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: .25rem; }
    .v2 .v2u .v2u-sfilter { flex-direction: column; gap: 1.25rem; }
    .v2 .v2u .v2u-sgrid { grid-template-columns: 1fr 1fr; }
}
.v2 .v2u-series .series-section { margin: 0; }
.v2 .v2u-tips ul { padding: 0; }
.v2 .v2u-tips li { background: none; border: 0; box-shadow: none; padding: .6rem 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.v2 .v2u .book-faq h2, .v2 .v2u .collection-faq h2 { text-align: left; }
.v2 .v2u .book-faq { margin-inline: 0; }
.v2 .v2u-series > .v2u-read { margin-top: 3rem; }

/* ==========================================================================
   Universum: listan
   ========================================================================== */
.v2u-unigrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.v2u-uni {
    position: relative; display: flex; gap: 1.4rem; align-items: flex-start;
    padding: 1.4rem; border-radius: 22px; background: var(--series-wash);
}
.v2u-uni .v2-fan { flex: 0 0 auto; margin: .25rem 0 0; }
.v2u-uni-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.v2 .v2u-uni h2 { font-size: var(--h2-section); line-height: 1.15; margin: 0; }
.v2 .v2u-uni h2 a { color: var(--ink); }
.v2u-uni-link::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.v2u-uni:hover h2 a { color: var(--series); }
.v2u-uni-desc { margin: 0; color: #3E4148; font-size: .95rem; }
.v2u-uni-stats { display: flex; gap: .8rem; align-items: center; margin: 0; font-size: .85rem; color: var(--ink-soft); }
.v2 .v2u-uni-stats .v2u-ser-n, .v2 .v2u-serrow-text .v2u-ser-n { display: inline-flex; align-items: center; gap: .3rem; color: var(--series); font-weight: 700; }
.v2u-ser-n svg { width: 15px; height: 15px; }
.v2u-uni-series { position: relative; z-index: 1; list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; counter-reset: uni; }
.v2u-uni-series li { counter-increment: uni; }
.v2 .v2u-uni-series a {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .3rem .75rem .3rem .35rem;
    border-radius: 999px; background: #fff; font-size: .84rem; font-weight: 600; color: var(--ink);
}
.v2u-uni-series a::before {
    content: counter(uni); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--series); color: #fff; font-size: .72rem; font-weight: 700;
}
.v2 .v2u-uni-series a:hover { color: var(--series); }
.v2u-uni-go { margin-top: .4rem; font-weight: 700; font-size: .9rem; color: var(--series); }
.v2u-uni-go::after, .v2u-stop-go::after { content: " \2192"; }
@media (max-width: 1079px) { .v2u-unigrid { grid-template-columns: 1fr; } }
@media (max-width: 719px) {
    .v2u-uni { flex-direction: column; gap: .9rem; padding: 1.1rem; }
    .v2u-uni .v2-fan { flex-basis: auto; }
}

/* ==========================================================================
   Universum: en sida med läskarta
   ========================================================================== */
.v2u-unihead .v2-fan { margin-bottom: 1rem; }
.v2 .v2u-unihead h1 { margin: 0 0 .35rem; }
.v2u-unifacts { max-width: 520px; margin-top: 1.1rem; }
.v2 .v2u-universe .collection-intro { margin-bottom: 2rem; }
.v2 .v2u-universe .collection-meta { font-family: var(--font-body); font-size: .78rem; color: var(--ink-soft); text-align: left; }

.v2u-start {
    display: flex; gap: 1.1rem; align-items: center; max-width: 560px;
    margin: 0 0 3rem; padding: 1.1rem 1.25rem; border-radius: 22px; background: var(--lamp);
}
.v2u-start-cover { position: relative; flex: 0 0 76px; width: 76px; aspect-ratio: 2 / 3; border-radius: 5px; overflow: hidden; background: var(--wash); box-shadow: 0 6px 16px rgba(20, 22, 28, .18); }
.v2u-start-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2u-start-cover .cover-fallback, .v2u-stop-cover .cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: .25rem; font-size: .6rem; text-align: center; color: var(--ink-soft); }
.v2u-start-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; margin: 0 0 .15rem; }
.v2u-start-sub { margin: 0 0 .7rem; font-size: .88rem; color: #3E4148; }

.v2 .v2u-map { margin: 0 0 3rem; padding: 0; background: none; border: 0; }
.v2 .v2u-map > h2 { text-align: left; }
.v2u-route { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: none; }
.v2u-stop { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; padding-bottom: 1.25rem; }
/* Vägen mellan stationerna: prickad linje från markör till markör (en tidslinje, inte en kantlinje på kortet) */
.v2u-stop::before {
    content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 0;
    border-left: 2px dashed #B9C0DA;
}
.v2u-stop.is-last::before { display: none; }
.v2u-stop-marker {
    position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; background: #fff; border: 2px solid var(--series);
    color: var(--series); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.v2u-stop.is-first .v2u-stop-marker { background: var(--series); color: #fff; }
.v2u-stop-card { padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.v2u-stop-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; }
.v2 .v2u-stop-head h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.v2 .v2u-stop-head h3 a { color: var(--ink); }
.v2 .v2u-stop-head h3 a:hover { color: var(--series); }
.v2u-stop-meta { font-size: .82rem; color: var(--ink-soft); }
.v2 .v2u-stop-meta .v2u-ser-n { display: inline-flex; align-items: center; gap: .25rem; color: var(--series); font-weight: 700; }
.v2u-stop-intro { margin: .4rem 0 .8rem; font-size: .9rem; line-height: 1.5; color: #3E4148; }
.v2u-stop-covers { display: flex; gap: .5rem; flex-wrap: wrap; }
.v2u-stop-cover {
    position: relative; display: block; width: 60px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden;
    background: var(--wash); box-shadow: 0 2px 8px rgba(20, 22, 28, .14);
}
.v2u-stop-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2 .v2u-stop-more { display: grid; place-items: center; background: var(--series-wash); color: var(--series); font-weight: 800; box-shadow: none; }
.v2u-stop-go { display: inline-block; margin-top: .8rem; font-size: .88rem; font-weight: 700; color: var(--series); }

.v2u-pathgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.v2u-path { padding: 1.1rem 1.2rem; border-radius: 20px; background: var(--series-wash); }
.v2 .v2u-path h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
.v2u-path .alt-path-description { font-size: .88rem; color: #3E4148; margin: 0 0 .7rem; }
.v2u-path-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.v2u-path-steps li { display: flex; gap: .6rem; align-items: flex-start; }
.v2u-path-n { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--series); color: #fff; font-size: .75rem; font-weight: 700; }
.v2 .v2u-path-steps a { font-weight: 700; color: var(--ink); }
.v2u-path-steps small { display: block; color: var(--ink-soft); font-size: .8rem; }

.v2u-unibooks { margin-top: 1.75rem; }
.v2 .v2u-unibooks-head h3 { font-size: var(--h2-card); }
.v2u-simuni-shared { font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 719px) {
    .v2u-stop { grid-template-columns: 36px minmax(0, 1fr); gap: .7rem; }
    .v2u-stop-marker { width: 36px; height: 36px; font-size: .95rem; }
    .v2u-stop::before { left: 17px; top: 36px; }
    .v2u-stop-card { padding: .9rem; }
    .v2u-stop-cover { width: 50px; }
    .v2u-start { padding: 1rem; }
}

/* Fläkten är en span: gör den till block så höjden gäller */
.v2 .v2u .v2-fan { display: block; }
.v2 .v2u .v2u-unifacts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
.v2 .v2u-paths h2 { margin-bottom: .8rem; }
.v2 .v2u-lead { margin-top: 0; }

/* ==========================================================================
   Nya böcker
   ========================================================================== */
.v2u-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: -.5rem 0 2.5rem; }
.v2u-feed { margin-bottom: 3rem; scroll-margin-top: 90px; }
.v2 .v2u-month { display: flex; align-items: baseline; gap: .7rem; font-family: var(--font-display); font-size: 1.15rem; margin: 1.75rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.v2 .v2u-feed .book-meta { display: flex; flex-wrap: wrap; gap: .3rem .45rem; align-items: center; }
.v2u-date { width: 100%; }
@media (max-width: 719px) { .v2u-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; } }
@media (min-width: 1080px) {
    .v2u-unitop { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 3rem; align-items: start; }
    .v2u-unitop .v2u-start { position: sticky; top: 96px; margin-top: 11rem; flex-direction: column; align-items: flex-start; text-align: left; }
    .v2u-unitop .v2u-start-cover { flex-basis: auto; width: 110px; }
}
.v2 .v2u-universe .v2u-start .v2-btn { color: #fff; }

/* ==========================================================================
   Barnböcker: stegen som en trappa (glada färger per steg, samma pasteller som snabbvalen)
   ========================================================================== */
.v2u-lv-1 { --sb: #F6F1DE; --sf: #7A6212; }
.v2u-lv-2 { --sb: #FBF0E4; --sf: #9A5518; }
.v2u-lv-3 { --sb: #F7ECF1; --sf: #8D365A; }
.v2u-lv-4 { --sb: #F3EDF6; --sf: #6A3C7C; }
.v2u-lv-5 { --sb: #EDEFF6; --sf: #34427A; }
.v2 .v2u-h2 { text-align: left; margin: 0 0 1rem; }

.v2u-stairs { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; align-items: end; }
.v2u-stairs .v2u-stair > a {
    display: flex; flex-direction: column; gap: .6rem; height: 100%;
    padding: 1.1rem 1rem 1rem; border-radius: 22px; background: var(--sb); color: var(--ink);
    transition: transform .15s ease;
}
.v2u-stairs .v2u-stair > a:hover { color: var(--ink); transform: translateY(-3px); }
/* Trappan: varje steg lite högre än det förra (dator) */
.v2u-stairs > li:nth-child(1) > a { min-height: 300px; }
.v2u-stairs > li:nth-child(2) > a { min-height: 330px; }
.v2u-stairs > li:nth-child(3) > a { min-height: 360px; }
.v2u-stairs > li:nth-child(4) > a { min-height: 390px; }
.v2u-stairs > li:nth-child(5) > a { min-height: 420px; }
.v2u-stair-n {
    display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    background: var(--sf); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.v2u-stair-text { display: flex; flex-direction: column; gap: .25rem; }
.v2u-stair-step { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sf); }
.v2 .v2u-stair h3 { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; margin: 0; }
.v2u-stair-age { align-self: flex-start; padding: .15rem .6rem; border-radius: 999px; background: #fff; font-weight: 700; font-size: .8rem; color: var(--sf); }
.v2u-stair-does { font-size: .88rem; line-height: 1.45; color: #3E4148; }
.v2 .v2u-stair .v2u-n { color: #4A4D55; font-weight: 600; }
.v2u-stair .v2-fan--sm { margin-top: auto; }

.v2 .v2u-barn .barn-fact {
    max-width: 44rem; margin: 0 0 3rem; padding: 1.25rem 1.4rem; border: 0; border-radius: 22px; background: var(--lamp); box-shadow: none;
}
.v2 .v2u-barn .barn-fact-heading { font-size: 1.15rem; text-align: left; }
.v2 .v2u-barn .barn-fact-body { font-family: var(--font-read); line-height: 1.65; text-align: left; }
.v2 .v2u-barn .barn-fact-method { font-size: .85rem; color: var(--ink-soft); text-align: left; }
.v2 .v2u-barn .barn-fact-link { color: var(--accent); font-weight: 700; }
.v2 .v2u-barn .barn-aside { max-width: 44rem; margin: 0 0 3rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: none; }
.v2 .v2u-barn .barn-aside-heading { font-size: 1.15rem; text-align: left; }
.v2 .v2u-barn .barn-aside-body { font-family: var(--font-read); line-height: 1.65; }
.v2u-next--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 3rem; }
.v2u-next .v2u-stair-n { width: 44px; height: 44px; }

/* Nivåsidan */
.v2u-barnhead { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; }
.v2u-barnhead .v2u-stair-n { width: 60px; height: 60px; font-size: 1.6rem; background: var(--sf); }
.v2u-barnhead h1 { margin: 0; }
.v2u-barnhead .page-description { grid-column: 1 / -1; margin-top: 1rem; }
.v2 .v2u .v2u-stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin: 0 0 2.5rem; padding: 0; border: 0; background: none; }
.v2u-step {
    display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .6rem .7rem;
    border-radius: 16px; border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.v2 a.v2u-step:hover { border-color: var(--sf); color: var(--ink); }
.v2u-step.is-current { background: var(--sb); border-color: transparent; }
.v2u-step-n { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sb); color: var(--sf); font-weight: 800; font-size: .9rem; }
.v2u-step.is-current .v2u-step-n { background: var(--sf); color: #fff; }
.v2u-step-text { min-width: 0; line-height: 1.2; }
.v2u-step-text b { display: block; font-size: .86rem; }
.v2u-step-text span { font-size: .75rem; color: var(--ink-soft); }
.v2 .v2u-barn-bookshead { margin-top: .5rem; }
.v2 .v2u .barn-filter { max-width: none; margin: 0 0 2rem; padding: 0; border: 0; box-shadow: none; background: none; gap: 1rem 2rem; }
.v2 .v2u .barn-filter-chips { gap: .4rem; }

@media (max-width: 1079px) {
    .v2u-stairs { grid-template-columns: 1fr; gap: .6rem; }
    .v2u-stairs .v2u-stair > a { min-height: 0 !important; flex-direction: row; align-items: center; gap: 1rem; padding: 1rem; }
    .v2u-stair-text { flex: 1; min-width: 0; }
    .v2u-stair .v2-fan--sm { margin: 0; }
    /* Mobil/surfplatta: trappan som en nedåtgående stege med indrag per steg */
    .v2u-stairs > li:nth-child(2) { margin-left: .5rem; }
    .v2u-stairs > li:nth-child(3) { margin-left: 1rem; }
    .v2u-stairs > li:nth-child(4) { margin-left: 1.5rem; }
    .v2u-stairs > li:nth-child(5) { margin-left: 2rem; }
    .v2 .v2u .v2u-stepper { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
    .v2 .v2u .v2u-stepper::-webkit-scrollbar { display: none; }
    .v2u-step { flex: 0 0 auto; }
}
@media (max-width: 719px) {
    .v2u-stairs > li { margin-left: 0 !important; }
    .v2u-next--two { grid-template-columns: 1fr; }
    .v2 .v2u .barn-filter.v2u-collapsible.is-open { display: flex !important; flex-direction: column; }
}
@media (max-width: 1079px) { .v2 .v2u .v2u-stepper { flex-wrap: nowrap; justify-content: flex-start; } }
.v2 .v2u .book-item .author { font-family: var(--font-body); }
.v2 .v2u .barn-filter-actions { align-self: flex-end; }

/* ==========================================================================
   Återblickar
   ========================================================================== */
.v2u-recaphow { display: flex; gap: .9rem; align-items: center; max-width: none; margin: -.5rem 0 1.5rem; padding: .9rem 1.1rem; border-radius: 18px; background: var(--wash); }
.v2u-recaphow .v2-tile-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; background: #fff; }
.v2u-recaphow p { margin: 0; font-size: .92rem; color: #3E4148; }
.v2u-recapgroup { padding: 1.5rem 0 1rem; border-top: 1px solid var(--line); scroll-margin-top: 170px; }
.v2u-recapgroup[hidden] { display: none; }
.v2u-recapgroup-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.v2 .v2u-recapgroup-head h2 { font-size: var(--h2-card); margin: 0; }
.v2 .v2u-recapgroup-head h2 a { color: var(--ink); }
.v2 .v2u-recapgroup-head h2 a:hover { color: var(--series); }
.v2u-recapgroup-head p { margin: .1rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.v2u-recaplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .75rem; }
.v2u-recaplist li[hidden] { display: none; }
.v2 .v2u .v2u-recapitem { display: flex; gap: .9rem; align-items: flex-start; height: 100%; margin: 0; padding: .9rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: none; }
.v2 .v2u .v2u-recapitem-cover { position: relative; flex: 0 0 64px; width: 64px; aspect-ratio: 2 / 3; border-radius: 5px; overflow: hidden; }
.v2 .v2u .v2u-recapitem-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2 .v2u .v2u-recapitem-cover .cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: .6rem; padding: .2rem; text-align: center; }
.v2 .v2u .v2u-recapitem .recent-body { min-width: 0; }
.v2 .v2u .v2u-recapitem h3 { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.25; margin: .3rem 0 .1rem; }
.v2 .v2u .v2u-recapitem .author { font-style: normal; color: var(--ink-soft); font-size: .82rem; margin: 0 0 .35rem; }
.v2 .v2u .v2u-recapitem .description { font-size: .86rem; line-height: 1.45; color: #3E4148; margin: 0 0 .45rem; }
.v2 .v2u .v2u-recapitem .recent-more { font-size: .86rem; font-weight: 700; color: var(--accent); }
@media (max-width: 719px) { .v2u-recaplist { grid-template-columns: 1fr; gap: .5rem; } .v2u-recaphow { margin-top: 0; } }
.v2 .v2u .v2u-recapitem .description { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.v2u-recapgroup-head .v2-fan--sm { margin-left: .35rem; }
@media (max-width: 719px) { .v2u-swipe { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; } .v2u-swipe::-webkit-scrollbar { display: none; } }
@media (min-width: 1080px) { .v2u-moods { grid-template-columns: repeat(4, minmax(0, 1fr)); } .v2u-mood { gap: .75rem; padding: .9rem; } .v2u-mood .v2-fan--sm { flex-basis: 90px; } }
.v2 .v2u-series .series-section, .v2 .v2u .v2u-sgrid { margin-top: 0; padding-top: 0; }
@media (max-width: 719px) { .v2 .v2u .v2u-sgrid { margin-top: 1rem; } .v2 .v2u .v2u-sfilter.is-open { margin-top: 1rem; } }
.v2 .v2u-series .series-section { border-top: 0; }

/* ==========================================================================
   Granskning 2 (2026-09-27): rättelser för Upptäck-sidorna
   ========================================================================== */


/* SEO-3: en kort unik rad per bok under titeln */
.v2 .v2u-line { margin: .2rem 0 .35rem; font-size: .82rem; line-height: 1.42; color: #3E4148; text-align: left; }

/* UI-10: allt som leder till serier och universum är blått */
.v2 a.v2u-stop-go, .v2 .v2u-unibooks-head .section-link, .v2 a.v2u-serlink { color: var(--series); }
.v2 a.v2u-stop-go:hover, .v2 .v2u-unibooks-head .section-link:hover, .v2 a.v2u-serlink:hover { color: var(--ink); }


/* UX-6: serierna i kategorin som kort överst */
.v2u-catser { margin: 0 0 2.25rem; }
.v2u-catser-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.v2u-catser .v2-fan { display: block; flex: 0 0 auto; }
.v2 .v2u-catser .v2u-serrow-text .v2u-ser-n { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; color: var(--series); font-weight: 700; font-size: .8rem; }
@media (max-width: 1079px) { .v2u-catser-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
    .v2u-catser-row {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
        overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
        margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem;
    }
    .v2u-catser-row::-webkit-scrollbar { display: none; }
    .v2u-catser-row > * { scroll-snap-align: start; }
}

/* UX-14 + UI-7: filterraden. Dator: som förut. Mobil: en knapp "Filtrera" öppnar
   filter, sortering och vy (js/v2-upptack.js lägger till .v2u-collapsible). */
.v2-cfwrap { margin: 0 0 1.75rem; }
.v2-cfwrap .v2-catfilters { margin: 0; }
@media (max-width: 719px) {
    .v2-cfwrap { position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 20; margin: 0 -1rem 1.25rem; padding: .5rem 1rem; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); }
    .v2-cfwrap .v2-catfilters { position: static; margin: 0; padding: 0; border: 0; background: none; }
    .v2-cfwrap .v2-catfilters.v2u-collapsible.is-open { display: block !important; padding-top: .75rem; }
    .v2-cfwrap .v2-catfilters.v2u-collapsible .v2-catfilters-row { flex-direction: column; flex-wrap: nowrap; overflow: visible; gap: .8rem; }
    .v2-cfwrap .v2-catfilters.v2u-collapsible .v2-cf-group { flex-wrap: wrap; }
    .v2-cfwrap .v2-cf-lab { flex: 0 0 100%; }
}

/* UX-14: ingressen klipps till några rader tills man trycker "Läs mer" */
.v2 .v2u-clamped { max-height: calc(1.72em * 2.5); overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.v2u-more-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: .1rem 0 .2rem;
    border: 0; background: none; font: 700 .9rem var(--font-body); color: var(--accent); cursor: pointer;
}
.v2u-more-btn[hidden] { display: none; }
.v2u-more-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* SEO-4: teman med riktig beskrivning */
.v2u-tagdesc { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 100%; padding: .55rem .9rem; min-height: 44px; border-radius: 14px; background: var(--wash); color: var(--ink); }
.v2u-tagdesc:hover { background: #ECEBE7; color: var(--ink); }
.v2u-tagdesc b { font-size: .92rem; }
.v2u-tagdesc > span { font-size: .82rem; line-height: 1.4; color: #3E4148; }
.v2u-chips .v2u-tagdesc[hidden] { display: none; }
.v2u-mood-head .v2u-mood-text { display: block; margin-top: .25rem; }

/* UX-13: serielistans sök och sortering, fler filter bakom en utfällning */
.v2u-stools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; margin: 0 0 1rem; }
.v2u-stools .v2u-filter { flex: 1 1 280px; }
.v2u-sort { display: flex; align-items: center; gap: .4rem; }
.v2u-sort[hidden] { display: none; }
.v2u-morefilters { border-top: 1px solid var(--line); padding-top: .6rem; }
.v2u-morefilters > summary {
    display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
    font-weight: 700; font-size: .9rem; color: var(--ink);
}
.v2u-morefilters > summary::-webkit-details-marker { display: none; }
.v2u-morefilters > summary::after { content: "+"; margin-left: .45rem; font-weight: 700; color: var(--ink-soft); }
.v2u-morefilters[open] > summary::after { content: "\2212"; }
.v2u-morefilters-body { display: flex; flex-direction: column; gap: 1rem; padding-top: .4rem; }
@media (min-width: 720px) and (max-width: 1079px) { .v2u-morefilters { flex: 1 1 100%; } }

/* UI-14: tryckytor minst 44 px */
.v2 .v2u .v2u-recapitem .recent-more { display: inline-flex; align-items: center; min-height: 44px; }

/* UI-10 (barn): nummer, steg och ålder i bläck, inte seriens blå. Pastellen ligger kvar som steg-färg. */
.v2 .v2u-stair-n, .v2 .v2u-barnhead .v2u-stair-n { background: var(--ink); color: #fff; }
.v2 .v2u-stair-step, .v2 .v2u-stair-age { color: var(--ink); }
.v2 .v2u-step-n { background: var(--wash); color: var(--ink); }
.v2 .v2u-step.is-current .v2u-step-n { background: var(--ink); color: #fff; }
.v2 a.v2u-step:hover { border-color: var(--ink); }

/* UX-7: trappan fortsätter med 9–12 år och 13+ */
.v2u-lv-6 { --sb: #F2F0EC; --sf: #16181D; }
.v2u-lv-7 { --sb: #ECEBE7; --sf: #16181D; }
.v2u-stairs { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.v2u-stairs > li:nth-child(1) > a { min-height: 290px; }
.v2u-stairs > li:nth-child(2) > a { min-height: 315px; }
.v2u-stairs > li:nth-child(3) > a { min-height: 340px; }
.v2u-stairs > li:nth-child(4) > a { min-height: 365px; }
.v2u-stairs > li:nth-child(5) > a { min-height: 390px; }
.v2u-stairs > li:nth-child(6) > a { min-height: 415px; }
.v2u-stairs > li:nth-child(7) > a { min-height: 440px; }
@media (min-width: 1080px) {
    .v2u-stairs .v2u-stair > a { padding: 1rem .8rem .9rem; }
    .v2 .v2u-stair h3 { font-size: 1.05rem; hyphens: manual; }
    .v2u-stair-does { font-size: .82rem; }
}
.v2 .v2u .v2u-stepper { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1079px) {
    .v2u-stairs { grid-template-columns: 1fr; }
    .v2u-stairs > li:nth-child(6) { margin-left: 2.5rem; }
    .v2u-stairs > li:nth-child(7) { margin-left: 3rem; }
}
/* Kategorisidan (ligger utanför .v2u): vänsterställda kort som på övriga listor */
.v2 .v2u-catpage .book-info, .v2 .v2u-catpage .book-info .author { text-align: left; }
.v2 .v2u-catpage .book-info .author { margin-inline: 0; font-family: var(--font-body); }

/* R3-11: fyra fakta i en rad blir för trångt i smal mobil, gör 2×2 */
@media (max-width: 420px) {
    .v2 .v2u .v2u-unifacts:has(> div:nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2 .v2u .v2u-unifacts:has(> div:nth-child(4)) > div + div { border-left: 0; }
    .v2 .v2u .v2u-unifacts:has(> div:nth-child(4)) > div:nth-child(even) { border-left: 1px solid var(--line); }
    .v2 .v2u .v2u-unifacts:has(> div:nth-child(4)) > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Kategorisidan: underkategorier som ikonkort (mockup vy 4 och D2), 2 i mobil, upp till 6 i rad på dator */
.v2-subcat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1.1rem 0 .5rem; }
@media (min-width: 560px) { .v2-subcat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .v2-subcat-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.v2-subcat-tiles .v2-tile { padding: .9rem .5rem .8rem; overflow-wrap: anywhere; }

/* Bredd-svep (2026-09-28): läsytor äger sin sektions bredd.
   Serielistans intro (flera stycken) i två spalter, tipsen i tre kolumner,
   universums text fyller sin spalt, barnsidans intro och faktaruta sida vid sida. */
.v2 .v2u-universe .universe-text,
.v2 .v2u-unitop .collection-intro { max-width: none; }
@media (min-width: 1080px) {
    .v2 .v2u-series > .v2u-read { max-width: none; columns: 2; column-gap: 3.5rem; }
    .v2 .v2u-series > .v2u-read > p:first-child { margin-top: 0; }
    .v2 .v2u-tips ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
    .v2 .v2u-barn > .v2u-read:has(+ .barn-fact) { float: left; width: calc(50% - 1.5rem); max-width: none; margin-top: 0; }
    .v2 .v2u-barn > .v2u-read + .barn-fact { max-width: none; margin-left: calc(50% + 1.5rem); }
    .v2 .v2u-barn > .v2u-read + .barn-fact + * { clear: both; }
}
/* Nivåsidorna: faktarutan ensam tar hela bredden, med "Läs och lyssna"-rutan delar de rad på dator */
.v2 .v2u-barnlevel > .barn-fact,
.v2 .v2u-barnlevel > .barn-aside,
.v2 .v2u-recaphow p { max-width: none; }
@media (min-width: 1080px) {
    .v2 .v2u-barnlevel > .barn-fact:has(+ .barn-aside) { float: left; width: calc(50% - 1.5rem); }
    .v2 .v2u-barnlevel > .barn-fact + .barn-aside { margin-left: calc(50% + 1.5rem); }
    .v2 .v2u-barnlevel > .barn-fact + .barn-aside + * { clear: both; }
}

/* ==========================================================================
   Alignment-svep (2026-09-28): rubriker och värden i linje, inga ensamma kort,
   etiketter i en egen kolumn, metaraden på samma höjd i varje rad.
   ========================================================================== */

/* Vägar in (hubben): rubriken överst i varje kort, så raderna linjerar */
html.v2 .v2u-way { align-items: flex-start; }
html.v2 .v2u-way .v2-tile-icon { align-self: flex-start; }

/* Genrerutor: antalet ligger alltid längst ner, oavsett hur många rader namnet tar */
html.v2 .v2u-genre b { margin-bottom: .15rem; }
html.v2 .v2u-genre .v2u-n { margin-top: auto; }
/* Sista raden fylls: en ensam ruta eller ett par sträcks över de tomma kolumnerna */
@media (min-width: 1080px) {
    html.v2 .v2u-genre:last-child:nth-child(5n+4) { grid-column: span 2; }
    html.v2 .v2u-genre:last-child:nth-child(5n+3) { grid-column: span 3; }
    html.v2 .v2u-genre:last-child:nth-child(5n+2) { grid-column: span 4; }
    html.v2 .v2u-genre:last-child:nth-child(5n+1) { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
    html.v2 .v2u-genre:last-child:nth-child(3n+2) { grid-column: span 2; }
    html.v2 .v2u-genre:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}

/* Alla kategorier: korten staplas i spalter i stället för att sträckas till radens
   högsta kort (stora tomma ytor under korta kort) */
@media (min-width: 720px) {
    html.v2 .v2u-catgrid { display: block; columns: 2; column-gap: 1rem; }
    html.v2 .v2u-catgrid > .v2u-cat { break-inside: avoid; margin-bottom: 1rem; }
}
@media (min-width: 1080px) { html.v2 .v2u-catgrid { columns: 3; } }

/* Underkategorier: rutorna fyller raden jämnt efter hur många de är */
@media (min-width: 560px) {
    html.v2 .v2-subcat-tiles:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.v2 .v2-subcat-tiles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    html.v2 .v2-subcat-tiles:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html.v2 .v2-subcat-tiles:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    html.v2 .v2-subcat-tiles:has(> :nth-child(7):last-child),
    html.v2 .v2-subcat-tiles:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    html.v2 .v2-subcat-tiles:has(> :nth-child(9):last-child),
    html.v2 .v2-subcat-tiles:has(> :nth-child(10):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Bokrutnät (taggar, kategorier, universum, nya): kolumnantal efter antal böcker,
   så en grupp på 6, 7 eller 8 inte lämnar en eller två ensamma böcker på sista raden */
@media (min-width: 1080px) {
    html.v2 .v2u .books-grid:has(> .book-item:nth-child(6):last-child),
    html.v2 .v2u-catpage .books-grid:has(> .book-item:nth-child(6):last-child),
    html.v2 .v2u .books-grid:has(> .book-item:nth-child(11):last-child),
    html.v2 .v2u-catpage .books-grid:has(> .book-item:nth-child(11):last-child),
    html.v2 .v2u .books-grid:has(> .book-item:nth-child(12):last-child),
    html.v2 .v2u-catpage .books-grid:has(> .book-item:nth-child(12):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    html.v2 .v2u .books-grid:has(> .book-item:nth-child(7):last-child),
    html.v2 .v2u-catpage .books-grid:has(> .book-item:nth-child(7):last-child),
    html.v2 .v2u .books-grid:has(> .book-item:nth-child(8):last-child),
    html.v2 .v2u-catpage .books-grid:has(> .book-item:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 720px) and (max-width: 1079px) {
    html.v2 .v2u .books-grid:has(> .book-item:nth-child(4):last-child),
    html.v2 .v2u-catpage .books-grid:has(> .book-item:nth-child(4):last-child),
    html.v2 .v2u .books-grid:has(> .book-item:nth-child(7):last-child),
    html.v2 .v2u-catpage .books-grid:has(> .book-item:nth-child(7):last-child),
    html.v2 .v2u .books-grid:has(> .book-item:nth-child(8):last-child),
    html.v2 .v2u-catpage .books-grid:has(> .book-item:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Metaraden (år, del, speltid) nertill i kortet får fast höjd för två rader,
   så årtalet står på samma höjd i hela raden även när speltiden bryts ner */
@media (min-width: 720px) {
    html.v2 .v2u .books-grid .book-item .book-meta,
    html.v2 .v2u-catpage .books-grid .book-item .book-meta {
        min-height: 3.6rem; align-content: flex-start; row-gap: .4rem;
    }
}
/* Kortets författarrad ärver inte boksidans stora marginal (v1-regeln .book-content .author) */
html.v2 .v2u .book-item .book-content .author,
html.v2 .v2u-catpage .book-item .book-content .author { margin-bottom: 0; }

/* Filter och "I urvalet": etiketten i en egen kolumn, valen bryts under varandra
   i stället för att hamna under etiketten */
@media (min-width: 720px) {
    html.v2 .v2-catfilters-row { flex-direction: column; flex-wrap: nowrap; gap: .5rem; }
    html.v2 .v2-cf-group,
    html.v2 .v2u-toc { position: relative; flex-wrap: wrap; padding-left: 6.5rem; }
    html.v2 .v2-cf-group > .v2-cf-lab,
    html.v2 .v2u-toc > .v2-cf-lab {
        position: absolute; left: 0; top: 0; height: 44px; margin: 0;
        display: flex; align-items: center;
    }
}

/* Taggkort med beskrivning: luft mellan namnet och antalet */
html.v2 .v2u-tagdesc b .v2-chip-count { margin-left: .4rem; }

/* Stämningskort: fläkt och text överst, så namnen linjerar i raden; sista raden fylls */
html.v2 .v2u-mood { align-items: flex-start; }
@media (min-width: 1080px) {
    html.v2 .v2u-moods > .v2u-mood:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
    html.v2 .v2u-moods > .v2u-mood:last-child:nth-child(4n+2),
    html.v2 .v2u-moods > .v2u-mood:nth-last-child(2):nth-child(4n+1),
    html.v2 .v2u-moods > .v2u-mood:last-child:nth-child(4n+3) { grid-column: span 2; }
}
@media (max-width: 719px) {
    html.v2 .v2u-moods > .v2u-mood:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Serielistan: skiljelinjen över "Fler filter" går över hela sidopanelen */
html.v2 .v2u-morefilters { align-self: stretch; width: 100%; }

/* Universumlistan: ett udda sista universum tar hela bredden */
@media (min-width: 1080px) {
    html.v2 .v2u-unigrid > .v2u-uni:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Universumsidan: "Börja här" linjerar med sidhuvudets överkant,
   seriens antal och årtal på samma baslinje, alternativa spår fyller raden */
@media (min-width: 1080px) {
    html.v2 .v2u-unitop .v2u-start { margin-top: 0; }
}
html.v2 .v2u-stop-meta { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
html.v2 .v2u-pathgrid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Återblickar: "Läs återblicken" nertill i kortet, i linje över raden;
   4 och 7–8 delar fördelas jämnt i stället för en ensam på sista raden */
html.v2 .v2u .v2u-recapitem .recent-body { display: flex; flex-direction: column; align-self: stretch; }
html.v2 .v2u .v2u-recapitem .recent-more { margin-top: auto; }
@media (min-width: 1080px) {
    html.v2 .v2u-recaplist:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.v2 .v2u-recaplist:has(> li:nth-child(7):last-child),
    html.v2 .v2u-recaplist:has(> li:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Barnnivåerna: långa stegnamn bryts med avstavning i stället för att klippas */
html.v2 .v2u-step { min-width: 0; }
@media (min-width: 1080px) {
    /* Sju steg i rad: numret ovanför namnet så hela namnet får plats utan att brytas mitt i ordet */
    html.v2 .v2u-step { flex-direction: column; align-items: flex-start; gap: .4rem; padding: .7rem .75rem; }
}
html.v2 .v2u-step-text b { overflow-wrap: break-word; }
/* Barnfiltret: antalet böcker står i höjd med chipsraden */
html.v2 .v2u .barn-filter-actions { min-height: 44px; display: flex; align-items: center; }
html.v2 .v2u .v2u-recapitem .recent-body > .v2-flag,
html.v2 .v2u .v2u-recapitem .recent-body > .recent-more { align-self: flex-start; }