* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #4e5346;
    font-size: 16px;
}

a,a:hover,
a:focus,a:active {
    text-decoration: none;
    /* color: inherit; */
}

body {
    font-family: 'MyCustomFont', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.Image_Top{
    margin-top: var(--head-height); /* 確保主體內容不被固定的 header 遮擋 */
}

/* 商品麵包屑 */
.ProductList-breadcrumb{
    background-color: #4e5346;
    width: auto;
}

.breadcrumb{
    margin-left: 8%;
    margin-bottom: 0;
}


.ProductList-breadcrumb .Label{
    color: #ebebeb;
}


/* 中間的商品列表 */
.content {
    /* margin-left: 200px; */
    padding: 20px;
    display: flex;
    margin: 0 auto;
    width: 90%;
    
}

/* 左側導航欄 */
.sidebar {
    top: 20%;
    width: 200px;
    padding: 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.sidebar a {
    display: flex;
    align-items: baseline;
    /* padding: 10px; */
    margin: 10px;
    text-decoration: none;
    color: #333;
    /* background-color: #eee; */
    border-radius: 4px;
    text-align: center;
    transition: background-color 0.3s;
}

.sidebar a:hover {
    background-color: #ddd;
}

.sidebar a img{
    width: 30px;
}

.Product_container{
    width: 100%;    
}

.productsHeader{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.productsHeader_conditions{
    background: #f7f7f7;
    
}

.productsHeader_conditions span{
    color: #999;
}

.ProductList-info{
    margin: 15px;
}

.ProductList-info h2{
    margin: 0px;
}

/* 產品類別菜單 */
.ProductList-categoryMenu{
    list-style-type: none;
}

.category-advance-filter{
    border-top: solid 1px #ddd;
}

.apply-button{
    margin-top: 15px;
}

.apply-button button{
    width: 100%;
    background-color: #4e5346;
    color: white;
}

.apply-button button img{
    vertical-align:unset;
}

.apply-button button:hover {
    color: white;
    background-color: #81965d;
}


.filter-pricerange{
    font-weight: bold;
    margin: 10px 30px 10px 0px; 
    
}

.filter-pricerange span{
    margin-left: 10px;
    
}

.filter-pricerange div{
    display: flex;
    gap: 5px; /* 控制 input 和分隔符號的距離 */
    flex: 1; /* 讓內部元素撐滿 */
}

.filter-pricerange div input{
    flex: 1; /* 讓兩個 input 均分可用空間 */
    max-width: 50%; /* 確保不超出容器 */
    font-size: 13px;
}
.filter-item-title{
    margin: 10px;
}

.filter-item-title span{
    font-weight: bold;
}

.filter-item-title ul{
    list-style-type: none;
    
}

.filter-item-title li{
    margin-bottom: 5px;
    
}

.filter-item label{
    color: #afafaf;
    transition: background-color 1s ease;
}

.filter-item label:hover {
    color: #d89142;
  }

.filter-item  input{
    margin-right: 5px;
}


/* 列表分頁籤 */
.ProductList-paginator{
    margin-top: 50px;
    display: flex;
    justify-self: center;
}

.ProductList-paginator ul{
    list-style-type: none;
    display: flex;
    width: 20%; 
    margin: auto;
}


.ProductList-paginator button{
    border: unset;
    color: #333;
    margin: auto;
}

.ProductList-paginator .underline {
    text-decoration: underline; /* 加底線 */
    font-weight: bold; /* 粗體字 */
}

@media (max-width: 1000px){
    .ProductList-paginator{
        margin-top: 50px;
        display: block;
        justify-self: left;
    }
}


/* 右下角固定的購物車按鈕 */
.fixed-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #28a745;
    color: white;
    padding: 15px;
    border-radius: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}


.category {
    margin-bottom: 50px;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    padding: 30px;
}

.category h2 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.Product-list{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}


.product {
    display: inline-block;
    width: 23%;
    margin: 1% 5px;
    border-radius: 8px;
    flex: 0 2 calc(25% - 10px);
}

.product img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.product h3 {
    margin: 10px 10%;
    font-size: 18px;
    text-align: center;
    height: 40px;          /* 設置高度為兩行文字 */
    line-height: 20px;     /* 設置行高 */
    overflow: hidden;      /* 隱藏超出的內容 */
    text-overflow: ellipsis; /* 顯示省略號 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 限制顯示的行數 */
    -webkit-box-orient: vertical;
    font-weight: bold;
}

.product span {
    color: #a0a0a0;
    font-size: 14px;
}

.product .price{
    /* margin-top: 20px; */
    font-size: 20px;
    text-align: center;
    color: #d89142;
    /* display: flex; */
    /* justify-content: space-between; */
}

.product .price span{
    font-size: 15px;
    text-align: center;
    color: #d89142;
}

.product .price s{
    font-size: 15px;
    text-align: center;
    color: #b3b3b3;
}

.product .price .quantity button{
    border: none;
    border-radius: 30px;
    width: 30px;
    background-color: #00a48d;
    color: white;
}

/* 手機版CSS */
@media (max-width: 768px) {
    .content{
        width: auto;
    }
    .sidebar{
        display: none;
    }
    .product{
        margin: 1% 5px;
        border-radius: 8px;
        flex: calc(50% - 10px);
    }
    .product h3{
      height: 40px;          /* 設置高度為兩行文字 */
      line-height: 20px;     /* 設置行高 */
      overflow: hidden;      /* 隱藏超出的內容 */
      text-overflow: ellipsis; /* 顯示省略號 */
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 限制顯示的行數 */
      -webkit-box-orient: vertical;
    }
    
    .product span {
        font-size: 12px;
    }

    .productsHeader{
        display: block;
        margin-bottom: 20px;
    }
    
    .Product-list{
        justify-content: center; 
    }

    .ProductList-paginator ul{
        width: 40%;
    }

    .ProductList-paginator{
        justify-self: center;
    }


    .ProductList-paginator .noBorder{
        padding: 10px 13px;
    }
}