#sp-header,
#sp-header.header-sticky {
    background-color: #DF2718 !important;
}

#sp-top-bar {
    background: #ffffff !important;
}

#sp-header>.container>.container-inner {
    background: #DF2718 !important;
}

.sp-megamenu-parent>li>a {
    color: #ffffff !important;
    font-weight: bold;
}

#sp-top-bar .sp-module.top-search input {
    background: #f2f2f2 !important;
    border: none;
}

/* 粘性 header 时 logo 缩小 */
#sp-header.header-sticky .logo-image {
    height: 30px;
    width: auto;
}

#sp-menu .sp-module.shop-menu {
    background-color: #bc1818 !important;
}

/* 简化版表格样式 - 先保证基础样式生效 */
.ink-table {
    width: 100%;
    border-collapse: collapse;
}

.ink-table td,
.ink-table th {
    border: 1px solid #e0e0e0;
    padding: 8px;
    text-align: center;
}

/* 让第一行的标题稍微突出 */
.ink-table .bold {
    background-color: #f2f2f2;
    font-weight: bold;
}

.col-sm-4.review-details-sidebar {
    display: none;
}
.col-sm-8 {
    width: 100%;
}

/* Fix right sidebar dropping below main content on blog layout */
#sp-main-body .sp-column,
#sp-right .sp-column {
    align-items: flex-start;
    justify-content: flex-start;
}

/*
 * HACK: Content plugin extra divs cause #sp-right to nest inside #sp-component
 * on blog listing pages. JS in index.php moves sp-right back to sibling position.
 * Hide it in the broken position as FOUC prevention (will show after JS moves it).
 */
#sp-component #sp-right {
    display: none !important;
}

.sp-page-title .sp-page-title-heading,.sp-page-title .sp-page-title-sub-heading {
    color: #494f51 !important;
}

.sp-page-title .breadcrumb>span,.sp-page-title .breadcrumb>li,.sp-page-title .breadcrumb>li+li:before,.sp-page-title .breadcrumb>li>a {
    color: #494f51 !important;
}

/* 保持 Latest Articles 所有文章显示日期和类别 */
.sppb-addon-articles-layout.list .sppb-addon-content>div>div:not(:first-child) .sppb-article-meta {
    display: block !important;
}

/* 让图片本身有平滑过渡效果 */
.hover-shadow-img img {
    display: block;
    width: 100%;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* 为图片的放大和阴影添加过渡 */
}

/* 2. 鼠标悬停时，改变图片的样式 */
.hover-shadow-img:hover img {
    transform: scale(1.02);
    box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.4);
}

#sp-main-body {
    padding: 30px 0px !important;
}