.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%;
    aspect-ratio: 2 / 3;
    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/straztheme.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;
    }
}






















/* =========================
   HERO layout – kniha + info
   ========================= */

.hero-top {
    max-width: 1160px;
    margin: 0 auto;
    padding: 32px 24px 12px;
    display: grid;
    
   
    gap: 36px;
    align-items: center;
    transform: translateX(-20px);
}

@media (max-width:900px) {
    .hero-top {
        grid-template-columns: 1fr;
        gap: 20px;
        transform: none;
        padding: 20px 18px 12px;
    }
}

/* =========================
   BOOK WRAP
   ========================= */

.hero-book-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

@media (max-width:900px) {
    .hero-book-wrap {
        justify-content: center;
    }
}

/* =========================
   3D BOOK
   ========================= */

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

.hero-book3d {
    --w: 240px;
    --h: 340px;
    --t: 26px;
    width: var(--w);
    height: var(--h);
    position: relative;
    perspective: 900px;
    isolation: isolate;
}

@media (max-width:900px) {
    .hero-book3d {
        --w: 210px;
        --h: 300px;
        --t: 22px;
    }
}

@media (max-width:640px) {
    .hero-book3d {
        --w: 188px;
        --h: 270px;
        --t: 20px;
    }
}

.hero-book {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(var(--heroRy)) rotateX(var(--heroRx));
    transition: transform 120ms ease-out;
    will-change: transform;
}

    .hero-book .face {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
    }

    .hero-book .front {
        background: 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: inset -2px 0 6px rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.4);
    }

    .hero-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));
    }

    .hero-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));
    }

    .hero-book .pages {
        width: var(--t);
        height: calc(var(--h) - 6px);
        top: 3px;
        left: calc(50% - (var(--t)/2));
        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) );
        transform: rotateY(90deg) translateZ(calc((var(--w)/2) - 2px));
    }

/* tieň pod knihou */
.hero-book3d::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 78%;
    height: 18px;
    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);
    transition: transform 120ms ease-out,opacity 120ms ease-out;
    pointer-events: none;
}

/* =========================
   HERO INFO
   ========================= */

.book-hero-info {
    min-width: 0;
}

.book-title-main {
    margin: 10px 0 8px;
}

.book-subline {
    max-width: 640px;
    opacity: .85;
}

.book-status-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 4px;
    flex-wrap: wrap;
}

.book-cta-row {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* =========================
   MOBILE BUY BOX (pod popisom)
   ========================= */

.hero-buybox {
    display: none;
    margin-top: 16px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

    .hero-buybox .buy-box-price {
        font-size: 18px;
        font-weight: 700;
        margin: 10px 0;
    }

    .hero-buybox .buy-box-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

@media (max-width:900px) {
    .hero-buybox {
        display: block;
    }
}

/* =========================
   ACCESSIBILITY / motion
   ========================= */

@media (prefers-reduced-motion:reduce) {
    .hero-book,
    .hero-book3d::after {
        transition: none;
    }
}






/* aby social blok neovplyvňoval šírku gridu */
#heroTopTitle .hero-top-social {
    position: absolute;
    top: 18px;
    right: 18px;
    width: auto;
}

/* kniha vľavo, na mobile centrovať */
#heroTopTitle .hero-book-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.hero-book3d {
    flex: 0 0 auto;
}
@media (max-width:900px) {
    #heroTopTitle .hero-book-wrap {
        justify-content: center;
    }
}

#heroTopTitle .book-hero-info {
    width: 100%;
    max-width: 500px; /* ideálne pre čitateľný perex */
    min-width: 0; /* kritické pre grid/flex */
    width: 100%;
}


#heroTopTitle.hero-top {
    display: grid !important;

    justify-content: unset !important;
    align-items: center !important;
    text-align: left !important;
}





/* HERO layout bez gridu */


/* FIX: main.css prepisuje .hero-top na flex a centruje všetko -> stlačí layout */
#heroTopTitle.hero-top {
    justify-content: initial !important;
    max-width: 1160px;
    width: 100%;
    margin: 0 auto !important;
    text-align: left !important;
    pointer-events: auto !important; /* main.css má často pointer-events:none */
    padding: 32px 24px 12px !important;
    transform: translateX(-20px);
}




#heroTopTitle.hero-top {
    gap: 36px !important;
    align-items: center !important;
}

    /* poistka, aby sa pravý stĺpec vedel zmenšiť */
    #heroTopTitle.hero-top > * {
        min-width: 0;
    }



#heroTopTitle.hero-top {
    display: flex !important;
    align-items: center;
    gap: 36px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 32px 24px 12px;
    justify-content: flex-start; /* nech sa to nesnaží centrovať */
    text-align: left;
}




@media (max-width:900px) {
    #heroTopTitle.hero-top {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px 18px 12px !important;
        transform: none !important;
        text-align: center !important;
    }
}