/* =========================================
   WooCommerce 麵包屑導航
========================================= */

.col-full > .woocommerce-breadcrumb{
    width:100%;
    max-width:1200px;

    margin:18px auto 24px !important;
    padding:12px 16px !important;

    background:#f7f8f7;

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

    color:#777 !important;

    font-size:13px !important;
    line-height:1.6 !important;

    box-sizing:border-box;
}


/* 首頁連結 */

.col-full > .woocommerce-breadcrumb a{
    color:#333 !important;

    font-weight:600;

    text-decoration:none !important;

    transition:color .2s ease;
}


.col-full > .woocommerce-breadcrumb a:hover{
    color:#198754 !important;
}


/* 分隔符 */

.col-full > .woocommerce-breadcrumb .breadcrumb-separator{
    display:inline-block;

    margin:0 8px;

    color:#aaa;
}


/* 當前分類 */

.col-full > .woocommerce-breadcrumb{
    font-weight:500;
}


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

@media(max-width:768px){

    .col-full > .woocommerce-breadcrumb{
        margin:12px auto 18px !important;

        padding:10px 12px !important;

        border-radius:8px;

        font-size:12px !important;
    }


    .col-full > .woocommerce-breadcrumb .breadcrumb-separator{
        margin:0 5px;
    }

}

/* =========================================================
   WooCommerce TEREA 商品列表
   僅作用於 .columns-4
========================================================= */

.columns-4,
.columns-4 *{
    box-sizing:border-box;
}


/* 外層 */
.columns-4{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:30px 20px 50px;
}


/* =========================================================
   商品 Grid
========================================================= */

.columns-4 > ul.products.columns-4{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:22px !important;

    width:100% !important;

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

    list-style:none !important;
}


/* =========================================================
   單個商品
========================================================= */

.columns-4 > ul.products.columns-4 > li.product{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    min-width:0 !important;
    height:100% !important;

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

    float:none !important;
    clear:none !important;

    overflow:hidden;

    background:#fff !important;

    border:1px solid #e7e9e8 !important;
    border-radius:16px !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.055);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


/* 清除 WooCommerce first / last 干擾 */
.columns-4 > ul.products.columns-4 > li.product.first,
.columns-4 > ul.products.columns-4 > li.product.last{
    margin-left:0 !important;
    margin-right:0 !important;
    clear:none !important;
}


.columns-4 > ul.products.columns-4 > li.product:hover{
    transform:translateY(-4px);

    border-color:#d6e4dc !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.10);
}


/* =========================================================
   商品圖片區
========================================================= */

.columns-4 > ul.products.columns-4 > li.product .woocommerce-image__wrapper{
    position:relative;

    width:100% !important;
    aspect-ratio:1 / 1;

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

    overflow:hidden;

    background:#f7f8f7;
}


/* 圖片連結 */
.columns-4 > ul.products.columns-4 > li.product .woocommerce-image__wrapper > a{
    display:flex !important;
    align-items:center;
    justify-content:center;

    width:100% !important;
    height:100% !important;

    padding:14px;

    text-decoration:none !important;
}


/* 商品圖片 */
.columns-4 > ul.products.columns-4 > li.product .woocommerce-image__wrapper img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;

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

    object-fit:contain !important;

    transition:transform .35s ease;
}


/* Hover 圖片 */
.columns-4 > ul.products.columns-4 > li.product:hover .woocommerce-image__wrapper img{
    transform:scale(1.04);
}


/* =========================================================
   缺貨標籤
========================================================= */

.columns-4 > ul.products.columns-4 .product-out-of-stock{
    position:absolute;

    top:12px;
    left:12px;

    z-index:5;

    display:inline-flex;

    padding:6px 10px;

    background:#333;

    border-radius:6px;

    color:#fff;

    font-size:11px;
    font-weight:700;
    line-height:1.2;
}

.columns-4 > ul.products.columns-4 .product-out-of-stock em{
    color:#fff;
    font-style:normal;
}


/* =========================================================
   商品文字區
========================================================= */

.columns-4 > ul.products.columns-4 > li.product .woocommerce-card__header{
    display:flex !important;
    flex:1;
    flex-direction:column;

    width:100%;

    padding:16px 16px 18px !important;

    background:#fff;
}


/* =========================================================
   商品分類
========================================================= */

.columns-4 > ul.products.columns-4 > li.product .product__categories{
    margin:0 0 8px !important;
    padding:0 !important;
}


.columns-4 > ul.products.columns-4 > li.product .product__categories a{
    display:inline-flex;

    align-items:center;

    padding:4px 10px;

    background:#edf7f1;

    border-radius:999px;

    color:#198754 !important;

    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.4 !important;

    text-decoration:none !important;
}


.columns-4 > ul.products.columns-4 > li.product .product__categories a:hover{
    background:#198754;

    color:#fff !important;
}


/* =========================================================
   商品標題
========================================================= */

.columns-4 > ul.products.columns-4 > li.product .woocommerce-loop-product__title{
    margin:0 !important;
    padding:0 !important;
}


.columns-4 > ul.products.columns-4 > li.product .woocommerce-loop-product__title a{
    display:-webkit-box !important;

    overflow:hidden;

    color:#222 !important;

    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.6 !important;

    text-decoration:none !important;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    transition:color .2s ease;
}


.columns-4 > ul.products.columns-4 > li.product .woocommerce-loop-product__title a:hover{
    color:#198754 !important;
}


/* =========================================================
   排序區
========================================================= */

.columns-4 > .shoptimizer-sorting.sorting-end{
    display:flex !important;

    align-items:center;
    justify-content:space-between;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px !important;
    padding:16px 18px !important;

    background:#fff;

    border:1px solid #e7e9e8;
    border-radius:12px;

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


/* 排序表單 */
.columns-4 > .shoptimizer-sorting .woocommerce-ordering{
    margin:0 !important;
    padding:0 !important;
}


/* Select */
.columns-4 > .shoptimizer-sorting .orderby{
    min-width:190px;
    min-height:42px;

    padding:8px 38px 8px 12px;

    background:#fff;

    border:1px solid #d9ddda;
    border-radius:8px;

    color:#333;

    font-size:14px;

    outline:none;

    cursor:pointer;
}


.columns-4 > .shoptimizer-sorting .orderby:focus{
    border-color:#198754;

    box-shadow:
        0 0 0 3px rgba(25,135,84,.1);
}


/* 結果數量 */
.columns-4 > .shoptimizer-sorting .woocommerce-result-count{
    margin:0 !important;
    padding:0 !important;

    color:#777;

    font-size:13px;
    line-height:1.5;
}


/* =========================================================
   大平板：3欄
========================================================= */

@media(max-width:1100px){

    .columns-4 > ul.products.columns-4{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

}


/* =========================================================
   平板：2欄
========================================================= */

@media(max-width:768px){

    .columns-4{
        padding:22px 14px 40px;
    }

    .columns-4 > ul.products.columns-4{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:14px !important;
    }

    .columns-4 > ul.products.columns-4 > li.product{
        border-radius:13px !important;
    }

    .columns-4 > ul.products.columns-4 > li.product .woocommerce-image__wrapper > a{
        padding:10px;
    }

    .columns-4 > ul.products.columns-4 > li.product .woocommerce-card__header{
        padding:13px !important;
    }

    .columns-4 > ul.products.columns-4 > li.product .woocommerce-loop-product__title a{
        font-size:14px !important;
    }

    .columns-4 > .shoptimizer-sorting.sorting-end{
        flex-direction:column;

        align-items:stretch;

        margin-top:22px !important;
        padding:14px !important;
    }

    .columns-4 > .shoptimizer-sorting .orderby{
        width:100%;
        min-width:0;
    }

    .columns-4 > .shoptimizer-sorting .woocommerce-result-count{
        text-align:center;
    }

}


/* =========================================================
   小手機
   保持2欄，避免商品列表過長
========================================================= */

@media(max-width:480px){

    .columns-4{
        padding-left:10px;
        padding-right:10px;
    }

    .columns-4 > ul.products.columns-4{
        gap:10px !important;
    }

    .columns-4 > ul.products.columns-4 > li.product .woocommerce-card__header{
        padding:11px !important;
    }

    .columns-4 > ul.products.columns-4 > li.product .product__categories a{
        padding:3px 8px;

        font-size:10px !important;
    }

    .columns-4 > ul.products.columns-4 > li.product .woocommerce-loop-product__title a{
        font-size:13px !important;
        line-height:1.55 !important;
    }

}


/* =========================================
   手機端 Header / Logo / 導航文字
========================================= */

@media (max-width: 768px) {

    /* Header 基本高度 */
    #masthead.site-header .main-header{
        min-height:60px;
        padding-left:15px;
        padding-right:15px;
    }

    /* Logo 容器 */
    #masthead.site-header .site-branding{
        display:flex;
        align-items:center;
        min-width:0;
    }

    /* Logo 連結 */
    #masthead.site-header .custom-logo-link{
        display:block !important;
        width:auto !important;
        max-width:150px !important;
        margin:0 auto !important;
        line-height:0;
    }

    /* Logo 圖片縮小 */
    #masthead.site-header .custom-logo-link .custom-logo{
        display:block !important;

        width:auto !important;
        max-width:150px !important;
        height:auto !important;

        max-height:46px !important;

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

        object-fit:contain !important;
    }

    /* 漢堡按鈕文字 */
    #masthead.site-header .menu-toggle,
    #masthead.site-header .menu-toggle .bar-text{
        color:#000 !important;
    }

    /* 漢堡三條線 */
    #masthead.site-header .menu-toggle .bar{
        background:#000 !important;
    }

    /* 手機主導航文字 */
    #masthead.site-header nav a,
    #masthead.site-header .main-navigation a,
    #masthead.site-header .secondary-navigation a{
        color:#000 !important;
    }

    /* 下拉導航文字 */
    #masthead.site-header .sub-menu a,
    #masthead.site-header .menu-item a{
        color:#000 !important;
    }

    /* 搜尋框文字 */
    #masthead.site-header .site-search input,
    #masthead.site-header .site-search button{
        color:#000 !important;
    }

}

/* =========================================
   手機端導航文字全部黑色
========================================= */

@media (max-width: 768px) {

    /* 主選單文字 */
    .menu-primary-menu-container .menu > li > a,
    .menu-primary-menu-container .menu > li > a span,
    .menu-primary-menu-container .main-menu-link,
    .menu-primary-menu-container .main-menu-link span{
        color:#000 !important;
    }


    /* 子選單文字 */
    .menu-primary-menu-container .sub-menu a,
    .menu-primary-menu-container .sub-menu a span,
    .menu-primary-menu-container .sub-menu-link,
    .menu-primary-menu-container .sub-menu-link span{
        color:#000 !important;
    }


    /* 當前頁面文字 */
    .menu-primary-menu-container .current-menu-item > a,
    .menu-primary-menu-container .current-menu-item > a span,
    .menu-primary-menu-container .current_page_item > a,
    .menu-primary-menu-container .current_page_item > a span{
        color:#000 !important;
    }


    /* 已展開父選單 */
    .menu-primary-menu-container .dropdown-open > a,
    .menu-primary-menu-container .dropdown-open > a span{
        color:#000 !important;
    }


    /* Hover / Focus / Active 也保持黑色 */
    .menu-primary-menu-container a:hover,
    .menu-primary-menu-container a:hover span,
    .menu-primary-menu-container a:focus,
    .menu-primary-menu-container a:focus span,
    .menu-primary-menu-container a:active,
    .menu-primary-menu-container a:active span{
        color:#000 !important;
    }


    /* 下拉箭頭 */
    .menu-primary-menu-container .caret{
        color:#000 !important;
        border-color:#000 !important;
    }


    /* 如果 caret 是用偽元素製作 */
    .menu-primary-menu-container .caret::before,
    .menu-primary-menu-container .caret::after{
        color:#000 !important;
        border-color:#000 !important;
    }


    /* 子選單背景保持白色，避免黑字看不清 */
    .menu-primary-menu-container .sub-menu-wrapper,
    .menu-primary-menu-container .sub-menu{
        background:#fff !important;
    }

}