/* 动态生成的CSS - 生成时间: 2025-11-08 03:46:48 */

img {
    max-width: 100%;
    height: auto;
}

section,main{
    max-width: 100%;
}
#product-grid .feature-content p,#product-grid .feature-content ol{
    color:#444444;
}
#product-grid .feature-content h2{
    color:#EB7A14;
}

/* 产品详情页轮播图样式 */
body.single-product .carousel-container {
    position: relative;
    overflow: hidden;
}

body.single-product .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
}

body.single-product .carousel-slide.active {
    opacity: 1;
    z-index: 2;
}

/* 导航按钮 */
body.single-product .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #f5f5f5; /* 灰底 */
    color: black;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.single-product .carousel-prev {
    left: 16px;
}

body.single-product .carousel-next {
    right: 16px;
}

/* 分页点 */
body.single-product .carousel-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

body.single-product .carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(107, 114, 128, 0.6); /* 灰底 */
    cursor: pointer;
    transition: all 0.3s ease;
}

body.single-product .carousel-dot.active {
    background: rgba(75, 85, 99, 1); /* 深灰色激活状态 */
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(75, 85, 99, 0.4);
}

body.single-product .carousel-dot:hover {
    background: rgba(107, 114, 128, 0.8); /* 灰色悬停 */
    transform: scale(1.1);
}

body.single-product .carousel-dot.active:hover {
    background: rgba(55, 65, 81, 1); /* 更深灰色 */
}

/* 缩略图样式 */
body.single-product .thumbnail-img {
    transition: all 0.3s ease;
}

body.single-product .thumbnail-img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 响应式 */
@media (max-width: 768px) {
    body.single-product .carousel-btn {
        width: 36px;
        height: 36px;
    }

    body.single-product .carousel-prev {
        left: 8px;
    }

    body.single-product .carousel-next {
        right: 8px;
    }

    body.single-product .carousel-dot {
        width: 10px;
        height: 10px;
    }
}

/* Table of Contents - 层次化序号样式 */
/* 主列表 - 使用 CSS 计数器显示 1. 2. 3. */
.widget.sticky.cool-toc-widget ol.list-decimal {
    counter-reset: toc-counter;
    list-style: none;
    padding-left: 0;
}

.widget.sticky.cool-toc-widget ol.list-decimal > li {
    counter-increment: toc-counter;
    position: relative;
    padding-left: 1rem;
}

/* 主列表项序号 (1. 2. 3.) */
.widget.sticky.cool-toc-widget ol.list-decimal > li::before {
    content: counter(toc-counter) ". ";
    position: absolute;
    left: 0;
    font-weight: 600;
    color: #374151;
}

/* 子列表样式 - 显示 1.1 1.2 2.1 */
.widget.sticky.cool-toc-widget ol.list-decimal > li > ol {
    counter-reset: toc-sub-counter;
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.widget.sticky.cool-toc-widget ol.list-decimal > li > ol > li {
    counter-increment: toc-sub-counter;
    position: relative;
    padding-left: 1.5rem;
}

/* 子列表项序号 (1.1 1.2 2.1) */
.widget.sticky.cool-toc-widget ol.list-decimal > li > ol > li::before {
    content: counter(toc-counter) "." counter(toc-sub-counter) " ";
    position: absolute;
    left: 0;
    font-weight: 500;
    color: #6b7280;
}


/* Orange-500 颜色类 - 使用 global_color */

/* 链接样式 */
.widget.sticky.cool-toc-widget a.toc-link.active {
color:#6965a0;
font-weight: 600;
}

/* Border Colors */
.border-orange-500 {
    --tw-border-opacity: 1;
    border-color: #6965a0;
}

.hover\:border-orange-500:hover {
    --tw-border-opacity: 1;
    border-color: #6965a0;
}

.focus\:border-orange-500:focus {
    --tw-border-opacity: 1;
    border-color: #6965a0;
}

/* Background Colors */
.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: #6965a0;
}

.bg-orange-500\/0 {
    background-color: rgb(235 122 20 / 0);
}

.bg-orange-500\/10 {
    background-color: rgb(235 122 20 / 0.1);
}

.hover\:bg-orange-500:hover {
    --tw-bg-opacity: 1;
    background-color: #6965a0;
}

.group-hover\:bg-orange-500\/10:hover {
    background-color: rgb(235 122 20 / 0.1);
}

/* Text Colors */
.text-orange-500 {
    --tw-text-opacity: 1;
    color: #6965a0;
}

.\!text-orange-500 {
    --tw-text-opacity: 1 !important;
    color: #6965a0 !important;
}

.hover\:text-orange-500:hover {
    --tw-text-opacity: 1;
    color: #6965a0;
}

/* Gradient Colors */
.from-orange-500 {
    --tw-gradient-from: #6965a0 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(235 122 20 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-orange-500 {
    --tw-gradient-to: rgb(235 122 20 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #6965a0 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-orange-500 {
    --tw-gradient-to: #6965a0 var(--tw-gradient-to-position);
}

/* Ring Colors */
.focus\:ring-orange-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: #6965a0;
}

/* Navigation Item Animation - 使用 global_color */
.nav-item::before {
    background-color: #6965a0;
}

.mobile-menu-item:hover {
    background-color: #6965a0;
}

/* Subtitle Divider - 使用 global_color */
.subtitle-divider::before,
.subtitle-divider::after,
.subtitle-divider-rigt::after {
    background-color: #6965a0;
}

/* Gutenberg Block Styles - 使用 global_color */
.main-content .wp-block-button .wp-block-button__link {
    background-color: #6965a0;
}

.main-content .wp-block-button .wp-block-button__link:hover {
    opacity: 0.9;
}

.main-content .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: #6965a0;
    color: #6965a0;
}

.main-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: #6965a0;
    color: white;
}

.main-content .wp-block-separator {
    --tw-gradient-stops: var(--tw-gradient-from), #6965a0 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.main-content .wp-block-separator.is-style-dots {
    color: #6965a0;
}

.main-content .wp-block-file .wp-block-file__button {
    background-color: #6965a0;
}

.main-content .wp-block-file .wp-block-file__button:hover {
    opacity: 0.9;
}
#home-hero{
background-image: url('https://beilite.id/wp-content/uploads/2025/10/画板-1.jpg');
}
/* About Section */

/* Advantage Section */

/* Blog Display Section */
#home-blog .blog-timeline-line {
    top: 66px;
}

/* FAQs Section */

/* Evaluate Section */
.evaluate-section {
    background-color: rgba(144,144,160,0.21);
}
.evaluate-section .flex-shrink-0 {
    width: 218px;
}
.evaluate-section .flex-shrink-0 img {
    height: 150px;
}

/* Illustrate Section */
#home-illustrate {
    background-color: rgba(144,141,160,0.11);
}

/* Product Display Section */
#home-products {
    background: linear-gradient(180deg, #FFFFFF 80%, #6965a0 0%);
}
#home-products .product-card {
    width: 190px;
}
#home-products .product-card img,
#home-products .product-card .product-placeholder {
    height: 136px;
}
#home-products .product-arrow {
    width: 28px;
    height: 28px;
}
#home-products .product-arrow i {
    font-size: 10px;
}

/* Product Gradient Section Background */
#product-gradient {
    background-color: #6965a0;
}

/* Footer Background */
.original-footer {
    margin-top: -5rem;
    background-color: #000a59;
}

.original-footer .footer-bg-image {
    background-image: url(https://beilite.id/wp-content/uploads/2025/10/画板-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
    opacity: 0.2;
}

.original-footer .footer-content {
    padding-top: 4rem;
}

/* Form Inputs Font Family */
#quote-form input,
#quote-form textarea,
#search-input {
    font-family: 'Titillium Web', sans-serif;
}

/* 用户自定义CSS */