@charset "utf-8";
/* ============================================================
 * 檔案:products.css
 * 用途:產品列表頁(products.php)
 * ------------------------------------------------------------
 * 【常見小修改速查】
 *   字體大小  → 搜尋  font-size      (例 font-size: 16px;)
 *   字型      → 搜尋  font-family    (全站預設字型設定在 public.css)
 *   文字顏色  → 搜尋  color
 *   背景顏色  → 搜尋  background  或  background-color
 *   外距(元素之間) → 搜尋  margin
 *   內距(框內留白) → 搜尋  padding
 *   粗體      → font-weight: bold;   置中 → text-align: center;
 * ============================================================ */

    article{     
        padding-bottom: 50px;
    }
    article:after{
        content:".";
        height:0;
        visibility:hidden;
        display:block;
        clear:both;
    }
    #products_title{
        wdtih:100%;
        font-family: "細明體-ExtB";
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 2px;
        text-align: center;
        margin-top: 50px;
        margin-bottom: 20px;
    } 
    #products_dec{
        width:500px;
        text-align: center;
        margin: 0 auto;
        font-size: 13px;
        line-height: 30px;
        letter-spacing: 2px; 
    }
    #products_item_menu{
        width:100%;
        height: 50px;  
        margin-top: 50px;
    }
    #products_item_menu ul{
        width:780px;
        height: 30px;
        margin: 0px;
        padding: 0px;
        margin: 0 auto;
        list-style: none;        
    }
    #products_item_menu ul li{
        width:110px;
        height: 30px;
        border-radius: 15px;
        line-height: 26px;
        text-align: center;
        float: left;  
        background-color: #E8E8E8;
        font-size: 15px;
        margin-right: 10px;
        margin-left: 10px;
        letter-spacing: 2px;
        transition: 0.25s;
        cursor: pointer;
    }  
    #products_item_menu ul li a{
        display: block;
        color:#000;
    }
    #products_item_menu ul li:hover, #products_item_menu ul li:focus{
        text-decoration:none;
        color: #FFF;
        box-shadow: inset 180px 0 0 0 #666; 
    }
    #products_item_menu ul li a:hover{
        color:#fff;
    }
    #pro_chid_menu {
        width:360px;
        height: 20px;
        margin: 0 auto;
    }
    #pro_chid_menu ul{
        margin: 0px;
        padding: 0px;
        list-style: none;
    }
    #pro_chid_menu ul li{
        width: 120px;
        height: 15px;
        line-height: 15px;
        float: left;
        text-align: center;     
        font-size: 15px;
        border-left: 2px solid #CCC;
        color: #C9CACA;
    }
    #pro_chid_menu ul li:first-child{
        border:none;
    }
    #pro_chid_menu ul li a{
        color: #C9CACA;
    }
    a:hover{
        text-decoration: none;
    }
    .item_active{
        background-color: #109363 !important;
        color:#FFF;
        
    }
    .item_active a{
        color: #FFF !important;
    }
    .chid_menu_active a{
        width: auto;
        height: 25px;
        display: block;
        color:#595757 !important;
        border-bottom: 1px solid #CCC;
    }
    #pro_list{
   
        padding-top: 50px;
    }    
    #products_img{
    margin-bottom: 50px;        
}
    .products_list{
        padding-top: 30px;
        padding-bottom: 50px;
    }
    .products_img img{
        max-height: 228px;
    }
    .pro_more{
        width:100%;
        height: 251px;
        padding-top: 50px;
        background: rgba(255,255,255,0.7);
        position: absolute;
        text-align: center;
        padding-right: 22px;
        display: none;    
    }
    .products_info{
        margin-top: 30px;
        text-align: center;
        margin-bottom: 20px;
    }
    .products_info:after{
        clear : left;
        content : '.';
        display : block;
        height : 0;
        overflow : hidden;       
    }
    .products_name{
        width:100%;  
        min-height:25px;
        font-size:15px;
        font-weight: 300;
        text-align: center;
        letter-spacing: 2px;
    }
    .products_name_en{
        width:100%;
        min-height: 25px;
        font-family: 'Rasa', serif;
        font-size:12px;

    }
    .products_item{
        width:50%;      
        color: #6AA79B;
        float: left;
        font-size: 12px;
        line-height: 30px;
        text-align: right;
        padding-right: 10px;

    }
    .products_price{
        width:50%;    
        color:#6AA79B;
        float: right;
        text-align: left;
        font-size: 19px;  
        box-sizing: border-box;
        padding-left: 5px;
    }
    .btn_add_products{
        width:120px;
        height: 25px;
        line-height: 25px;
        border-radius: 15px;       
        background: #EBEBEB;
        margin: 0 auto;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
    }   
.replenishment{
        width: 150px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #FF0000;
        color: #FF0000;
        text-align: center;
        margin: 0 auto;
        border-radius: 15px;
    }   
    .products_img img{
        max-width: 200px;
    }
    #footer{
        border-top: 1px solid #9FA0A0;
    }

    @media screen and (min-width:1200px){

    }
    @media screen and (max-width:1200px) and (min-width:992px){}
    @media screen and (min-width:992px){
        article{
            width: calc(100% - 150px);
            margin-left: 150px;            
        }
        #mobile_banner{
            display:none;
        }
        #banner{         
            width:100%;
            height: 400px;
            overflow: hidden;          
        }
    }
    @media screen and (max-width:992px){
        #banner{
            display:none;
        }
        #mobile_banner{
            width:100%;
            height: 160px;
            background-size:cover;         
        }
        #products_item_menu{
            width:100%;
            height: 50px;  
            margin-top: 50px;
            padding: 10px;
        }
        #products_item_menu ul{
            width:100%;
            height: 30px;
            margin: 0px;
            padding: 0px;
            margin: 0 auto;
            list-style: none;        
        }
        #products_item_menu ul li{
            width:30%;
            height: 30px;
            border-radius: 15px;
            line-height: 26px;
            text-align: center;
            float: left;  
            background-color: #E8E8E8;
            font-size: 15px;
            margin-right: 5px;
            margin-left: 5px;
            margin-bottom: 10px;
      
            transition: 0.25s;
            cursor: pointer;
        } 
        #products_dec{
            width: 100%;
            padding: 0 20px 0 20px;
        }
        
        #pro_chid_menu {
            width:100%;
            height: 20px;
            margin: 0 auto;
            padding:10px;
        }
        #pro_chid_menu ul{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        #pro_chid_menu ul li{
            width: 30%;
            height: 15px;
            line-height: 15px;
            float: left;
            text-align: center;     
            font-size: 15px;
            border-left: 2px solid #CCC;
            color: #C9CACA;
            margin-left: 3%;
        }
        .products_item{
        width:100%;      
        color: #6AA79B;
        float:none;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        padding-right: 0px;
           

    }
    .products_price{
        width:100%;    
        color:#6AA79B;
        float:none;
        text-align: left;
        font-size: 19px;  
        box-sizing: border-box;
        padding-left: 0px;
        text-align: center;    
    }
    }
    



/* ===== 分類按鈕(藍框)支援 12 個:自動換列、列間距 (2026) ===== */
/* 原本 #products_item_menu 與 ul 都是固定高度(只容得下一列 6 個),
   改為高度自動 + 清除浮動,讓第 7~12 個分類換到第二列正常顯示。 */
#products_item_menu{ height: auto; }
#products_item_menu ul{ height: auto; overflow: hidden; }   /* overflow:hidden 用來清浮動、撐開第二列 */
#products_item_menu ul li{ margin-bottom: 12px; }            /* 兩列之間的垂直間距 */