/* =====================================================
   ZXUS STORE
   PREMIUM VISUAL IDENTITY
   DARK / GOLD / SILVER
   MOBILE FIRST
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #050505;
    --bg-2: #0b0b0c;
    --panel: #101011;
    --panel-2: #151516;

    --gold: #d6b56a;
    --gold-light: #f4dfaa;
    --gold-dark: #8e6c2d;

    --silver: #dfe4e8;
    --text: #f5f5f5;
    --muted: #8d8d91;
    --line: rgba(255,255,255,.10);

    --radius: 4px;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    background: var(--bg);

    color: var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    overflow-x: hidden;

    padding-bottom: 78px;
}


/* =====================================================
   SPLASH
===================================================== */

#intro {
    position: fixed;

    inset: 0;

    z-index: 99999;

    background:
        radial-gradient(
            circle at center,
            #16191d 0%,
            #090a0c 38%,
            #020202 78%
        );

    display: flex;

    align-items: center;
    justify-content: center;

    transition:
        opacity 1.2s ease;
}

#intro.splash-finished {
    opacity: 0;

    pointer-events: none;
}

#particles {
    position: absolute;

    inset: 0;

    overflow: hidden;
}

#particles canvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    pointer-events: none;
}


/* =====================================================
   SIMPLE SILVER ZXUS SPLASH
===================================================== */

.simple-zxus-logo {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            55px,
            18vw,
            140px
        );

    font-weight:
        700;

    letter-spacing:
        8px;

    color:
        #eeeeee;

    text-align:
        center;

    text-shadow:
        0 0 8px
        rgba(255,255,255,.18),

        0 0 25px
        rgba(255,255,255,.08);

    animation:
        zxusAppear
        1.2s
        ease-out
        forwards;
}

@keyframes zxusAppear {

    from {
        opacity: 0;

        transform:
            scale(.92);

        filter:
            blur(8px);
    }

    to {
        opacity: 1;

        transform:
            scale(1);

        filter:
            blur(0);
    }
}


/* =====================================================
   HOME
===================================================== */

#home {
    width: 100%;

    max-width: 1400px;

    margin: auto;
}


/* =====================================================
   HEADER
===================================================== */

.top-header {
    height: 68px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 18px;

    background:
        rgba(5,5,5,.96);

    border-bottom:
        1px solid var(--line);

    position: sticky;

    top: 0;

    z-index: 1000;

    backdrop-filter:
        blur(12px);
}


/* =====================================================
   LOGO
===================================================== */

.brand {
    display: flex;

    align-items: baseline;

    gap: 5px;

    letter-spacing: 2px;
}

.brand span {
    font-size: 20px;

    font-weight: 700;

    background:
        linear-gradient(
            110deg,
            #8d6a2c,
            #f8e6ac,
            #b98a35,
            #fff1bb,
            #8d6829
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}

.brand small {
    font-size: 8px;

    letter-spacing: 2px;

    color: #aaa;
}


/* =====================================================
   HEADER BUTTONS
===================================================== */

.header-actions {
    display: flex;

    align-items: center;

    gap: 8px;
}

.icon-btn {
    width: 38px;

    height: 38px;

    border:
        1px solid var(--line);

    border-radius: 50%;

    background: #111;

    color: #eee;

    font-size: 20px;

    cursor: pointer;

    transition:
        .25s ease;
}

.icon-btn:active {
    transform:
        scale(.92);
}

.icon-btn:hover {
    border-color:
        var(--gold-dark);

    color:
        var(--gold-light);
}


/* =====================================================
   ZXUS POINTS
===================================================== */

.points-mini {
    height: 38px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(214,181,106,.28);

    background:
        linear-gradient(
            135deg,
            rgba(214,181,106,.10),
            rgba(255,255,255,.025)
        );

    color: white;

    cursor: pointer;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    transition:
        .25s ease;
}

.points-mini:active {
    transform:
        scale(.95);
}

.points-mini:hover {
    border-color:
        rgba(244,223,170,.65);
}

.points-symbol {
    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--gold-light);

    font-size: 15px;

    border:
        1px solid
        rgba(214,181,106,.4);

    border-radius: 50%;

    text-shadow:
        0 0 9px
        rgba(244,223,170,.5);
}

.points-data {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1;
}

.points-data small {
    color:
        #77777b;

    font-family:
        Arial,
        sans-serif;

    font-size: 6px;

    letter-spacing:
        1.2px;

    margin-bottom: 4px;
}

.points-data strong {
    color:
        var(--gold-light);

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 500;
}


/* =====================================================
   ZXUS PROFILE PHOTO
===================================================== */

.profile-photo-btn {
    width: 38px;

    height: 38px;

    padding: 0;

    margin: 0;

    border: none;

    outline: none;

    border-radius: 50%;

    background: #ffffff;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    flex-shrink: 0;

    box-shadow: none;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        transform .15s ease;
}

.profile-photo-btn:hover {
    border: none;

    box-shadow: none;
}

.profile-photo-btn:focus {
    outline: none;

    border: none;

    box-shadow: none;
}

.profile-photo-btn:active {
    transform:
        scale(.96);
}

#profileImage {
    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    display: none;
}

.profile-photo-btn.has-image #profileImage {
    display: block;
}


/* =====================================================
   SEARCH
===================================================== */

.search-box {
    margin:
        14px 16px 0;

    height: 44px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        0 14px;

    background: #101011;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 3px;

    transition:
        border .25s ease;
}

.search-box:focus-within {
    border-color:
        rgba(214,181,106,.55);
}

.search-box span {
    color:
        var(--gold);

    font-size: 19px;
}

.search-box input {
    width: 100%;

    border: 0;

    outline: 0;

    background: transparent;

    color: white;

    font-family: inherit;

    font-size: 12px;
}

.search-box input::placeholder {
    color: #69696c;
}


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

.hero {
    position: relative;

    min-height: 470px;

    margin:
        16px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        radial-gradient(
            ellipse at 75% 45%,
            rgba(164,126,53,.16),
            transparent 38%
        ),
        linear-gradient(
            120deg,
            #080808,
            #111112 55%,
            #050505
        );
}

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255,255,255,.025) 48%,
            transparent 70%
        );

    pointer-events: none;
}

.hero::after {
    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold-dark),
            var(--gold-light),
            transparent
        );

    opacity: .7;
}

.hero-content {
    position: relative;

    z-index: 5;

    padding:
        48px 26px 20px;

    width: 62%;
}

.eyebrow,
.section-label {
    display: block;

    color:
        var(--gold);

    font-size: 9px;

    letter-spacing:
        2.5px;

    text-transform:
        uppercase;

    margin-bottom:
        12px;
}

.hero h1 {
    font-size:
        clamp(29px, 8vw, 62px);

    line-height:
        1.12;

    font-weight:
        400;

    letter-spacing:
        -.8px;
}

.hero h1 strong {
    font-weight:
        700;

    background:
        linear-gradient(
            100deg,
            #fff,
            #d7d7d7,
            #bda15f
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}

.hero p {
    margin-top:
        16px;

    max-width:
        420px;

    color:
        #99999d;

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    line-height:
        1.8;
}


/* =====================================================
   BUTTONS
===================================================== */

.primary-btn {
    margin-top:
        22px;

    min-height:
        42px;

    padding:
        0 19px;

    border:
        1px solid
        var(--gold-dark);

    background:
        linear-gradient(
            110deg,
            #8d692b,
            #d9b766,
            #98722e
        );

    color:
        #080808;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    transition:
        .25s ease;
}

.primary-btn:hover {
    filter:
        brightness(1.15);
}

.primary-btn:active {
    transform:
        scale(.97);
}

.primary-btn span {
    font-size:
        16px;
}


/* =====================================================
   HERO BOOKS
===================================================== */

.hero-books {
    position: absolute;

    right: -20px;

    bottom: -15px;

    width: 54%;

    height: 330px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    perspective:
        900px;
}

.book {
    position: absolute;

    bottom: 0;

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.7);

    transition:
        transform .4s ease;
}

.book-main {
    width: 125px;

    height: 205px;

    z-index: 3;

    transform:
        rotateY(-8deg)
        rotateZ(-2deg);
}

.book-back {
    width: 105px;

    height: 175px;

    right: 3px;

    z-index: 1;

    transform:
        rotateY(-18deg)
        rotateZ(5deg);
}

.book-side {
    width: 95px;

    height: 165px;

    left: 0;

    z-index: 2;

    transform:
        rotateY(18deg)
        rotateZ(-7deg);
}

.book-cover {
    width: 100%;

    height: 100%;

    padding:
        18px 12px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border:
        1px solid
        rgba(255,255,255,.25);

    box-shadow:
        inset 0 0 30px
        rgba(0,0,0,.35);
}

.cover-one {
    background:
        linear-gradient(
            135deg,
            #28221a,
            #756039,
            #111
        );
}

.cover-two {
    background:
        linear-gradient(
            135deg,
            #191919,
            #b38a40,
            #282015
        );
}

.cover-three {
    background:
        linear-gradient(
            135deg,
            #15191b,
            #52616a,
            #0b0c0d
        );
}

.book-cover strong {
    font-size:
        18px;

    line-height:
        1.1;

    letter-spacing:
        1px;
}

.book-cover small,
.book-cover span {
    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


/* =====================================================
   SECTIONS
===================================================== */

.section {
    padding:
        28px 16px 0;
}

.section-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    margin-bottom:
        18px;
}

.section-head h2 {
    font-size:
        22px;

    font-weight:
        400;

    margin-top:
        3px;
}

.text-btn {
    border:
        0;

    background:
        transparent;

    color:
        var(--gold);

    font-family:
        inherit;

    font-size:
        10px;

    cursor:
        pointer;
}


/* =====================================================
   CATEGORIES
===================================================== */

.categories {
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        10px;
}

.category-card {
    position:
        relative;

    min-height:
        145px;

    padding:
        11px;

    overflow:
        hidden;

    background:
        #111112;

    border:
        1px solid
        rgba(255,255,255,.08);

    transition:
        transform .3s ease,
        border .3s ease;
}

.category-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(214,181,106,.45);
}

.category-image {
    height:
        83px;

    margin-bottom:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        34px;

    color:
        rgba(255,255,255,.8);

    position:
        relative;

    overflow:
        hidden;
}

.category-image::after {
    content: "";

    position:
        absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent,
            rgba(255,255,255,.08),
            transparent
        );
}

.fantasy {
    background:
        radial-gradient(
            circle,
            #4e4531,
            #141414 70%
        );
}

.novels {
    background:
        radial-gradient(
            circle,
            #433a45,
            #121212 70%
        );
}

.history {
    background:
        radial-gradient(
            circle,
            #42403a,
            #101010 70%
        );
}

.science {
    background:
        radial-gradient(
            circle,
            #343e42,
            #101010 70%
        );
}

.category-card h3 {
    font-size:
        13px;

    font-weight:
        400;
}

.category-card p {
    margin-top:
        4px;

    color:
        #737377;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


/* =====================================================
   BOOKS ROW
===================================================== */

.books-row {
    display:
        flex;

    gap:
        12px;

    overflow-x:
        auto;

    padding-bottom:
        8px;

    scrollbar-width:
        none;
}

.books-row::-webkit-scrollbar {
    display:
        none;
}

.book-card {
    flex:
        0 0 142px;

    background:
        #101011;

    border:
        1px solid
        rgba(255,255,255,.08);

    overflow:
        hidden;
}

.book-card-cover {
    height:
        190px;

    padding:
        14px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    position:
        relative;

    overflow:
        hidden;

    box-shadow:
        inset 0 0 35px
        rgba(0,0,0,.45);
}

.book-card-cover::after {
    content: "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            125deg,
            transparent 40%,
            rgba(255,255,255,.12),
            transparent 60%
        );

    pointer-events:
        none;
}

.cover-a {
    background:
        linear-gradient(
            145deg,
            #181817,
            #78653d,
            #151413
        );
}

.cover-b {
    background:
        linear-gradient(
            145deg,
            #171d20,
            #536875,
            #101112
        );
}

.cover-c {
    background:
        linear-gradient(
            145deg,
            #1b1713,
            #9c7744,
            #15100c
        );
}

.cover-d {
    background:
        linear-gradient(
            145deg,
            #222225,
            #62576a,
            #111112
        );
}

.book-card-cover span {
    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}

.book-card-cover strong {
    font-size:
        19px;

    line-height:
        1.05;

    letter-spacing:
        .5px;
}

.book-info {
    padding:
        11px;
}

.book-info h3 {
    font-size:
        13px;

    font-weight:
        400;
}

.book-info p {
    margin-top:
        4px;

    font-family:
        Arial,
        sans-serif;

    color:
        #747478;

    font-size:
        8px;
}

.book-bottom {
    margin-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}

.price {
    color:
        var(--gold-light);

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;
}

.book-bottom button,
.add-btn {
    width:
        27px;

    height:
        27px;

    border:
        1px solid
        rgba(214,181,106,.5);

    background:
        transparent;

    color:
        var(--gold-light);

    cursor:
        pointer;

    font-size:
        16px;
}


/* =====================================================
   BOOK OF THE WEEK
===================================================== */

.book-week {
    position:
        relative;

    min-height:
        310px;

    margin:
        38px 16px 0;

    padding:
        30px 22px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        linear-gradient(
            120deg,
            #0c0c0d,
            #171717
        );
}

.book-week::before {
    content: "";

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    border-radius:
        50%;

    right:
        -100px;

    top:
        30px;

    background:
        radial-gradient(
            circle,
            rgba(214,181,106,.14),
            transparent 70%
        );

    filter:
        blur(20px);
}

.week-content {
    position:
        relative;

    z-index:
        3;

    width:
        58%;
}

.week-content h2 {
    font-size:
        27px;

    font-weight:
        400;

    margin-bottom:
        10px;
}

.week-content p {
    color:
        #858589;

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.8;
}

.featured-cover {
    position:
        absolute;

    right:
        17px;

    bottom:
        -12px;

    width:
        125px;

    height:
        205px;

    transform:
        rotate(5deg);

    filter:
        drop-shadow(
            0 20px 18px
            rgba(0,0,0,.7)
        );
}

.featured-book {
    width:
        100%;

    height:
        100%;

    padding:
        16px 13px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    background:
        linear-gradient(
            140deg,
            #161616,
            #80652f,
            #201b13
        );

    border:
        1px solid
        rgba(255,255,255,.25);
}

.featured-book small {
    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}

.featured-book h3 {
    font-size:
        23px;

    line-height:
        .95;
}

.featured-book span {
    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


/* =====================================================
   POPULAR
===================================================== */

.popular-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}

.popular-item {
    min-height:
        70px;

    padding:
        10px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    background:
        #101011;

    border:
        1px solid
        rgba(255,255,255,.07);

    transition:
        border .25s ease,
        transform .25s ease;
}

.popular-item:hover {
    border-color:
        rgba(214,181,106,.35);

    transform:
        translateX(-2px);
}

.popular-item .mini-cover {
    width: 45px;
    height: 55px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popular-item .mini-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.popular-info {
    flex:
        1;
}

.popular-info h3 {
    font-size:
        13px;

    font-weight:
        400;
}

.popular-info p {
    margin-top:
        5px;

    color:
        #727276;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}

.popular-price {
    color:
        var(--gold-light);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    white-space:
        nowrap;
}


/* =====================================================
   FOOTER
===================================================== */

footer {
    margin-top:
        45px;

    padding:
        35px 18px 105px;

    border-top:
        1px solid
        var(--line);

    background:
        #080808;

    text-align:
        center;
}

.footer-logo {
    font-size:
        22px;

    letter-spacing:
        3px;

    color:
        var(--silver);
}

footer p {
    margin-top:
        9px;

    color:
        #66666a;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.8;
}

.footer-copy {
    margin-top:
        20px;

    color:
        #444448;

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1px;
}


/* =====================================================
   BOTTOM NAV
===================================================== */

.bottom-nav {
    position:
        fixed;

    bottom:
        0;

    left:
        0;

    right:
        0;

    height:
        68px;

    z-index:
        5000;

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    background:
        rgba(8,8,8,.97);

    border-top:
        1px solid
        rgba(255,255,255,.09);

    backdrop-filter:
        blur(15px);

    padding-bottom:
        env(safe-area-inset-bottom);
}

.nav-item {
    border:
        0;

    background:
        transparent;

    color:
        #656569;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    font-family:
        Arial,
        sans-serif;

    cursor:
        pointer;

    transition:
        .25s ease;
}

.nav-item span {
    font-size:
        18px;

    line-height:
        1;
}

.nav-item small {
    font-size:
        7px;
}

.nav-item.active {
    color:
        var(--gold-light);
}

.nav-item:active {
    transform:
        scale(.92);
}


/* =====================================================
   BOOKS PAGE
===================================================== */

.books-header {
    height:
        68px;

    padding:
        0 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    background:
        rgba(5,5,5,.97);

    border-bottom:
        1px solid
        var(--line);

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    backdrop-filter:
        blur(12px);
}

.back-btn,
.header-cart-btn {
    width:
        38px;

    height:
        38px;

    border:
        1px solid
        var(--line);

    background:
        #111;

    color:
        #eee;

    cursor:
        pointer;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.back-btn {
    font-size:
        28px;

    line-height:
        1;
}

.header-cart-btn {
    border-radius:
        50%;

    font-size:
        16px;
}

.books-title {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    line-height:
        1;
}

.books-title span {
    color:
        var(--gold-light);

    font-size:
        17px;

    font-weight:
        700;

    letter-spacing:
        2px;
}

.books-title small {
    margin-top:
        6px;

    color:
        #777;

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        2px;
}


/* =====================================================
   BOOKS SEARCH
===================================================== */

.books-search-section {
    padding:
        16px 16px 0;
}

.books-search {
    height:
        45px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 14px;

    background:
        #101011;

    border:
        1px solid
        rgba(255,255,255,.08);

    transition:
        border .25s ease;
}

.books-search:focus-within {
    border-color:
        rgba(214,181,106,.55);
}

.books-search span {
    color:
        var(--gold);

    font-size:
        20px;
}

.books-search input {
    width:
        100%;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        #fff;

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;
}

.books-search input::placeholder {
    color:
        #666;
}


/* =====================================================
   BOOK CATEGORIES FILTER
===================================================== */

.books-categories {
    display:
        flex;

    gap:
        8px;

    overflow-x:
        auto;

    padding:
        15px 16px 5px;

    scrollbar-width:
        none;
}

.books-categories::-webkit-scrollbar {
    display:
        none;
}

.category-filter {
    flex:
        0 0 auto;

    min-height:
        32px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:
        #101011;

    color:
        #888;

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    cursor:
        pointer;

    transition:
        .25s ease;
}

.category-filter.active {
    color:
        #0b0b0b;

    background:
        var(--gold-light);

    border-color:
        var(--gold-light);
}


/* =====================================================
   BOOKS INTRO
===================================================== */

.books-intro {
    padding:
        28px 16px 10px;
}

.books-intro h1 {
    font-size:
        27px;

    font-weight:
        400;

    line-height:
        1.2;
}

.books-intro p {
    margin-top:
        9px;

    color:
        #77777b;

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;

    line-height:
        1.8;
}


/* =====================================================
   BOOKS TOOLBAR
===================================================== */

.books-toolbar {
    margin:
        15px 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}

.books-toolbar strong {
    color:
        #858589;

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    font-weight:
        400;
}

#sortBooks {
    min-height:
        32px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:
        #101011;

    color:
        #aaa;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    outline:
        none;
}


/* =====================================================
   BOOKS GRID
===================================================== */

.books-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        10px;

    padding:
        0 16px;
}

.store-book-card {
    min-width:
        0;

    overflow:
        hidden;

    background:
        #101011;

    border:
        1px solid
        rgba(255,255,255,.08);

    transition:
        transform .25s ease,
        border .25s ease;
}

.store-book-card:hover {
    border-color:
        rgba(214,181,106,.35);

    transform:
        translateY(-2px);
}

.store-book-card[hidden] {
    display:
        none;
}

.store-book-card .book-cover {
    height:
        205px;

    padding:
        12px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            145deg,
            #1c1c1c,
            #6c5833,
            #111
        );
}

.store-book-card:nth-child(2) .book-cover {
    background:
        linear-gradient(
            145deg,
            #14191b,
            #53626b,
            #0c0d0e
        );
}

.store-book-card:nth-child(3) .book-cover {
    background:
        linear-gradient(
            145deg,
            #241d17,
            #9a7440,
            #100e0b
        );
}

.store-book-card:nth-child(4) .book-cover {
    background:
        linear-gradient(
            145deg,
            #222225,
            #5f5868,
            #111112
        );
}

.store-book-card:nth-child(5) .book-cover {
    background:
        linear-gradient(
            145deg,
            #181a19,
            #5e694d,
            #0c0e0c
        );
}

.store-book-card:nth-child(6) .book-cover {
    background:
        linear-gradient(
            145deg,
            #21191a,
            #79464b,
            #110d0e
        );
}

.book-badge {
    position:
        absolute;

    top:
        9px;

    right:
        9px;

    z-index:
        2;

    padding:
        4px 7px;

    background:
        rgba(0,0,0,.55);

    border:
        1px solid
        rgba(244,223,170,.35);

    color:
        var(--gold-light);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;
}

.fake-cover {
    width:
        72%;

    height:
        78%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,.25);

    color:
        rgba(255,255,255,.85);

    font-size:
        20px;

    letter-spacing:
        3px;

    box-shadow:
        inset 0 0 30px
        rgba(0,0,0,.4),

        0 15px 25px
        rgba(0,0,0,.5);
}

.store-book-info {
    padding:
        11px;
}

.store-book-info small {
    color:
        var(--gold);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;
}

.store-book-info h2 {
    margin-top:
        5px;

    font-size:
        14px;

    line-height:
        1.3;

    font-weight:
        400;
}

.store-book-info p {
    margin-top:
        5px;

    color:
        #707074;

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.6;

    min-height:
        25px;
}

.store-book-bottom {
    margin-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}

.store-book-bottom strong {
    color:
        var(--gold-light);

    font-family:
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        500;
}

.book-add-btn {
    width:
        28px;

    height:
        28px;

    border:
        1px solid
        rgba(214,181,106,.5);

    background:
        transparent;

    color:
        var(--gold-light);

    font-size:
        17px;

    cursor:
        pointer;

    transition:
        .2s ease;
}

.book-add-btn:active {
    transform:
        scale(.9);
}


/* =====================================================
   EMPTY BOOKS
===================================================== */

.empty-books {
    padding:
        55px 20px;

    text-align:
        center;
}

.empty-books div {
    font-size:
        35px;

    opacity:
        .7;
}

.empty-books h3 {
    margin-top:
        13px;

    font-size:
        18px;

    font-weight:
        400;
}

.empty-books p {
    margin-top:
        7px;

    color:
        #666;

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;
}


/* =====================================================
   CART BADGE
===================================================== */

.cart-badge {
    position:
        absolute;

    top:
        8px;

    right:
        50%;

    transform:
        translateX(13px);

    min-width:
        15px;

    height:
        15px;

    padding:
        0 4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        20px;

    background:
        var(--gold-light);

    color:
        #111;

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;
}


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

@media (min-width: 700px) {

    body {
        padding-bottom:
            0;
    }

    .bottom-nav {
        left:
            50%;

        right:
            auto;

        width:
            500px;

        transform:
            translateX(-50%);

        border:
            1px solid
            rgba(255,255,255,.10);

        border-bottom:
            0;
    }

    .hero {
        min-height:
            520px;
    }

    .categories {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .books-grid {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .book-card {
        flex-basis:
            175px;
    }

    .book-card-cover {
        height:
            225px;
    }

    .popular-list {
        display:
            grid;

        grid-template-columns:
            repeat(2, 1fr);
    }

    .store-book-card .book-cover {
        height:
            270px;
    }
}


/* =====================================================
   LARGE SCREENS
===================================================== */

@media (min-width: 1100px) {

    .top-header {
        padding:
            0 35px;
    }

    .hero {
        margin:
            25px auto;

        max-width:
            1100px;
    }

    .section {
        max-width:
            1100px;

        margin:
            auto;
    }

    .book-week {
        max-width:
            1100px;

        margin:
            45px auto 0;
    }

    .books-grid {
        max-width:
            1100px;

        margin:
            auto;
    }

    .books-search-section,
    .books-categories,
    .books-intro,
    .books-toolbar {
        max-width:
            1100px;

        margin-left:
            auto;

        margin-right:
            auto;
    }
}


/* =====================================================
   ACCESSIBILITY / MOTION
===================================================== */

button,
select,
input {
    -webkit-tap-highlight-color:
        transparent;
}

button:focus-visible,
select:focus-visible,
input:focus-visible {
    outline:
        1px solid
        var(--gold-light);

    outline-offset:
        2px;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}

/* =====================================================
   ZXUS GLOBAL LIGHT MODE
   Added: 2026-09-07
   Scope: shared style.css only
   Dark mode remains unchanged.
===================================================== */

html[data-theme="light"] body,
body[data-theme="light"] {
    background: #ffffff !important;
    color: #111111 !important;
}

/* Shared headers */
html[data-theme="light"] .top-header,
body[data-theme="light"] .top-header,
html[data-theme="light"] .books-header,
body[data-theme="light"] .books-header {
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(0,0,0,.09) !important;
}

/* Shared icon/header buttons */
html[data-theme="light"] .icon-btn,
body[data-theme="light"] .icon-btn,
html[data-theme="light"] .back-btn,
body[data-theme="light"] .back-btn,
html[data-theme="light"] .header-cart-btn,
body[data-theme="light"] .header-cart-btn {
    background: #f5f5f5 !important;
    color: #111111 !important;
    border-color: rgba(0,0,0,.10) !important;
}

/* Hero */
html[data-theme="light"] .hero,
body[data-theme="light"] .hero {
    background:
        radial-gradient(
            ellipse at 75% 45%,
            rgba(164,126,53,.12),
            transparent 38%
        ),
        linear-gradient(
            120deg,
            #f5f5f5,
            #ffffff 55%,
            #eeeeee
        ) !important;

    border-color: rgba(0,0,0,.08) !important;
}

html[data-theme="light"] .hero p,
body[data-theme="light"] .hero p {
    color: #666666 !important;
}

html[data-theme="light"] .hero h1,
body[data-theme="light"] .hero h1 {
    color: #111111 !important;
}

/* Shared cards */
html[data-theme="light"] .category-card,
body[data-theme="light"] .category-card,
html[data-theme="light"] .book-card,
body[data-theme="light"] .book-card,
html[data-theme="light"] .popular-item,
body[data-theme="light"] .popular-item,
html[data-theme="light"] .store-book-card,
body[data-theme="light"] .store-book-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.09) !important;
}

/* Category image backgrounds */
html[data-theme="light"] .fantasy,
body[data-theme="light"] .fantasy,
html[data-theme="light"] .novels,
body[data-theme="light"] .novels,
html[data-theme="light"] .history,
body[data-theme="light"] .history,
html[data-theme="light"] .science,
body[data-theme="light"] .science {
    filter: brightness(1.12) saturate(.9);
}

/* Secondary text */
html[data-theme="light"] .category-card p,
body[data-theme="light"] .category-card p,
html[data-theme="light"] .book-info p,
body[data-theme="light"] .book-info p,
html[data-theme="light"] .popular-info p,
body[data-theme="light"] .popular-info p,
html[data-theme="light"] .store-book-info p,
body[data-theme="light"] .store-book-info p,
html[data-theme="light"] .books-intro p,
body[data-theme="light"] .books-intro p,
html[data-theme="light"] .books-toolbar strong,
body[data-theme="light"] .books-toolbar strong {
    color: #666666 !important;
}

/* Book of the week */
html[data-theme="light"] .book-week,
body[data-theme="light"] .book-week {
    background:
        linear-gradient(
            120deg,
            #f5f5f5,
            #ffffff
        ) !important;

    border-color: rgba(0,0,0,.09) !important;
}

html[data-theme="light"] .week-content p,
body[data-theme="light"] .week-content p {
    color: #666666 !important;
}

/* Search */
html[data-theme="light"] .search-box,
body[data-theme="light"] .search-box,
html[data-theme="light"] .books-search,
body[data-theme="light"] .books-search {
    background: #f7f7f7 !important;
    border-color: rgba(0,0,0,.10) !important;
}

html[data-theme="light"] .search-box input,
body[data-theme="light"] .search-box input,
html[data-theme="light"] .books-search input,
body[data-theme="light"] .books-search input {
    color: #111111 !important;
}

html[data-theme="light"] .search-box input::placeholder,
body[data-theme="light"] .search-box input::placeholder,
html[data-theme="light"] .books-search input::placeholder,
body[data-theme="light"] .books-search input::placeholder {
    color: #888888 !important;
}

/* Books filters / sorting */
html[data-theme="light"] .category-filter,
body[data-theme="light"] .category-filter,
html[data-theme="light"] #sortBooks,
body[data-theme="light"] #sortBooks {
    background: #ffffff !important;
    color: #555555 !important;
    border-color: rgba(0,0,0,.10) !important;
}

html[data-theme="light"] .category-filter.active,
body[data-theme="light"] .category-filter.active {
    background: var(--gold-light) !important;
    color: #111111 !important;
    border-color: var(--gold-light) !important;
}

/* Footer */
html[data-theme="light"] footer,
body[data-theme="light"] footer {
    background: #f7f7f7 !important;
    border-top-color: rgba(0,0,0,.09) !important;
}

html[data-theme="light"] .footer-logo,
body[data-theme="light"] .footer-logo {
    color: #222222 !important;
}

html[data-theme="light"] footer p,
body[data-theme="light"] footer p {
    color: #666666 !important;
}

html[data-theme="light"] .footer-copy,
body[data-theme="light"] .footer-copy {
    color: #888888 !important;
}

/* Bottom navigation */
html[data-theme="light"] .bottom-nav,
body[data-theme="light"] .bottom-nav {
    background: rgba(255,255,255,.97) !important;
    border-color: rgba(0,0,0,.10) !important;
}

html[data-theme="light"] .nav-item,
body[data-theme="light"] .nav-item {
    color: #777777 !important;
}

html[data-theme="light"] .nav-item.active,
body[data-theme="light"] .nav-item.active {
    color: var(--gold-dark) !important;
}

/* Empty states */
html[data-theme="light"] .empty-books,
body[data-theme="light"] .empty-books {
    color: #111111 !important;
}

html[data-theme="light"] .empty-books p,
body[data-theme="light"] .empty-books p {
    color: #666666 !important;
}

/* General form controls */
html[data-theme="light"] select,
body[data-theme="light"] select,
html[data-theme="light"] input,
body[data-theme="light"] input {
    color-scheme: light;
}

html[data-theme="light"] input,
body[data-theme="light"] input {
    color: #111111;
}


/* ZXUS BOOKTOK */
.booktok-page{min-height:100vh;padding:24px 16px 110px;background:radial-gradient(circle at top right,rgba(216,167,177,.18),transparent 34%),#FFF9F9;color:#2B2D42;box-sizing:border-box}
.booktok-header{text-align:center;margin-bottom:20px}
.booktok-header h1{margin:0 0 8px;color:#2B2D42}
.booktok-modes{display:flex;justify-content:center;gap:8px;margin-bottom:20px}
.booktok-mode{padding:10px 18px;border:1px solid #D8A7B1;border-radius:999px;background:#FFF;color:#2B2D42}
.booktok-mode.active{background:linear-gradient(135deg,#D8A7B1,#E0A96D);color:#FFF}
.booktok-feed{display:flex;flex-direction:column;gap:20px}
.booktok-reel{position:relative;min-height:min(78vh,760px);overflow:hidden;border-radius:28px;background:linear-gradient(145deg,#4A263A,#6B344F 48%,#D8A7B1);box-shadow:0 14px 35px rgba(43,45,66,.15)}
.booktok-video{position:absolute;inset:0}
.booktok-video-player{width:100%;height:100%;object-fit:cover}
.booktok-video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#4A263A,#6B344F,#D8A7B1);color:#FFF;font-size:18px}
.booktok-product-overlay{position:absolute;right:16px;left:16px;bottom:76px;z-index:3;padding:16px;border:1px solid rgba(255,255,255,.55);border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 10px 30px rgba(43,45,66,.16);backdrop-filter:blur(14px)}
.booktok-product-info h2{margin:0 0 5px;color:#2B2D42}
.booktok-product-info p{margin:0 0 10px;color:#6C757D}
.booktok-prices{display:flex;flex-wrap:wrap;gap:7px}
.booktok-prices span{padding:6px 9px;border-radius:10px;background:#FFF9F9;border:1px solid rgba(224,169,109,.4)}
.booktok-product-actions{display:flex;gap:8px;margin-top:12px}
.booktok-product-actions button{flex:1;padding:10px;border:0;border-radius:12px;background:linear-gradient(135deg,#D8A7B1,#E0A96D);color:#FFF}
.booktok-content{position:absolute;right:18px;left:18px;bottom:18px;z-index:2;color:#FFF}
.booktok-actions{position:absolute;left:14px;bottom:18px;z-index:5;display:flex;flex-direction:column;gap:9px}
.booktok-actions button{width:48px;min-height:48px;border:1px solid rgba(224,169,109,.72);border-radius:50%;background:rgba(255,255,255,.9);color:#B8860B}
.booktok-post{overflow:hidden;background:#FFF;border-radius:24px;box-shadow:0 10px 30px rgba(216,167,177,.16)}
.booktok-post-image{min-height:320px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#FFF9F9,#FDF5F5)}
.booktok-post-carousel{position:relative;overflow:hidden}
.booktok-post-slide{display:none;width:100%;height:auto;max-height:620px;object-fit:contain}
.booktok-post-slide.active{display:block}
.booktok-post-prev,.booktok-post-next{position:absolute;top:50%;z-index:2;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,0,0,.48);color:#FFF;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.booktok-post-prev{right:12px}
.booktok-post-next{left:12px}
.booktok-post-dots{position:absolute;right:0;bottom:12px;left:0;z-index:2;display:flex;justify-content:center;gap:6px}
.booktok-post-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer}
.booktok-post-dot.active{background:#FFF;transform:scale(1.25)}
.booktok-post .booktok-content{position:static;padding:16px;color:#2B2D42;text-shadow:none}
.booktok-post .booktok-product-overlay{position:static;margin:0 16px 16px}
.booktok-post .booktok-actions{position:static;flex-direction:row;padding:0 16px 16px}
.booktok-comments-sheet{position:fixed;right:0;bottom:0;left:0;z-index:1000;padding:20px;background:#FFF;border-radius:24px 24px 0 0;box-shadow:0 -10px 30px rgba(43,45,66,.18)}
.booktok-comment-form{display:flex;gap:8px}
.booktok-page button:focus-visible{outline:2px solid #E0A96D;outline-offset:2px}
.booktok-page button:hover{filter:brightness(1.03)}
@media(max-width:600px){.booktok-page{padding-right:10px;padding-left:10px}.booktok-reel{min-height:72vh;border-radius:20px}.booktok-product-overlay{right:10px;left:10px;bottom:68px;padding:12px}}


/* ZXUS BOOKTOK UI EXTENSION */
.booktok-audio-toggle{
    position:absolute;
    top:16px;
    left:16px;
    z-index:6;
    width:48px;
    height:48px;
    border:1px solid rgba(224,169,109,.72);
    border-radius:50%;
    background:rgba(255,255,255,.9);
    color:#B8860B;
    box-shadow:0 6px 18px rgba(43,45,66,.16);
}

.booktok-double-tap-area{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
}

.booktok-double-tap-heart{
    opacity:0;
    transform:scale(.5);
    font-size:96px;
    color:#E0A96D;
    text-shadow:0 4px 20px rgba(255,255,255,.8);
}

.booktok-comment-replies{
    margin-top:10px;
    padding:12px;
    border-radius:16px;
    background:#FFF9F9;
}

.booktok-comment-reply-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:10px;
}

.booktok-reply-form{
    display:flex;
    gap:8px;
}

.booktok-reply-form input{
    flex:1;
    min-width:0;
    padding:10px 12px;
    border:1px solid rgba(216,167,177,.55);
    border-radius:12px;
    background:#FFF;
}

.booktok-reply-form button{
    padding:10px 14px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#D8A7B1,#E0A96D);
    color:#FFF;
}

.booktok-purchase-modal{
    position:fixed;
    inset:0;
    z-index:1100;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:16px;
    background:rgba(43,45,66,.38);
    backdrop-filter:blur(6px);
}

.booktok-purchase-content{
    width:min(560px,100%);
    padding:20px;
    border-radius:24px;
    background:#FFF;
    box-shadow:0 18px 50px rgba(43,45,66,.25);
}

.booktok-purchase-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.booktok-purchase-header h2{
    margin:0;
    color:#2B2D42;
}

.booktok-purchase-close{
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:#FFF9F9;
    color:#2B2D42;
    font-size:24px;
}

.booktok-purchase-product{
    padding:16px;
    border-radius:18px;
    background:#FFF9F9;
}

.booktok-purchase-product h3{
    margin:0 0 6px;
    color:#2B2D42;
}

.booktok-purchase-product p{
    margin:0 0 12px;
    color:#6C757D;
}

.booktok-purchase-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.booktok-purchase-actions button{
    flex:1;
    padding:12px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,#D8A7B1,#E0A96D);
    color:#FFF;
}



/* ZXUS BOOKTOK FULL LUXURY PALETTE */

/*
   ZXUS STORE — BookTok
   Full visual specification:
   Blush / Creamy Rose
   Pearl White
   Dusty Rose
   Rose Gold
   Warm Charcoal / Slate
   Muted Gray
   Plum / Dusty Rose video gradients
*/

/* =========================================================
   01 — BOOKTOK GENERAL / LIGHT LUXURY SURFACE
   ========================================================= */

.booktok-page{
    --zxus-blush:#FFF9F9;
    --zxus-creamy-rose:#FDF5F5;
    --zxus-pearl:#FFFFFF;
    --zxus-dusty-rose:#D8A7B1;
    --zxus-dusty-rose-deep:#C48B9F;
    --zxus-rose-gold:#E0A96D;
    --zxus-rose-gold-deep:#B8860B;
    --zxus-charcoal:#2B2D42;
    --zxus-charcoal-deep:#1A1A24;
    --zxus-muted:#6C757D;

    min-height:100vh;
    padding:26px 16px 120px;
    box-sizing:border-box;

    background:
        radial-gradient(
            circle at 12% 4%,
            rgba(216,167,177,.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(224,169,109,.10),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #FFF9F9 0%,
            #FDF5F5 52%,
            #FFF9F9 100%
        );

    color:#2B2D42;
}


/* =========================================================
   02 — BOOKTOK HEADER
   ========================================================= */

.booktok-header{
    position:relative;
    margin:0 auto 22px;
    text-align:center;
}

.booktok-header h1{
    margin:0;
    color:#1A1A24;
    font-size:clamp(28px,6vw,42px);
    font-weight:800;
    letter-spacing:.3px;

    text-shadow:
        0 2px 12px rgba(216,167,177,.20);
}

.booktok-header h1::after{
    content:"";
    display:block;
    width:58px;
    height:2px;
    margin:12px auto 0;
    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #D8A7B1,
            #E0A96D
        );

    box-shadow:
        0 0 12px rgba(224,169,109,.35);
}


/* =========================================================
   03 — REELS / POSTS SWITCHER
   ========================================================= */

.booktok-modes{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;

    width:max-content;
    max-width:100%;
    margin:0 auto 24px;
    padding:5px;

    border:1px solid rgba(216,167,177,.35);
    border-radius:999px;

    background:
        rgba(255,255,255,.78);

    box-shadow:
        0 8px 24px rgba(216,167,177,.12),
        inset 0 1px 0 rgba(255,255,255,.90);

    backdrop-filter:blur(14px);
}

.booktok-mode{
    min-width:94px;
    padding:10px 18px;

    border:1px solid transparent;
    border-radius:999px;

    background:transparent;
    color:#6C757D;

    font-weight:700;
    cursor:pointer;

    transition:
        transform .22s ease,
        color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.booktok-mode:hover{
    color:#2B2D42;
    transform:translateY(-1px);
}

.booktok-mode.active{
    color:#FFFFFF;

    background:
        linear-gradient(
            135deg,
            #D8A7B1 0%,
            #E0A96D 100%
        );

    box-shadow:
        0 6px 18px rgba(224,169,109,.22),
        inset 0 1px 0 rgba(255,255,255,.35);
}


/* =========================================================
   04 — BOOKTOK FEED
   ========================================================= */

.booktok-feed{
    display:flex;
    flex-direction:column;
    gap:26px;

    width:min(760px,100%);
    margin:0 auto;
}


/* =========================================================
   05 — FULLSCREEN REELS
   ========================================================= */

.booktok-reel{
    position:relative;

    min-height:min(82vh,780px);

    overflow:hidden;

    border:1px solid rgba(224,169,109,.34);
    border-radius:30px;

    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(216,167,177,.24),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(224,169,109,.14),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #321827 0%,
            #4A263A 42%,
            #7A4A5E 72%,
            #C48B9F 100%
        );

    box-shadow:
        0 22px 55px rgba(43,45,66,.22),
        0 0 0 1px rgba(255,255,255,.35) inset;
}

.booktok-reel::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(26,26,36,.16) 0%,
            transparent 28%,
            transparent 45%,
            rgba(26,26,36,.72) 100%
        );
}

.booktok-video{
    position:absolute;
    inset:0;
    z-index:0;
}

.booktok-video-player{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    background:
        linear-gradient(
            145deg,
            #321827 0%,
            #4A263A 48%,
            #C48B9F 100%
        );
}

.booktok-video-placeholder{
    position:absolute;
    inset:0;
    z-index:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;

    text-align:center;

    color:#FFFFFF;

    background:
        radial-gradient(
            circle at 50% 28%,
            rgba(224,169,109,.16),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #321827 0%,
            #4A263A 48%,
            #C48B9F 100%
        );
}


/* =========================================================
   06 — AUDIO / REEL CONTROLS
   ========================================================= */

.booktok-audio-toggle{
    position:absolute;
    top:16px;
    left:16px;
    z-index:8;

    width:50px;
    height:50px;
    min-width:50px;

    border:1px solid rgba(224,169,109,.68);
    border-radius:50%;

    background:
        rgba(255,255,255,.92);

    color:#B8860B;

    box-shadow:
        0 8px 22px rgba(43,45,66,.18),
        0 0 15px rgba(224,169,109,.12);

    backdrop-filter:blur(12px);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.booktok-audio-toggle:hover{
    transform:scale(1.05);

    box-shadow:
        0 10px 26px rgba(43,45,66,.22),
        0 0 22px rgba(224,169,109,.25);
}


/* =========================================================
   07 — DOUBLE TAP
   ========================================================= */

.booktok-double-tap-area{
    position:absolute;
    inset:0;
    z-index:6;

    display:flex;
    align-items:center;
    justify-content:center;

    pointer-events:none;
}

.booktok-double-tap-heart{
    opacity:0;
    transform:scale(.45);

    font-size:100px;
    line-height:1;

    color:#E0A96D;

    text-shadow:
        0 3px 12px rgba(255,255,255,.95),
        0 0 30px rgba(224,169,109,.45);
}


/* =========================================================
   08 — REEL CONTENT
   ========================================================= */

.booktok-content{
    position:absolute;
    right:20px;
    bottom:20px;
    left:20px;
    z-index:7;

    padding-right:66px;

    color:#FFFFFF;

    text-shadow:
        0 2px 12px rgba(26,26,36,.65);
}

.booktok-content h2,
.booktok-content h3{
    margin:0 0 7px;

    color:#FFFFFF;

    font-weight:800;
}

.booktok-content p{
    margin:0;

    color:rgba(255,255,255,.88);

    line-height:1.75;
}


/* =========================================================
   09 — ROSE GOLD INTERACTION BUTTONS
   ========================================================= */

.booktok-actions{
    position:absolute;
    left:16px;
    bottom:20px;
    z-index:9;

    display:flex;
    flex-direction:column;
    gap:10px;
}

.booktok-actions button{
    width:50px;
    height:50px;
    min-width:50px;
    min-height:50px;

    padding:0;

    border:1px solid rgba(224,169,109,.70);
    border-radius:50%;

    background:
        rgba(255,255,255,.94);

    color:#B8860B;

    box-shadow:
        0 7px 20px rgba(43,45,66,.17),
        0 0 13px rgba(224,169,109,.10),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter:blur(12px);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

.booktok-actions button:hover{
    transform:translateY(-2px) scale(1.04);

    background:#FFFFFF;

    box-shadow:
        0 10px 25px rgba(43,45,66,.20),
        0 0 22px rgba(224,169,109,.25);
}


/* =========================================================
   10 — PRODUCT OVERLAY
   ========================================================= */

.booktok-product-overlay{
    position:absolute;
    right:16px;
    bottom:78px;
    left:16px;
    z-index:8;

    padding:17px;

    border:1px solid rgba(255,255,255,.70);
    border-radius:21px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 12px 30px rgba(43,45,66,.17),
        0 0 18px rgba(255,255,255,.28);

    backdrop-filter:blur(16px);
}

.booktok-product-info h2,
.booktok-product-info h3{
    margin:0 0 5px;

    color:#2B2D42;
}

.booktok-product-info p{
    margin:0 0 11px;

    color:#6C757D;
}


/* =========================================================
   11 — THREE ZXUS PRICES
   ========================================================= */

.booktok-prices{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.booktok-prices span{
    padding:7px 10px;

    border:1px solid rgba(224,169,109,.38);
    border-radius:10px;

    background:#FFF9F9;

    color:#2B2D42;

    box-shadow:
        0 3px 10px rgba(216,167,177,.08);
}


/* =========================================================
   12 — BUY NOW / ADD TO CART
   ========================================================= */

.booktok-product-actions{
    display:flex;
    gap:9px;
    margin-top:13px;
}

.booktok-product-actions button,
.booktok-purchase-actions button,
.booktok-reply-form button{
    flex:1;

    padding:11px 14px;

    border:1px solid rgba(224,169,109,.50);
    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            #D8A7B1 0%,
            #C48B9F 48%,
            #E0A96D 100%
        );

    color:#FFFFFF;

    font-weight:800;

    box-shadow:
        0 7px 18px rgba(216,167,177,.18),
        inset 0 1px 0 rgba(255,255,255,.28);

    cursor:pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}

.booktok-product-actions button:hover,
.booktok-purchase-actions button:hover,
.booktok-reply-form button:hover{
    transform:translateY(-2px);

    filter:brightness(1.04);

    box-shadow:
        0 10px 25px rgba(216,167,177,.28),
        0 0 20px rgba(224,169,109,.22),
        inset 0 1px 0 rgba(255,255,255,.34);
}


/* =========================================================
   13 — POSTS / BOOK CARDS
   ========================================================= */

.booktok-post{
    overflow:hidden;

    border:1px solid rgba(216,167,177,.22);
    border-radius:25px;

    background:#FFFFFF;

    box-shadow:
        0 12px 32px rgba(216,167,177,.16),
        0 2px 8px rgba(216,167,177,.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.booktok-post:hover{
    transform:translateY(-2px);

    box-shadow:
        0 17px 38px rgba(216,167,177,.21),
        0 3px 10px rgba(216,167,177,.10);
}

.booktok-post-image{
    min-height:320px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            145deg,
            #FFF9F9 0%,
            #FDF5F5 100%
        );
}

.booktok-post .booktok-content{
    position:static;

    padding:17px;

    color:#2B2D42;

    text-shadow:none;
}

.booktok-post .booktok-content h2,
.booktok-post .booktok-content h3{
    color:#2B2D42;
}

.booktok-post .booktok-content p{
    color:#6C757D;
}

.booktok-post .booktok-product-overlay{
    position:static;

    margin:0 16px 16px;

    background:#FFFFFF;

    box-shadow:
        0 8px 22px rgba(216,167,177,.12);
}

.booktok-post .booktok-actions{
    position:static;

    flex-direction:row;

    padding:0 16px 17px;
}

.booktok-post .booktok-actions button{
    background:#FFFFFF;
}


/* =========================================================
   14 — COMMENTS BOTTOM SHEET
   ========================================================= */

.booktok-comments-sheet{
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:1000;

    padding:20px;

    border-top:1px solid rgba(216,167,177,.30);
    border-radius:26px 26px 0 0;

    background:#FFFFFF;

    color:#2B2D42;

    box-shadow:
        0 -12px 35px rgba(43,45,66,.18);

    backdrop-filter:blur(16px);
}

.booktok-comments-sheet h2,
.booktok-comments-sheet h3{
    color:#2B2D42;
}

.booktok-comment-form{
    display:flex;
    gap:8px;
}

.booktok-comment-form input{
    flex:1;
    min-width:0;

    padding:11px 13px;

    border:1px solid rgba(216,167,177,.45);
    border-radius:13px;

    background:#FFF9F9;
    color:#2B2D42;

    outline:none;
}

.booktok-comment-form input:focus{
    border-color:#E0A96D;

    box-shadow:
        0 0 0 3px rgba(224,169,109,.12);
}


/* =========================================================
   15 — REPLIES
   ========================================================= */

.booktok-comment-replies{
    margin-top:10px;
    padding:12px;

    border:1px solid rgba(216,167,177,.18);
    border-radius:16px;

    background:#FFF9F9;
}

.booktok-comment-reply-list{
    display:flex;
    flex-direction:column;
    gap:8px;

    margin-bottom:10px;
}

.booktok-reply-form{
    display:flex;
    gap:8px;
}

.booktok-reply-form input{
    flex:1;
    min-width:0;

    padding:10px 12px;

    border:1px solid rgba(216,167,177,.45);
    border-radius:12px;

    background:#FFFFFF;
    color:#2B2D42;
}


/* =========================================================
   16 — PURCHASE MODAL
   ========================================================= */

.booktok-purchase-modal{
    position:fixed;
    inset:0;
    z-index:1100;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    padding:16px;

    background:
        rgba(43,45,66,.30);

    backdrop-filter:blur(8px);
}

.booktok-purchase-content{
    width:min(560px,100%);

    padding:21px;

    border:1px solid rgba(216,167,177,.30);
    border-radius:25px;

    background:#FFFFFF;

    box-shadow:
        0 20px 55px rgba(43,45,66,.23),
        0 0 30px rgba(216,167,177,.12);
}

.booktok-purchase-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:16px;
}

.booktok-purchase-header h2{
    margin:0;

    color:#2B2D42;
}

.booktok-purchase-close{
    width:40px;
    height:40px;

    border:1px solid rgba(216,167,177,.25);
    border-radius:50%;

    background:#FFF9F9;
    color:#2B2D42;

    font-size:24px;

    cursor:pointer;
}

.booktok-purchase-product{
    padding:16px;

    border:1px solid rgba(216,167,177,.18);
    border-radius:18px;

    background:#FFF9F9;
}

.booktok-purchase-product h3{
    margin:0 0 6px;

    color:#2B2D42;
}

.booktok-purchase-product p{
    margin:0 0 12px;

    color:#6C757D;
}

.booktok-purchase-actions{
    display:flex;
    gap:10px;

    margin-top:15px;
}


/* =========================================================
   17 — PRODUCT LINK / ZXUS GOLD DETAILS
   ========================================================= */

.booktok-product-link{
    color:#B8860B;

    font-weight:800;

    text-decoration:none;
}

.booktok-product-link:hover{
    color:#E0A96D;
}


/* =========================================================
   18 — PUBLISHING CONTROL STRUCTURE
   Hidden now; styling only.
   Admin functionality remains untouched.
   ========================================================= */

.booktok-publishing-controls{
    margin-top:18px;
    padding:16px;

    border:1px solid rgba(224,169,109,.35);
    border-radius:20px;

    background:#FFFFFF;

    box-shadow:
        0 10px 28px rgba(216,167,177,.13);
}

.booktok-publishing-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.booktok-publishing-actions button{
    padding:10px 15px;

    border:1px solid rgba(224,169,109,.45);
    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #D8A7B1,
            #E0A96D
        );

    color:#FFFFFF;

    font-weight:800;
}


/* =========================================================
   19 — FOCUS / ACCESSIBILITY
   ========================================================= */

.booktok-page button:focus-visible,
.booktok-page input:focus-visible{
    outline:2px solid #E0A96D;
    outline-offset:3px;
}


/* =========================================================
   20 — RESPONSIVE MOBILE LUXURY
   ========================================================= */

@media(max-width:600px){

    .booktok-page{
        padding-right:10px;
        padding-left:10px;
        padding-bottom:112px;
    }

    .booktok-reel{
        min-height:74vh;
        border-radius:21px;
    }

    .booktok-product-overlay{
        right:10px;
        bottom:70px;
        left:10px;

        padding:13px;
        border-radius:18px;
    }

    .booktok-content{
        right:14px;
        bottom:16px;
        left:14px;

        padding-right:62px;
    }

    .booktok-actions{
        left:11px;
        bottom:16px;
    }

    .booktok-actions button,
    .booktok-audio-toggle{
        width:46px;
        height:46px;
        min-width:46px;
        min-height:46px;
    }

    .booktok-product-actions{
        gap:7px;
    }

    .booktok-product-actions button{
        padding:10px 8px;
        font-size:13px;
    }

    .booktok-post-image{
        min-height:270px;
    }
}


/* =========================================================
   21 — REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .booktok-mode,
    .booktok-actions button,
    .booktok-audio-toggle,
    .booktok-post,
    .booktok-product-actions button,
    .booktok-purchase-actions button,
    .booktok-reply-form button{
        transition:none;
    }
}


/* ZXUS BOOKTOK — SIX ITEM BOTTOM NAV FIX */

/*
   BookTok adds a sixth navigation item.
   Keep all six items on one row.
   This is an isolated override and does not replace
   the existing bottom navigation rules.
*/

.bottom-nav{
    grid-template-columns:repeat(6,minmax(0,1fr));
}

.bottom-nav .nav-item{
    min-width:0;
    width:100%;
    box-sizing:border-box;
}

.bottom-nav .nav-item span,
.bottom-nav .nav-item small{
    max-width:100%;
}

@media(max-width:380px){
    .bottom-nav .nav-item small{
        font-size:10px;
        white-space:nowrap;
    }

    .bottom-nav .nav-item span{
        line-height:1;
    }
}


/* ZXUS BOOKTOK — HIDDEN STATE FIX */

/*
   Preserve the native HTML hidden state for BookTok.
   This is an isolated visibility fix only.
*/

.booktok-page [hidden]{
    display:none !important;
}


/* ZXUS BOOKTOK — PRODUCT OVERLAY REFINEMENT */

/*
   Keep the product purchase card visually attached to the Reel.
   Isolated visual override only — no HTML/functionality changes.
*/

.booktok-reel{
    position:relative;
    isolation:isolate;
}

.booktok-product-overlay{
    position:absolute !important;
    right:16px !important;
    left:16px !important;
    bottom:82px !important;
    z-index:8 !important;

    padding:14px 16px !important;

    border:1px solid rgba(255,255,255,.45) !important;
    border-radius:18px !important;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.94),
        rgba(255,249,249,.88)
    ) !important;

    box-shadow:
        0 10px 30px rgba(43,45,66,.18),
        0 2px 10px rgba(224,169,109,.12) !important;

    backdrop-filter:blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(120%) !important;

    box-sizing:border-box;
}

.booktok-product-info h2{
    margin:0 0 4px !important;
    font-size:18px;
    font-weight:700;
}

.booktok-product-info p{
    margin:0 0 9px !important;
    font-size:13px;
}

.booktok-prices{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
}

.booktok-prices span{
    padding:5px 8px !important;
    border-radius:9px !important;
    background:#FFF9F9 !important;
    border:1px solid rgba(224,169,109,.28) !important;
    font-size:12px;
}

.booktok-product-actions{
    display:flex !important;
    gap:7px !important;
    margin-top:10px !important;
}

.booktok-product-actions button{
    min-height:38px;
    padding:8px 10px !important;
    border:0 !important;
    border-radius:11px !important;

    background:linear-gradient(
        135deg,
        #D8A7B1,
        #E0A96D
    ) !important;

    color:#FFF !important;
    font-weight:700;
    box-shadow:0 5px 14px rgba(224,169,109,.20);
}

.booktok-content{
    z-index:6 !important;
    pointer-events:none;
}

.booktok-actions{
    z-index:10 !important;
}

.booktok-audio-toggle{
    z-index:11 !important;
}

@media(max-width:600px){
    .booktok-product-overlay{
        right:10px !important;
        left:10px !important;
        bottom:76px !important;
        padding:12px 13px !important;
        border-radius:17px !important;
    }

    .booktok-product-info h2{
        font-size:16px;
    }

    .booktok-product-info p{
        font-size:12px;
    }

    .booktok-prices span{
        padding:4px 7px !important;
        font-size:11px;
    }

    .booktok-product-actions button{
        min-height:36px;
        padding:7px 8px !important;
        font-size:12px;
    }
}


/* =========================================================
   ZXUS BOOKTOK — REEL LUXURY LAYOUT V2
   Visual-only isolated override.
   No HTML / JS / functionality changes.
   ========================================================= */

.booktok-page{
    padding-top:18px !important;
    padding-right:12px !important;
    padding-left:12px !important;
    padding-bottom:112px !important;
}

.booktok-header{
    margin-bottom:12px !important;
}

.booktok-header h1{
    margin-bottom:4px !important;
    font-size:26px;
    letter-spacing:.2px;
}

.booktok-modes{
    margin-bottom:14px !important;
}

/* Main Reel */
.booktok-feed{
    width:min(560px,100%) !important;
    gap:20px !important;
}

.booktok-reel{
    width:100%;
    min-height:min(86vh,820px) !important;
    height:min(86vh,820px);
    margin:0 auto;

    overflow:hidden !important;
    position:relative !important;
    isolation:isolate;

    border-radius:26px !important;

    background:
        linear-gradient(
            180deg,
            rgba(26,26,36,.08) 0%,
            rgba(26,26,36,0) 38%,
            rgba(26,26,36,.30) 62%,
            rgba(26,26,36,.86) 100%
        ),
        linear-gradient(
            145deg,
            #321827 0%,
            #4A263A 45%,
            #7A4A5E 72%,
            #C48B9F 100%
        ) !important;

    box-shadow:
        0 20px 55px rgba(43,45,66,.22),
        0 0 0 1px rgba(255,255,255,.35) inset !important;
}

/* Video fills the whole Reel */
.booktok-video{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    width:100%;
    height:100%;
}

.booktok-video-player{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

.booktok-video-placeholder{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(216,167,177,.28),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #321827 0%,
            #4A263A 48%,
            #C48B9F 100%
        ) !important;

    color:#FFFFFF !important;
}

/* Cinematic overlay */
.booktok-reel::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(26,26,36,.16) 0%,
            transparent 25%,
            transparent 48%,
            rgba(26,26,36,.18) 62%,
            rgba(26,26,36,.88) 100%
        );
}

/* Product card sits ON the Reel */
.booktok-product-overlay{
    position:absolute !important;

    right:14px !important;
    left:14px !important;
    bottom:128px !important;

    z-index:7 !important;

    width:auto !important;
    margin:0 !important;

    padding:13px 14px !important;

    border:1px solid rgba(255,255,255,.55) !important;
    border-radius:19px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(255,249,249,.88)
        ) !important;

    box-shadow:
        0 12px 32px rgba(43,45,66,.22),
        0 2px 12px rgba(224,169,109,.14) !important;

    backdrop-filter:blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(125%) !important;

    box-sizing:border-box;
}

/* Book information */
.booktok-product-info h2{
    margin:0 0 3px !important;

    color:#2B2D42 !important;

    font-size:17px !important;
    line-height:1.35;
    font-weight:800;
}

.booktok-product-info p{
    margin:0 0 8px !important;

    color:#6C757D !important;

    font-size:12px !important;
}

/* Prices stay compact */
.booktok-prices{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:5px !important;
}

.booktok-prices span{
    padding:4px 7px !important;

    border-radius:8px !important;

    background:#FFF9F9 !important;

    border:1px solid rgba(224,169,109,.30) !important;

    color:#2B2D42;

    font-size:11px !important;
    line-height:1.2;
}

/* Purchase buttons */
.booktok-product-actions{
    display:flex !important;
    gap:7px !important;

    margin-top:9px !important;
}

.booktok-product-actions button{
    flex:1 !important;

    min-height:37px !important;

    padding:8px 9px !important;

    border:0 !important;
    border-radius:11px !important;

    background:
        linear-gradient(
            135deg,
            #D8A7B1 0%,
            #E0A96D 100%
        ) !important;

    color:#FFFFFF !important;

    font-size:12px !important;
    font-weight:800 !important;

    box-shadow:
        0 5px 14px rgba(224,169,109,.22);
}

/* Creator / Reel information */
.booktok-content{
    position:absolute !important;

    right:14px !important;
    left:14px !important;
    bottom:18px !important;

    z-index:6 !important;

    padding-right:60px !important;

    color:#FFFFFF !important;

    text-shadow:
        0 2px 8px rgba(0,0,0,.38);
}

.booktok-content h2,
.booktok-content h3,
.booktok-content p{
    color:#FFFFFF;
}

.booktok-content p{
    margin-top:5px;
}

/* Interaction buttons */
.booktok-actions{
    position:absolute !important;

    left:10px !important;
    bottom:18px !important;

    z-index:10 !important;

    display:flex !important;
    flex-direction:column !important;
    gap:9px !important;
}

.booktok-actions button{
    width:46px !important;
    height:46px !important;
    min-height:46px !important;

    padding:0 !important;

    border:1px solid rgba(224,169,109,.76) !important;
    border-radius:50% !important;

    background:rgba(255,255,255,.92) !important;

    color:#B8860B !important;

    box-shadow:
        0 6px 18px rgba(43,45,66,.18),
        0 1px 4px rgba(255,255,255,.65) inset !important;
}

/* Sound button */
.booktok-audio-toggle{
    position:absolute !important;

    top:14px !important;
    left:14px !important;

    z-index:12 !important;

    width:44px !important;
    height:44px !important;

    border:1px solid rgba(224,169,109,.72) !important;
    border-radius:50% !important;

    background:rgba(255,255,255,.92) !important;

    color:#B8860B !important;

    box-shadow:
        0 6px 18px rgba(43,45,66,.18) !important;
}

/* Double tap heart remains visually centered */
.booktok-double-tap-area{
    z-index:9 !important;
}

/* Mobile */
@media(max-width:600px){

    .booktok-page{
        padding-top:12px !important;
        padding-right:7px !important;
        padding-left:7px !important;
        padding-bottom:108px !important;
    }

    .booktok-header h1{
        font-size:23px;
    }

    .booktok-reel{
        min-height:calc(100vh - 150px) !important;
        height:calc(100vh - 150px) !important;

        border-radius:21px !important;
    }

    .booktok-product-overlay{
        right:9px !important;
        left:9px !important;
        bottom:122px !important;

        padding:11px 12px !important;

        border-radius:16px !important;
    }

    .booktok-product-info h2{
        font-size:15px !important;
    }

    .booktok-product-info p{
        font-size:11px !important;
    }

    .booktok-prices span{
        padding:4px 6px !important;
        font-size:10px !important;
    }

    .booktok-product-actions{
        gap:6px !important;
        margin-top:8px !important;
    }

    .booktok-product-actions button{
        min-height:35px !important;
        padding:7px 6px !important;
        font-size:11px !important;
    }

    .booktok-content{
        right:12px !important;
        left:12px !important;
        bottom:15px !important;
        padding-right:58px !important;
    }

    .booktok-actions{
        left:8px !important;
        bottom:15px !important;
        gap:8px !important;
    }

    .booktok-actions button{
        width:43px !important;
        height:43px !important;
        min-height:43px !important;
    }

    .booktok-audio-toggle{
        top:10px !important;
        left:10px !important;
        width:42px !important;
        height:42px !important;
    }
}

/* ZXUS BOOKTOK — SMALLER PURCHASE OVERLAY */
.booktok-product-overlay{
    right:18px !important;
    left:18px !important;
    bottom:126px !important;
    padding:10px 12px !important;
    border-radius:15px !important;
}

.booktok-product-info h2{
    font-size:15px !important;
    margin-bottom:2px !important;
}

.booktok-product-info p{
    font-size:11px !important;
    margin-bottom:6px !important;
}

.booktok-prices{
    gap:4px !important;
}

.booktok-prices span{
    padding:3px 6px !important;
    font-size:10px !important;
    border-radius:7px !important;
}

.booktok-product-actions{
    gap:6px !important;
    margin-top:7px !important;
}

.booktok-product-actions button{
    min-height:33px !important;
    padding:6px 8px !important;
    border-radius:9px !important;
    font-size:11px !important;
}

@media(max-width:600px){
    .booktok-product-overlay{
        right:12px !important;
        left:12px !important;
        bottom:119px !important;
        padding:9px 10px !important;
        border-radius:14px !important;
    }

    .booktok-product-info h2{
        font-size:14px !important;
    }

    .booktok-product-info p{
        font-size:10px !important;
    }

    .booktok-prices span{
        padding:3px 5px !important;
        font-size:9px !important;
    }

    .booktok-product-actions button{
        min-height:31px !important;
        padding:5px 7px !important;
        font-size:10px !important;
    }
}


/* ZXUS BOOKTOK FINAL — REEL + POST ONLY */

/* ===== REEL FRAME ===== */
#booktok-reels,
#booktok-posts{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

#booktok-reels .booktok-reel{
    position:relative !important;
    width:min(480px,100%) !important;
    height:min(720px,calc(100vh - 180px)) !important;
    min-height:480px !important;
    margin:0 auto 14px !important;
    overflow:hidden !important;
    border-radius:20px !important;
    background:#111 !important;
    box-shadow:0 14px 34px rgba(43,45,66,.18) !important;
    box-sizing:border-box !important;
}

/* ===== REEL VIDEO ===== */
#booktok-reels .booktok-video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
    background:#111 !important;
}

#booktok-reels .booktok-video-player{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    background:#111 !important;
    border:0 !important;
    margin:0 !important;
}

/* ===== CENTER PLAY ===== */
#booktok-reels .booktok-video-play{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    z-index:8 !important;
    width:62px !important;
    height:62px !important;
    padding:0 !important;
    transform:translate(-50%,-50%) !important;
    border:1px solid rgba(255,255,255,.25) !important;
    border-radius:50% !important;
    background:rgba(0,0,0,.62) !important;
    color:#fff !important;
    font-size:23px !important;
    line-height:62px !important;
    text-align:center !important;
    box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
    cursor:pointer !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
}

#booktok-reels .booktok-video-play.is-playing{
    opacity:0 !important;
    pointer-events:none !important;
}

/* ===== INSTAGRAM-LIKE DARK VIDEO CONTROLS ===== */
#booktok-reels .booktok-video-controls{
    position:absolute !important;
    right:10px !important;
    bottom:10px !important;
    left:10px !important;
    z-index:9 !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    padding:7px 8px !important;
    border-radius:13px !important;
    background:rgba(0,0,0,.68) !important;
    box-shadow:0 5px 18px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
}

#booktok-reels .booktok-video-progress{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    height:3px !important;
    margin:0 !important;
    padding:0 !important;
    accent-color:#fff !important;
    cursor:pointer !important;
}

#booktok-reels .booktok-video-mute,
#booktok-reels .booktok-video-fullscreen{
    flex:0 0 32px !important;
    width:32px !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.12) !important;
    color:#fff !important;
    font-size:15px !important;
    line-height:32px !important;
    text-align:center !important;
    cursor:pointer !important;
}

#booktok-reels .booktok-video-mute:hover,
#booktok-reels .booktok-video-fullscreen:hover{
    background:rgba(255,255,255,.22) !important;
}

/* ===== REEL TEXT ===== */
#booktok-reels .booktok-content{
    position:absolute !important;
    right:72px !important;
    left:14px !important;
    bottom:62px !important;
    z-index:5 !important;
    padding:12px 13px !important;
    border-radius:15px !important;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0),
        rgba(0,0,0,.72)
    ) !important;
    color:#fff !important;
    text-shadow:0 2px 7px rgba(0,0,0,.55) !important;
}

#booktok-reels .booktok-content h2{
    margin:0 0 5px !important;
    color:#fff !important;
    font-size:16px !important;
    line-height:1.4 !important;
    font-weight:800 !important;
}

#booktok-reels .booktok-content p{
    margin:0 !important;
    color:rgba(255,255,255,.92) !important;
    font-size:11px !important;
    line-height:1.55 !important;
}

/* ===== REEL ACTION BUTTONS ===== */
#booktok-reels .booktok-actions{
    position:absolute !important;
    right:9px !important;
    left:auto !important;
    bottom:62px !important;
    z-index:7 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:8px !important;
}

#booktok-reels .booktok-actions button{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:46px !important;
    height:46px !important;
    min-height:46px !important;
    padding:4px !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:50% !important;
    background:rgba(0,0,0,.55) !important;
    color:#fff !important;
    box-shadow:0 5px 15px rgba(0,0,0,.25) !important;
    backdrop-filter:blur(7px) !important;
    -webkit-backdrop-filter:blur(7px) !important;
}

#booktok-reels .booktok-actions button span{
    margin-top:1px !important;
    color:#fff !important;
    font-size:8px !important;
    line-height:1 !important;
}

/* ===== REEL PRODUCT CARD — BOOKTOK ONLY ===== */
#booktok-reels .booktok-reel-product{
    position:relative !important;
    inset:auto !important;
    display:grid !important;
    grid-template-columns:56px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    width:min(480px,calc(100% - 16px)) !important;
    min-height:78px !important;
    margin:10px auto 14px !important;
    padding:8px !important;
    box-sizing:border-box !important;
    border-radius:15px !important;
    background:#fff !important;
    border:1px solid rgba(216,167,177,.25) !important;
    box-shadow:0 6px 18px rgba(43,45,66,.09) !important;
    overflow:hidden !important;
    color:#2B2D42 !important;
}

#booktok-reels .booktok-reel-product .booktok-product-cover{
    width:56px !important;
    height:68px !important;
    min-width:56px !important;
    overflow:hidden !important;
    border-radius:9px !important;
    background:#FDF5F5 !important;
}

#booktok-reels .booktok-reel-product .booktok-product-cover img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
}

#booktok-reels .booktok-reel-product .booktok-product-info{
    min-width:0 !important;
}

#booktok-reels .booktok-reel-product .booktok-product-info h2{
    margin:0 0 3px !important;
    overflow:hidden !important;
    color:#2B2D42 !important;
    font-size:13px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

#booktok-reels .booktok-reel-product .booktok-product-info p{
    margin:0 0 4px !important;
    overflow:hidden !important;
    color:#6C757D !important;
    font-size:9px !important;
    line-height:1.35 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

#booktok-reels .booktok-reel-product .booktok-prices{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:3px !important;
}

#booktok-reels .booktok-reel-product .booktok-prices span{
    padding:3px 5px !important;
    border-radius:6px !important;
    background:#FFF5F5 !important;
    color:#B8860B !important;
    font-size:8px !important;
    font-weight:700 !important;
}

#booktok-reels .booktok-reel-product .booktok-product-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
}

#booktok-reels .booktok-reel-product .booktok-product-actions button{
    width:78px !important;
    min-width:78px !important;
    min-height:30px !important;
    padding:5px 6px !important;
    border:0 !important;
    border-radius:8px !important;
    background:linear-gradient(135deg,#D8A7B1,#E0A96D) !important;
    color:#fff !important;
    font-size:9px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
}

/* ===== POST ===== */
#booktok-posts{
    width:min(560px,100%) !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
}

#booktok-posts .booktok-post{
    position:relative !important;
    width:100% !important;
    margin:0 auto 18px !important;
    overflow:hidden !important;
    border-radius:18px !important;
    background:#fff !important;
    border:1px solid rgba(216,167,177,.25) !important;
    box-shadow:0 9px 25px rgba(43,45,66,.09) !important;
    box-sizing:border-box !important;
}

#booktok-posts .booktok-post-image{
    position:relative !important;
    width:100% !important;
    aspect-ratio:4 / 5 !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:#FDF5F5 !important;
}



#booktok-posts .booktok-post-content{
    position:relative !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:12px 12px 0 !important;
}

#booktok-posts .booktok-post-content h2{
    margin:0 0 5px !important;
    color:#2B2D42 !important;
    font-size:16px !important;
    line-height:1.4 !important;
    font-weight:800 !important;
}

#booktok-posts .booktok-post-content p{
    margin:0 0 8px !important;
    color:#6C757D !important;
    font-size:11px !important;
    line-height:1.6 !important;
}

/* ===== POST PRODUCT CARD — BOOKTOK ONLY ===== */
#booktok-posts > .booktok-post-product{
    position:relative !important;
    display:grid !important;
    grid-template-columns:56px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    min-height:78px !important;
    margin:10px 0 4px !important;
    padding:8px !important;
    box-sizing:border-box !important;
    border-radius:15px !important;
    background:#fff !important;
    border:1px solid rgba(216,167,177,.25) !important;
    box-shadow:0 6px 18px rgba(43,45,66,.09) !important;
    overflow:hidden !important;
    color:#2B2D42 !important;
}

#booktok-posts > .booktok-post-product .booktok-product-main{
    display:contents !important;
}

#booktok-posts > .booktok-post-product .booktok-product-cover{
    width:56px !important;
    height:68px !important;
    min-width:56px !important;
    overflow:hidden !important;
    border-radius:9px !important;
    background:#FDF5F5 !important;
}

#booktok-posts > .booktok-post-product .booktok-product-cover img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
}

#booktok-posts > .booktok-post-product .booktok-product-info{
    min-width:0 !important;
}

#booktok-posts > .booktok-post-product .booktok-product-info h2{
    margin:0 0 3px !important;
    overflow:hidden !important;
    color:#2B2D42 !important;
    font-size:13px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

#booktok-posts > .booktok-post-product .booktok-product-info p{
    margin:0 0 4px !important;
    overflow:hidden !important;
    color:#6C757D !important;
    font-size:9px !important;
    line-height:1.35 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

#booktok-posts > .booktok-post-product .booktok-prices{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:3px !important;
}

#booktok-posts > .booktok-post-product .booktok-prices span{
    padding:3px 5px !important;
    border-radius:6px !important;
    background:#FFF5F5 !important;
    color:#B8860B !important;
    font-size:8px !important;
    font-weight:700 !important;
}

#booktok-posts > .booktok-post-product .booktok-product-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
}

#booktok-posts > .booktok-post-product .booktok-product-actions button{
    width:78px !important;
    min-width:78px !important;
    min-height:30px !important;
    padding:5px 6px !important;
    border:0 !important;
    border-radius:8px !important;
    background:linear-gradient(135deg,#D8A7B1,#E0A96D) !important;
    color:#fff !important;
    font-size:9px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
}

/* ===== MOBILE ===== */
@media(max-width:600px){

    #booktok-reels .booktok-reel{
        width:100% !important;
        height:calc(100vh - 180px) !important;
        min-height:480px !important;
        border-radius:18px !important;
    }

    #booktok-reels .booktok-reel-product{
        width:calc(100% - 12px) !important;
        grid-template-columns:50px minmax(0,1fr) auto !important;
        gap:8px !important;
        min-height:72px !important;
        margin-top:8px !important;
        padding:7px !important;
    }

    #booktok-reels .booktok-reel-product .booktok-product-cover{
        width:50px !important;
        height:60px !important;
        min-width:50px !important;
    }

    #booktok-reels .booktok-reel-product .booktok-product-actions button{
        width:68px !important;
        min-width:68px !important;
        min-height:28px !important;
        font-size:8px !important;
    }

    #booktok-posts .booktok-post{
        border-radius:16px !important;
    }

    #booktok-posts .booktok-post-content{
        padding:10px 10px 0 !important;
    }

    #booktok-posts > .booktok-post-product{
        padding:7px !important;
    }

    #booktok-posts > .booktok-post-product{
        grid-template-columns:50px minmax(0,1fr) auto !important;
        gap:8px !important;
    }

    #booktok-posts > .booktok-post-product .booktok-product-cover{
        width:50px !important;
        height:60px !important;
        min-width:50px !important;
    }

    #booktok-posts > .booktok-post-product .booktok-product-actions button{
        width:68px !important;
        min-width:68px !important;
        min-height:28px !important;
        font-size:8px !important;
    }
}
/* ZXUS PRODUCT IMAGE FIT - SAFE */
.zx-novel-cover img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
}

/* ZXUS FINAL — BOOK & NOVEL COVERS KEEP FULL IMAGE */

.zx-book-cover,
.zx-novel-cover {
    width: 100% !important;
    aspect-ratio: 0.72 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

.zx-book-cover img,
.zx-novel-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.zx-book-cover > span,
.zx-novel-cover > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    color: #b8860b !important;
    font-weight: 800 !important;
}

.zx-book-cover::before,
.zx-book-cover::after,
.zx-novel-cover::before,
.zx-novel-cover::after {
    pointer-events: none !important;
}

@media (max-width: 600px) {
    .zx-book-cover,
    .zx-novel-cover {
        aspect-ratio: 0.72 !important;
        background: #ffffff !important;
    }

    .zx-book-cover img,
    .zx-novel-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* =========================================================
   ZXUS BOOKTOK — INSTAGRAM REELS VISUAL OVERRIDE
   Visual only — does not change JS / API / DB
   ========================================================= */

.booktok-page{
    padding-top:12px;
    padding-right:0;
    padding-left:0;
}

.booktok-header{
    margin-bottom:12px;
}

.booktok-header h1{
    font-size:26px;
}

.booktok-modes{
    margin-bottom:14px;
    z-index:20;
    position:relative;
}

/* Reels viewport */
#booktok-reels{
    width:100%;
    max-width:520px;
    margin:0 auto;
    gap:18px;
}

#booktok-reels .booktok-reel{
    width:100%;
    height:min(82vh,820px);
    min-height:620px;
    border-radius:18px;
    border:0;
    box-shadow:0 12px 35px rgba(43,45,66,.22);
}

/* Full video */
#booktok-reels .booktok-video{
    position:absolute;
    inset:0;
}

#booktok-reels .booktok-video-player{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Stronger cinematic bottom gradient */
#booktok-reels .booktok-reel::before{
    z-index:1;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.12) 0%,
            transparent 30%,
            transparent 52%,
            rgba(0,0,0,.78) 100%
        );
}

/* Instagram-style side actions */
#booktok-reels .booktok-actions{
    right:12px;
    left:auto;
    bottom:104px;
    z-index:12;
    gap:15px;
    align-items:center;
}

#booktok-reels .booktok-actions button{
    width:50px;
    height:auto;
    min-width:50px;
    min-height:50px;
    padding:0;
    border:0;
    background:transparent;
    color:#fff;
    box-shadow:none;
    backdrop-filter:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:27px;
    text-shadow:0 2px 8px rgba(0,0,0,.55);
}

#booktok-reels .booktok-actions button span{
    display:block;
    color:#fff;
    font-size:11px;
    line-height:1.1;
    font-weight:700;
    text-shadow:0 2px 7px rgba(0,0,0,.75);
}

#booktok-reels .booktok-actions button:hover{
    transform:scale(1.08);
    background:transparent;
    box-shadow:none;
}

/* Reel title + description */
#booktok-reels .booktok-content{
    right:18px;
    left:78px;
    bottom:22px;
    z-index:10;
    padding:0;
    padding-right:0;
    max-width:calc(100% - 150px);
}

#booktok-reels .booktok-content h2{
    margin-bottom:6px;
    font-size:18px;
}

#booktok-reels .booktok-content p{
    font-size:13px;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Small product card */
#booktok-reels .booktok-product-overlay{
    right:14px;
    left:14px;
    bottom:112px;
    z-index:11;
    padding:10px;
    border-radius:16px;
    background:rgba(255,255,255,.90);
    box-shadow:0 8px 25px rgba(0,0,0,.22);
}

#booktok-reels .booktok-product-main{
    display:flex;
    align-items:center;
    gap:10px;
}

#booktok-reels .booktok-product-cover{
    width:48px;
    height:62px;
    flex:0 0 48px;
    overflow:hidden;
    border-radius:8px;
}

#booktok-reels .booktok-product-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

#booktok-reels .booktok-product-info{
    min-width:0;
}

#booktok-reels .booktok-product-info h2{
    font-size:14px;
    margin:0 0 3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#booktok-reels .booktok-product-info p{
    margin:0 0 5px;
    font-size:11px;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

#booktok-reels .booktok-prices{
    gap:4px;
}

#booktok-reels .booktok-prices span{
    padding:3px 6px;
    font-size:9px;
    border-radius:7px;
}

#booktok-reels .booktok-product-actions{
    margin-top:7px;
    gap:6px;
}

#booktok-reels .booktok-product-actions button{
    padding:7px 8px;
    border-radius:9px;
    font-size:11px;
}

/* Audio / fullscreen controls */
#booktok-reels .booktok-video-controls{
    position:absolute;
    right:12px;
    bottom:12px;
    left:12px;
    z-index:14;
    display:flex;
    align-items:center;
    gap:8px;
    pointer-events:none;
}

#booktok-reels .booktok-video-controls button,
#booktok-reels .booktok-video-controls input{
    pointer-events:auto;
}

#booktok-reels .booktok-video-progress{
    flex:1;
    min-width:0;
}

#booktok-reels .booktok-video-mute,
#booktok-reels .booktok-video-fullscreen{
    width:38px;
    height:38px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.42);
    color:#fff;
    font-size:17px;
    backdrop-filter:blur(8px);
}

#booktok-reels .booktok-video-play{
    position:absolute;
    top:50%;
    left:50%;
    z-index:13;
    transform:translate(-50%,-50%);
    width:58px;
    height:58px;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.38);
    color:#fff;
    font-size:22px;
    backdrop-filter:blur(8px);
}

/* Top audio control */
#booktok-reels .booktok-audio-toggle{
    top:14px;
    left:14px;
    width:42px;
    height:42px;
    min-width:42px;
    border:0;
    background:rgba(0,0,0,.40);
    color:#fff;
    box-shadow:none;
    backdrop-filter:blur(8px);
}

/* Mobile = true immersive reel */
@media (max-width:600px){
    .booktok-page{
        padding-top:8px;
        padding-bottom:90px;
    }

    .booktok-header h1{
        font-size:23px;
    }

    .booktok-modes{
        margin-bottom:8px;
    }

    #booktok-reels{
        width:100%;
        max-width:none;
        gap:10px;
    }

    #booktok-reels .booktok-reel{
        height:calc(100vh - 155px);
        min-height:540px;
        border-radius:0;
    }

    #booktok-reels .booktok-actions{
        right:8px;
        bottom:88px;
        gap:12px;
    }

    #booktok-reels .booktok-actions button{
        width:46px;
        min-width:46px;
        font-size:25px;
    }

    #booktok-reels .booktok-actions button span{
        font-size:10px;
    }

    #booktok-reels .booktok-content{
        right:14px;
        left:65px;
        bottom:16px;
        max-width:calc(100% - 130px);
    }

    #booktok-reels .booktok-product-overlay{
        right:8px;
        left:8px;
        bottom:100px;
    }
}


/* =========================================================
   ZXUS BOOKTOK — REELS AUDIO / DOUBLE-TAP VISUAL
   Visual only — keep existing functionality unchanged
   ========================================================= */

#booktok-reels .booktok-audio-toggle{
    top:14px;
    left:14px;
    right:auto;
    width:42px;
    height:42px;
    min-width:42px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,.42);
    color:#fff;
    box-shadow:none;
    backdrop-filter:blur(8px);
    z-index:15;
}

#booktok-reels .booktok-double-tap-heart{
    z-index:20;
    pointer-events:none;
}

@media (max-width:600px){
    #booktok-reels .booktok-audio-toggle{
        top:12px;
        left:12px;
        width:40px;
        height:40px;
        min-width:40px;
    }
}


/* =========================================================
   ZXUS BOOKTOK — REELS INSTAGRAM PLAY UI
   Hide manual play button visually only
   ========================================================= */

#booktok-reels .booktok-video-play{
    display:none !important;
}