/* ==========================================================================
   Bokari v2 — "Bokari i fickan"
   Laddas efter de gamla stilarken när design_v2() är på (html.v2).
   Mockuper: docs/mockups/app-redesign/.

   Färgernas jobb:
   - Grönt (--cta) betyder pengar: varje lyssna-, prova- och köpknapp. Aldrig annat.
   - Svart (--ink) är för dig själv: konto, spara, aktiva val.
   - Rost (--accent) är Bokari: logga, aktiv flik, "Visa alla"-länkar.
   ========================================================================== */

html.v2 {
    /* Palett: vitt papper, bläck, en köpfärg */
    --paper: #FFFFFF;
    --card: #FFFFFF;
    --wash: #F5F4F1;
    --lamp: #F7F3EE;          /* läslampa: dagens bok, hörnan, utvalt */
    --ink: #16181D;
    --ink-soft: #62666E;
    --line: #ECEBE7;
    --line-strong: #DAD9D5;
    --accent: #B04A25;
    --accent-deep: #8F3A1B;
    --accent-wash: #F8ECE7;
    /* Det gamla gröna var UI-färg; i v2 får bara köp vara grönt, så UI blir bläck */
    --green: #16181D;
    --green-deep: #16181D;
    --green-wash: #F5F4F1;
    --gold: #B8862B;
    --gold-wash: #F7F3EE;
    --gold-line: #ECEBE7;
    --series: #34427A;
    --series-wash: #EDEFF6;

    /* Köpfärgen */
    --cta: #0A7B58;
    --cta-bright: #0C8A63;
    --cta-deep: #075C42;
    --cta-glow: rgba(10, 123, 88, .28);
    --cta-wash: #E6F4EE;

    --font-display: "Literata", Georgia, "Times New Roman", serif;
    --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-read: "Literata", Georgia, serif;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(20, 22, 28, .06), 0 2px 8px rgba(20, 22, 28, .05);
    --shadow-md: 0 10px 30px -12px rgba(20, 22, 28, .22);
    --shadow-lift: 0 16px 40px -14px rgba(20, 22, 28, .28);

    --tabbar-h: 0px;
    --measure: 34em;              /* ~65 tecken i Literata */
    --control-line: #D2D1CC;      /* kant på fält och chips, minst 3:1 med fyllnaden */

    /* Rubrikskala: listor/hubbar, detaljsidor, sektioner, rubriker i kort */
    --h1-page: clamp(2rem, 6vw, 2.75rem);
    --h1-detail: clamp(1.8rem, 5vw, 2.5rem);
    --h2-section: clamp(1.5rem, 4vw, 1.75rem);
    --h2-card: 1.2rem;
}

/* --------------------------------------------------------------------------
   Grund
   -------------------------------------------------------------------------- */

.v2 body {
    background: #FFFFFF;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.v2 body::before { display: none; }          /* inget papperskorn på vitt */

.v2 h1, .v2 h2, .v2 h3, .v2 h4 { letter-spacing: -.01em; text-wrap: balance; }
.v2 h1 { font-weight: 700; font-size: var(--h1-page); }
.v2 h2 { font-size: var(--h2-section); }
.v2 .book-info > h1, .v2-series .page-header h1, .v2-recap .page-header h1, .v2 .news-article-header h1,
.v2 .v2f-dhead h1, .v2 .v2-acc-title, .v2 .v2-prof-id h1, .v2 .v2-circle-id h1 { font-size: var(--h1-detail); }

.v2 a { color: var(--ink); }
.v2 a:hover { color: var(--accent); }

.v2 ::selection { background: #FBF0C9; color: var(--ink); }

.v2 :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.v2 .site-main { padding: 1.25rem 0 4rem; }

/* Sektionsrubriker: ingen dubbellinje, luft i stället */
.v2 .featured-section > h2::after,
.v2 .shelf-section > h2::after,
.v2 .section-header h2::after { display: none; }
.v2 .featured-section > h2,
.v2 .shelf-section > h2,
.v2 .section-header h2 { padding-bottom: 0; }

/* Sektionsrubrik med länk till höger: h2 i --h2-section, länken rost
   (blå när målet är en serie, .v2u-serlink/.v2h-serlink) */
.v2-sec-head, .v2 .section-header {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem;
}
.v2-sec-head h2, .v2-sec-head h3, .v2 .section-header h2 { flex: 0 1 auto; min-width: 0; margin: 0; text-align: left; }
.v2 .section-link, .v2 a.v2-endrow-all { color: var(--accent); font-weight: 700; font-size: .92rem; white-space: nowrap; }

/* Knappar: svart är standard, grönt bara för köp */
.v2 .btn { border-radius: 14px; letter-spacing: 0; padding: .75rem 1.3rem; }
.v2 .btn-primary { background: var(--ink); color: #fff; box-shadow: none; }
.v2 .btn-primary:hover { background: #000; color: #fff; transform: none; box-shadow: none; }
.v2 .btn-secondary { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.v2 .btn-secondary:hover { background: var(--wash); transform: none; }

.v2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font: 700 1rem/1.2 var(--font-body);
    border-radius: 14px; padding: .9rem 1.2rem;
    border: 1.5px solid transparent; cursor: pointer; text-decoration: none; text-align: center;
}
.v2-btn svg { width: 18px; height: 18px; }
.v2-btn-ink { background: var(--ink); color: #fff; }
.v2-btn-ink:hover { background: #000; color: #fff; }
.v2-btn-go { background: var(--cta); color: #fff; }
.v2-btn-go:hover { background: var(--cta-deep); color: #fff; }

/* Brödsmulor */
.v2 .breadcrumbs { border-top: 0; padding: .75rem 0 0; font-size: .84rem; }
.v2 .breadcrumb-item a { color: var(--ink-soft); }
.v2 .breadcrumb-separator { color: #B9BBC0; }

/* --------------------------------------------------------------------------
   Logga (inline-SVG:n har färger som attribut, CSS vinner över dem)
   -------------------------------------------------------------------------- */

.v2 .site-logo [stroke="#33261A"] { stroke: var(--ink); }
.v2 .site-logo [fill="#FDF9F0"] { fill: #fff; }
.v2 .site-logo text { font-family: var(--font-display); font-weight: 700; fill: var(--ink); letter-spacing: 0; }
.v2 .site-logo tspan { fill: var(--accent); }

/* --------------------------------------------------------------------------
   Sidhuvud
   -------------------------------------------------------------------------- */

.v2-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
    padding-top: env(safe-area-inset-top, 0px);
}

.v2-header-row {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    min-height: 72px;
}

.v2-brand { display: flex; align-items: center; flex: 0 0 auto; }
.v2-brand .site-logo { width: 158px; height: auto; display: block; }

.v2-search { flex: 1; max-width: 520px; }
.v2-header .search-wrap { flex: 1; max-width: 520px; position: relative; }
.v2-header .search-wrap > .v2-search { max-width: none; }

/* Sökfältet (överstyr den gamla pill-formen) */
.v2 .v2-search.search-box {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: 0 .9rem;
    height: 48px;
    background: var(--wash);
    border: 1.5px solid var(--control-line);
    border-radius: 14px;
    box-shadow: none;
    overflow: visible;
}
.v2 .v2-search.search-box:focus-within { background: #fff; border-color: var(--ink); }
.v2-search-icon { display: flex; color: var(--ink-soft); }
.v2-search-icon svg { width: 20px; height: 20px; }
.v2 .v2-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    font: 400 1rem var(--font-body);
    color: var(--ink);
    box-shadow: none;
}
.v2 .v2-search input::placeholder { color: var(--ink-soft); opacity: 1; }
.v2 .v2-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.v2-kbd {
    font: 600 .72rem var(--font-body);
    padding: .1rem .45rem;
    border-radius: 6px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink-soft);
}

.v2-nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.v2-nav a {
    display: flex; align-items: center; gap: .4rem;
    font-weight: 600; font-size: .94rem;
    color: #3C3F45;
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
}
.v2-nav a svg { width: 18px; height: 18px; }
.v2-nav a:hover { color: var(--ink); }
.v2-nav a.is-active { color: var(--ink); border-bottom-color: var(--accent); }

.v2-search-toggle {
    display: none;
    width: 44px; height: 44px;
    margin-left: auto;
    border: 0; border-radius: 50%;
    background: var(--wash);
    color: var(--ink);
    align-items: center; justify-content: center;
    cursor: pointer;
}
.v2-search-toggle svg { width: 21px; height: 21px; }

/* Sökförslagen */
.v2 .search-suggest { border-radius: 16px; border-color: var(--line); box-shadow: 0 18px 40px -12px rgba(20, 22, 28, .25); }
.v2 .suggest-group { background: #fff; font-weight: 700; letter-spacing: .1em; padding-top: .8rem; }
.v2 .suggest-item:hover, .v2 .suggest-item.active { background: var(--wash); }


.v2-tile {
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    padding: 1rem .5rem .9rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    font-weight: 600; font-size: .9rem; line-height: 1.2; text-align: center;
    color: var(--ink);
    transition: border-color .15s ease, transform .15s ease;
}
.v2-tile:hover { border-color: var(--line-strong); color: var(--ink); transform: translateY(-1px); }
.v2-tile-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--wash); color: var(--ink); }
.v2-tile-icon svg { width: 26px; height: 26px; }

/* Pastell på startsidan och Upptäck (Fredrik 2026-09-27); annars neutral --wash */
.v2-home .t-ser, .v2u .t-ser { background: #EDEFF6; color: #34427A; }
.v2-home .t-lj, .v2u .t-lj  { background: #F3EDF6; color: #6A3C7C; }
.v2-home .t-ny, .v2u .t-ny  { background: #FBF0E4; color: #9A5518; }
.v2-home .t-ab, .v2u .t-ab  { background: #EAF1F4; color: #285C70; }
.v2-home .t-pr, .v2u .t-pr  { background: #F7ECF1; color: #8D365A; }
.v2-home .t-fo, .v2u .t-fo  { background: #F8ECE7; color: #A0432A; }
.v2-home .t-st, .v2u .t-st  { background: #F6F1DE; color: #7A6212; }
.v2-home .t-all, .v2u .t-all { background: #F1F1EE; color: #3E4046; }

.v2-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; }
/* Chip (UI-24): valt = bläck, serielänk = --series, antal i .v2-chip-count.
   Äldre klasser (sub-chip, filter-chip, ax-chip m.fl.) delar regeln. */
.v2-chip, .v2 .sub-chip, .v2 .filter-chip span, .v2 .ax-chip, .v2 .tag-view-btn, .v2 .tag.mood,
.v2 .book-tags .tag, .v2 .reading-pace, .v2 .price-filter, .v2-lj-picker-chips button, .v2 .v2u-serjump a {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 44px; box-sizing: border-box;
    padding: .5rem .95rem;
    border: 1px solid var(--control-line);
    border-radius: 999px;
    background: #fff;
    font: 600 .88rem/1.2 var(--font-body); white-space: nowrap; text-decoration: none;
    color: var(--ink); cursor: pointer;
}
.v2-chip svg { width: 17px; height: 17px; }
.v2-chip:hover, .v2 .sub-chip:hover, .v2 .filter-chip:hover span, .v2 .ax-chip:hover, .v2 .tag-view-btn:hover,
.v2 a.tag.mood:hover, .v2 .book-tags .tag:hover, .v2 .reading-pace:hover, .v2 .price-filter:hover,
.v2-lj-picker-chips button:hover, .v2 .v2u-serjump a:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.v2-chip.is-on, .v2 .filter-chip input:checked + span, .v2 .ax-chip.is-active, .v2 .tag-view-btn.is-active,
.v2 .reading-pace.active, .v2 .price-filter.active, .v2-lj-picker-chips button[aria-pressed="true"] {
    background: var(--ink); border-color: var(--ink); color: #fff;
}
.v2-chip.is-on:hover, .v2 .ax-chip.is-active:hover { color: #fff; background: #000; }
.v2 .filter-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.v2-chip--series, .v2 a.v2-chip--series { background: var(--series-wash); border-color: transparent; color: var(--series); }
.v2 a.v2-chip--series:hover { background: var(--series-wash); border-color: var(--series); color: var(--series); }
.v2-chip-count, .v2 .sub-chip-count, .v2 .sub-chip:hover .sub-chip-count, .v2 .ax-chip-count {
    margin-left: .1rem; padding: 0; background: none; color: var(--ink-soft);
    font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.v2-chip.is-on .v2-chip-count, .v2 .ax-chip.is-active .ax-chip-count { color: #C9CBD1; }



/* --------------------------------------------------------------------------
   Sidfot
   -------------------------------------------------------------------------- */

.v2 .site-footer { background: var(--wash); color: var(--ink-soft); margin-top: 4rem; }
.v2 .footer-section h4 { color: var(--ink); letter-spacing: .1em; }
.v2 .footer-section p { color: var(--ink-soft); }
.v2 .footer-section a { color: var(--ink); }
.v2 .footer-section a:hover { color: var(--accent); }
.v2 .footer-logo [stroke="#33261A"] { stroke: var(--ink); }
.v2 .footer-logo [fill="#FDF9F0"] { fill: #fff; }
.v2 .footer-logo text { fill: var(--ink); }
.v2 .footer-logo tspan { fill: var(--accent); }
.v2 .footer-bottom { border-top-color: var(--line-strong); color: var(--ink-soft); }
.v2 .footer-bottom p { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Flikraden (bara mobil)
   -------------------------------------------------------------------------- */

.v2-tabbar { display: none; }

/* --------------------------------------------------------------------------
   Installationsarket (webbappen)
   -------------------------------------------------------------------------- */

.v2-install { position: fixed; inset: 0; z-index: 1000; }
.v2-install[hidden] { display: none; }
.v2-install-scrim { position: absolute; inset: 0; background: rgba(14, 15, 18, .45); }
.v2-install-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 26px 26px 0 0;
    padding: .7rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
    display: grid; gap: .9rem;
    max-width: 560px; margin: 0 auto;
    animation: v2-sheet-in .28s ease-out;
}
@keyframes v2-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .v2-install-sheet { animation: none; } }
.v2-install-grab { width: 40px; height: 5px; border-radius: 5px; background: #DADAD6; justify-self: center; }
.v2-install-app { display: flex; align-items: center; gap: .8rem; }
.v2-install-app img { width: 56px; height: 56px; border-radius: 15px; border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(20, 22, 28, .12); }
.v2-install-app b { display: block; font-size: 1rem; }
.v2-install-app span { font-size: .85rem; color: var(--ink-soft); }
.v2-install-title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: 0; }
.v2-install-list { list-style: none; display: grid; gap: .6rem; font-size: .95rem; }
.v2-install-list li { display: flex; gap: .65rem; align-items: center; }
.v2-install-list svg { width: 19px; height: 19px; color: var(--accent); flex: 0 0 auto; }
.v2-install [data-install-go] { width: 100%; }
.v2-install [data-install-go][hidden] { display: none; }
.v2-install-ios { margin: 0; padding: .9rem 1rem; border-radius: 14px; background: var(--wash); font-size: .95rem; line-height: 1.5; }
.v2-install-ios[hidden] { display: none; }
.v2-install-share { display: inline-flex; vertical-align: -3px; }
.v2-install-share svg { width: 18px; height: 18px; }
.v2-install-later { border: 0; background: none; font: 600 .95rem var(--font-body); color: var(--ink-soft); padding: .3rem; min-height: 44px; cursor: pointer; }
html.v2-install-open { overflow: hidden; }

/* ==========================================================================
   Surfplatta: under 1080 px döljs textetiketterna i menyn
   ========================================================================== */

@media (max-width: 1079px) {
    .v2-header-row { gap: 1.1rem; }
    .v2-nav { gap: 1rem; }
    .v2-nav a span { display: none; }
    .v2-nav a svg { width: 22px; height: 22px; }
    .v2-kbd { display: none; }
}

/* ==========================================================================
   Mobil: under 720 px blir sajten en app
   ========================================================================== */

@media (max-width: 719px) {
    html.v2 { --tabbar-h: 64px; }
    .v2 body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
    .v2 .container { width: calc(100% - 2rem); }

    .v2-header-row { flex-wrap: wrap; gap: .45rem .75rem; min-height: 60px; }
    .v2-brand .site-logo { width: 132px; }
    .v2-nav { display: none; }

    /* Startsidan: sökfältet alltid framme. Undersidor: bakom sökknappen. */
    .v2-header .search-wrap,
    .v2-header .v2-search { flex: 1 0 100%; max-width: none; order: 3; }
    .v2-sub .v2-header .search-wrap,
    .v2-sub .v2-header > .v2-header-row > .v2-search { display: none; }
    .v2-sub .v2-header.is-search-open .search-wrap,
    .v2-sub .v2-header.is-search-open > .v2-header-row > .v2-search { display: flex; }
    .v2-sub .v2-search-toggle { display: inline-flex; }
    .v2 .v2-search.search-box { height: 52px; margin-bottom: .75rem; }
    .v2-home .v2-header { position: relative; border-bottom: 0; }

    .v2 .site-main { padding-top: .75rem; }
    .v2 .breadcrumbs { padding-top: .5rem; }

    .v2-tile { border: 0; padding: 0; gap: .45rem; font-size: .76rem; }
    .v2-tile:hover { transform: none; }
    .v2-tile-icon { width: 60px; height: 60px; border-radius: 20px; }

    .v2-chips {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin: 0 -1rem; padding: 1.25rem 1rem .25rem;
    }
    .v2-chips::-webkit-scrollbar { display: none; }

    .v2-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: saturate(1.4) blur(10px);
        backdrop-filter: saturate(1.4) blur(10px);
        border-top: 1px solid var(--line);
        padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .v2-tabbar a {
        flex: 1;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        font-size: .68rem; font-weight: 600; color: #5E6269;
        padding-top: 4px;
    }
    .v2-tabbar a svg { width: 23px; height: 23px; }
    .v2-tabbar a.is-active { color: var(--ink); }
    .v2-tabbar a.is-active svg { stroke-width: 2.1; }
    .v2-tabbar a.is-active::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-top: 1px; }
    .v2-header-row { padding-top: .35rem; }
}

/* Installerad som app: ingen extra luft i toppen från webbläsaren */
@media (display-mode: standalone) {
    .v2-header { padding-top: env(safe-area-inset-top, 0px); }
}

/* ==========================================================================
   Boksidan: var får jag tag på boken. Grön knapp på varje val, bästa först.
   ========================================================================== */

.v2 .price-compare,
.v2 .price-compare.listen-compare {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.35rem 1.5rem 1rem;
}
.v2 .cta-ico { display: none; }
.v2 .price-compare-header h2 { font-size: var(--h2-card); }
.v2 .price-row { border-bottom-color: var(--line); padding: .8rem 0; }
.v2 .price-store strong { font-weight: 700; }
.v2 .store-logo { border-radius: 8px; }
.v2 .price-amount { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Lyssna/köp-knappen (UI-13): samma gröna knapp i prisrutan, köplistorna,
   tjänsteraderna (listen_rows_html) och butikstabellen. En höjd, en radie,
   hörlursikon på "Lyssna", "Köp" för butik. */
.v2-pcard-btn, .v2 .store-button, .v2 .buy-compare .store-button, .v2 .v2-lr-btn, .v2 .store-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 44px; min-width: 5.5rem; box-sizing: border-box;
    padding: .55rem 1rem; border: 0; border-radius: 12px;
    background: var(--cta); color: #fff; box-shadow: none;
    font: 700 .92rem/1.2 var(--font-body); white-space: nowrap; text-align: center; text-decoration: none;
}
.v2-pcard-btn:hover, .v2 .store-button:hover, .v2 .buy-compare .store-button:hover, .v2 .v2-lr-btn:hover, .v2 .store-btn:hover {
    background: var(--cta-deep); color: #fff; filter: none; transform: none; box-shadow: none;
}
.v2-pcard-btn svg, .v2 .store-button svg, .v2 .v2-lr-btn svg { width: 16px; height: 16px; flex: none; }
.v2 a.v2-pcard-btn, .v2 a.v2-lr-btn, .v2 a.store-btn { color: #fff; }
.v2 .store-btn-arrow { display: none; }

.v2 .price-compare-footer { color: var(--ink-soft); font-size: .82rem; }

@media (max-width: 719px) {
    .v2 .price-compare,
    .v2 .price-compare.listen-compare { padding: 1.1rem 1rem .75rem; border-radius: 18px; }
    .v2 .price-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: .15rem .75rem;
    }
    .v2 .price-row > .price-store  { grid-column: 1; grid-row: 1; }
    .v2 .price-row > .edition-format { grid-column: 1; grid-row: 2; justify-self: start; }
    .v2 .price-row > .price-meta   { grid-column: 1; grid-row: 3; }
    .v2 .price-row > .stock-status { display: none; }
    .v2 .price-row > .price-amount { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
    .v2 .price-row > .store-button { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
    .v2 .listen-compare .price-row > .edition-format { display: none; }
}

/* Klibbiga köplisten: köp är grön kontur, lyssna fylld grön */
.v2 .sticky-cta { display: flex; flex-direction: column; background: rgba(255, 255, 255, .98); border-color: var(--line); border-radius: 18px; box-shadow: 0 14px 36px -14px rgba(20, 22, 28, .35); }
.v2 .scta-btn { border-radius: 12px; }
.v2 .scta-buy { background: #fff; color: var(--cta-deep); border: 1.5px solid var(--cta); }
.v2 .scta-buy:hover { background: var(--cta-wash); color: var(--cta-deep); }
.v2 .scta-listen { background: var(--cta); color: #fff; box-shadow: none; }
.v2 .scta-listen:hover { background: var(--cta-deep); color: #fff; filter: none; box-shadow: none; }
.v2 .scta-close:hover { background: var(--wash); }

/* ==========================================================================
   Texter (mockup: bokari-texter-mockup.html)
   Långa texter i Literata, vänsterställda, högst ~65 tecken breda.
   ========================================================================== */

/* Bokaris hörna: läslampe-yta, loggans bok som signatur, ingen kantlinje */
.v2 .editorial-box {
    background: var(--lamp);
    border: 0;
    border-radius: 22px;
    padding: 1.5rem 1.6rem 1.3rem;
}
.v2 .editorial-box h2 { display: flex; align-items: center; gap: .5rem; }
.v2 .editorial-box h2 span {
    display: inline-block; width: 26px; height: 26px; margin: 0; font-size: 0;
    background: url("../images/app/mark.svg") center / contain no-repeat;
}
.v2 .editorial-box p {
    font-family: var(--font-read);
    font-style: normal;
    font-size: 1.08rem;
    line-height: 1.72;
    max-width: var(--measure);
    text-align: left;
}


/* Formatetiketter: ljusa, inte svarta pill-knappar */
.v2 .edition-format { background: var(--wash); color: var(--ink); letter-spacing: .03em; }

/* ==========================================================================
   Boksidan på dator: omslag + bok i vänster del, klibbig prisruta till höger.
   Rutan spänner över alla rader i .book-detail så den följer med hela vägen
   ner, och ersätter den klibbiga köplisten (som döljs på dator).
   ========================================================================== */

.v2-pcard { display: none; }
.v2-pcard h2 { font-size: var(--h2-card); margin: 0 0 1rem; }
.v2-pcard-group { display: flex; justify-content: space-between; align-items: baseline; margin: 1.1rem 0 .2rem; }
.v2-pcard-group:first-of-type { margin-top: 0; }
.v2-pcard-note { font-size: .8rem; color: var(--ink-soft); }
/* Erbjudanderaden (UI-13): logga, namn, gratisperiod eller format, pris, grön knapp.
   Samma rad i prisrutan (.v2-pcard-list) och i tjänsteraderna (.v2-listen-rows). */
.v2-pcard-list, .v2-listen-rows { list-style: none; margin: 0; padding: 0; }
.v2-pcard-list li, .v2-listen-rows li {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center; gap: .75rem;
    padding: .75rem 0; border-bottom: 1px solid var(--line);
}
.v2-pcard-list li { grid-template-columns: 64px minmax(0, 1fr) auto auto; row-gap: .1rem; }
.v2-pcard-list li:last-child, .v2-listen-rows li:last-child { border-bottom: 0; }
.v2-pcard-list img.store-logo, .v2-listen-rows img.store-logo, .v2 .price-store img.store-logo {
    width: 64px; height: 26px; object-fit: contain; object-position: left center; border-radius: 0;
}
.v2-pcard-name, .v2-lr-name { min-width: 0; line-height: 1.3; }
/* Smal ruta: namnet bredvid loggan, gratisperioden på egen rad under båda */
.v2-pcard-name { display: contents; }
.v2-pcard-name > b { grid-column: 2; grid-row: 1; }
.v2-pcard-name > span { grid-column: 1 / 3; grid-row: 2; }
.v2-pcard-name > b, .v2-lr-name > b { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-pcard-name span, .v2-lr-name > span { font-size: .8rem; color: var(--ink-soft); }
.v2-pcard-name .trial, .v2-lr-name .trial, .v2 .price-meta .trial { color: var(--cta-deep); font-weight: 700; }
.v2-pcard-price { grid-column: 3; grid-row: 1 / span 2; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-pcard-btn { grid-column: 4; grid-row: 1 / span 2; }
.v2-pcard-more { display: inline-block; margin-top: .6rem; font-size: .88rem; font-weight: 700; color: var(--accent); }
.v2-pcard-disclosure { margin: .9rem 0 0; font-size: .74rem; color: var(--ink-soft); line-height: 1.4; }

/* Tillgänglighetschipsen: ikon i stället för emoji */
.v2 .avail-chip svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: .35rem; }

@media (min-width: 1080px) {
    .v2 .book-detail {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        column-gap: 3rem;
        align-items: start;
    }
    .v2 .book-detail > * { grid-column: 1; min-width: 0; }
    .v2 .book-detail > .v2-pcard {
        display: block;
        grid-column: 2;
        grid-row: 1 / span 40;
        position: sticky;
        top: 96px;
        border: 1px solid var(--line);
        border-radius: 22px;
        padding: 1.3rem 1.3rem 1.1rem;
        background: #fff;
        box-shadow: 0 10px 30px rgba(20, 22, 28, .07);
    }
    .v2 .book-header { grid-template-columns: 220px minmax(0, 1fr); gap: 2.25rem; }
    .v2 .sticky-cta { display: none !important; }
}

/* ==========================================================================
   Seriesidan (mockup: vy 5 + Dator vy 3 + Texter vy 3)
   Mobil: rubrik, kort svar, lyssna-knapp, sedan läsordningen, sedan texten.
   Dator: rubrik/kort svar/knapp i en klibbig vänsterpanel, allt annat till höger.
   Ordningen styrs med order, så HTML:en (och SEO-ordningen) är orörd.
   ========================================================================== */

.v2-series { display: flex; flex-direction: column; }
.v2-series > * { order: 10; }
.v2-series > .page-header { order: 1; }
.v2-series > .series-reading-order { order: 2; }
.v2-series > .series-listen { order: 3; }
.v2-series > .collection-moods { order: 4; }
.v2-series > .collection-intro { order: 5; }

.v2-series .page-header {
    text-align: left;
    border-bottom: 0;
    padding: 0;
    margin-bottom: 1.5rem;
}
.v2-series .page-header h1 { line-height: 1.1; margin: .35rem 0 .35rem; }
.v2-series .page-header p { margin-inline: 0; }
.v2-series .page-header .entity-aliases { text-align: left; }
.v2-series .page-kicker { color: var(--ink-soft); }
.v2-series .series-status {
    font-size: .74rem; letter-spacing: .06em; text-transform: none;
    padding: .2rem .7rem; border-radius: 999px;
    background: var(--series-wash); color: var(--series);
}
.v2-series .series-status-dot { background: var(--series); animation: none; box-shadow: none; }

/* Omslagsfläkten ovanför rubriken */
.v2-fan { display: block; position: relative; height: 128px; width: 150px; margin-bottom: .9rem; }
.v2-fan-cover {
    position: absolute; top: 0; width: 76px; aspect-ratio: 2 / 3;
    border-radius: 5px; overflow: hidden; background: var(--wash);
    box-shadow: 0 6px 16px rgba(20, 22, 28, .2);
}
.v2-fan-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-fan-cover picture { display: contents; }
.v2-fan-cover:nth-child(1) { left: 0; top: 10px; transform: rotate(-8deg); }
.v2-fan-cover:nth-child(2) { left: 30px; top: 4px; transform: rotate(-1deg); }
.v2-fan-cover:nth-child(3) { left: 60px; top: 0; transform: rotate(7deg); }

/* Kort svar: den mening Google och AI-motorerna citerar. Läslampa, inte serieblått;
   seriesidan har etikett och text som syskon, ljudguiden en .v2-answer runt båda. */
.v2-answer, .v2-answer-lab, .v2-series .page-description { background: var(--lamp); }
.v2-answer { margin: .5rem 0 1.5rem; padding: 1rem 1.1rem 1.05rem; border-radius: 16px; }
.v2 .v2-answer .v2-answer-lab { margin: 0 0 .3rem; background: none; }
.v2 .v2-answer p:not(.v2-answer-lab), .v2-series .page-description {
    margin: 0; font-family: var(--font-read); font-size: 1.02rem; font-weight: 400; line-height: 1.65;
    color: #25272C; max-width: var(--measure); text-align: left;
}
.v2-series .v2-answer-lab { margin: 1rem 0 0 !important; padding: .9rem 1rem 0; border-radius: 16px 16px 0 0; }
.v2-series .page-description { margin: 0 !important; padding: .35rem 1rem 1rem; border-radius: 0 0 16px 16px; }
.v2-series .v2-answer-lab, .v2-series .page-description { max-width: 36rem !important; }
.v2-series-cta { width: 100%; margin-top: 1rem; }
.v2-series-cta svg { width: 19px; height: 19px; }
.v2 a.v2-series-cta { color: #fff; }
.v2-series-cta-note { font-size: .8rem !important; color: var(--ink-soft); margin: .45rem 0 0 !important; text-align: center; }

/* Läsordningen: kompakt lista */
.v2-series .series-reading-order > h2 { text-align: left; }
.v2-series .series-order-lead { font-size: .95rem; }
.v2-series .series-timeline { max-width: none; padding-left: 0; margin: 1rem 0 0; }
.v2-series .series-timeline::before { display: none; }
.v2-series .timeline-item {
    display: grid;
    grid-template-columns: 28px 56px minmax(0, 1fr);
    gap: 0 .9rem;
    align-items: start;
    padding: .9rem 0;
    border-bottom: 1px solid var(--line);
}
.v2-series .timeline-marker {
    width: auto; height: auto; margin: .9rem 0 0;
    background: none; border: 0; box-shadow: none;
    color: var(--ink-soft); font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
.v2-series .timeline-cover { width: 56px; border-radius: 4px; box-shadow: 0 2px 8px rgba(20, 22, 28, .14); }
.v2-series .timeline-cover:hover { transform: none; }
.v2-series .timeline-content { padding-top: 0; }
.v2-series .timeline-content h3 { font-size: 1.08rem; margin-bottom: .1rem; }
.v2-series .timeline-start { background: var(--lamp); color: var(--accent); font-size: .66rem; }
.v2-series .timeline-meta { color: var(--ink-soft); font-weight: 500; font-size: .84rem; margin: 0 0 .2rem; }
.v2-series .timeline-summary {
    font-size: .88rem; margin-top: .3rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v2-series .timeline-audio { margin-top: .35rem; }

/* Texten om serien, i läsgrad */
.v2-series .collection-intro {
    margin: 2.5rem 0 1rem;
    max-width: 65ch;
    font-family: var(--font-read);
    font-size: 1.04rem; line-height: 1.72; color: #25272C;
}
.v2-series .collection-meta { text-align: left; font-family: var(--font-body); font-size: .76rem; }
.v2-series .collection-moods { margin: 2rem 0 0; justify-content: flex-start; }
.v2-series .series-listen { margin-inline: 0; }

@media (min-width: 1080px) {
    .v2-series {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        column-gap: 4rem;
        align-items: start;
    }
    .v2-series > * { grid-column: 2; min-width: 0; }
    .v2-series > .page-header {
        grid-column: 1;
        grid-row: 1 / span 40;
        position: sticky;
        top: 96px;
        margin: 0;
    }
    .v2-fan { height: 170px; width: 200px; }
    .v2-fan-cover { width: 104px; }
    .v2-fan-cover:nth-child(2) { left: 46px; }
    .v2-fan-cover:nth-child(3) { left: 90px; }
    .v2-series .series-reading-order > h2 { margin-top: 0; }
    .v2-series .timeline-item { grid-template-columns: 36px 64px minmax(0, 1fr); padding: 1rem 0; }
    .v2-series .timeline-cover { width: 64px; }
}
.v2 .series-listen { background: #fff; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 20px; }
.v2 .series-listen-cta .series-listen-button { border-radius: 12px; }

/* ==========================================================================
   Sidrubriker, bokkort och kategori/taggsidor (mockup vy 4 + Dator vy 2)
   ========================================================================== */

/* Rubriker vänsterställda på hela sajten, ingen dubbellinje */
.v2 .page-header {
    text-align: left;
    border-bottom: 0;
    padding: 0;
    margin-bottom: 1.75rem;
}
.v2 .page-header h1 { line-height: 1.1; }
.v2 .page-header p,
.v2 .page-description { margin-inline: 0; font-size: 1.05rem; }
.v2 .page-header .entity-aliases { text-align: left; }
.v2 .category-detail-subs { justify-content: flex-start; }
.v2 .category-detail-header .category-detail-icon {
    width: 56px; height: 56px; border-radius: 18px;
    background: var(--wash); color: var(--ink); box-shadow: none; border: 0;
    margin-bottom: .75rem;
}

/* Underkategorier och chips */


/* Intro på kategori- och taggsidor: läsyta, inget kort */
.v2 .tag-intro-card {
    max-width: 65ch;
    margin: 0 0 2.5rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.v2 .tag-intro p { font-family: var(--font-read); font-size: 1.04rem; line-height: 1.72; color: #25272C; text-align: left; }
.v2 .tag-byline { font-size: .72rem; letter-spacing: .1em; }


/* Bokkort: omslaget bär kortet, ingen ram eller skugga runt texten */
.v2 .book-item {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.v2 .book-item:hover { transform: none; box-shadow: none; border-color: transparent; }
.v2 .book-item .book-image {
    border-radius: 6px;
    background: var(--wash);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 16px rgba(20, 22, 28, .1);
    transition: transform .18s ease;
}
.v2 .book-item:hover .book-image { transform: translateY(-2px); }
.v2 .book-item .book-image img { object-fit: contain; }  /* aldrig beskära: titlar på omslaget klipps annars */
.v2 .book-item .book-info,
.v2 .book-item .book-content { padding: .65rem 0 0; gap: .1rem; }
.v2 .book-item .book-info h3,
.v2 .book-item .book-content h3 { font-family: var(--font-body); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.v2 .book-info .author,
.v2 .book-item .book-content .author { font-style: normal; color: var(--ink-soft); font-size: .85rem; }
.v2 .books-grid .book-item .description { display: none; }   /* kuraterade motiveringar (rel_note) visas */
.v2 .book-meta { padding-top: .2rem; }
.v2 .release-year,
.v2 .year { background: none; color: var(--ink-soft); padding: 0; font-weight: 500; }
.v2 .book-count,
.v2 .series-book-count,
.v2 .category-count { background: var(--wash); color: var(--ink); }
.v2 .book-subgroup-badge { background: var(--lamp); color: var(--accent); }

.v2 .books-grid { gap: 1.75rem 1rem; }
@media (min-width: 720px) { .v2 .books-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.25rem; } }
@media (min-width: 1080px) { .v2 .books-grid { grid-template-columns: repeat(5, 1fr); } }

/* Serie-, tagg- och kategorikort i listor: tunn kant, ingen skugga */
.v2 .category-card,
.v2 .series-item,
.v2 .tag-item,
.v2 .universe-item,
.v2 .list-card { box-shadow: none; border-color: var(--line); border-radius: 18px; }
.v2 .category-card:hover,
.v2 .series-item:hover,
.v2 .tag-item:hover,
.v2 .universe-item:hover,
.v2 .list-card:hover { box-shadow: none; border-color: var(--line-strong); transform: none; }

/* ==========================================================================
   Texter: FAQ (mockup Texter vy 2)
   Frågor i fet Hanken, en per rad; svaren kvar i HTML (details).
   Spoilerfrågor sist under ett svart lock.
   ========================================================================== */

.v2 .book-description > h2::after,
.v2 .book-editions > h2::after,
.v2 .book-facts > h2::after,
.v2 .book-faq > h2::after,
.v2 .reading-order > h2::after,
.v2 .related-news > h2::after,
.v2 .related-tags > h2::after,
.v2 .similar-books > h2::after { display: none; }
.v2 .book-description > h2,
.v2 .book-editions > h2,
.v2 .book-facts > h2,
.v2 .book-faq > h2,
.v2 .reading-order > h2,
.v2 .related-news > h2,
.v2 .related-tags > h2,
.v2 .similar-books > h2 { padding-bottom: 0; }

.v2 .book-faq { max-width: 760px; }
.v2 .faq-item {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    margin: 0;
}
.v2 .faq-item:first-of-type { border-top: 1px solid var(--line); }
.v2 .faq-item summary {
    padding: 1rem 3rem 1rem 0;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
}
.v2 .faq-item summary:hover { background: none; color: var(--ink); }
.v2 .faq-item summary::after {
    content: "+";
    right: 0;
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--wash); color: var(--ink);
    font-family: var(--font-body); font-size: 1.1rem; line-height: 1;
}
.v2 .faq-item[open] summary::after { background: var(--ink); color: #fff; }
.v2 .faq-item p { padding: 0 3rem 1.1rem 0; color: #3E4148; line-height: 1.6; }

.v2-spoilhead {
    display: flex; gap: .75rem; align-items: center;
    margin: 1.75rem 0 .25rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    background: var(--ink); color: #fff;
}
.v2-spoilhead svg { width: 20px; height: 20px; flex: 0 0 auto; }
.v2-spoilhead b { display: block; font-size: .95rem; }
.v2-spoilhead span { display: block; font-size: .8rem; color: #B9BBC1; }
.v2-spoilhead + .faq-item { border-top: 0; }
.v2 .spoiler-badge.level-1,
.v2 .spoiler-badge.level-2 { background: var(--wash); color: var(--ink-soft); border: 0; }
.v2 .spoiler-gate { padding: 0 0 1.1rem; }
.v2 .spoiler-gate-note { font-style: normal; font-size: .88rem; }
.v2 .spoiler-reveal-btn { border: 0; background: var(--wash); color: var(--ink); border-radius: 999px; }
.v2 .spoiler-reveal-btn:hover { background: var(--ink); color: #fff; }

/* ==========================================================================
   Återblick (mockup Texter vy 4-5 + Dator återblick)
   Svart grind med utskriven spoilergräns. Texten ligger kvar i HTML:en
   (indexeras) men visas tonad tills läsaren valt att se den.
   ========================================================================== */

.v2-recap .page-header { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; align-items: end; }
.v2-recap .recap-cover { grid-row: 1 / span 3; width: 88px; margin: 0; box-shadow: 0 6px 18px rgba(20, 22, 28, .18); border-radius: 6px; }
.v2-recap .page-header h1 { margin: 0; }
.v2-recap .page-header .entity-aliases { margin: 0 0 .2rem; }
.v2-recap .page-header .page-description { grid-column: 1 / -1; margin-top: 1rem; font-size: 1.05rem; color: #3E4148; }

.v2-gate {
    display: grid; gap: .8rem;
    max-width: 680px;
    margin: 0 0 1.5rem;
    padding: 1.4rem 1.3rem;
    border-radius: 22px;
    background: var(--ink); color: #fff;
}
.v2-gate > svg { width: 24px; height: 24px; color: #E0A58B; }
.v2-gate h2 { color: #fff; font-size: var(--h2-card); margin: 0; line-height: 1.25; }
.v2-gate p { color: #C9CBD1; margin: 0; font-size: .95rem; }
.v2-gate-go { background: #fff; color: var(--ink); width: 100%; margin-top: .3rem; }
.v2-gate-go:hover { background: #F2F1EE; }
.v2 a.v2-gate-back { color: #fff; opacity: .85; text-align: center; font-weight: 600; font-size: .9rem; }
.v2 a.v2-gate-back:hover { color: #fff; opacity: 1; }
.v2-gate[hidden] { display: none; }

/* Låst läge sätts av JS (html.v2-recap-locked). Utan JS: full text, ingen knapp. */
.v2-recap-locked #recap-content { position: relative; max-height: 280px; overflow: hidden; filter: blur(6px); user-select: none; pointer-events: none; }
.v2-recap-locked #recap-content::after { content: ""; position: absolute; inset: 40px 0 0 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); }
html:not(.v2-recap-locked) .v2-gate [data-recap-reveal] { display: none; }

/* Läsläge */
.v2-recap .recap-spoiler-note { display: none; }
.v2 .recap-body {
    max-width: 680px;
    margin: 0 0 2.5rem;
    padding: 0;
    background: none; border: 0; box-shadow: none;
    font-family: var(--font-read);
    font-size: 1.1rem; line-height: 1.78; color: #25272C;
    text-align: left;
}
.v2 .recap-threads { max-width: 680px; margin: 0 0 2.5rem; }
.v2 .recap-threads .fact-list li { font-family: var(--font-read); font-size: 1.04rem; line-height: 1.5; padding-left: 1.6rem; }
.v2 .recap-threads .fact-list li::before {
    content: ""; top: .95rem; left: .2rem;
    width: 7px; height: 7px;
    border-right: 2px solid var(--accent); border-top: 2px solid var(--accent);
    transform: rotate(45deg);
}
.v2 .recap-characters { max-width: 680px; }
.v2 .character-card { box-shadow: none; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.v2 .character-relations { color: var(--ink-soft); }
.v2 .recap-next { max-width: 680px; margin-inline: 0; text-align: left; }

.v2-recap-rail { display: none; }

@media (min-width: 1080px) {
    .v2-recap {
        display: grid;
        grid-template-columns: minmax(0, 680px) 300px;
        column-gap: 4.5rem;
        justify-content: space-between;   /* texten linjerar med brödsmulorna, spalten mot högerkanten (UI-30) */
        align-items: start;
    }
    .v2-recap > * { grid-column: 1; min-width: 0; }
    .v2-recap > .v2-recap-rail {
        display: grid; gap: 1.25rem;
        grid-column: 2; grid-row: 1 / span 20;
        position: sticky; top: 96px;
    }
    .v2-recap .recap-cover { width: 110px; }
}
.v2-rail-book {
    display: flex; gap: .9rem; align-items: center;
    padding: 1rem; border: 1px solid var(--line); border-radius: 18px;
    color: var(--ink);
}
.v2-rail-book:hover { border-color: var(--line-strong); color: var(--ink); }
.v2-rail-book b { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; }
.v2-rail-cover { flex: 0 0 56px; width: 56px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--wash); box-shadow: 0 2px 8px rgba(20, 22, 28, .14); }
.v2-rail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-rail-cover picture { display: contents; }
.v2-rail-lab { display: block; margin-bottom: .15rem; }
.v2-rail-go { display: inline-block; margin-top: .45rem; font-size: .85rem; font-weight: 700; color: var(--accent); }
.v2-toc { display: grid; gap: .1rem; }
.v2-toc .v2-rail-lab { padding: 0 .75rem .35rem; }
.v2-toc a { padding: .45rem .75rem; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--ink-soft); }
.v2-toc a:hover { background: var(--wash); color: var(--ink); }

/* ==========================================================================
   Nyhetsartikel (mockup Texter vy 6): rubrik och brödtext i Literata,
   ingressen i fet Hanken, lugna länkar med tunn rostfärgad understrykning.
   ========================================================================== */

.v2 .news-article {
    max-width: 680px;
    margin-inline: auto;
    padding: 0;
    background: none; border: 0; box-shadow: none;
}
.v2 .news-article-header h1 { line-height: 1.12; }
.v2 .news-lede {
    font-style: normal; font-weight: 400; font-size: 1.15rem; line-height: 1.6; color: #26282D;
    padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.v2 .news-body {
    font-family: var(--font-read);
    font-size: 1.1rem; line-height: 1.78; color: #25272C;
    text-align: left;
}
.v2 .news-body a:not(.btn),
.v2 .book-summary a:not(.btn),
.v2 .future-content a:not(.btn) {
    color: inherit;
    text-decoration-color: #D9A58E;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.v2 .news-body a:not(.btn):hover { color: var(--accent); }
.v2 .news-body blockquote {
    margin: 1.5rem 0; padding: 0; border: 0;
    font-style: normal; font-weight: 600; font-size: 1.25rem; line-height: 1.45; color: var(--ink);
}
.v2 .news-source-link { font-size: .85rem; }

/* ==========================================================================
   Startsidan längre ner (mockup vy 2 + Dator vy 1): en vanlig sajt i den nya
   stilen. Sektioner skiljs med luft, bara dagens bok har egen yta.
   ========================================================================== */

.v2 .featured-content .author,
.v2 .recent-body .author,
.v2 .dotd-body .author { font-style: normal; color: var(--ink-soft); font-size: .85rem; }

/* Senast tillagda: lista med tunna avdelare i stället för kort */
.v2 .recent-item {
    background: none; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; box-shadow: none; padding: 1rem 0;
}
.v2 .recent-item:hover { transform: none; box-shadow: none; }
.v2 .recent-cover { flex-basis: 72px; border-radius: 5px; background: var(--wash); box-shadow: 0 2px 8px rgba(20, 22, 28, .12); }
.v2 .recent-list { column-gap: 2.5rem; row-gap: 0; }

/* Nyheter: ingen gul låda eller kantlinje, bara en lugn lista */
.v2 .home-news { background: none; border: 0; border-radius: 0; padding: 0; margin: 3rem 0 0; }
.v2 .home-news .news-card,
.v2 .news-card {
    background: none; border: 0; border-left: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; box-shadow: none; padding: 1.1rem 0;
}
.v2 .news-card:hover { transform: none; box-shadow: none; }
.v2 .home-news .news-card h2,
.v2 .news-card h2 { font-size: var(--h2-card); line-height: 1.3; }
.v2 .news-card p { font-size: .92rem; }
@media (min-width: 720px) {
    .v2 .home-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
    .v2 .home-news .news-card { border-bottom: 0; border-top: 1px solid var(--line); }
}


@media (max-width: 719px) { .v2 .recent-body .description { -webkit-line-clamp: 2; } }

/* ==========================================================================
   Boksidans topp (mockup vy 6 / Dator vy 4)
   ========================================================================== */

.v2 .book-lineage,
.v2 .quick-facts { display: none; }            /* ersätts av seriechip och faktarutor */

.v2-bhero { display: grid; gap: .9rem; margin: .9rem 0 1.25rem; max-width: 520px; }
.v2-serchip { justify-self: start; }

.v2-facts {
    display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
    border: 1px solid var(--line); border-radius: 16px; margin: 0;
}
.v2-facts > div { padding: .65rem .5rem; text-align: center; min-width: 0; }
.v2-facts > div + div { border-left: 1px solid var(--line); }
.v2-facts dd { margin: 0; font-weight: 700; font-size: .98rem; font-variant-numeric: tabular-nums; }
.v2-facts dt { font-size: .74rem; color: var(--ink-soft); }

.v2-seg { display: flex; gap: 4px; padding: 4px; background: var(--wash); border-radius: 14px; }
.v2-seg button {
    flex: 1; border: 0; background: none; cursor: pointer;
    padding: .55rem .4rem; border-radius: 10px;
    font: 600 .9rem var(--font-body); color: var(--ink-soft);
}
.v2-seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.v2-pane { display: grid; gap: .6rem; }
.v2-pane[hidden] { display: none; }
.v2-btn-wide { width: 100%; }
.v2-btnrow { display: flex; gap: .6rem; }
.v2-btnrow > .v2-btn { flex: 1; }
.v2-btn-goline { background: #fff; color: var(--cta-deep); border-color: var(--cta); }
.v2-btn-goline:hover { background: var(--cta-wash); color: var(--cta-deep); }
.v2-btn-quiet { background: var(--wash); color: var(--ink); }
.v2-btn-quiet:hover { background: #ECEBE7; color: var(--ink); }
.v2 a.v2-btn-go, .v2 a.v2-btn-ink { color: #fff; text-decoration: none; }
.v2 .recap-cta .v2-btn { margin-top: .6rem; }
.v2 a.v2-btn-goline { color: var(--cta-deep); }
.v2 a.v2-btn-quiet { color: var(--ink); }

/* Omslaget: centrerat och stort i mobilen, som en app */
@media (max-width: 719px) {
    .v2 .book-header { grid-template-columns: 1fr; gap: 1rem; }
    .v2 .book-header .book-cover { width: 58%; max-width: 230px; justify-self: center; box-shadow: 0 12px 32px rgba(20, 22, 28, .25); border-radius: 8px; }
    .v2 .book-info > h1 { text-align: center; }
    .v2 .book-info > .author,
    .v2 .book-info > .book-byline { text-align: center; }
    .v2-bhero { max-width: none; }
    .v2-serchip { justify-self: center; }
}

/* Visste du att: svepkort i mobilen, två och två på dator */
.v2 .book-facts .fact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.v2 .book-facts .fact-list li {
    border: 1px solid var(--line); border-radius: 18px;
    padding: 3.1rem 1.1rem 1.1rem; font: .95rem/1.6 var(--font-read);
    position: relative;
}
.v2 .book-facts .fact-list li::before {
    content: ""; position: absolute; left: 1.1rem; top: 1rem;
    width: 30px; height: 30px; border-radius: 10px;
    background: var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17h6M10 20.5h4M12 3.5a5.5 5.5 0 0 0-3.2 10c.5.4.7.9.7 1.5v1h5v-1c0-.6.3-1.1.7-1.5A5.5 5.5 0 0 0 12 3.5z'/%3E%3C/svg%3E") center / 18px no-repeat;
}
@media (max-width: 719px) {
    .v2 .book-facts .fact-list {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 -1rem; padding: 0 1rem .4rem;
    }
    .v2 .book-facts .fact-list::-webkit-scrollbar { display: none; }
    .v2 .book-facts .fact-list li { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Återblicks-CTA på boksidan: en lugn ruta i stället för hörn-kopian */
.v2 .recap-cta .editorial-box h2 span { display: none; }

/* ==========================================================================
   Åtgärder från granskningen 2026-09-27 (docs/mockups/app-redesign/REVIEW.md)
   ========================================================================== */



/* Fokus syns även på mörka ytor */
.v2-gate :focus-visible,
.v2-spoilhead :focus-visible,
.v2 .promo :focus-visible,
.v2-install-sheet .v2-btn-ink:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Fält och chips går att urskilja */



/* Klickytor minst 44 px */
.v2 .spoiler-reveal-btn { min-height: 44px; }
.v2 .scta-close { width: 44px; height: 44px; }

/* Kvarlevor: kursiv, guld, rost på kontroller, grönt utanför köp */
.v2 .page-kicker,
.v2 .disclosure-text,
.v2 .footer-disclosure,
.v2 .footer-section p,
.v2 .footer-brand p,
.v2 .character-alt-name,
.v2 .recap-next p,
.v2 .cover-fallback { font-style: normal; }
.v2 .footer-disclosure { text-align: left; }



/* Radlängd och serif på all längre löptext */
.v2 .news-body,
.v2 .recap-body,
.v2 .tag-intro p { max-width: var(--measure); }
.v2 .dotd-body p,
.v2 .present-occasions p,
.v2 .book-summary,
.v2 .page-description,
.v2 .news-lede,
.v2 .audiobook-lead { font-family: var(--font-read); max-width: var(--measure); line-height: 1.7; text-align: left; }
.v2 .page-header:has(.v2-searchpage-form) .page-description { font-family: var(--font-body); }   /* träffsammanfattning är metadata */

/* Vita omslag flyter inte ut i sidan */
.v2 .book-item .book-image,
.v2 .book-cover { outline: 1px solid rgba(0, 0, 0, .06); outline-offset: -1px; }

/* Svepraderna börjar inte i skärmkanten */
@media (max-width: 719px) { .v2 .book-facts .fact-list { scroll-padding-inline: 1rem; } }

/* Boksidan: gratistext per tjänst, bokstavsbricka när logga saknas */
.store-logo--letter {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--wash); color: var(--ink); font-weight: 800; font-size: .8rem;
}
.v2 .price-store .store-logo--letter { width: 24px; height: 24px; }
.v2-hero-note { margin: 0; font-size: .8rem; color: var(--ink-soft); text-align: center; }


/* Prisrutan klipps inte på laptops */
@media (min-width: 1080px) {
    .v2 .book-detail > .v2-pcard { max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain; }
    /* Dator: köplistan finns redan i prisrutan, visa den inte två gånger.
       Ljudboksdelens mening och fakta (citerbar text) ligger kvar. */
    .v2 .book-detail .buy-compare { display: none; }
    .v2 .book-detail .listen-compare .price-list,
    .v2 .book-detail .listen-compare .price-compare-footer { display: none; }
}

/* Klibbiga köplisten: "Annons" inne i listen, inte flytande ovanpå innehåll;
   döljs medan toppknapparna eller prislistan syns (js/v2.js) */
.v2 .scta-ad { position: static; background: none; padding: 0; order: 9; align-self: center; font-size: .6875rem; color: var(--ink-soft); }

.v2 .sticky-cta.is-visible.v2-suppress { transform: translateY(calc(100% + 2rem)); opacity: 0; pointer-events: none; }
.v2 .scta-listen { flex-grow: 1.7; }
.v2 .scta-label { white-space: nowrap; }

/* ==========================================================================
   Sidfoten: hela länkgrafen (K1). Grupper som <details>, öppna på dator.
   ========================================================================== */
.v2-footer { padding: 3rem 0 2rem; }
.v2-footer-top { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 2rem; padding-bottom: 2rem; }
.v2-footer-brand .site-logo { width: 170px; height: auto; margin-bottom: .75rem; }
.v2-footer-brand p { color: var(--ink-soft); font-size: .9rem; max-width: 30ch; }
.v2-fgroup summary {
    list-style: none; cursor: default;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink); margin-bottom: .75rem;
}
.v2-fgroup summary::-webkit-details-marker { display: none; }
.v2-fgroup ul { list-style: none; display: grid; gap: .35rem; }
.v2-fgroup a { color: var(--ink); font-size: .9rem; }
.v2-fgroup a:hover { color: var(--accent); }
.v2-fgenres { border-top: 1px solid var(--line-strong); padding-top: 1.5rem; margin-bottom: 1.5rem; }

@media (max-width: 1079px) { .v2-footer-top { grid-template-columns: 1fr 1fr; } .v2-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 719px) {
    .v2-footer { padding-top: 2rem; }
    .v2-footer-top { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; }
    .v2-footer-brand { margin-bottom: 1rem; }
    .v2-fgroup { border-top: 1px solid var(--line-strong); }
    .v2-fgroup summary {
        cursor: pointer; margin: 0; padding: .95rem 0; min-height: 44px;
        display: flex; justify-content: space-between; align-items: center;
    }
    .v2-fgroup summary::after { content: "+"; font-size: 1.1rem; font-weight: 500; letter-spacing: 0; }
    .v2-fgroup[open] summary::after { content: "–"; }
    .v2-fgroup ul { padding-bottom: 1rem; }
    .v2-fgroup ul a { display: inline-block; padding: .35rem 0; }
    .v2-fgenres { padding-top: 0; }
}


/* Återblickens fortsättning (UX M8) */
.v2-recap-next {
    display: flex; gap: 1rem; align-items: flex-start;
    max-width: 680px; margin: 2rem 0 0; padding: 1.1rem;
    border: 1px solid var(--line); border-radius: 20px;
}
.v2-recap-next .v2-rail-cover { flex: 0 0 64px; width: 64px; }
.v2-recap-next-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; margin-bottom: .6rem; }
.v2-recap-next-note { display: block; margin-top: .5rem; font-size: .82rem; color: var(--ink-soft); }
.v2-recap-next-note a { color: var(--accent); font-weight: 600; }

/* ==========================================================================
   Sök (UX H4): eget sökfält på resultatsidan, serier först
   ========================================================================== */
.v2-searchpage-form {
    display: flex; align-items: center; gap: .6rem;
    margin-top: 1rem; padding: .35rem .35rem .35rem 1rem;
    border: 1.5px solid var(--control-line); border-radius: 16px; background: #fff;
    max-width: 640px;
}
.v2-searchpage-form:focus-within { border-color: var(--ink); }
.v2-searchpage-form > svg { width: 20px; height: 20px; color: var(--ink-soft); flex: 0 0 auto; }
.v2-searchpage-form input { flex: 1; min-width: 0; border: 0; outline: 0; font: 400 1.05rem var(--font-body); padding: .6rem 0; background: none; }
.v2-searchpage-form .v2-btn { padding: .7rem 1.1rem; }

.v2-series-hits { margin-bottom: 1.5rem; }
.v2-series-hit {
    display: flex; align-items: center; gap: 1.1rem;
    padding: 1rem 1.1rem; margin-bottom: .75rem;
    border: 1px solid var(--line); border-radius: 18px; color: var(--ink);
}
.v2-series-hit:hover { border-color: var(--line-strong); color: var(--ink); }
.v2-fan--sm { width: 96px; height: 76px; margin: 0; flex: 0 0 96px; }
.v2-fan--sm .v2-fan-cover { width: 46px; }
.v2-fan--sm .v2-fan-cover:nth-child(2) { left: 20px; }
.v2-fan--sm .v2-fan-cover:nth-child(3) { left: 40px; }
.v2-series-hit-text { flex: 1; min-width: 0; line-height: 1.35; }
.v2-series-hit-text b { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.v2-series-hit-text span { color: var(--ink-soft); font-size: .9rem; }
.v2-series-hit-go { font-weight: 700; color: var(--series); white-space: nowrap; font-size: .92rem; }
@media (max-width: 719px) { .v2-series-hit-go { display: none; } }

.v2 .suggest-series .suggest-stack { position: relative; flex: 0 0 52px; height: 48px; }
.v2 .suggest-series .suggest-stack img { position: absolute; top: 2px; width: 30px; height: 44px; object-fit: cover; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.v2 .suggest-series .suggest-stack img:nth-child(1) { left: 0; transform: rotate(-6deg); }
.v2 .suggest-series .suggest-stack img:nth-child(2) { left: 10px; }
.v2 .suggest-series .suggest-stack img:nth-child(3) { left: 20px; transform: rotate(5deg); }

/* Ljudbokssidan (UX H6): filtren bakom en knapp i mobilen så böckerna syns tidigt */
.v2-facet-toggle { display: none; }
@media (max-width: 719px) {
    .v2-facet-toggle {
        display: inline-flex; align-items: center; gap: .5rem;
        min-height: 44px; padding: .55rem 1rem; margin: .75rem 0;
        border: 1px solid var(--control-line); border-radius: 999px; background: #fff;
        font: 600 .92rem var(--font-body); color: var(--ink); cursor: pointer;
    }
    .v2-facet-toggle svg { width: 17px; height: 17px; }
    .v2-facet-count { background: var(--ink); color: #fff; border-radius: 999px; font-size: .75rem; padding: 0 .45rem; }
    .v2 .ax-facets.v2-facets-closed { display: none; }
}

/* ==========================================================================
   Tjänsterader: logga, gratisperiod, pris och en grön Lyssna per tjänst
   (seriesidans panel och lyssna-rutan; Fredrik 2026-09-27)
   ========================================================================== */



.v2-series-listen { margin-top: 1rem; padding: .9rem 1rem .35rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.v2-series-listen-lab { margin: 0 0 .15rem !important; font-weight: 700; font-size: .95rem !important; color: var(--ink) !important; }
.v2-series-listen-lab span { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-soft); }
.v2 .series-listen .v2-listen-rows { margin: .5rem 0 .25rem; }



/* ==========================================================================
   Kategorifilter (mockup vy 4 / Dator vy 2)
   ========================================================================== */
.v2-catfilters { margin: 0 0 1.75rem; }
.v2-catfilters-row { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.v2-cf-group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.v2-cf-lab { margin-right: .2rem; }

.v2-cf-clear { display: inline-flex; align-items: center; gap: .35rem; margin-top: .8rem; font-weight: 700; font-size: .88rem; color: var(--accent); }
.v2-cf-clear svg { width: 15px; height: 15px; }

.v2-flag { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 6px; background: var(--wash); color: var(--ink); }
.v2-flag svg { width: 12px; height: 12px; }

@media (max-width: 719px) {
    .v2-catfilters {
        position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 20;
        margin: 0 -1rem 1.25rem; padding: .6rem 1rem;
        background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line);
    }
    .v2-catfilters-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 1rem; }
    .v2-catfilters-row::-webkit-scrollbar { display: none; }
    .v2-cf-group { flex-wrap: nowrap; }
}

/* Sökfältet: ramen sitter på fältet (focus-within), ingen extra fyrkant inuti */
.v2 .v2-search input:focus-visible,
.v2 .v2-searchpage-form input:focus-visible { outline: none; }
html.v2 { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html.v2 { scroll-behavior: smooth; } }


/* Nyhetsartikel: byline med lästid och serien nyheten handlar om */
.v2 .v2-byline { display: flex; align-items: center; gap: .55rem; margin: 1rem 0 0; font: 500 .88rem/1.3 var(--font-body); color: var(--ink-soft); }
.v2 .v2-byline img { width: 22px; height: 22px; border-radius: 50%; }
.v2 .v2-news-series { display: flex; align-items: center; gap: 1rem; margin: 1.3rem 0 0; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; }
.v2 .v2-news-series:hover { border-color: var(--series); }
.v2 .v2-news-series .v2-fan { flex: none; margin: 0; }
.v2 .v2-news-series b { display: block; font: 600 1.05rem/1.25 var(--font-display); }
.v2 .v2-news-series .sub { display: block; color: var(--series); font-size: .88rem; margin-top: .15rem; }
.v2 .v2-news-series .v2-kicker { display: block; margin-bottom: .15rem; }
.v2 .v2-news-series-go { margin-left: auto; flex: none; font-weight: 600; font-size: .9rem; color: var(--series); }
@media (max-width: 560px) { .v2 .v2-news-series-go { display: none; } }

/* Återblick: karaktärskorten sveps i sidled i mobilen (mockup Texter vy 4) */
@media (max-width: 640px) {
    .v2 .recap-characters .character-grid { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px .6rem; scrollbar-width: none; }
    .v2 .recap-characters .character-grid::-webkit-scrollbar { display: none; }
    .v2 .recap-characters .character-card { flex: 0 0 82%; scroll-snap-align: start; margin: 0; }
}

/* Återblickens egentliga ingress ligger bakom grinden */
.v2 .v2-recap-intro { font-size: 1.12rem; line-height: 1.6; color: var(--ink); max-width: var(--measure, 34em); margin: 0 0 1.6rem; }

/* ==========================================================================
   Rättelser efter andra granskningen 2026-09-27 (REVIEW2-ux/-ui/-seo):
   boksidan, seriesidan och återblicken.
   ========================================================================== */

/* UI-32: inget okontrollerat automatiskt mörkerläge */
:root { color-scheme: light; }

/* UI-14: klickytor minst 44 px */
.v2-seg button { min-height: 44px; }

/* UI-19 / UI-4: lästidsväljaren i bläck, inte guld */
.v2 .reading-estimate { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.v2 .reading-estimate-icon svg { width: 17px; height: 17px; vertical-align: -3px; color: var(--ink-soft); }


/* UI-28: reservomslagets text i de små rutorna */
.v2 .recent-cover .cover-fallback { font-size: .62rem; padding: .3rem; }

/* UI-27: svepraden med fakta går att nå med tangentbordet */
.v2 .book-facts .fact-list:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }

/* UI-22: köplisten ligger direkt mot flikraden i mobilen, utan glipa */
@media (max-width: 719px) {
    .v2 .sticky-cta {
        left: 0; right: 0;
        bottom: calc(var(--tabbar-h) - 2px + env(safe-area-inset-bottom, 0px));
        max-width: none;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        box-shadow: 0 -8px 24px -12px rgba(20, 22, 28, .25);
    }
}


/* SEO-11: rubriken i cirkelrutan är ett stycke när ingen cirkel läser boken */
.v2-bc-head h2, .v2-bc-head .v2-bc-title { font-family: var(--font-display); font-weight: 700; font-size: var(--h2-card); line-height: 1.3; margin: 0 0 .15rem; color: var(--ink); }

/* UX-2: föregående och nästa del i heron (blått = serie) */
.v2-sernav { display: flex; gap: .5rem; }
.v2-sernav a {
    flex: 1 1 0; min-width: 0; min-height: 44px;
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .8rem; border-radius: 14px;
    border: 1px solid var(--series-wash); background: #fff;
    color: var(--series); font-size: .86rem; line-height: 1.25;
}
.v2 a.v2-sernav-prev, .v2 a.v2-sernav-next { color: var(--series); }
.v2-sernav a:hover { background: var(--series-wash); color: var(--series); }
.v2-sernav a > span:not([aria-hidden]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-sernav a b { font-weight: 700; }
.v2-sernav a > span[aria-hidden] { font-size: 1.2rem; line-height: 1; }
.v2-sernav-next { justify-content: flex-end; text-align: right; }
.v2-sernav-prev:only-child { flex: 0 1 auto; }
.v2-sernav-next:only-child { margin-left: auto; flex: 0 1 auto; }
.v2-mynext {
    display: flex; align-items: center; gap: .55rem; min-height: 44px;
    margin: 0; padding: .5rem .85rem; border-radius: 14px;
    background: var(--series-wash); color: var(--series); font-size: .9rem; line-height: 1.3;
}
.v2 a.v2-mynext { color: var(--series); }
.v2 a.v2-mynext:hover { color: var(--ink); }
.v2-mynext svg { width: 18px; height: 18px; flex: 0 0 auto; }
.v2-mynext > span:first-of-type { flex: 1; min-width: 0; }
.v2-mynext > span[aria-hidden] { font-size: 1.2rem; }

/* UX-2: läsordningen direkt efter toppen, hopfälld när serien är lång */
.v2 .v2-ro { margin: 0 0 1.5rem; max-width: 760px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.v2 .v2-ro > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    min-height: 56px; padding: .75rem 3.2rem .75rem 1.1rem; position: relative;
}
.v2 .v2-ro > summary::-webkit-details-marker { display: none; }
.v2 .v2-ro > summary::after {
    content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--series-wash); color: var(--series); font-size: 1.1rem; line-height: 1;
}
.v2 .v2-ro[open] > summary::after { content: "–"; }
.v2 .v2-ro > summary h2 { margin: 0; padding: 0; font-size: var(--h2-card); line-height: 1.3; }
.v2 .v2-ro > summary h2::after { display: none; }
.v2-ro-pos { font-size: .82rem; font-weight: 600; color: var(--series); background: var(--series-wash); padding: .2rem .6rem; border-radius: 999px; }
.v2 .v2-ro .reading-order-list { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: .25rem 1.1rem; margin: 0; background: none; }
.v2 .v2-ro .reading-order-list li { align-items: center; min-height: 44px; padding: .3rem 0; gap: .7rem; font-size: .98rem; }
.v2 .v2-ro .reading-order-list li::before { display: none; }
.v2-ro-n {
    flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: var(--series-wash); color: var(--series); font-weight: 700; font-size: .85rem;
}
.v2 .v2-ro li.current .v2-ro-n { background: var(--series); color: #fff; }
.v2 .v2-ro li.current .v2-ro-t { font-weight: 700; }
.v2 .v2-ro a.v2-ro-t { color: var(--ink); }
.v2 .v2-ro a.v2-ro-t:hover { color: var(--series); }
.v2-ro-here { font-size: .74rem; font-weight: 700; color: var(--series); background: var(--series-wash); padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
.v2 .v2-ro .release-year { color: var(--ink-soft); font-size: .85rem; font-variant-numeric: tabular-nums; }
.v2 .v2-ro .reading-order-hub { display: inline-flex; align-items: center; min-height: 44px; margin: 0 1.1rem .5rem; color: var(--series); }

/* UX-17: två slutrader, fler av författaren och samma stämning */

.v2-endrow-moods { margin: -.2rem 0 1rem; font-size: .9rem; color: var(--ink-soft); }
.v2-endrow-moods a { color: var(--ink); font-weight: 600; }
@media (max-width: 719px) {
    .v2 .v2-endrow .books-grid {
        display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 -1rem; padding: 0 1rem .4rem; scroll-padding-inline: 1rem;
    }
    .v2 .v2-endrow .books-grid::-webkit-scrollbar { display: none; }
    .v2 .v2-endrow .book-item { flex: 0 0 36%; scroll-snap-align: start; }
}

/* UX-10: seriesidan, läsarens plats och nästa del i lyssnapanelen */
.v2 a.v2-series-here { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; margin-top: .15rem; font-weight: 700; font-size: .9rem; color: var(--series); }
.v2-series-next { display: flex; gap: .85rem; align-items: center; margin-bottom: .35rem; }
.v2-series-next .v2-rail-cover { flex: 0 0 48px; width: 48px; }
.v2-series-next .v2-series-listen-lab a { color: var(--series); }
.v2-series .timeline-item[id] { scroll-margin-top: 90px; }
.v2 .recap-link svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: .35rem; }
.v2 .v2-endrow .book-item .author { text-align: left; font-family: var(--font-body); font-size: .8rem; color: var(--ink-soft); margin-top: .15rem; }

/* Serienavigeringen: en rad även i mobilen, ensam länk får visa hela titeln */
.v2 .v2-sernav { flex-wrap: nowrap; }
.v2 .v2-sernav a:only-child { flex: 1 1 auto; }
.v2 .v2-sernav a:only-child > span:not([aria-hidden]) { white-space: normal; overflow: visible; }

/* ==========================================================================
   Designsystemet: delade komponenter (REVIEW2-ui, UI-8…UI-24). Ersätter
   sidgruppernas egna varianter; används i flera buntar och ligger därför här.
   ========================================================================== */

/* Kicker och etiketter: en typografi (UI-24). --brand bara för Bokaris egna
   namn (hörnan, katalogtestet), --on-dark på mörka band. */
.v2-kicker, .v2 .barn-eyebrow, .v2 .compare-callout-eyebrow, .v2-answer-lab, .v2-pcard-lab, .v2-rail-lab,
.v2-cf-lab, .v2 .mood-label, .v2 .editorial-box h2, .v2 .dotd-week h4 {
    font: 700 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.v2 .page-header .v2-kicker, .v2 .page-header .barn-eyebrow, .v2 .page-header .v2-answer-lab { font-size: .72rem; line-height: 1.3; }
.v2-kicker, .v2 .barn-eyebrow { display: flex; align-items: center; gap: .35rem; margin: 0 0 .25rem; }
.v2-kicker svg { width: 16px; height: 16px; flex: none; }
.v2-kicker--brand, .v2 .compare-callout-eyebrow, .v2 .editorial-box h2 { color: var(--accent); }
.v2-kicker--on-dark { color: #C9CBD1; }
.v2 .recap-cta .editorial-box h2 { font: 700 var(--h2-card)/1.3 var(--font-display); letter-spacing: -.01em; text-transform: none; color: var(--ink); }

/* Ljudboksmärket (UI-11/12): neutralt, hörlursikon och speltid */
.v2-audio-flag, .v2 .audio-badge {
    display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px;
    background: var(--wash); color: var(--ink); font: 600 .76rem/1.35 var(--font-body);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.v2-audio-flag svg, .v2 .audio-badge svg { width: 14px; height: 14px; flex: none; }

/* Paginering (UI-15): samma knappar på serier, barn, ljudböcker och nyheter */
.v2 .series-pagination { gap: .35rem; }
.v2 .series-page-btn, .v2 .pagination .page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; height: auto; box-sizing: border-box;
    border-radius: 12px; border-color: var(--control-line);
}
.v2 .series-page-btn.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
.v2 .series-page-btn:hover:not(:disabled) { border-color: var(--ink); }

/* Sökknappen i ljudbokslistan är en vanlig svart knapp (UI-13/primärknapp) */
.v2 .ax-search-submit { min-height: 44px; padding: 0 1.1rem; border-radius: 14px; border: 0; background: var(--ink); color: #fff; font: 700 1rem var(--font-body); }
.v2 .ax-search-submit:hover { background: #000; color: #fff; }

/* Sidhuvudet på smal dator och inloggad (Hyllan + avatar): menyn tätnar och
   "/"-tipset går bort i stället för att sökfältets platshållare klipps */
@media (min-width: 1080px) and (max-width: 1259px) {
    .v2-header-row { gap: 1rem; }
    .v2-nav { gap: .9rem; }
    .v2-kbd { display: none; }
    .v2-me-shelf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .v2-me-shelf svg { width: 22px; height: 22px; }
}
@media (min-width: 1260px) {
    .v2-header-row:has(.v2-me-shelf) { gap: 1rem; }
    .v2-header-row:has(.v2-me-shelf) .v2-nav { gap: .9rem; }
    .v2-header-row:has(.v2-me-shelf) .v2-kbd { display: none; }
}

/* R3-9: första omslaget i fläkten är vridet -8° och sticker annars ut ~8 px
   till vänster om spalten i mobil. Marginalen motsvarar utsticket. */
.v2-fan { margin-left: 9px; }
.v2-fan--sm { margin-left: 5px; }

/* R3-4: utgåvornas butikstabell får plats i mobil. Butiksnamnet får brytas,
   cellerna blir smalare och tabellen kan rullas i sidled om den ändå är för bred. */
.v2 .store-box { overflow-x: auto; }
@media (max-width: 480px) {
    .v2 .edition-body { padding-left: 1rem; padding-right: 1rem; }
    .v2 .store-table thead th, .v2 .store-table tbody td { padding: .6rem .55rem; }
    .v2 .store-shop { gap: .45rem; }
    .v2 .store-shop-name { font-size: .86rem; overflow-wrap: anywhere; hyphens: auto; }
    .v2 .store-btn { min-width: 4.25rem; padding-inline: .8rem; }
}

/* R3-12: små reservomslag (utan bild) får mindre text som bryts var som helst,
   så långa ord inte klipps ("vättbjörnarna"). */
.v2 .cover-fallback { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 600px) {
    .v2 .book-item .cover-fallback { font-size: .92rem; padding: .75rem; }
}

/* UI-30: på nyhetsartikeln står brödsmulorna i linje med den centrerade spalten */
.v2:has(.site-main .news-article) .breadcrumbs .breadcrumb-list { max-width: 680px; margin-inline: auto; }

/* Bokcirklar-hubben: luft mellan filter och resultat, och mer andrum på dator */
.v2 .v2-circles .v2-circle-filters { margin-bottom: 1.5rem; }
.v2 .v2-circles .v2-circles-find .v2-empty { margin-top: 1.5rem; }
.v2 .v2-circles > section + section { margin-top: 2.75rem; }
@media (min-width: 900px) {
    .v2 .v2-circles { padding-bottom: 2rem; }
    .v2 .v2-circles .v2-circles-head { margin-bottom: 3rem; }
    .v2 .v2-circles > section + section { margin-top: 4.5rem; }
    .v2 .v2-circles section > h2 { margin-bottom: 1.25rem; }
    .v2 .v2-circles .v2-circle-filters { gap: .6rem; margin-bottom: 2rem; }
    .v2 .v2-circles .v2-circles-find .v2-empty { padding: 3.5rem 2rem; margin-top: 2rem; }
    .v2 .v2-circles .v2-circles-how > div, .v2 .v2-circles .v2-circles-how ol { gap: 1.25rem; }
}
.v2 .v2-circles .v2-how li { align-content: start; }

/* ==========================================================================
   Megameny (bara dator, ≥ 1080 px) och kompakta genrer i sidfoten.
   Markup: includes/v2-megamenu.php + v2-header.php. JS: js/v2.js ("Megameny").
   Utan JS öppnas panelerna med :hover/:focus-within; med JS styr klassen is-open.
   ========================================================================== */
.v2-mega-btn, .v2-mega { display: none; }
@media (max-width: 1079px) {
    .v2-nav-item { display: contents; }
}
@media (min-width: 1080px) {
    .v2-header-row > .v2-nav { align-self: stretch; align-items: stretch; }
    .v2-nav > a { align-self: center; }
    .v2-nav-item { display: flex; align-items: center; gap: .1rem; }
    .v2-header-row > .v2-nav { gap: 1.05rem; }
    .v2-mega-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 24px; height: 44px; margin: 0 -.3rem 0 -.1rem; padding: 0;
        border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer;
    }
    .v2-mega-btn svg { width: 15px; height: 15px; transition: transform .18s ease; }
    .v2-mega-btn:hover, .v2-nav-item.is-open .v2-mega-btn { color: var(--ink); }
    .v2-mega-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
    .v2-nav-item.is-open .v2-mega-btn svg { transform: rotate(180deg); }
    .v2-nav-item.is-open > a { color: var(--ink); }

    .v2-mega {
        position: absolute; left: 0; right: 0; top: 100%;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 24px 40px -24px rgba(22, 24, 29, .28);
        max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain;
    }
    html:not(.v2-mega-js) .v2-nav-item:hover > .v2-mega,
    html:not(.v2-mega-js) .v2-nav-item:focus-within > .v2-mega,
    .v2-nav-item.is-open > .v2-mega { display: block; }
    .v2-mega-in { width: min(1180px, 100% - 3rem); margin-inline: auto; padding: 1.9rem 0 2.1rem; }

    .v2-mega-grid { display: grid; gap: 2.25rem; align-items: start; }
    .v2-mega-grid--upptack { grid-template-columns: 1fr 1.3fr .9fr 1.05fr; }
    .v2-mega-grid--serier { grid-template-columns: 2.7fr 1fr; }
    .v2-mega-grid--ljud { grid-template-columns: 1.25fr 1fr .9fr 1.1fr; }
    .v2-mega-grid--cirklar { grid-template-columns: 2.6fr 1fr; }

    .v2-mega-h {
        margin: 0 0 .8rem; padding-left: .55rem;
        font: 700 .72rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
    }
    .v2-mega ul { list-style: none; margin: 0; padding: 0; }
    .v2-nav .v2-mega a {
        display: flex; align-items: center; gap: .75rem;
        padding: .45rem .55rem; border: 0; border-radius: 10px;
        font: 500 .92rem/1.3 var(--font-body); color: var(--ink); text-decoration: none;
    }
    .v2-nav .v2-mega a:hover { background: var(--wash); color: var(--ink); }
    .v2-nav .v2-mega a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
    .v2-nav .v2-mega a svg { width: 20px; height: 20px; }

    /* Genrer: två spalter med ikon */
    .v2-mega-genres { display: grid; gap: 0; }
    .v2-nav .v2-mega-genres a { min-height: 42px; white-space: nowrap; font-weight: 600; font-size: .9rem; gap: .6rem; }
    .v2-mega-gic { display: flex; flex: 0 0 auto; color: var(--ink-soft); }
    .v2-nav .v2-mega-genres a:hover .v2-mega-gic { color: var(--accent); }

    /* Stämningar och ljudboksgenrer: chips */
    .v2-mega ul.v2-mega-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding-left: .55rem; }
    .v2-nav .v2-mega .v2-chip {
        display: inline-flex; min-height: 44px; padding: .4rem .9rem; gap: 0;
        border: 1px solid var(--control-line); border-radius: 999px; font: 600 .84rem/1.2 var(--font-body); background: #fff;
    }
    .v2-nav .v2-mega .v2-chip:hover { border-color: var(--ink); background: #fff; }
    .v2-nav .v2-mega a.v2-mega-more { display: inline-flex; margin-top: .6rem; font-weight: 600; font-size: .88rem; color: var(--accent); }
    .v2-nav .v2-mega a.v2-mega-more:hover { color: var(--accent-deep); background: transparent; text-decoration: underline; text-underline-offset: 3px; }

    /* Länkrader med ikonruta */
    .v2-mega-links { display: grid; gap: .15rem; }
    .v2-mega ul.v2-mega-links--2 { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
    .v2-nav .v2-mega a.v2-mega-row { min-height: 44px; }
    .v2-mega-ic {
        display: flex; align-items: center; justify-content: center; flex: 0 0 36px;
        width: 36px; height: 36px; border-radius: 10px; background: var(--wash); color: var(--ink);
    }
    .v2-mega-row:hover .v2-mega-ic { background: #fff; }
    .v2-mega-rt { display: flex; flex-direction: column; min-width: 0; }
    .v2-mega-rt b { font-weight: 600; font-size: .92rem; }
    .v2-mega-rt small { color: var(--ink-soft); font-size: .8rem; font-weight: 400; margin-top: .1rem; }

    /* Serier: kort med omslagsfläkt */
    .v2-mega ul.v2-mega-series { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem .75rem; }
    .v2-nav .v2-mega-series a { gap: .9rem; padding: .55rem .6rem; }
    .v2-mega-series .v2-fan--sm { margin-left: 5px; }
    .v2-mega-series .v2-mega-rt b { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }

    /* Ljudbokstjänster */
    .v2-mega-svc { display: grid; gap: .15rem; }
    .v2-nav .v2-mega-svc a { min-height: 52px; justify-content: space-between; gap: 1rem; }
    .v2-mega-logo { display: flex; align-items: center; width: 92px; height: 28px; }
    .v2-mega-logo img { max-width: 92px; max-height: 24px; width: auto; height: auto; object-fit: contain; object-position: left center; }
    .v2-mega-trial { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
    .v2-mega ul.v2-mega-plain { display: grid; gap: 0; }
    .v2-nav .v2-mega-plain a { min-height: 44px; font-size: .9rem; }

    /* Framhävd ruta (läslampan) */
    .v2-nav .v2-mega a.v2-mega-feature {
        display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
        padding: 1.25rem 1.25rem 1.3rem; border-radius: 16px; background: var(--lamp);
    }
    .v2-nav .v2-mega a.v2-mega-feature:hover { background: #F2ECE3; }
    .v2-mega-kicker { font: 700 .7rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
    .v2-mega-feature b { font: 600 1.08rem/1.3 var(--font-display); color: var(--ink); }
    .v2-mega-feature small { font-size: .84rem; line-height: 1.45; color: var(--ink-soft); }
    .v2-nav .v2-mega a.v2-mega-dotd { flex-direction: row; align-items: center; gap: 1rem; }
    .v2-mega-dotd-cover { flex: 0 0 76px; width: 76px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; box-shadow: 0 6px 14px -6px rgba(22, 24, 29, .35); background: var(--wash); }
    .v2-mega-dotd-cover picture { display: contents; }
    .v2-mega-dotd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .v2-mega-feature-t { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

    /* Undergenrer som en rad längst ner */
    .v2-mega-foot { display: flex; align-items: baseline; gap: .5rem 1.25rem; margin-top: 1.5rem; padding: 1.1rem .55rem 0; border-top: 1px solid var(--line); }
    .v2-mega-foot-h { flex: 0 0 auto; font: 700 .72rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
    .v2-mega-foot ul { display: flex; flex-wrap: wrap; gap: 0 .2rem; }
    .v2-nav .v2-mega-foot a { display: inline-flex; padding: .3rem .45rem; font-size: .85rem; color: var(--ink-soft); border-radius: 6px; }
    .v2-nav .v2-mega-foot a:hover { color: var(--ink); }
}
@media (min-width: 1080px) and (prefers-reduced-motion: no-preference) {
    .v2-nav-item.is-open > .v2-mega { animation: v2-mega-in .16s ease-out; }
    @keyframes v2-mega-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 1080px) and (max-width: 1259px) {
    .v2-header-row > .v2-nav { gap: .8rem; }
    .v2-mega-grid { gap: 1.5rem; }
    .v2-mega-grid--upptack { grid-template-columns: 1fr 1.25fr 1fr; }
    .v2-nav .v2-mega-grid--upptack a.v2-mega-dotd { display: none; }
    .v2-mega-grid--ljud { grid-template-columns: 1.2fr .9fr 1.2fr; }
    .v2-nav .v2-mega-grid--ljud a.v2-mega-pitch { display: none; }
}
@media (prefers-reduced-motion: reduce) { .v2-mega-btn svg { transition: none; } }

/* Sidfoten: genrerna som en kompakt rad (huvudgenrerna + Alla genrer) */
.v2-footer .v2-fgenre-list { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0; padding: 0; }
.v2-footer .v2-fgenre-list a { font-size: .87rem; }
.v2-footer .v2-fgenre-list a.v2-fgenre-all { color: var(--accent); font-weight: 600; }
@media (max-width: 719px) {
    .v2-footer .v2-fgenre-list { gap: .5rem; padding-bottom: 1rem; }
    .v2-footer .v2-fgenre-list a {
        display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem;
        border: 1px solid var(--line-strong); border-radius: 999px; font-size: .86rem; font-weight: 600;
    }
}

/* ==========================================================================
   Inga avklippta texter (Fredrik 2026-09-28: "inga konstiga cut-offs").
   Ingen ellipsis, ingen line-clamp och ingen dold rad i v2. Texterna radbryts
   i stället (även Dagens bok visar hela texten). Förhandstexter som ska
   vara korta kortas i PHP (truncate_text) och får ett synligt "…".
   ========================================================================== */
html.v2 .book-description,
html.v2 .book-item .description,
html.v2 .recent-body .description,
html.v2 .featured-content .description,
html.v2 .v2-series .timeline-summary,
html.v2 .v2h-cont-text b,
html.v2 .v2-pbook-t,
html.v2 .v2-prow .v2-pbook-t {
    display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
}
html.v2 .price-meta,
html.v2 .scta-label,
html.v2 .scta-meta,
html.v2 .suggest-title,
html.v2 .suggest-meta,
html.v2 .v2-pcard-name > b,
html.v2 .v2-lr-name > b,
html.v2 .v2-sernav a > span:not([aria-hidden]),
html.v2 .v2-pbook-a,
html.v2 .v2-shelf-top-txt small,
html.v2 .v2-pact-ser span,
html.v2 .v2-mm-name b,
html.v2 .v2-set-preview-name b,
html.v2 .v2-mx-row-top b,
html.v2 .v2-mx-row-ctx,
html.v2 .v2-mx-row-pv,
html.v2 .v2-mx-grp-rd,
html.v2 .v2-mx-people small,
html.v2 .v2-mx-who h1,
html.v2 .v2-mx-who small,
html.v2 .v2-mx-ctx-l b,
html.v2 .v2-mx-pick span {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}

/* Nyhetsartikeln: rubrik, ingress, seriekort och brödtext delar samma spaltbredd (680 px)
   i stället för att brödtexten blir smalare än rubriken och kortet (2026-09-28). */
html.v2 .news-article .news-lede,
html.v2 .news-article .news-body { max-width: none; }

/* ==========================================================================
   Bredd-svep (2026-09-28): ingen text smalare än sin sektion med tom yta bredvid.
   Ingresser tar hela bredden (en till tre rader), fristående FAQ-block går i full
   bredd, flerstyckestext bryts i två spalter på dator. Texten är alltid vänsterställd.
   html.v2-prefixet vinner över sidgruppernas egna regler som laddas efter v2.css.
   ========================================================================== */
html.v2 .page-header .page-description { max-width: none; }
html.v2 .book-faq,
html.v2 .collection-faq,
html.v2 .collection-adaptations { max-width: none; margin-inline: 0; }
html.v2 .listen-compare .audiobook-lead,
html.v2 .editorial-box p,
html.v2 .v2-recap-intro,
html.v2 .tag-subgroup-intro,
html.v2 .v2-series .series-order-lead,
html.v2 .v2-series .collection-intro { max-width: none; }
/* Intro på kategori- och taggsidor: hela bredden, lite större läsgrad så raden bär */
html.v2 .tag-intro-card,
html.v2 .tag-intro p { max-width: none; }
/* Avslutande text på kategori- och taggsidor: hela bredden, två spalter på dator */
html.v2 .tag-outro { max-width: none; margin-inline: 0; }
@media (min-width: 1080px) {
    html.v2 .tag-intro p { font-size: 1.1rem; }
    html.v2 .tag-outro { columns: 2; column-gap: 3.5rem; }
    html.v2 .tag-outro > h2, html.v2 .tag-outro > h3 { column-span: all; }
    html.v2 .tag-outro > p:first-child { margin-top: 0; }
}
/* Ingresser i full bredd: undvik ensamma ord på sista raden */
html.v2 .page-header .page-description,
html.v2 .v2u-lead,
html.v2 .tag-subgroup-intro { text-wrap: pretty; }
html.v2 .series-listen .series-listen-disclosure { max-width: none; }

/* ==========================================================================
   Alignment-svep (2026-09-28): en spaltstruktur per sida, etiketter i linje
   med sina värden, rutnät utan ensamma kort.
   ========================================================================== */

/* --- Boksidan: samma spalter som seriesidan ---------------------------------
   Dator: vänsterspalt 360 px (omslag + klibbig prisruta), allt annat i en
   huvudspalt med EN vänsterkant. Rekommendationsraderna sist i full bredd. */
html.v2 .v2-bside { min-width: 0; }
/* Bokinfon i toppen har ingen egen inre marginal: samma vänsterkant som sektionerna under */
html.v2 .book-header > .book-info { padding: 0; }
/* Jämn luft mellan sektionerna under toppen (gridceller slår inte ihop marginaler) */
html.v2 .book-detail > :not(.book-header) { margin-top: 2.5rem; margin-bottom: 0; }
html.v2 .book-detail > .book-content > :first-child { margin-top: 0; }
html.v2 .book-info > .upcoming-badge { align-self: flex-start; }
/* Toppens block, lästid, brödtext och sektionerna delar spaltens bredd (alla bredder) */
html.v2 .book-detail .v2-bhero,
html.v2 .book-detail .book-summary,
html.v2 .book-detail .v2-ro { max-width: none; }
@media (max-width: 1079px) {
    html.v2 .v2-bside > .v2-pcard { display: none; }
}
@media (max-width: 768px) {
    html.v2 .v2-bside .book-cover { margin-inline: auto; }
}
@media (min-width: 1080px) {
    html.v2 .book-detail {
        grid-template-columns: 360px minmax(0, 1fr);
        column-gap: 4rem;
    }
    html.v2 .book-detail > * { grid-column: 2; }
    html.v2 .book-detail > .book-header { display: contents; }
    html.v2 .book-detail .v2-bside {
        grid-column: 1; grid-row: 1 / span 40; align-self: stretch;
    }
    html.v2 .book-detail .v2-bside .book-cover { width: 240px; }
    html.v2 .book-detail .v2-bside > .v2-pcard {
        display: block;
        position: sticky; top: 96px;
        margin-top: 2rem;
        border: 1px solid var(--line);
        border-radius: 22px;
        padding: 1.3rem 1.3rem 1.1rem;
        background: #fff;
        box-shadow: 0 10px 30px rgba(20, 22, 28, .07);
        max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain;
    }
    html.v2 .book-detail > .book-header > .book-info { grid-column: 2; min-width: 0; }
    /* Rekommendationerna: full bredd, sex i rad, aldrig en ensam bok på egen rad */
    html.v2 .book-detail > .similar-books { grid-column: 1 / -1; margin-top: 3rem; }
    html.v2 .book-detail > .similar-books .books-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}
@media (min-width: 720px) and (max-width: 1079px) {
    html.v2 .book-detail > .similar-books .books-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.75rem 1rem; }
}
/* Mobil: "Liknande böcker" blir en svepbar rad som de andra slutraderna */
@media (max-width: 719px) {
    html.v2 .book-detail > .similar-books .books-grid {
        display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 -1rem; padding: 0 1rem .4rem; scroll-padding-inline: 1rem;
    }
    html.v2 .book-detail > .similar-books .books-grid::-webkit-scrollbar { display: none; }
    html.v2 .book-detail > .similar-books .book-item { flex: 0 0 36%; scroll-snap-align: start; }
}

/* Beräknad lästid: hela spaltens bredd, rubrik + not till vänster, tempoval till höger */
html.v2 .reading-estimate { max-width: none; margin-top: 1.5rem; padding: 1rem 1.25rem; }
@media (min-width: 720px) {
    html.v2 .reading-estimate {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        align-items: center; column-gap: 1.5rem; row-gap: .15rem;
    }
    html.v2 .reading-estimate-head { grid-column: 1; grid-row: 1; }
    html.v2 .reading-estimate-note { grid-column: 1; grid-row: 2; }
    html.v2 .reading-estimate-paces { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
    html.v2 .reading-estimate-time { margin-left: .35rem; }
    html.v2 .reading-pace { flex: 0 0 auto; min-width: 5.5rem; }
}

/* Prisrutan och tjänsteraderna: villkoret bryts mellan delarna, aldrig mitt i
   "99 kr/mån". Köpraden: logga, namn och pris på samma linje, lager under. */
.v2-nw { white-space: nowrap; }
html.v2 .v2-pcard-list li { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; }
html.v2 .v2-pcard-list li > .store-logo { grid-row: 1; }
html.v2 .v2-pcard-btn { grid-column: 3; grid-row: 1 / span 2; }
html.v2 .v2-pcard-price { color: var(--ink); font-size: .9rem; }
html.v2 .v2-pcard-name > b { overflow-wrap: normal; hyphens: manual; }

/* Tillgängliga utgåvor: format och år i två fasta högerkolumner */
html.v2 .edition-header { flex-wrap: nowrap; }
html.v2 .edition-header h3 { flex: 1 1 auto; min-width: 0; margin: 0; }
html.v2 .edition-summary-meta {
    flex: 0 0 auto;
    display: grid; grid-template-columns: 6.75rem 2.75rem; align-items: center; column-gap: .5rem;
}
html.v2 .edition-summary-meta > .edition-year { grid-column: 2; grid-row: 1; justify-self: end; font-variant-numeric: tabular-nums; }
html.v2 .edition-summary-meta > .edition-format { grid-column: 1; grid-row: 1; justify-self: end; }
@media (max-width: 480px) {
    html.v2 .edition-summary-meta { grid-template-columns: auto 2.6rem; }
}

/* Visste du att: ikonen står vid första raden, udda antal fylls av ett brett sista kort */
html.v2 .book-facts .fact-list li { padding: 1.05rem 1.1rem 1.05rem 3.6rem; }
html.v2 .book-facts .fact-list li::before { top: 1rem; left: 1.1rem; }
@media (min-width: 720px) {
    html.v2 .book-facts .fact-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Spoilerfrågor: etiketten alltid på egen rad under frågan, i linje med frågetexten */
html.v2 .faq-item summary .spoiler-badge {
    display: table; margin: .4rem 0 0; vertical-align: baseline;
}

/* Läs den med andra: knapp och cirkelrader i linje med texten, inte med ikonen */
html.v2 .v2-bookcircles > .v2-btn,
html.v2 .v2-bookcircles > .v2-mycircle { margin-left: calc(42px + .9rem); }
html.v2 .v2-bookcircles { max-width: none; }
@media (max-width: 719px) {
    html.v2 .edition-item { padding: 0; }
    html.v2 .edition-header { flex-wrap: wrap; row-gap: .4rem; padding: .95rem 3rem .95rem 1.1rem; }
    html.v2 .edition-header h3 { flex: 1 1 100%; }
    html.v2 .edition-summary-meta { display: flex; gap: .6rem; }
    html.v2 .edition-summary-meta > .edition-year { order: 2; }
    html.v2 .edition-summary-meta:empty { display: none; }
}
@media (max-width: 719px) { html.v2 .book-info > .upcoming-badge { align-self: center; } }

/* --- Seriesidan: delnumret står i linje med omslagets överkant i varje rad,
   oavsett om raden har "Börja här"-etikett (som annars flyttade titeln) --- */
html.v2 .v2-series .timeline-marker { margin: 0; line-height: 1.1; padding-top: .1rem; text-align: left; }

/* --- Återblicken: textspalten tar bredden fram till högerspalten i stället för
   en 180 px tom remsa mellan dem; rubrik, grind, text och kort delar kanten --- */
@media (min-width: 1080px) {
    html.v2 .v2-recap { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 4rem; justify-content: stretch; }
}
html.v2 .v2-recap .v2-gate,
html.v2 .v2-recap .recap-body,
html.v2 .v2-recap .recap-threads,
html.v2 .v2-recap .recap-characters,
html.v2 .v2-recap .recap-next { max-width: none; }
html.v2 .v2-recap .v2-recap-next { max-width: none; }
html.v2 .v2-recap .v2-recap-next > div { flex: 1 1 auto; min-width: 0; }
/* Karaktärskorten: två i bredd på dator, ett udda sista kort tar hela raden */
@media (min-width: 720px) {
    html.v2 .v2-recap .recap-characters .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.v2 .v2-recap .recap-characters .character-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --- Startsidan och sidfoten --- */
/* Katalogtest-rutan: texten tar bredden fram till knappen */
html.v2 .home-compare .compare-callout-body { flex: 1 1 auto; min-width: 0; }
html.v2 .home-compare .compare-callout-sub { max-width: none; }
/* Sidfotens nederkant: copyright och annonstext på samma vänsterkant */
html.v2 .v2-footer .footer-bottom,
html.v2 .v2-footer .footer-bottom p { text-align: left; }
/* Liknande böcker: författarraden vänsterställd under titeln, som slutraderna */
html.v2 .book-detail > .similar-books .book-item .book-info,
html.v2 .book-detail > .similar-books .book-item .author { text-align: left; align-items: flex-start; }
/* v1-regeln .book-content .author (1rem marginal, större text) läcker in i bokkorten */
html.v2 .book-item .book-content .author { margin-bottom: 0; }
/* Nyhetsartikeln: "Böcker i artikeln" med lika breda omslag (1fr växte efter långa titlar) */
@media (min-width: 720px) { html.v2 .news-coupled-books .books-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }