/*=======Landing商品==四欄(右側下拉選單)====*/
/*商品嚴選*/
.product-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  width: 100%;
  min-height: 270px;
  /* max-width: 800px; */
  border-radius: 10px;
  box-sizing: border-box;
}

/*篩選商品*/
.site-filter-items{
  display: flex;
  justify-content: flex-start;
}
.filter-items{
   margin-left: auto;
   margin-left: auto; 
   width: 15%;
}
.product {
  position: relative;
  /* padding: 10px; */
  margin: 10px;
  /* border: 1px solid #ccc; */
  display: flex;
  flex-direction: column;
  text-align: center;
  /* transition: transform 0.3s ease; */
  cursor: pointer; 
}
.product.visible {
  /* padding: 10px; */
  margin: 10px;
  /* border: 1px solid #ccc; */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  /* text-align: center; */
  /* transition: transform 0.3s ease; */
}
.product a img{
  object-fit: contain;
  width: 250px;
  height: 250px;
  transition: transform 0.3s ease;
  border-radius: 20px;
}

.product-item-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  /* 新增 */
}

.product-name {
  /* 新增：垂直置中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product h3 {
  font-size: 0.875rem;
  height: 40px;
  overflow: hidden;
  line-height: 1.5;
  margin-top: 10px;
  margin-bottom: 10px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.add-to-cart {
  padding: 10px 10px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  align-items: center;
}

/*商品文字*/
.discounted-price {
  font-size: 0.875rem;
}

.original-price {
  font-size: 0.875rem;
  text-decoration: line-through
}

/*加入購物車*/
.add-btn .add-to-cart img {
  width: 24px;
  height: 24px;
  border-radius: 0px;
  margin: 0 auto;
}
.tab-product-area {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: repeat(1, minmax(min-content, max-content));
  grid-template-columns: repeat(5, minmax(min-content, max-content));
  grid-auto-rows: minmax(min-content, max-content);
  grid-auto-columns: minmax(min-content, max-content);
  justify-content: space-around;
  gap: 10px 20px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 10px;
}
.tab-product-area .product-item {
  min-height: 30px;
  border-radius: 3px;
  display: grid;
  justify-content: center;
  align-content: center;
  cursor: pointer;
  position: relative;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1px;
  font-weight: 400;
  transition: 0.2s;
  padding: 10px;
}

.tab-product-area .product-item::after {
  content: "";
  display: block;
  position: absolute;
  width: 40%;
  margin: 0 30%;
  bottom: 0;
}

.tab-product-area .product-item_active {
  box-sizing: border-box;
}

.product-link {
  margin: 0;
  padding: 0;
}

.product-inner{
  width: 100%;
}
.tab-product-area .product-item .product-inner {
  border-radius: 10px;
  overflow: hidden; /* 确保不会出现溢出问题 */
}
.product-inner_hidden {
  display: none;
}
/*所有商品-分類-E區塊*/
.sub-header {
  font-size: 18px;
  width: 1000px;
  margin-top: 20px;
  font-weight: 500;
}
.product-list-head {
  position: relative;
}
.product-list-overlay, .product-list-overlay-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.product-list-overlay{
  background-color: rgba(0,0,0,.5);
  border-radius: 20px;
}
.product-sold-out{
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}
.product:not(.sold-out):hover img {
  transform: scale(1.05);
}
/* 增加媒體查詢，當螢幕寬度小於768px時切換到手機版 */
@media screen and (max-width: 768px) {
  .tab-product-area {
    margin-bottom: 15px;
  }
.product-container {
   flex-wrap: wrap;
   gap: 0px;
}
.product {
   flex: 0 0 calc(50% - 20px);
        /* 计算每列宽度，考虑边距 */
}
.product a {
   color: #5d5d5d;
}
.product a img {
   width: 100%;
   height: auto;
}
.filter-items{
   width: 50%;
   margin-right: 5%;
}
.product-item{
  min-width: 100%;
}
.product-list{
  gap: 10px 10px;
}
.sub-header{
  width: 100%;
  margin-left: 10px;
  margin-bottom: 10px;
}
.product-list-overlay, .product-list-overlay-link {
  width: 100%;
  height: 100%;
}
.add-btn .add-to-cart img {
  width: 20px;
  height: 20px;
}
}