.hero-books{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  gap: 22px;
  pointer-events:auto;
}

.hero-book3d{
  /* väčšie než mini, menšie než obrovská hero kniha */
  --w: 170px;
  --h: 250px;
  --t: 22px;
}

@media (max-width: 900px){
  .hero-book3d{ --w: 140px; --h: 206px; --t: 18px; }
}
@media (max-width: 640px){
  .hero-books{ gap:14px; }
  .hero-book3d{ --w: 120px; --h: 176px; --t: 16px; }
}

    @media (min-width:901px){
  .new-series-books{ flex-wrap: wrap; justify-content:center; }
}
@media (max-width:900px){
  .new-series-books{ flex-wrap: nowrap; }
}

.new-series-books--3 .new-book3d{ --w: 84px; --h: 122px; }
.new-series-books--5 .new-book3d{ --w: 84px; --h: 122px; }


/* desktop */
.new-series-books--3 .new-book3d{
  --w: 108px;
  --h: 158px;
  --t: 18px;
}

.new-series-books--5 .new-book3d{
  --w: 92px;
  --h: 134px;
  --t: 16px;
}

/* tablet */
@media (max-width:900px){
  .new-series-books--3 .new-book3d{ --w: 96px; --h: 140px; }
  .new-series-books--5 .new-book3d{ --w: 82px; --h: 120px; }
}

/* mobil */
@media (max-width:640px){
  .new-series-books--3 .new-book3d{ --w: 78px; --h: 114px; }
  .new-series-books--5 .new-book3d{ --w: 66px; --h: 96px; }
}

@media (max-width:720px) {
    .book-thumbm {
      
    }
}

    .hero-books {
        margin-top: 18px;
        display: flex;
        justify-content: center;
        gap: 22px;
        pointer-events: auto;
    }

    .hero-book3d {
        /* väčšie než mini, menšie než obrovská hero kniha */
        --w: 170px;
        --h: 250px;
        --t: 22px;
    }

    @media (max-width: 900px) {
        .hero-book3d {
            --w: 140px;
            --h: 206px;
            --t: 18px;
        }
    }

    @media (max-width: 640px) {
        .hero-books {
            gap: 14px;
        }

        .hero-book3d {
            --w: 120px;
            --h: 176px;
            --t: 16px;
        }
    }

    @media (min-width:901px) {
        .new-series-books {
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    @media (max-width:900px) {
        .new-series-books {
            flex-wrap: nowrap;
        }
    }

    .new-series-books--3 .new-book3d {
        --w: 84px;
        --h: 122px;
    }

    .new-series-books--5 .new-book3d {
        --w: 84px;
        --h: 122px;
    }


    /* desktop */
    .new-series-books--3 .new-book3d {
        --w: 108px;
        --h: 158px;
        --t: 18px;
    }

    .new-series-books--5 .new-book3d {
        --w: 92px;
        --h: 134px;
        --t: 16px;
    }

    /* tablet */
    @media (max-width:900px) {
        .new-series-books--3 .new-book3d {
            --w: 96px;
            --h: 140px;
        }

        .new-series-books--5 .new-book3d {
            --w: 82px;
            --h: 120px;
        }
    }

    /* mobil */
    @media (max-width:640px) {
        .new-series-books--3 .new-book3d {
            --w: 78px;
            --h: 114px;
        }

        .new-series-books--5 .new-book3d {
            --w: 66px;
            --h: 96px;
        }
    }

    /* =========================
   NEW - SERIES SECTION (final)
   ========================= */

    .new-series-section {
        position: relative;
    }

    .new-series-wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
    }

    .new-series-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 40px;
    }

    /* =========================
   CARD BASE
   ========================= */

    .new-series-card {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        text-decoration: none;
        color: #fff;
        border: 1px solid rgba(255,255,255,.06);
        transition: transform .6s ease, box-shadow .6s ease;
        isolation: isolate;
    }


    .new-series-content {
        position: relative;
    }

    .new-series-content {
        position: relative;
        z-index: 2;
        padding: 34px 36px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: transform .6s ease;
    }


        .new-series-content::before {
            content: "";
            position: absolute;
            /* panel je len tam, kde je text+obsah */
            top: 18px;
            left: 22px;
            right: 22px;
            bottom: 18px;
            border-radius: 16px;
            pointer-events: none;
            z-index: -1;
            background: linear-gradient( to bottom, rgba(0,0,0,.05), rgba(0,0,0,.15) );
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
            opacity: .75;
        }



    .new-book .front {
        filter: contrast(1.02) brightness(1.02) saturate(1.01);
    }

    .new-book .front,
    .new-book .back {
        image-rendering: auto;
        backface-visibility: hidden;
        transform-style: flat;
    }

    .new-book {
        transform: translateZ(0);
        will-change: transform;
    }

    .new-series-card {
        background-blend-mode: normal;
    }

    .new-series-guardians,
    .new-series-biosector {
        filter: saturate(1.05) brightness(1.04) contrast(1.03);
    }

    .new-series-guardians {
        --new-border: rgba(255,200,120,.78);
        --new-glow-color: rgba(255,200,120,.30);
        background: linear-gradient(rgba(10,10,14,.22), rgba(10,10,14,.35)), url('/image/new/straztheme.jpg') center/cover no-repeat, rgba(14,16,20,.85);
    }

    .new-series-biosector {
        --new-border: rgba(140,180,255,.78);
        --new-glow-color: rgba(140,180,255,.28);
        background: linear-gradient(rgba(10,10,22,.18), rgba(10,10,32,.32)), url('/image/new/prortheme3.jpg') center/cover no-repeat, rgba(14,16,20,.85);
    }


    .new-series-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 80px rgba(0,0,0,.6);
    }

    /* =========================
   GLOW LAYER
   ========================= */

    .new-series-glow {
        position: absolute;
        inset: -40%;
        background: radial-gradient( circle at var(--x, 30%) var(--y, 30%), var(--new-glow-color), transparent 60% );
        opacity: .22;
        pointer-events: none;
        transition: opacity .6s ease, transform .6s ease;
        z-index: 0;
        mix-blend-mode: screen;
    }

    .new-series-card:hover .new-series-glow {
        opacity: .45;
        transform: scale(1.1);
    }

    /* =========================
   LIGHT BORDER (animated sweep)
   ========================= */

    @property --new-a {
        syntax: "<angle>";
        inherits: true;
        initial-value: 210deg;
    }

    .new-series-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        padding: 1px;
        pointer-events: none;
        z-index: 3;
        background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), conic-gradient( from var(--new-a), transparent 0 18%, var(--new-border) 20%, rgba(255,255,255,.18) 24%, transparent 28% 55%, var(--new-border) 58%, rgba(255,255,255,.12) 62%, transparent 66% 100% );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        opacity: .72;
        filter: blur(.15px);
        transition: opacity .4s ease, filter .4s ease;
    }

    .new-series-card:hover::after {
        opacity: .95;
        filter: blur(0);
        animation: new-border-sweep 10.6s linear infinite;
    }

    @keyframes new-border-sweep {
        from {
            --new-a: 210deg;
        }

        to {
            --new-a: 570deg;
        }
    }

    /* jemný vnútorný okraj len na borde */
    .new-series-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        padding: 1px;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient( 135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.10) );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        opacity: .10;
    }

    /* =========================
   CONTENT
   ========================= */

    .new-series-content {
        position: relative;
        z-index: 2;
        padding: 34px 36px;
        transition: transform .6s ease;
    }

    .new-series-card:hover .new-series-content {
        transform: scale(1.00);
    }

    .new-series-tag {
        display: inline-block;
        font-size: 12px;
        letter-spacing: .18em;
        text-transform: uppercase;
        opacity: .75;
    }

    .new-series-title {
        font-size: 34px;
        margin: 10px 0 12px;
        letter-spacing: .01em;
        font-weight: 800;
    }

    .new-series-desc {
        font-size: 15px;
    }

    .new-series-desc {
        max-width: 520px;
    }

    .new-series-books {
        justify-content: center;
    }

    .new-series-link {
        margin-top: 22px;
    }

    /* =========================
   BOTTOM ROW (books + CTA)
   ========================= */

    .new-series-bottom {
        margin-top: 26px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
    }

    .new-series-actions {
    }

    .new-series-actions {
        width: 100%;
        display: flex;
        justify-content: center;
    }

        .new-series-actions .lore-btn {
            white-space: nowrap;
        }

    /* =========================
   BOTTOM ROW (books + CTA)
   ========================= */

    .new-series-bottom {
        margin-top: 26px;
        display: flex;
        flex-direction: column; /* CTA ide pod knihy */
        align-items: flex-start;
        gap: 18px;
    }

    .new-series-actions {
        width: 100%;
    }

        .new-series-actions .lore-btn {
            white-space: nowrap;
        }

    /* =========================
   BOOKS (bigger, no frame, no rounding, no tilt)
   ========================= */

    .new-series-books {
        display: flex;
        align-items: flex-end;
        gap: 16px;
        position: relative;
        padding-bottom: 10px; /* priestor pre tieň */
    }

        /* jemná "polica" pod knihami – bez boxu okolo */
        .new-series-books::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 14px;
            border-radius: 999px;
            background: radial-gradient(ellipse at center, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%);
            opacity: .30;
            pointer-events: none;
        }

        .new-series-books img {
            width: 92px; /* default väčšie */
            height: auto;
            border-radius: 0; /* bez zaoblenia */
            box-shadow: 0 14px 34px rgba(0,0,0,.60);
            transition: transform .22s ease, filter .22s ease;
            transform: none; /* bez natočenia */
        }

            /* hover iba jemné vyzdvihnutie */
            .new-series-books img:hover {
                transform: translateY(-8px) scale(1.02);
                filter: brightness(1.06);
                z-index: 5;
            }

    /* varianty podľa počtu kníh */
    .new-series-books--3 img {
        width: 104px;
    }

    .new-series-books--5 img {
        width: 86px;
    }

    /* hover karty: jemne zväčši odstup medzi knihami */
    .new-series-card:hover .new-series-books {
    }

    /* =========================
   RESPONSIVE tweaks
   ========================= */




    @media (max-width:900px) {
        .new-series-books {
            gap: 14px;
        }

        .new-series-books--3 img {
            width: 96px;
        }

        .new-series-books--5 img {
            width: 80px;
        }
    }

    @media (max-width:640px) {
        .new-series-books {
            width: 100%;
            justify-content: center;
            gap: 12px;
        }

        .new-series-books--3 img {
            width: 86px;
        }

        .new-series-books--5 img {
            width: 72px;
        }
    }

    /* =========================
   MOBILE FIX – series cards
   ========================= */

    @media (max-width:900px) {
        .new-series-grid {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .new-series-content {
            padding: 28px 22px;
        }
    }

    /* malé mobily */
    @media (max-width:900px) {
        /* CTA nech sa nezlomí layoutom */
        .new-series-actions .lore-btn {
            white-space: normal; /* dôležité */
            width: 100%;
            text-align: center;
        }

        /* knihy nech sa neprerazia cez šírku */
        .new-series-books {
            width: 100%;
            justify-content: center;
            gap: 10px;
            flex-wrap: nowrap;
        }

        /* ak sú knihy veľké, zmenšíme ich */
        .new-series-books--3 .new-book3d {
            --w: 64px;
            --h: 92px;
            --t: 12px;
        }

        .new-series-books--5 .new-book3d {
            --w: 52px;
            --h: 76px;
            --t: 11px;
        }
    }

    /* extra malé (ak by niekto mal 360px alebo menej) */
    @media (max-width:380px) {
        .new-series-books {
            gap: 8px;
        }

        .new-series-books--3 .new-book3d {
            --w: 58px;
            --h: 84px;
        }

        .new-series-books--5 .new-book3d {
            --w: 46px;
            --h: 68px;
        }
    }



    .book-card-full .card-inner {
        display: contents; /* deti sa budú správať ako priami potomkovia .book-card-full gridu */
    }

    .book-card-full {
        display: block;
        padding: 20px;
    }

        .book-card-full .card-inner {
            display: grid;
            grid-template-columns: 200px minmax(0, 1fr);
            gap: 20px;
            align-items: center;
        }

        .book-card-full .book-body {
            min-width: 0;
        }

        .book-card-full .book-body {
            min-width: 0; /* KRITICKÉ */
        }

    .book-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        min-width: 0;
    }

    .book-meta-pill {
        white-space: nowrap;
    }

    .book-card-full .card-inner {
        justify-items: stretch;
    }

    .book-card-full .book-body {
        text-align: left;
    }

    @media (max-width: 720px) {
        .book-card-full .card-inner {
            grid-template-columns: 1fr;
            justify-items: center;
            text-align: center;
        }

        .book-card-full .book-body {
            min-width: 0;
            text-align: center;
        }
    }


    .book-thumbm {
        width: 100%;
        
        background: initial !important;
        border-radius: 0px !important;
        border: 0px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-dim);
        font-size: 14px;
        text-align: center;
    }


    /* =========================================
   CARD GLOW BACKGROUND (book cards + about)
   ========================================= */

    .book-card-full,
    .series-about--glow {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,.08);
        background: rgba(18, 20, 26, .72);
        box-shadow: 0 18px 50px rgba(0,0,0,.45);
        isolation: isolate;
    }

        /* vnútorný obsah nad pozadiami */
        .book-card-full .card-inner,
        .series-about--glow .card-inner {
            position: relative;
            z-index: 2;
        }

        /* pozadie z obrázka (jemné, tmavé, rozmazané) */
        .book-card-full .card-bg,
        .series-about--glow .card-bg {
            position: absolute;
            inset: -20%;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.06), transparent 55%), linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.80)), var(--bg) center/cover no-repeat;
            filter: blur(14px) saturate(.85) contrast(.92) brightness(.70);
            transform: scale(1.08);
            opacity: .85;
        }

            /* jemná "hmla" aby sa pozadie viac spojilo s kartou */
            .book-card-full .card-bg::after,
            .series-about--glow .card-bg::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient( 120deg, rgba(255,200,120,.05), rgba(140,180,255,.05) );
                opacity: .35;
            }

        /* glow ako na titulke (ale nižšia intenzita) */
        .book-card-full .new-series-glow,
        .series-about--glow .new-series-glow {
            position: absolute;
            inset: -40%;
            z-index: 1;
            pointer-events: none;
            background: radial-gradient( circle at var(--x, 35%) var(--y, 35%), rgba(255,255,255,.14), transparent 60% );
            opacity: .18;
            mix-blend-mode: screen;
        }

    /* lesklý border sweep - prebraté, ale jemné */
    @property --new-a {
        syntax: "<angle>";
        inherits: true;
        initial-value: 210deg;
    }

    .book-card-full::after,
    .series-about--glow::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        padding: 1px;
        z-index: 3;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)), conic-gradient( from var(--new-a), transparent 0 18%, rgba(255,255,255,.22) 20%, rgba(255,255,255,.08) 24%, transparent 28% 55%, rgba(255,255,255,.18) 58%, rgba(255,255,255,.06) 62%, transparent 66% 100% );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        opacity: .60;
    }

    /* animácia len na hover, aby to nebolo rušivé */
    .book-card-full:hover::after,
    .series-about--glow:hover::after {
        opacity: .90;
        animation: new-border-sweep 10.6s linear infinite;
    }

    @keyframes new-border-sweep {
        from {
            --new-a: 210deg;
        }

        to {
            --new-a: 570deg;
        }
    }

    /* hover trochu zdvihne kartu */
    .book-card-full:hover,
    .series-about--glow:hover {
        transform: translateY(-4px);
        transition: transform .35s ease, box-shadow .35s ease;
        box-shadow: 0 26px 70px rgba(0,0,0,.55);
    }

    /* layout bezpečne: aby pozadie neprebíjalo text */
    .book-card-full .book-body,
    .series-about--glow .series-about-text {
        position: relative;
    }

    /* odporúčanie: text trochu čitateľnejší nad image-wash */
    .book-card-full .book-desc,
    .series-about--glow p {
        color: rgba(255,255,255,.74);
    }


    /* =========================
   3D BOOK (clean + stable)
   ========================= */

    .book3d {
        /* rozmery knihy */
        --w: 220px;
        --h: 320px;
        --t: 28px;
        /* strany sú menšie než obálka */
        --pagesInsetTop: 6px;
        --pagesInsetBottom: 6px;
        --pagesInsetOuter: 5px;
        --paper: #eee9df;
        --paper2: #d8d3c8;
        --spine: #2b1c18;
        --spine2: #5b2b22;
        width: var(--w);
        height: var(--h);
        display: inline-block;
        position: relative;
        /* 3D */
        perspective: 1100px;
        /* Dôležité: nech kniha nerobí problémy vrstveniu mimo seba */
        isolation: isolate;
        z-index: 1;
    }

        /* jadro knihy */
        .book3d .book {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            /* základné natočenie cez premenné */
            --ry: -32deg;
            --rx: 2deg;
            transform: rotateY(var(--ry)) rotateX(var(--rx));
            transition: transform 420ms cubic-bezier(.2,.8,.2,1);
            will-change: transform;
        }

        /* hover len zmení premenné */
        .book3d:hover .book {
            --ry: -18deg;
            --rx: 1deg;
        }

        /* plochy */
        .book3d .face {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* front */
        .book3d .front {
            background: var(--cover) center/cover no-repeat;
            transform: translateZ(calc(var(--t) / 2));
            box-shadow: 0 20px 40px rgba(0,0,0,.45);
        }

        /* back */
        .book3d .back {
            background: var(--cover) center/cover no-repeat;
            transform: translateZ(calc(var(--t) / -2));
        }

        /* spine/pages/top/bottom majú vlastnú šírku a sú v strede */
        .book3d .spine,
        .book3d .pages,
        .book3d .top,
        .book3d .bottom {
            position: absolute;
            left: calc(50% - (var(--t) / 2));
            width: var(--t);
        }

        /* spine – ľavá stena */
        .book3d .spine {
            height: var(--h);
            background: linear-gradient(90deg, var(--spine), var(--spine2));
            box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
            transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
        }

        /* pages – pravá stena (menšia než obálka) */
        .book3d .pages {
            top: var(--pagesInsetTop);
            height: calc(var(--h) - var(--pagesInsetTop) - var(--pagesInsetBottom));
            transform: rotateY(90deg) translateZ(calc((var(--w) / 2) - var(--pagesInsetOuter)));
            background: linear-gradient(90deg, var(--paper2), var(--paper) 40%, #fff 55%, var(--paper2) );
            box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset, -3px 0 8px rgba(0,0,0,.15);
        }

        /* horná a spodná hrana (jemný 3D efekt) */
        .book3d .top {
            height: var(--t);
            top: 0;
            width: var(--w);
            left: 0;
            background: linear-gradient(180deg, #f5f2ec, #ddd6ca);
            transform: rotateX(90deg) translateZ(calc(var(--t) / 2));
            transform-origin: top center;
        }

        .book3d .bottom {
            height: var(--t);
            bottom: 0;
            width: var(--w);
            left: 0;
            background: linear-gradient(180deg, #cfc8bc, #e7e1d7);
            transform: rotateX(-90deg) translateZ(calc(var(--t) / 2));
            transform-origin: bottom center;
        }

    /* =========================
   HERO placement + layering
   ========================= */

    .hero-bottom {
        position: relative;
        width: 100%;
        height: 340px;
        overflow: visible;
        /* aby hero vrstvy nenarušovali zvyšok */
        isolation: isolate;
        pointer-events: none;
    }

        .hero-bottom::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        /* Kniha vpravo */
        .hero-bottom .book3d {
            position: absolute;
            left: 63%;
            top: 40px;
            bottom: 0;
            pointer-events: auto;
            /* nízko, aby menu vždy vyhralo */
            z-index: 2;
        }

            /* Tieň pod knihou */
            .hero-bottom .book3d::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: -14px;
                width: 78%;
                height: 20px;
                /* NEW: tieň sa posúva a jemne mení */
                transform: translateX(-50%) translate(var(--shx, 0px), var(--shy, 0px)) scale(var(--shs, 1));
                background: radial-gradient(ellipse at center, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 70%);
                filter: blur(7px);
                pointer-events: none;
                z-index: 0;
                transition: transform 140ms ease-out, opacity 140ms ease-out;
                opacity: var(--sho, .85);
            }

    /* =========================
   STATUS BADGE (stable)
   ========================= */

    .book-status {
        position: absolute;
        left: 52%;
        bottom: -50px;
        transform: translateX(-50%) rotate(-0deg);
        width: 120px;
        padding: 10px 14px;
        border-radius: 10px;
        font-size: 13px;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-weight: 700;
        color: rgba(255,255,255,.92);
        background: rgba(10,10,12,.62);
        border: 1px solid rgba(255,255,255,.14);
        box-shadow: 0 10px 26px rgba(0,0,0,.45);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        pointer-events: none;
        /* vyššie než kniha aj tieň */
        z-index: 5;
    }

        .book-status::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: 10px;
            pointer-events: none;
            background: linear-gradient( 135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%, rgba(255,255,255,.10) 100% );
            mix-blend-mode: screen;
            opacity: .55;
            z-index: 1;
        }

    /* Varianty stavu */
    .book--status-sale .book-status {
        background: rgba(18, 30, 18, .62);
        border-color: rgba(120, 255, 140, .22);
    }

    .book--status-preorder .book-status {
        background: rgba(24, 20, 10, .62);
        border-color: rgba(255, 210, 120, .22);
    }

    .book--status-soon .book-status {
        background: rgba(18, 18, 30, .62);
        border-color: rgba(140, 170, 255, .22);
    }

    /* =========================
   Responsive
   ========================= */

    @media (max-width: 768px) {
        .book-status {
            bottom: -50px;
            font-size: 12px;
            padding: 9px 12px;
        }
    }

    /* EXTRA SMALL */
    @media (max-width: 640px) {


        /* radšej nescaleovať celý kontajner, nech sedí perspektíva */
        /* ak chceš menšie, rieš cez --w/--h vyššie */
        .hero-bottom .book3d {
            left: auto;
            right: 5%;
            top: 85px;
        }


        .hero-bg-layer {
            background-image: url('/image/new/topts2mob.jpg');
            background-size: cover;
            background-position: center center;
        }
    }

    /* =========================
   MINI 3D BOOK (series boxes)
   ========================= */

    .new-book3d {
        width: var(--w);
        height: var(--h);
        perspective: 700px;
        flex-shrink: 0;
    }

    .new-book {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        /* jemný default náklon – rovnaký pre všetky */
        transform: rotateY(-18deg) rotateX(6deg);
        transition: transform .35s ease;
    }

    /* hover – iba mierne priblíženie */
    .new-series-card:hover .new-book {
        transform: rotateY(-10deg) rotateX(4deg) scale(1.05);
    }

    /* spoločné */
    .new-book .face {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
    }

    /* obálka */
    .new-book .front {
        background: var(--cover) center/cover no-repeat;
        transform: translateZ(calc(var(--t)/2));
        box-shadow: 0 10px 24px rgba(0,0,0,.55);
    }

    /* zadná strana – tlmená */
    .new-book .back {
        background: linear-gradient( rgba(0,0,0,.35), rgba(0,0,0,.55) ), var(--cover) center/cover no-repeat;
        transform: translateZ(calc(var(--t) / -2));
    }

    /* chrbát */
    .new-book .spine {
        width: var(--t);
        height: var(--h);
        left: calc(50% - (var(--t)/2));
        background: linear-gradient(90deg,#2b1c18,#5b2b22);
        transform: rotateY(-90deg) translateZ(calc(var(--w)/2));
    }

    /* stránky */
    .new-book .pages {
        width: var(--t);
        height: calc(var(--h) - 6px);
        top: 3px;
        left: calc(50% - (var(--t)/2));
        background: linear-gradient(90deg,#d8d3c8,#f5f2ec);
        transform: rotateY(90deg) translateZ(calc((var(--w)/2) - 2px));
    }

    .new-series-books {
        display: flex;
        gap: 11px;
        align-items: flex-end;
    }




    .new-series-title {
        text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.45);
    }

    .new-series-desc {
        text-shadow: 0 1px 2px rgba(0,0,0,.75);
    }

    .new-series-title,
    .new-series-desc {
        filter: contrast(1.05);
    }


    .book .front {
        background:
        /* jemná drážka pri zadnej hrane */
        linear-gradient( to left, transparent 0%, transparent 94%, rgba(0,0,0,.18) 95%, rgba(255,255,255,.12) 97%, rgba(0,0,0,.22) 98%, transparent 99% ), var(--cover) center/cover no-repeat;
        transform: translateZ(calc(var(--t) / 2));
        box-shadow: 0 20px 40px rgba(0,0,0,.45);
    }

    .book .front {
        box-shadow: inset -2px 0 6px rgba(0,0,0,.25), 0 20px 40px rgba(0,0,0,.45);
    }

    .new-book .front {
        background:
        /* jemná drážka pri zadnej hrane */
        linear-gradient( to left, transparent 0%, transparent 94%, rgba(0,0,0,.18) 95%, rgba(255,255,255,.12) 97%, rgba(0,0,0,.22) 98%, transparent 99% ), var(--cover) center/cover no-repeat;
        transform: translateZ(calc(var(--t) / 2));
        box-shadow: 0 20px 40px rgba(0,0,0,.45);
    }

    .new-series-books .pages {
        filter: blur(.15px);
    }

    .new-book,
    .new-series-books .book {
        -webkit-font-smoothing: antialiased;
        image-rendering: auto;
    }

        .new-book .front {
            box-shadow: inset -2px 0 6px rgba(0,0,0,.25), 0 20px 40px rgba(0,0,0,.45);
        }

    .new-book {
        box-shadow: inset -2px 0 6px rgba(0,0,0,.25), 0 20px 40px rgba(0,0,0,.45);
    }

        .new-book .pages {
            background: linear-gradient( to right, rgba(0,0,0,.18), rgba(255,255,255,.95) 20%, rgba(255,255,255,.92) 80%, rgba(0,0,0,.12) );
            /* zjemnenie hrany */
            box-shadow: inset 1px 0 1px rgba(255,255,255,.25), inset -1px 0 2px rgba(0,0,0,.25);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

    body {
        background: #05070d;
    }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            background-image: url('/image/stars.jpg');
            background-repeat: repeat;
            background-size: cover;
            background-position: center top;
            opacity: 0.1;
            z-index: -1;
            pointer-events: none;
        }

    .main-content {
        background: rgba(5, 7, 13, 0.65);
    }

    header {
        background: linear-gradient( to bottom, rgba(5,7,13,0.9), rgba(5,7,13,0) );
    }


    .hero-bg-layer {
        background-image: url('/image/new/prortheme3.jpg');
    }

    /* HERO knihy – centrovanie a odstupy */
    .new-series-bottom {
        width: 100%;
        display: flex;
        justify-content: center; /* hlavné centrovanie */
        align-items: center;
        margin-top: 18px;
    }

    .new-series-books {
        width: 100%;
        display: flex;
        justify-content: center; /* centrovanie kníh vnútri */
        gap: 14px;
        align-items: flex-end;
    }

    /* ak chceš, aby sa to opticky držalo pod názvom */
    .hero-inner .new-series-bottom {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
    }

    /* plynulejší tilt */
    .new-book {
        transition: transform 120ms ease-out; /* rýchle, jemné */
        will-change: transform;
        transform-style: preserve-3d;
    }

    /* keď je reduced motion, tilt vypneme */
    @media (prefers-reduced-motion: reduce) {
        .new-book {
            transition: none !important;
        }
    }

    /* tieň pod mini knihou, ovládaný premennými */
    .new-book3d {
        position: relative;
        isolation: isolate;
    }

        .new-book3d::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -10px;
            width: 76%;
            height: 16px;
            transform: translateX(-50%) translate(var(--shx, 0px), var(--shy, 0px)) scale(var(--shs, 1));
            background: radial-gradient(ellipse at center, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 70%);
            filter: blur(7px);
            opacity: var(--sho, .85);
            pointer-events: none;
            z-index: 0;
            transition: transform 120ms ease-out, opacity 120ms ease-out;
        }

        /* aby kniha bola nad tieňom */
        .new-book3d .new-book {
            position: relative;
            z-index: 1;
        }

    .new-book {
    }

    .new-book3d {
        //box-shadow: inset -10px 0 2px rgba(0, 0, 0, 1.25), 8px 18px 40px rgba(0, 0, 0, 1.25);
    }


    /* ===== HERO-controlled tilt (SINGLE SOURCE OF TRUTH) ===== */

    :root {
        --heroRy: -18deg;
        --heroRx: 6deg;
        --heroShX: 0px;
        --heroShY: 0px;
        --heroShS: 1;
        --heroShO: .85;
    }

    .new-book {
        transform: rotateY(var(--heroRy)) rotateX(var(--heroRx));
        transition: transform 120ms ease-out;
        will-change: transform;
        transform-style: preserve-3d;
    }

    /* tieň pod mini knihami */
    .new-book3d {
        position: relative;
        isolation: isolate;
    }

        .new-book3d::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -10px;
            width: 76%;
            height: 16px;
            transform: translateX(-50%) translate(var(--heroShX), var(--heroShY)) scale(var(--heroShS));
            background: radial-gradient(ellipse at center, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 70%);
            filter: blur(7px);
            opacity: var(--heroShO);
            pointer-events: none;
            z-index: 0;
            transition: transform 120ms ease-out, opacity 120ms ease-out;
        }

        .new-book3d .new-book {
            position: relative;
            z-index: 1;
        }

    /* zjemnenie obálok, aby ladili s hmlovým hero pozadím */
    .new-series-bottom .new-book .front {
        filter: brightness(.96) contrast(.92) saturate(.92);
    }

    .new-series-bottom .new-book .back {
        filter: brightness(.92) contrast(.90) saturate(.90);
    }

    .new-series-bottom {
        position: relative;
    }

        .new-series-bottom::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: min(520px, 92vw);
            height: 220px;
            transform: translate(-50%, -40%);
            background: radial-gradient(closest-side, rgba(255,180,120,.18), rgba(255,180,120,0) 70%);
            filter: blur(10px);
            opacity: .7;
            pointer-events: none;
            z-index: 0;
        }

        .new-series-bottom .new-series-books {
            position: relative;
            z-index: 1;
        }

    .new-book .front {
        box-shadow: inset -2px 0 6px rgba(0,0,0,.18), 0 16px 34px rgba(0,0,0,.32); /* bolo silnejšie */
    }

        .new-book .front::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,.04);
            mix-blend-mode: overlay;
            pointer-events: none;
        }

    @media (max-width: 900px) {
        .book-card-full .book-card-3d {
            --w: 200px !important;
            --h: 290px !important;
            --t: 20px !important;
        }
    }

    @media (max-width: 640px) {
        .book-card-full .book-card-3d {
            --w: 170px !important;
            --h: 250px !important;
            --t: 18px !important;
        }
    }