@charset "UTF-8";
/*
Theme Name: flatsome Child
Description: This is a child theme for flatsome Theme
Author: dak
Template: flatsome
Version: 1.0.1
*/

/**
 * ==================== 性能优化说明 ====================
 * 所有CSS文件已通过 functions/script-style.php 使用 wp_enqueue_style 并行加载
 * 原18个 @import 串行加载已优化为并行加载，性能提升5-10倍
 *
 * 加载的CSS文件列表：
 * - diy.css (基础样式)
 * - css/product.css (产品单页)
 * - css/page.css (单页面)
 * - css/single-archive.css (文章存档)
 * - css/single.css (文章单页)
 * - css/block-faq-list.css (折叠卡)
 * - css/plugin.css (插件)
 * - css/font-type.css (字体)
 * - css/header.css (头部)
 * - css/footer.css (底部)
 * - css/block-btn.css (按钮)
 * - css/clean-layout.css (布局/间距/填充/阴影)
 * - css/icon.css (图标)
 * - css/block-breadcrumb.css (面包屑)
 * - css/block-slider.css (轮播)
 * - css/block-lightbox.css (弹窗)
 * - css/block-tabs.css (切换卡)
 * - css/block-UX.css (UX编辑器，条件加载)
 * ===================================================
 */


/* ==========================================================================
   WooCommerce 产品分类侧栏
   参考图 2：左侧方形加减号 + 子分类竖线
   Theme Color: var(--fs-color-primary)
   ========================================================================== */

ul.product-categories,
.product-categories ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   一级分类
   ========================================================================== */

.product-categories > li.cat-item {
    position: relative;

    margin: 0;
    padding: 0;

    border-bottom: 1px solid #e7ebef;

    list-style: none;
}

.product-categories > li.cat-item:last-child {
    border-bottom: 0;
}

/* 一级分类名称 */
.product-categories > li.cat-item > a {
    display: block;

    margin: 0;
    padding: 17px 42px 17px 23px;

    color: #343a43;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
    text-decoration: none;

    transition: color 0.2s ease;
}

.product-categories > li.cat-item > a:hover {
    color: var(--fs-color-primary);
}

/* 当前分类、展开分类 */
.product-categories > li.current-cat > a,
.product-categories > li.current-cat-parent > a,
.product-categories > li.active > a,
.product-categories > li[aria-expanded="true"] > a {
    color: var(--fs-color-primary);
}

/* ==========================================================================
   左侧加减按钮
   ========================================================================== */

.product-categories li.cat-parent > .toggle {
    position: absolute !important;
    top: 22px !important;
    right: auto !important;
    left: 0 !important;
    z-index: 2;

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

    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;

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

    border: 1px solid #aeb7c2 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #7f8995 !important;

    opacity: 1 !important;
    transform: none !important;

    cursor: pointer;
}

/* 隐藏 Flatsome 原来的箭头 */
.product-categories li.cat-parent > .toggle i {
    display: none !important;
}

/* 默认加号 */
.product-categories li.cat-parent > .toggle::before {
    content: "+";

    display: block;

    color: currentColor;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    text-align: center;
}

/* 展开后减号 */
.product-categories li.cat-parent.active > .toggle::before,
.product-categories li.cat-parent.current-cat > .toggle::before,
.product-categories li.cat-parent.current-cat-parent > .toggle::before,
.product-categories li.cat-parent[aria-expanded="true"] > .toggle::before {
    content: "−";
}

/* 当前分类按钮使用主题色 */
.product-categories li.cat-parent.active > .toggle,
.product-categories li.cat-parent.current-cat > .toggle,
.product-categories li.cat-parent.current-cat-parent > .toggle,
.product-categories li.cat-parent[aria-expanded="true"] > .toggle {
    border-color: var(--fs-color-primary) !important;
    color: var(--fs-color-primary) !important;
}

/* ==========================================================================
   二级分类
   ========================================================================== */

.product-categories > li.cat-item > ul.children {
    position: relative;

    margin: 0 0 14px 4px;
    padding: 0 0 0 18px;

    border-left: 1px solid #dce2e8;

    list-style: none;
}

/*
 * 保持 Flatsome 原有展开逻辑。
 * 当前分类即使 aria-expanded 状态未同步，也强制显示子分类。
 */
.product-categories > li.current-cat > ul.children,
.product-categories > li.current-cat-parent > ul.children,
.product-categories > li.active > ul.children,
.product-categories > li[aria-expanded="true"] > ul.children {
    display: block;
}

.product-categories ul.children > li.cat-item {
    position: relative;

    margin: 0;
    padding: 0;

    border: 0;

    list-style: none;
}

.product-categories ul.children > li.cat-item > a {
    display: block;

    margin: 0;
    padding: 6px 0;

    color: #3e4858;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.product-categories ul.children > li.cat-item > a:hover {
    color: var(--fs-color-primary);
    transform: translateX(3px);
}

/* 当前二级分类 */
.product-categories ul.children > li.current-cat > a {
    color: var(--fs-color-primary);
    font-weight: 600;
}

/* ==========================================================================
   更深层级分类
   ========================================================================== */

.product-categories ul.children ul.children {
    margin: 4px 0 6px 3px;
    padding-left: 16px;

    border-left: 1px solid #e3e7eb;
}

.product-categories ul.children ul.children a {
    font-size: 14px;
}

/* 二级及更深层级如果还有展开按钮 */
.product-categories ul.children li.cat-parent > .toggle {
    top: 10px !important;
}

.product-categories ul.children li.cat-parent > a {
    padding-right: 28px;
}

/* ==========================================================================
   清理 Flatsome 默认样式
   ========================================================================== */

.product-categories li::before,
.product-categories li::after {
    content: none !important;
}

.product-categories a::before,
.product-categories a::after {
    content: none !important;
}

.product-categories .toggle:hover {
    background: var(--fs-color-primary) !important;
    border-color: var(--fs-color-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   手机端
   ========================================================================== */

@media (max-width: 549px) {

    .product-categories > li.cat-item > a {
        padding-top: 15px;
        padding-bottom: 15px;

        font-size: 15px;
    }

    .product-categories li.cat-parent > .toggle {
        top: 19px !important;
    }

    .product-categories ul.children > li.cat-item > a {
        padding-top: 6px;
        padding-bottom: 6px;

        font-size: 14px;
    }

    .product-categories > li.cat-item > ul.children {
        margin-bottom: 12px;
    }
}

/* ==========================================================================
 lis-3 列表圆点使用主题色
   ========================================================================== */

.lis-3 ul li::marker {
    color: var(--primary-color);
}


/* ==========================================================================
 - 服务卡片按钮底部对齐
   对应 Row Class：btn-bottom
   ========================================================================== */

/* 每个列拉伸为等高布局 */
.btn-bottom > .col {
    display: flex;
}

/* 卡片内部使用纵向 Flex */
.btn-bottom > .col > .col-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* 最后的按钮自动推到底部 */
.btn-bottom > .col > .col-inner > .button {
    margin-top: auto;
    margin-bottom: 0;
    align-self: center;
}