/* =========================================================
   Ploom / EVO FAQ 區塊
   僅作用於 .below-woocommerce-category
========================================================= */

.below-woocommerce-category,
.below-woocommerce-category *{
    box-sizing:border-box;
}

.below-woocommerce-category{
    width:100%;
    max-width:1100px;

    margin:50px auto 60px;
    padding:38px 42px;

    background:#ffffff;

    border:1px solid #e5e8e6;
    border-radius:20px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.055);

    color:#4e5450;

    font-size:16px;
    line-height:1.9;
}


/* =========================================================
   開頭導言
========================================================= */

.below-woocommerce-category > p:first-child{
    margin:0 0 28px !important;
    padding:18px 20px !important;

    background:#f5f8f6;

    border:1px solid #e1e8e4;
    border-left:4px solid #198754;

    border-radius:12px;

    color:#3f4742;

    font-size:16px;
    line-height:1.9;
}


/* =========================================================
   一般文字
========================================================= */

.below-woocommerce-category p{
    margin:0 0 17px !important;
    padding:0 !important;

    color:#505652;

    font-size:16px;
    line-height:1.9;
}

.below-woocommerce-category div[data-sfc-root="ep"]{
    color:#505652;

    font-size:16px;
    line-height:1.9;
}


/* 空白元素不佔位置 */

.below-woocommerce-category p:empty,
.below-woocommerce-category div:empty{
    display:none !important;
}


/* =========================================================
   H2 大標題
========================================================= */

.below-woocommerce-category h2{
    position:relative;

    margin:36px 0 20px !important;
    padding:16px 20px !important;

    background:#f1f7f3 !important;

    border:1px solid #dfe8e3 !important;
    border-left:5px solid #198754 !important;

    border-radius:12px !important;

    color:#202622 !important;

    font-size:24px !important;
    font-weight:800 !important;
    line-height:1.5 !important;
}


/* 第一個 FAQ 主標題 */

.below-woocommerce-category h2:first-of-type{
    margin-top:15px !important;

    background:#eaf5ee !important;
}


/* =========================================================
   分類 H2
   關於購買 / 風味 / 技術
========================================================= */

.below-woocommerce-category h2 + h2{
    margin-top:28px !important;

    background:#fafbfa !important;

    border-left-color:#6a8d79 !important;

    font-size:20px !important;
}


/* =========================================================
   FAQ 問題 H3
========================================================= */

.below-woocommerce-category h3{
    position:relative;

    margin:16px 0 0 !important;

    padding:
        17px
        20px
        17px
        56px !important;

    background:#f7faf8 !important;

    border:1px solid #dfe6e2 !important;

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

    color:#202622 !important;

    font-size:17px !important;
    font-weight:700 !important;
    line-height:1.65 !important;
}


/* Q 圖示 */

.below-woocommerce-category h3::before{
    content:"Q";

    position:absolute;

    left:17px;
    top:16px;

    width:27px;
    height:27px;

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

    background:#198754;

    border-radius:50%;

    color:#fff;

    font-size:12px;
    font-weight:800;
    line-height:1;
}


/* =========================================================
   H3 後面的回答區
========================================================= */

.below-woocommerce-category h3 + div{
    margin:0 0 18px !important;

    padding:18px 20px !important;

    background:#fff !important;

    border:1px solid #dfe6e2 !important;
    border-top:0 !important;

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

    box-shadow:
        0 4px 14px rgba(0,0,0,.025);

    color:#555d58 !important;

    font-size:15px !important;
    line-height:1.9 !important;
}


/* =========================================================
   關鍵字文字
========================================================= */

.below-woocommerce-category span[data-sfc-root="ep"]{
    color:inherit;
}

.below-woocommerce-category strong,
.below-woocommerce-category .rQesXe,
.below-woocommerce-category .MPyX{
    color:#16724a !important;

    font-weight:700 !important;
}


/* =========================================================
   HR
========================================================= */

.below-woocommerce-category hr{
    width:100%;
    height:1px;

    margin:34px 0 !important;
    padding:0 !important;

    border:0 !important;

    background:#e4e8e5 !important;
}


/* =========================================================
   UL / OL
   如果之後新增列表可直接套用
========================================================= */

.below-woocommerce-category ul,
.below-woocommerce-category ol{
    margin:15px 0 22px !important;

    padding:
        15px
        18px
        15px
        38px !important;

    background:#f8faf9;

    border:1px solid #e5e9e7;
    border-radius:10px;
}


.below-woocommerce-category li{
    margin:0 0 8px !important;

    color:#535955;

    font-size:14px;
    line-height:1.8;
}


.below-woocommerce-category li:last-child{
    margin-bottom:0 !important;
}


/* =========================================================
   連結
========================================================= */

.below-woocommerce-category a{
    color:#198754;

    text-decoration:none;

    border-bottom:1px solid rgba(25,135,84,.25);

    transition:
        color .2s ease,
        border-color .2s ease;
}


.below-woocommerce-category a:hover{
    color:#12663f;

    border-bottom-color:#12663f;
}


/* =========================================================
   Emoji
========================================================= */

.below-woocommerce-category img.emoji{
    display:inline-block !important;

    width:18px !important;
    height:18px !important;

    max-width:18px !important;

    margin:0 3px !important;

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

    box-shadow:none !important;

    vertical-align:-3px !important;
}


/* =========================================================
   清除複製內容特殊 class 干擾
========================================================= */

.below-woocommerce-category .n6owBd,
.below-woocommerce-category .awi2gc{
    margin:0 !important;
    padding:0 !important;

    background:none !important;

    border:0 !important;
}


/* =========================================================
   平板
========================================================= */

@media(max-width:992px){

    .below-woocommerce-category{
        width:calc(100% - 30px);

        margin:35px auto 45px;

        padding:30px;
    }


    .below-woocommerce-category h2{
        font-size:22px !important;
    }

}


/* =========================================================
   手機
========================================================= */

@media(max-width:768px){

    .below-woocommerce-category{
        width:calc(100% - 20px);

        margin:25px auto 35px;

        padding:20px 15px;

        border-radius:15px;

        font-size:15px;
    }


    /* 導言 */

    .below-woocommerce-category > p:first-child{
        padding:14px 15px !important;

        font-size:14px;
        line-height:1.8;
    }


    /* 文字 */

    .below-woocommerce-category p,
    .below-woocommerce-category div[data-sfc-root="ep"]{
        font-size:14px;
        line-height:1.85;
    }


    /* H2 */

    .below-woocommerce-category h2{
        margin:27px 0 15px !important;

        padding:
            12px
            13px
            12px
            15px !important;

        border-left-width:4px !important;

        border-radius:10px !important;

        font-size:19px !important;
    }


    .below-woocommerce-category h2 + h2{
        font-size:17px !important;
    }


    /* H3 */

    .below-woocommerce-category h3{
        padding:
            14px
            13px
            14px
            48px !important;

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

        font-size:15px !important;
        line-height:1.55 !important;
    }


    .below-woocommerce-category h3::before{
        left:13px;
        top:13px;

        width:24px;
        height:24px;

        font-size:11px;
    }


    /* Answer */

    .below-woocommerce-category h3 + div{
        padding:15px !important;

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

        font-size:14px !important;
    }


    /* HR */

    .below-woocommerce-category hr{
        margin:27px 0 !important;
    }

}


/* =========================================================
   小手機
========================================================= */

@media(max-width:390px){

    .below-woocommerce-category{
        width:calc(100% - 12px);

        padding:16px 11px;
    }


    .below-woocommerce-category h2{
        font-size:18px !important;
    }


    .below-woocommerce-category h3{
        font-size:14px !important;
    }

}