/* 產品網格布局 */
.products-grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */ /* 原設定，自動調整欄數 */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 改為 auto-fill 以確保在空間不足時也能正確排列，並調整最小寬度 */
    gap: 15px; /* 網格間距 */
    background: #f8f9fa; /* 背景色 */
}

/* 產品卡片 */
.product-card {
    background: white; /* 背景色 */
    border-radius: 12px; /* 邊框圓角 */
    overflow: hidden; /* 超出部分隱藏 */
    position: relative; /* 相對定位，供內部絕對定位元素參考 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 陰影效果 */
    transition: transform 0.3s ease; /* 過渡效果：變形 */
    display: flex; /* 使用 flex 佈局 */
    flex-direction: column; /* 垂直排列子元素（圖片和資訊區） */
    cursor: pointer; /* 滑鼠指標樣式 */
}

/* 產品卡片滑鼠懸停效果 */
.product-card:hover {
    transform: translateY(-2px); /* 向上移動 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* 增強陰影 */
}

/* 排名數字 */
.rank-number {
    position: absolute; /* 絕對定位 */
    top: 8px; /* 距頂部距離 */
    left: 8px; /* 距左側距離 */
    background: rgba(0,0,0,0.7); /* 背景色（半透明黑） */
    color: white; /* 文字顏色 */
    width: 24px; /* 寬度 */
    height: 24px; /* 高度 */
    border-radius: 50%; /* 圓形 */
    display: flex; /* 使用 flex 佈局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 12px; /* 字體大小 */
    font-weight: bold; /* 字體加粗 */
    z-index: 3; /* 堆疊順序，確保在圖片之上 */
}

/* 產品圖片容器 */
.product-image {
    position: relative; /* 相對定位 */
    width: 100%; /* 寬度占滿父容器 */
    aspect-ratio: 1 / 1; /* 圖片長寬比 (桌面版，可根據需求調整) */
    overflow: hidden; /* 超出部分隱藏 */
}

/* 產品圖片實際元素 */
.product-image img {
    width: 100%; /* 寬度占滿容器 */
    height: 100%; /* 高度占滿容器 */
    object-fit: cover; /* 圖片填充方式，保持長寬比並裁剪 */
    object-position: center top; /* 圖片位置，優先顯示頂部中間 */
}

/* 圖片下方半透明互動區域的漸層效果 */
.product-image::after {
    content: ''; /* 偽元素必須有 content */
    position: absolute; /* 絕對定位 */
    bottom: 0; /* 緊貼底部 */
    left: 0; /* 緊貼左側 */
    right: 0; /* 緊貼右側 */
    height: 40px; /* 高度 */
    background: linear-gradient(transparent, rgba(0,0,0,0.6)); /* 背景漸層（上透明下半透明黑） */
    pointer-events: none; /* 不阻擋滑鼠事件 */
}

/* 產品標籤 (例如：最新、推薦) */
.product-tag {
    position: absolute; /* 絕對定位 */
    top: 6px; /* 距頂部距離 */
    right: 6px; /* 距右側距離 */
    background: rgba(255,255,255,0.9); /* 背景色（半透明白） */
    color: #333; /* 文字顏色 */
    padding: 2px 6px; /* 內邊距 */
    border-radius: 8px; /* 邊框圓角 */
    font-size: 9px; /* 字體大小 */
    font-weight: bold; /* 字體加粗 */
    z-index: 2; /* 堆疊順序 */
}

/* 互動按鈕區域 (喜歡、收藏等) */
.product-actions {
    position: absolute; /* 絕對定位 */
    bottom: 8px; /* 距底部距離 */
    left: 8px; /* 距左側距離 */
    right: 8px; /* 距右側距離 */
    display: flex; /* 使用 flex 佈局 */
    justify-content: space-between; /* 子元素兩端對齊 */
    align-items: center; /* 垂直居中 */
    z-index: 3; /* 堆疊順序，確保在漸層之上 */
}

/* 單個互動按鈕 */
.action-btn {
    background: rgba(255,255,255,0.9); /* 背景色（半透明白） */
    border: none; /* 無邊框 */
    border-radius: 12px; /* 邊框圓角 */
    padding: 4px 8px; /* 內邊距 */
    display: flex; /* 使用 flex 佈局 */
    align-items: center; /* 垂直居中 */
    gap: 3px; /* 圖示與文字間距 */
    font-size: 10px; /* 字體大小 */
    cursor: pointer; /* 滑鼠指標樣式 */
    transition: all 0.3s ease; /* 所有屬性過渡效果 */
    color: #333; /* 文字顏色 */
}

/* 互動按鈕滑鼠懸停效果 */
.action-btn:hover {
    background: white; /* 背景變為不透明白 */
    transform: scale(1.05); /* 輕微放大 */
}

/* 互動按鈕激活狀態 (例如：已喜歡) */
.action-btn.active {
    background: #ff6b6b; /* 背景色變為紅色 */
    color: white; /* 文字顏色變為白色 */
}

/* 互動按鈕中的圖示 */
.action-btn i {
    font-size: 15px; /* 圖示大小 */
}

/* 互動按鈕中的計數文字 */
.action-btn .count {
    font-size: 13px; /* 字體大小 */
    font-weight: bold; /* 字體加粗 */
}

/* 觀看次數顯示 */
.view-count {
    background: rgba(255,255,255,0.9); /* 背景色（半透明白） */
    color: #333; /* 文字顏色 */
    padding: 4px 8px; /* 內邊距 */
    border-radius: 12px; /* 邊框圓角 */
    font-size: 10px; /* 字體大小 */
    font-weight: bold; /* 字體加粗 */
}

/* 產品資訊區域 */
.product-info {
    padding: 12px; /* 內邊距 */
    /* background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%); */ /* 原來的漸層背景 */
    background: #fff0f5; /* 更改為更接近白色的淺粉色 (LavenderBlush) */
    display: flex; /* 使用 flex 佈局 */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: space-between; /* 子元素在主軸上均勻分布剩餘空間 */
    flex-grow: 1; /* 填滿父容器剩餘空間 */
    min-height: 120px; /* 最小高度，確保內容區域不會太扁 */
}

/* 產品資訊頭部 (包含名稱和評分) */
.product-header {
    display: flex; /* 使用 flex 佈局 */
    justify-content: space-between; /* 子元素兩端對齊 */
    align-items: flex-start; /* 頂部對齊 */
    margin-bottom: 8px; /* 底部外邊距 */
}

/* 產品名稱 */
.product-name {
    font-size: 1.8rem;
    font-weight: bold; /* 字體加粗 */
    color: #333; /* 文字顏色 */
    margin: 0; /* 無外邊距 */
    line-height: 1.2; /* 行高 */
    overflow: hidden; /* 超出部分隱藏 */
    text-overflow: ellipsis; /* 超出部分顯示省略號 */
    white-space: nowrap; /* 不換行 */
    flex: 1; /* 佔據剩餘空間 */
    margin-right: 8px; /* 右側外邊距，與評分區隔開 */
}

/* 產品評分區域 */
.product-rating {
    display: flex; /* 使用 flex 佈局 */
    align-items: center; /* 垂直居中 */
    gap: 2px; /* 子元素間距 */
    flex-shrink: 0; /* 防止被壓縮 */
    font-size: 1rem; /* 字體大小 */
}

/* 評分分數 */
.rating-score {
    background: #ff6b6b; /* 背景色（紅色） */
    color: white; /* 文字顏色 */
    padding: 2px 6px; /* 內邊距 */
    border-radius: 8px; /* 邊框圓角 */

    font-weight: bold; /* 字體加粗 */
}

/* 評分文字 (例如：優良) */
.rating-text {
    color: #333; /* 文字顏色 */
    font-weight: 500; /* 字體粗細 */
}

/* 產品詳細資訊 (例如：年齡、身高、體重等) */
.product-details {
    font-size: 1.2rem;
    color: #333; /* 文字顏色 */
    line-height: 1.3; /* 行高 */
    margin-bottom: 8px; /* 底部外邊距 */
}

/* 詳細資訊行，用於包含兩個半寬的項目 */
.detail-row {
    display: flex; /* 使用 flex 佈局 */
    justify-content: space-between; /* 子元素之間平均分配空間 */
    margin-bottom: 2px; /* 行底部外邊距 */
}

/* 單項詳細資訊 */
.detail-item {
    display: flex; /* 使用 flex 佈局 */
    align-items: center; /* 垂直居中 */
    gap: 4px; /* 圖示與文字間距 (如果有的話) 或標籤與值間距 */
    margin-bottom: 2px; /* 底部外邊距 (如果不是在 detail-row 中) */
}

/* 佔滿整行的詳細資訊項目 */
.detail-item.full-width {
    width: 100%;
}

/* 佔據一半寬度的詳細資訊項目 */
.detail-item.half-width {
    width: calc(50% - 2px); /* 減去 gap 的一半，如果 detail-row 有 gap 的話 */
    /* 或者直接使用 flex-basis: 50%; */
}

/* 詳細資訊圖示 */
.detail-item i {
    font-size: 11px; /* 圖示大小 */
    color: #555; /* 圖示顏色 */
    width: 12px; /* 固定寬度，方便對齊 */
    text-align: center; /* 圖示居中 */
}

/* 詳細資訊標籤 (例如：年齡：) */
.detail-label {
    font-weight: 500; /* 字體粗細 */
}
.more-btn-wrapper .layui-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* 產品價格 */
.product-price {
    font-size: 19px; /* 字體大小 */
    font-weight: bold; /* 字體加粗 */
    color: #e91e63; /* 文字顏色（粉紅色系） */
    text-align: right; /* 文字右對齊 */
    margin-top: auto; /* 將價格推到底部 (如果父元素是 flex 且 flex-direction: column) */
}

/* 響應式設計 - 中等螢幕 (例如：平板) */
@media (max-width: 768px) {
    /* 產品網格布局 - 手機版改為兩欄 */
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* 每行兩個產品 */
        gap: 10px; /* 調整間距 */

    }

    /* 產品圖片容器 - 調整手機版圖片長寬比 */
    .product-image {
        aspect-ratio: 4 / 5; /* 調整為更適合手機的比例，例如 4:5 */
    }

    /* 產品名稱 - 調整字體大小 */
    .product-name {
        font-size: 1rem;
    }

    /* 產品詳細資訊 - 調整字體大小 */
    .product-details {
        font-size: 0.7rem;
    }

    /* 產品價格 - 調整字體大小 */
    .product-price {
        font-size: 12px;
    }

    /* 互動按鈕區域 - 調整大小和間距 */
    .action-btn {
        padding: 3px 6px;
        font-size: 9px;
    }
    .action-btn i {
        font-size: 10px;
    }
    .action-btn .count {
        font-size: 8px;
    }
    .view-count {
        padding: 3px 6px;
        font-size: 9px;
    }

    .view-count i {
        font-size: 10px;
    }

    /* 產品資訊區域 - 調整最小高度 */
    .product-info {
        min-height: 100px; /* 調整手機版最小高度 */
        padding: 10px;
        background: #fff0f5; /* 確保手機版也使用新的背景色 */
    }
}

/* 響應式設計 - 小螢幕 (例如：手機) */
@media (max-width: 480px) {
    /* 產品網格布局 - 維持兩欄，或根據需要調整為單欄 */
    /* 如果希望在更小的螢幕上也保持兩欄，則此處不需要修改 .products-grid */
    /* 若要改為單欄，則使用: grid-template-columns: 1fr; */

    /* 產品圖片容器 - 可進一步調整手機版圖片長寬比 */
    .product-image {
        aspect-ratio: 3 / 4; /* 調整為更適合小手機的比例，例如 3:4 */
    }

    /* 產品卡片 - 調整整體樣式 */
    .product-card {
        border-radius: 10px; /* 調整圓角 */
    }

    /* 產品名稱 - 進一步調整字體大小 */
    .product-name {
        font-size: 1rem;
    }

    /* 產品評分區域 */
    .product-rating {
        display: flex; /* 使用 flex 佈局 */
        align-items: center; /* 垂直居中 */
        gap: 2px; /* 子元素間距 */
        flex-shrink: 0; /* 防止被壓縮 */
        font-size: 0.7rem; /* 字體大小 */
    }

    /* 排名數字 - 調整大小 */
    .rank-number {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    /* 產品標籤 - 調整大小 */
    .product-tag {
        font-size: 8px;
        padding: 1px 4px;
    }

    /* 互動按鈕區域 - 進一步調整 */
    .product-actions {
        bottom: 6px;
        left: 6px;
        right: 6px;
    }

    /* 產品資訊區域 - 進一步調整 */
    .product-info {
        padding: 8px;
        min-height: 90px; /* 調整小手機版最小高度 */
        background: #fff0f5; /* 確保小手機版也使用新的背景色 */
    }
}