:root{--page-title-display:none;}/* Start custom CSS */.catalog-wall {
    /* ==================================================
   SATILIFE CATALOGUE SHELF
   ================================================== */


/* ---------- 1. 最外层黑色展示区 ---------- */

.catalog-wall {
    position: relative;
    width: 100%;
    background: #030303;
    padding: 50px 0 0 !important;
    margin: 0 !important;
    overflow: hidden;
    isolation: isolate;
}


/* ---------- 2. 三块层板的统一外观 ---------- */

/* 最顶部层板 + 每排目录底部层板 */
.catalog-wall::before,
.catalog-shelf::after {
    content: "";
    position: absolute;
    left: 1%;
    right: 1%;
    height: 50px;
    background: linear-gradient(
        to bottom,
        #4c4c4c 0%,
        #383838 32%,
        #202020 42%,
        #292929 48%,
        #111111 100%
    );
    clip-path: polygon(
        7% 0,
        93% 0,
        100% 42%,
        100% 100%,
        0 100%,
        0 42%
    );
    box-shadow:
        0 15px 25px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 1;
}

/* 最顶部层板 */
.catalog-wall::before {
    top: 0;
}

/* 每排目录下面的层板 */
.catalog-shelf::after {
    bottom: 0;
}


/* ---------- 3. 上下两排横向容器 ---------- */

.catalog-shelf {
    position: relative;
    width: 100%;
    min-height: 410px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: flex-end !important;
    gap: 80px !important;
    padding: 50px 5% 50px !important;
    margin: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
}


/* ---------- 4. 每一本目录的子容器 ---------- */

.catalog-item {
    position: relative;
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    height: 310px !important;
    min-height: 310px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;

    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box;
    z-index: 2;
}


/* ---------- 5. 目录封面图片 ---------- */

.catalog-cover {
    width: 210px !important;
    max-width: 210px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform-origin: center bottom;
    transition:
        transform 0.35s ease,
        filter 0.35s ease;
    filter: drop-shadow(
        14px 14px 13px rgba(0, 0, 0, 0.72)
    );
}

.catalog-cover img,
.catalog-cover svg {
    width: 100% !important;
    max-width: 210px !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}


/* ---------- 6. 鼠标悬停效果 ---------- */

.catalog-item:hover .catalog-cover {
    transform: translateY(-12px) scale(1.035);
    filter: drop-shadow(
        18px 20px 16px rgba(0, 0, 0, 0.88)
    );
}


/* ---------- 7. 悬停显示的目录名称 ---------- */

.catalog-tip {
    position: absolute !important;
    width: 195px !important;
    right: calc(100% - 12px) !important;
    top: 35px !important;

    padding: 14px 18px !important;
    margin: 0 !important;

    background: #5d5d5d !important;
    color: #ffffff !important;
    border-radius: 13px !important;

    font-size: 15px !important;
    line-height: 1.25 !important;
    text-transform: uppercase;

    opacity: 0;
    visibility: hidden;
    transform: translateX(12px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;

    pointer-events: none;
    box-sizing: border-box;
    z-index: 10;
}

.catalog-tip,
.catalog-tip * {
    color: #ffffff !important;
}

.catalog-tip .elementor-heading-title {
    margin: 0 !important;
    color: #ffffff !important;
}


/* 标签右侧三角形 */

.catalog-tip::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 37px;

    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 15px solid #5d5d5d;
}


/* 鼠标经过目录时显示标签 */

.catalog-item:hover .catalog-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 1024px) and (min-width: 768px) {

    .catalog-shelf {
        min-height: 390px !important;
        gap: 30px !important;
        padding: 45px 30px 50px !important;
    }

    .catalog-item {
        flex: 0 0 190px !important;
        width: 190px !important;
        max-width: 190px !important;
        height: 290px !important;
        min-height: 290px !important;
    }

    .catalog-cover {
        width: 175px !important;
        max-width: 175px !important;
    }

    .catalog-cover img,
    .catalog-cover svg {
        max-width: 175px !important;
        max-height: 270px !important;
    }

    .catalog-tip {
        width: 165px !important;
        font-size: 13px !important;
    }
}


/* ==================================================
   MOBILE
   ================================================== */

/* ==================================================
   MOBILE：每排显示3本目录
   ================================================== */

@media (max-width: 767px) {

    .catalog-wall {
        padding-top: 35px !important;
    }

    .catalog-wall::before {
        height: 35px;
    }

    /* 手机端关闭整排大层板 */
    .catalog-shelf::after {
        display: none;
    }

    /* 每排固定三列 */
    .catalog-shelf {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 55px !important;

        width: 100% !important;
        min-height: 0 !important;
        padding: 30px 10px 55px !important;
        margin: 0 !important;
    }

    .catalog-item {
        position: relative;
        width: 100% !important;
        max-width: none !important;
        height: 170px !important;
        min-height: 170px !important;
        flex: initial !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    /* 根据手机宽度自动缩放封面 */
    .catalog-cover {
        width: clamp(82px, 27vw, 108px) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .catalog-cover img,
    .catalog-cover svg {
        width: 100% !important;
        max-width: 108px !important;
        max-height: 155px !important;
        object-fit: contain !important;
    }

    /* 每本目录下面的小层板 */
    .catalog-item::after {
        content: "";
        position: absolute;
        left: 2px;
        right: 2px;
        bottom: -22px;
        height: 22px;

        background: linear-gradient(
            to bottom,
            #494949 0%,
            #303030 42%,
            #111111 100%
        );

        clip-path: polygon(
            8% 0,
            92% 0,
            100% 42%,
            100% 100%,
            0 100%,
            0 42%
        );

        box-shadow: 0 10px 16px rgba(0, 0, 0, 0.75);
        z-index: -1;
    }

    /* 手机端不显示悬停名称 */
    .catalog-tip {
        display: none !important;
    }
}
}/* End custom CSS */