@charset "utf-8";

/*
關於CSS設定說明
CSS屬性是會繼承的，而且還是由上往下繼承。
同樣元素設定16px 後 12px 再 15px 最後會以最後設定的15px為準
但是有兩種情況除外:
1.絕對路徑命名. 如: .xx .yy .zz p {設定值;}
2.important.  如: .xx p {設定值 !important;}

CSS3選取器語法 :nth-child(n) 

*/


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/*上方選單解除滑動固定
.header_area.sticky { position:relative;}
*/


/*上方選單右邊設定 臉書/LINE/電話/信箱
.tp_links a:before {寬高大小設定}
.tp_links a.me_tp_fb {}
.tp_links a.me_tp_fb:before {背景換圖/建議.SVG}
.tp_links a.me_tp_line {}
.tp_links a.me_tp_line:before {背景換圖/建議.SVG}
.tp_links a.me_tp_call {}
.tp_links a.me_tp_call:before {背景換圖/建議.SVG}
.tp_links a.me_tp_mail {}
.tp_links a.me_tp_mail:before {背景換圖/建議.SVG}
*/


/*電腦LOGO
.nav-brand {}
*/

/*手機LOGO
.nav-brand-m {}
*/

/* 商品下拉超過30個變大 */
.stellarnav.desktop li.bigMenu>ul{display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); left: 0; width: 100%; position: fixed; padding: 20px;}
.stellarnav.desktop li.bigMenu ul ul{top: 100%; left: 0; width: 100%; background: #efefef; height: auto; max-height: 300px; overflow: auto;}
.stellarnav.desktop li.bigMenu ul ul li{margin: 0;} 
.stellarnav.hasBigMenu li.bigMenu li.has-sub > a:after{border-left: 6px solid transparent; border-bottom:unset; border-right: 6px solid transparent; border-top: 6px solid #898989; right: 5px;}
/* 主分類超過30個但次分類直接顯示 
.stellarnav.desktop li.bigMenu>ul{grid-gap: 10px;}
.stellarnav.desktop li.bigMenu li{border: 0;}
.stellarnav.desktop li.bigMenu>ul>li>a{border: 1px solid #ddd;}
.stellarnav.desktop li.bigMenu ul ul{display: block !important; position: relative; top: 0; background: unset; border: 0;}
.stellarnav.desktop li.bigMenu ul ul li{border: 0;}
 主分類超過30個但次分類直接顯示-結束 */

/* 商品下拉超過30個--結束 */


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*預設購物車版面 產品分類選單在左側 商品內頁詳細介紹下表單更改樣式 by shint at 2025.12.18  */
.product_page .main_part { max-width:1500px;}

.product_page .show_content,
.product_info_page .show_content { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; width: 100%;}
ul.page { width: 100%;}

.ProdFilter_Item_Show { width: 100%;}
.Prods_Menulists { width: 100%; padding: 0;}
.Prods_Wrap { width: calc(100% - 270px);}

/* 篩選器-左手邊 / 產品分類-上面
.ProdFilter_ { order: 2;}
.Prods_Menulists { order: 1;}
.Prods_Wrap { order: 3;}
.ProdFilter_ { width: 250px; letter-spacing: 1px;}
.ProdFilter_ li { width: 100%;}
.ProdFilter_ li > a { background: #f3f3f3; border: none; border-bottom: 3px #ddd solid;}
.ProdFilter_ dl { position: static; width: 100%; display: block;}
*/

/* 產品分類-左手邊 / 篩選器-上面 */

.ProdFilter_ { order: 1; margin-bottom: 25px;}
.Prods_Menulists { order: 2;}
.Prods_Wrap { order: 3;}
.Prods_Menulists { width: 250px; letter-spacing: 1px;}
.Prods_Menulists ul {}
.Prods_Menulists > ul > li { width: 100%; flex-wrap: wrap;}
.Prods_Menulists ul ul { position: static; border: none;}
.Prods_Menulists ul li ul li {}
.Prods_Menulists li.has-sub.open > a {}

.product_info_page .half_box { width: 100%; float: none; padding-right: 0;}
.product_info_page .half_box li.btn_blankTop { margin-top: 50px; justify-content: space-between; display: flex;}
.product_info_page .half_box li.btn_blankTop input { width: calc(50% - 10px); background-image: none; padding: 0; text-align: center;}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
.product_main { display: block; width: 100%;}    
.sidebarBtn { display: block; width: 100%;}
}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 768px) {
.banner {
    min-height: 220px;
}

.banner h5 {
    padding: 12px 28px;
    font-size: 28px;
    letter-spacing: .08em;
}

/* 篩選器-左手邊 / 產品分類-上面
.Prods_Wrap { width: 100%;}
.ProdFilter_ { width: 100%;}
.ProdFilter_Item_Show { width: calc(100% - 110px);}
.ProdFilter_ { order: 1;}
.Prods_Menulists { order: 2;}
.ProdFilter_ li > a span { color: #333;}
*/

.Prods_Wrap { width: 100%; margin-top: 20px;}
.ProdFilter_ { width: 100%;}
.Prods_Menulists { opacity: 0; display: none;}

}
@media screen and (max-width: 600px) {
}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */

/* 2025.12.26 中間放大*/
.BannerHome02 .swiper-slide-active img { transform: scale(1);}
.BannerHome02 .swiperBan02 .swiper-slide img { transition: transform 5s ease-out; will-change: transform; transform: scale(1);}
.BannerHome02 .swiperBan02 .swiper-slide-active img { transform: scale(1.06);}


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */




/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*內頁BANNER 設定*/
.banner {
    position: relative;
    min-height: 300px;
    background-image: url(https://pic03.eapple.com.tw/caishenyuanyi/banner.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

/* 內頁 Banner 柔和白色光暈，讓標題更清楚 */
.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.88) 0%,
            rgba(255,255,255,.68) 28%,
            rgba(255,255,255,.22) 58%,
            rgba(255,255,255,0) 100%
        );
}

/* 確保 Banner 內容在光暈上方 */
.banner > * {
    position: relative;
    z-index: 1;
}

.banner h5 {
    position: relative;
    display: inline-block;
    padding: 16px 38px;
    color: #294D3A;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.4;
    text-shadow: 0 2px 12px rgba(255,255,255,.9);
}

/* 標題後方淡淡漸層底 */
.banner h5::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.72) 18%,
            rgba(247,244,236,.82) 50%,
            rgba(255,255,255,.72) 82%,
            rgba(255,255,255,0) 100%
        );
    box-shadow: 0 12px 35px rgba(41,77,58,.08);
}

/* 標題下方小線條 */
.banner h5::after {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    margin: 10px auto 0;
    background: #C57A3A;
}

.banner.banA {}
.banner.banB {}
.banner.banC {}
.banner.banD {}
.banner.banE {}
.banner.banblog {}
.banner.banDesign { background-color:#333;}

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*文章設定*/
.articel_mainPic img {
    display: none;}
/*一排呈現
.subbox_item { width:100%;}
*/
  

/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*相本分類全版面 ( 限制最寬2000px
.work_page .main_part { max-width:2000px;}
.work_page .show_content { padding:0; width:100%;}
.work_page .show-list .item { width:33%; display:inline-block; float:none; margin:0; padding:0;}
@media screen and (max-width: 768px) {
.work_page .show-list .item { width:49%;}
}
@media screen and (max-width: 570px) {
.work_page .show-list .item { width:100%;}
}
.work_page .show-list .item a { max-width:100%;}
.work_page .show-list .show_pic { height:auto; line-height:0;}
.work_page .show-list .show_pic img { max-width:100%; max-height:100%;}
.work_page .show-list .show_name { position:absolute; top:50%; right:10%; width:80%; height:auto; line-height:160%; font-size: 20px; color: #FFFFFF !important; border: solid 1px #fff; text-align: center; margin: -20px 0 0 -120px; padding:5px 20px; transition:all ease-in .3s; opacity:0;}
.work_page .show-list .item:hover .show_name {opacity:1;}
*/


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */


/*相本列表
.work_info_page .main_part { max-width:2000px;}
.work_info_page .show_content { padding:0; width:100%;}
.work_info_page .subalbum-menu { text-align:center;}
.work_info_page .subalbum-menu h2 { float:none;}
.work_info_page .pic-list .item { margin:0; padding:10px; width:49%; float:none; display:inline-block;}
@media screen and (max-width: 768px) {
.work_info_page .pic-list .item { width:100%;}
}
.work_info_page .pic-list .show_pic { height:auto; line-height:0;}
.work_info_page .pic-list .show_pic img { max-width:100%; max-height:100%;}
.work_info_page .pic-list .item a { max-width:100%; pointer-events: none; cursor: default; } 取消連結被點擊效果
*/


/* = = = 分隔線 = = = = = = = = = == = = = = = = = = = = = = = = == = = */





@media screen and (max-width: 768px) {
/* 開啟手機板下方按鈕所需設定 */
#bottom_menu {}
.footer.with_shopping_mode { padding:30px 0 70px; }
#to_top { bottom:60px;}
}

@media screen and (max-width: 600px) { 
}


/* =========================================================
   財神園藝｜安全修正版
   只使用 CSS，不修改 HTML / JS
   請放在 custom.css 最下方
   ========================================================= */

/* ---------------------------------------------------------
   01. 修正輪播高度塌陷
   Swiper 淡入輪播可能讓外層抓不到圖片高度，
   因此 Footer 才會跑到 Banner 前面。
   --------------------------------------------------------- */

.pageIndex .bannerindex {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clear: both;
    line-height: 0;
}

.pageIndex .swiper-banner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.pageIndex .swiper-banner .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.pageIndex .swiper-banner .swiper-slide {
    width: 100%;
    height: 100%;
}

.pageIndex .swiper-banner .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

/* Banner 與編輯器內容直接銜接 */
.pageIndex #content_main {
    position: relative;
    z-index: 1;
    clear: both;
    margin: 0;
    padding: 0;
    background: #F7F4EC;
}

/* Footer 永遠維持正常頁面順序 */
.pageIndex .footer {
    position: relative;
    z-index: 1;
    clear: both;
}


/* ---------------------------------------------------------
   02. HEADER
   --------------------------------------------------------- */

.header_area {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    padding: 0;
    background: transparent;
}

.main_header_area {
    position: relative;
    padding: 0;
    background: rgba(247, 244, 236, .94);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: none;
    transition: background .35s ease, box-shadow .35s ease;
}

.header_area.sticky .main_header_area {
    background: rgba(247, 244, 236, .98);
    box-shadow: 0 7px 22px rgba(41, 77, 58, .14);
}

/* 下滑後顯示一條滑入線 */
.main_header_area::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    z-index: 20;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        #294D3A 0%,
        #7F9875 76%,
        #C57A3A 100%
    );
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .75s cubic-bezier(.22,.75,.2,1);
    pointer-events: none;
}

.header_area.sticky .main_header_area::after {
    transform: scaleX(1);
}

@keyframes caishenHeaderIn {
    0% {
        opacity: 0;
        transform: translateY(-14px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.main_header_area .container {
    width: 94%;
    max-width: 1480px;
    transition: all .35s ease;
}

.header_area.sticky .main_header_area .container {
    max-width: 1580px;
}

.navigation {
    padding: 7px 0;
}

/* LOGO */
.nav-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-brand {
    width: 100%;
    max-width: 220px;
    transition: max-width .35s ease;
}

.nav-brand img {
    display: block;
    width: 100%;
    height: auto;
}

.header_area.sticky .nav-brand {
    max-width: 180px;
}


/* ---------------------------------------------------------
   03. 主選單滑入底線
   --------------------------------------------------------- */

.stellarnav > ul > li > a {
    color: #294D3A;
    font-weight: 500;
    letter-spacing: .05em;
    background:
        linear-gradient(to right, #C57A3A 50%, transparent 50%)
        100% bottom / 200% 2px no-repeat;
    transition:
        background-position .35s cubic-bezier(0, 0, .61, 1.01),
        color .3s ease;
}

.stellarnav > ul > li > a:hover,
.stellarnav > ul > li:hover > a,
.stellarnav li.has-sub:hover > a {
    color: #C57A3A;
    background-position: 0 bottom;
}

/* 下拉選單 */
.stellarnav li li {
    border: 0;
    margin: 0;
}

.stellarnav li li a {
    padding: 10px 18px;
    color: #294D3A;
    background: #F7F4EC;
    border-bottom: 1px solid #DCE5D4;
    text-align: center;
    transition: all .25s ease;
}

.stellarnav li li a:hover {
    color: #C57A3A;
    background: #EEF2E9;
}


/* ---------------------------------------------------------
   04. 按鈕色系
   --------------------------------------------------------- */

.animated-arrow,
.send_simple,
.inquiry_a3,
.lastPage,
.productBtn,
.contact_form li.last cite,
input[type="submit"],
button[type="submit"] {
    color: #FFFFFF;
    background: #294D3A;
    border-color: #294D3A;
    transition: all .3s ease;
}

.animated-arrow:hover,
.send_simple:hover,
.inquiry_a3:hover,
.lastPage:hover,
.productBtn:hover,
.contact_form li.last cite:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    color: #FFFFFF;
    background: #7F9875;
    border-color: #7F9875;
}

.rewrite_simple,
.inquiry_a1,
.inquiry_a2,
.contact_le_map a {
    color: #FFFFFF;
    background: #7F9875;
    border-color: #7F9875;
}

.rewrite_simple:hover,
.inquiry_a1:hover,
.inquiry_a2:hover,
.contact_le_map a:hover {
    color: #FFFFFF;
    background: #294D3A;
    border-color: #294D3A;
}

.products-list .more {
    color: #294D3A;
    background: transparent;
    border: 1px solid #294D3A;
}

.products-list .item a:hover .more {
    color: #FFFFFF;
    background: #294D3A;
}


/* ---------------------------------------------------------
   05. FOOTER
   不更動 HTML 結構，也不使用 absolute 排版
   --------------------------------------------------------- */

.footer {
    position: relative;
    clear: both;
    padding: 0;
    color: #F7F4EC;
    background: linear-gradient(135deg, #294D3A 0%, #203B2D 100%);
}

.footer .center {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 38px 0;
}

.footer_info {
    display: flex;
    align-items: center;
    gap: 38px;
    padding: 0;
    flex-wrap: nowrap;
}

/* LOGO */
.footer_logo {
    flex: 0 0 190px;
    width: 190px;
    max-width: 190px;
    margin: 0;
    padding: 18px;
    background: #F7F4EC;
    border-radius: 3px;
}

.footer_logo img {
    display: block;
    width: 100%;
    height: auto;
}

.footer .box_link {
    display: none;
}

/* 文字與選單 */
.footer_info .F_ul_Boxed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    width: 100%;
    margin: 0;
}

.footer_info .F_ul_Boxed > li,
.footer_info li:nth-child(1),
.footer_info li:nth-child(2) {
    position: static;
    display: block;
    width: auto;
    padding: 0;
}

.footer_info .F_ul_Boxed > li:first-child {
    flex: 0 1 370px;
}

.footer_info .F_ul_Boxed > li:last-child {
    flex: 1 1 auto;
}

.footer_info li p,
.footer_info li p a,
.footer a {
    color: rgba(247, 244, 236, .88);
}

.footer_info li p {
    margin: 7px 0;
    font-size: 14px;
    line-height: 1.7;
}

.footer_menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.footer_menu a {
    display: inline-block;
    margin: 3px 0;
    padding: 4px 12px;
    color: rgba(247, 244, 236, .82);
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(247, 244, 236, .22);
    font-size: 13px;
    line-height: 1.2;
    transition: color .3s ease;
}

.footer_menu a:first-child {
    border-left: 0;
}

.footer_menu a:hover {
    color: #D7A06B;
    background: transparent;
}

/* 版權區 */
.copy {
    padding: 13px 18px;
    color: rgba(247, 244, 236, .72);
    background: rgba(15, 34, 24, .48);
    border-top: 1px solid rgba(247, 244, 236, .10);
}

.copy a {
    color: #DCE5D4;
}

.copy a:hover {
    color: #D7A06B;
}

/* 浮動按鈕 */
.linksBtn {
    color: #FFFFFF;
    background: #294D3A;
}

.info_fix:hover > .linksBtn {
    background: #7F9875;
}

.info_fix_links a {
    color: #FFFFFF;
    background: rgba(41, 77, 58, .94);
}

.info_fix_links a:hover {
    color: #FFFFFF;
    background: #C57A3A;
}

#to_top {
    color: #FFFFFF;
    background: #294D3A;
}

#to_top:hover {
    background: #C57A3A;
}


/* ---------------------------------------------------------
   06. RWD
   --------------------------------------------------------- */

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

    .main_header_area,
    .header_area.sticky .main_header_area {
        background: #F7F4EC;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .main_header_area .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .navigation {
        padding: 8px 0;
    }

    .nav-brand,
    .header_area.sticky .nav-brand {
        max-width: 145px;
    }

    .stellarnav > ul > li > a {
        background: none;
    }

    .stellarnav.mobile > ul > li > a {
        color: #294D3A;
    }

    .stellarnav .menu-toggle span.bars span {
        background: #294D3A;
    }

    .footer_info {
        align-items: flex-start;
    }

    .footer_info .F_ul_Boxed {
        display: block;
    }

    .footer_info .F_ul_Boxed > li {
        width: 100%;
        margin-bottom: 18px;
    }

    .footer_menu {
        justify-content: flex-start;
    }
}

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

    .pageIndex .bannerindex {
        aspect-ratio: 2 / 1;
    }

    .footer.with_shopping_mode {
        padding: 0 0 70px;
    }

    .footer .center {
        width: 88%;
        padding: 34px 0 26px;
    }

    .footer_info {
        display: block;
    }

    .footer_logo {
        width: 170px;
        max-width: 170px;
        margin-bottom: 24px;
    }

    .footer_info .F_ul_Boxed {
        width: 100%;
    }

    .footer_menu {
        justify-content: flex-start;
    }

    .copy {
        font-size: 12px;
        line-height: 1.7;
    }

    #to_top {
        bottom: 60px;
    }
}

@media screen and (max-width: 480px) {

    .nav-brand,
    .header_area.sticky .nav-brand {
        max-width: 130px;
    }

    .footer_info li p {
        font-size: 13px;
    }

    .footer_menu a {
        width: 50%;
        padding-left: 9px;
    }
}


/* =========================================================
   財神園藝｜HEADER 與 FOOTER 最終微調
   ========================================================= */

/* 隱藏上方功能區 */
.me_tp_features {
    display: none;
}

/* 僅首頁：初始 HEADER 白色漸層至透明，與大圖重疊 */
.pageIndex .main_header_area {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, .80) 0%,
        rgba(255, 255, 255, .62) 38%,
        rgba(255, 255, 255, .28) 72%,
        rgba(255, 255, 255, 0) 100%
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

/* 首頁下滑後恢復清楚的暖白底 */
.pageIndex .header_area.sticky .main_header_area {
    background: rgba(247, 244, 236, .98);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0 7px 22px rgba(41, 77, 58, .14);
}

/* Footer Logo：取消白色底框，直接將圖案轉為白色 */
.footer_logo {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.footer_logo img {
    filter: brightness(0) invert(1);
    opacity: .96;
}

/* 平板、手機維持清楚底色，避免展開選單時看不清楚 */
@media screen and (max-width: 1024px) {
    .pageIndex .main_header_area,
    .pageIndex .header_area.sticky .main_header_area {
        background: #F7F4EC;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .footer_logo {
        padding: 0;
        background: transparent;
    }
}


/* =========================================================
   財神園藝｜全站色彩變數設定
   後續只要改這裡，主要色系會一起更新
   ========================================================= */

:root {
    --textColor: #3D443F;

    --mainColor: #294D3A;
    --mainColor02: #55745D;
    --mainColor03: #203B2D;

    --subColor: #7F9875;
    --subColor02: #DCE5D4;
    --subColor03: #C57A3A;

    --bgColor: #FFFFFF;
    --bgColor02: #EEF2E9;
    --cardColor: #FFFDF8;
    --lineColor: #D5DCCF;
    --whiteColor: #FFFFFF;
}


/* ---------- 全站基本顏色 ---------- */

body {
    color: var(--textColor);
    background: var(--bgColor);
}

/* 內頁整體改成白色，讓選購說明頁面更乾淨 */
body:not(.pageIndex) #content_main,
body:not(.pageIndex) .main_part,
body:not(.pageIndex) .show_content,
body:not(.pageIndex) .blog_page,
body:not(.pageIndex) .product_page,
body:not(.pageIndex) .contact_page,
body:not(.pageIndex) .article_page,
.pathBox,
.path {
    background: #FFFFFF;
}

a {
    color: var(--mainColor);
}

a:hover {
    color: var(--subColor03);
}

#content_main {
    background: var(--bgColor);
}


/* ---------- HEADER ---------- */

.navigation {
    padding: 25px 0;
    transition: padding .35s ease;
}

.header_area.sticky .navigation {
    padding: 14px 0;
}

.stellarnav > ul > li > a {
    height: 38px;
    margin: 0 0 0 26px;
    padding: 0 8px;
    font-size: 18px;
    line-height: 36px;
    color: var(--mainColor);
    letter-spacing: .05em;
}

.stellarnav > ul > li:first-child > a {
    margin-left: 0;
}

.stellarnav > ul > li > a:hover,
.stellarnav > ul > li:hover > a,
.stellarnav li.has-sub:hover > a {
    color: var(--subColor03);
}

/* 下拉箭頭 */
.stellarnav li.has-sub > a:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 0;
    border-top: 5px solid var(--subColor);
}

.stellarnav li.has-sub:hover > a:after {
    border-top-color: var(--subColor03);
}

/* 次選單 */
.stellarnav ul ul {
    background: var(--bgColor);
    border-color: var(--subColor02);
}

.stellarnav li li a,
.stellarnav li li.has-sub > a {
    color: var(--mainColor);
    background: var(--bgColor);
    border-bottom-color: var(--subColor02);
}

.stellarnav li li a:hover,
.stellarnav li li.has-sub > a:hover {
    color: var(--subColor03);
    background: var(--bgColor02);
}


/* ---------- 共用按鈕 ---------- */

.animated-arrow,
.send_simple,
.inquiry_a3,
.lastPage,
.productBtn,
.contact_form li.last cite,
input[type="submit"],
button[type="submit"] {
    color: var(--whiteColor);
    background: var(--mainColor);
    border-color: var(--mainColor);
}

.animated-arrow:hover,
.send_simple:hover,
.inquiry_a3:hover,
.lastPage:hover,
.productBtn:hover,
.contact_form li.last cite:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    color: var(--whiteColor);
    background: var(--mainColor02);
    border-color: var(--mainColor02);
}

.rewrite_simple,
.inquiry_a1,
.inquiry_a2,
.contact_le_map a {
    color: var(--whiteColor);
    background: var(--subColor);
    border-color: var(--subColor);
}

.rewrite_simple:hover,
.inquiry_a1:hover,
.inquiry_a2:hover,
.contact_le_map a:hover {
    color: var(--whiteColor);
    background: var(--mainColor);
    border-color: var(--mainColor);
}

.products-list .more,
.blog_back a.article_btn_back {
    color: var(--mainColor);
    background: transparent;
    border-color: var(--mainColor);
}

.products-list .item a:hover .more,
.blog_back a.article_btn_back:hover {
    color: var(--whiteColor);
    background: var(--mainColor);
    border-color: var(--mainColor);
}


/* ---------- 表單 ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
    color: var(--textColor);
    background: var(--cardColor);
    border-color: var(--lineColor);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--subColor);
    outline: none;
    box-shadow: 0 0 0 3px rgba(127, 152, 117, .14);
}

/*購物車*/
.Prods_Wrap .Prods_lists dl.State {height: 80px;}
dl.State h5 {
    font-size: 16px;
    height: 36px;}
.red_free , dl.State .price b:first-child:last-child{
    display: none;}
.sidebarBtn .sp_price{display:none !important;}
/* ---------- 內容標題與分類 ---------- */

.banner h5,
.blank_letter,
.separate_title,
h4.blog_category_title,
.products-list .name,
.blog_list_ri h5,
.i_blog_ri h5,
.subalbum-menu h2 {
    color: var(--mainColor);
}

.product-layer-two li a {
    color: var(--whiteColor);
    background: var(--mainColor);
    border-color: var(--mainColor);
}

.product-layer-two li a:hover,
.product-layer-two li.active a {
    color: var(--whiteColor);
    background: var(--mainColor02);
    border-color: var(--mainColor02);
}

.product-layer-two li li a {
    color: var(--mainColor);
    background: var(--bgColor02);
    border-color: var(--subColor02);
}

.product-layer-two li li a:hover {
    color: var(--whiteColor);
    background: var(--subColor);
}


/* ---------- FOOTER ---------- */

.footer {
    color: var(--bgColor);
    background: linear-gradient(
        135deg,
        var(--mainColor) 0%,
        var(--mainColor03) 100%
    );
}

.footer a,
.footer_info li p,
.footer_info li p a {
    color: rgba(247, 244, 236, .86);
}

.footer a:hover,
.footer_menu a:hover,
.footer_info li p a:hover,
.copy a:hover {
    color: var(--subColor03);
}

.linksBtn,
#to_top {
    color: var(--whiteColor);
    background: var(--mainColor);
}

.info_fix:hover > .linksBtn {
    background: var(--subColor);
}

.info_fix_links a {
    color: var(--whiteColor);
    background: rgba(41, 77, 58, .94);
}

.info_fix_links a:hover,
#to_top:hover {
    color: var(--whiteColor);
    background: var(--subColor03);
}


/* ---------- 桌機較窄 ---------- */

@media screen and (max-width: 1280px) {
    .stellarnav > ul > li > a {
        margin-left: 14px;
        padding: 0 5px;
        font-size: 16px;
    }
}


/* ---------- 平板與手機 ---------- */

@media screen and (max-width: 1024px) {
    .navigation,
    .header_area.sticky .navigation {
        padding: 12px 0;
    }

    .stellarnav > ul > li > a,
    .stellarnav.mobile > ul > li > a {
        height: auto;
        margin: 7px 0;
        padding: 13px 42px 13px 15px;
        font-size: 16px;
        line-height: 1.5;
        background: none;
    }

    .stellarnav > ul > li:first-child > a {
        margin-left: 0;
    }

    .stellarnav li.has-sub > a:after {
        border-top-color: var(--subColor);
    }
}
/*聯絡表單*/
.contact_form li {
    grid-template-columns: 135px 1fr;}

.contact_form li .form__label {
    max-width: 130px;}

/* =========================================================
   財神園藝｜HEADER 最終修正
   ・保留 Stellarnav 原生桌機排列與子選單定位
   ・Header 全站固定
   ・手機只移動漢堡按鈕，不移動整個選單容器
   ========================================================= */

:root {
    --csHeaderHeight: 88px;
}

/* 固定 Header 後，內頁 Banner 預留高度；首頁桌機維持覆蓋大圖 */
body:not(.pageIndex) .banner {
    margin-top: var(--csHeaderHeight);
}

@media screen and (min-width: 1025px) {
    /* 不使用 flex，只修正主按鈕文字的垂直置中 */
    .stellarnav.desktop > ul > li {
        vertical-align: middle;
    }

    .stellarnav.desktop > ul > li > a {
        line-height: 38px;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --csHeaderHeight: 55px;
    }

    /* 首頁與內頁避開固定 Header */
    .pageIndex .bannerindex,
    body:not(.pageIndex) .banner {
        margin-top: var(--csHeaderHeight);
    }

    /* 只移動漢堡按鈕，不能移動 .stellarnav.mobile 整個容器 */
    .stellarnav.mobile .menu-toggle {
        position: relative;
        left: 8px;
        top: 0;
        display: inline-block;
        width: 48px;
        min-width: 48px;
        height: auto;
        min-height: 52px;
        padding: 12px 0 8px;
        overflow: visible;
        color: var(--mainColor);
        font-size: 11px;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
        box-sizing: border-box;
    }

    .stellarnav.mobile .menu-toggle span.bars {
        display: block;
        margin: 0 auto 2px;
    }

    /* 只讓第二層以下文字靠左，不影響 CLOSE、X、加號與桌機子選單 */
    .stellarnav.mobile ul ul li > a:not(.dd-toggle) {
        padding-left: 36px;
        text-align: left;
    }


    .indexBtnBox {
        max-width: 140px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --csHeaderHeight: 55px;
    }
}