/* GOOGLE FONTS */
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400italic);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:700);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:700italic);

@import url('https://fonts.googleapis.com/css2?family=Cactus+Classical+Serif&family=LXGW+WenKai+Mono+TC&display=swap');

.Introduction {
    margin-bottom: 5px;
    margin-left: 5px;
    background: url(../images/px5.webp);
    padding: 5px;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.28);
    -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.28);
    -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.28);
    flex-basis: calc(25% - 10px);
    /*flex-basis: calc(33.333% - 10px);*/ /* 每個元素占三分之一的寬度，並減去間距*/
    /*margin-bottom: 20px;*/
}

.Introduction.last {
        margin-bottom: 0px;
    }

    .Introduction .thumbnail {
        background: url(../images/px6.webp);
        background-size: cover; /* 背景圖片會填滿整個容器 */
        background-position: center; /* 圖片會置中顯示 */
        background-repeat: no-repeat; /* 避免背景圖片重複 */
        display: flex; /* 讓內容橫向排列 */
        align-items: center; /* 垂直置中 */
        gap: 15px; /* 控制圖片和文字間距 */
        width: 100%;
        height: 100%; /* 根據內容自適應高度 */
    }

    .Introduction figure {
        flex: 1; /* 讓 figure 佔左半邊 */
        max-width: 25%; /* 限制最大寬度 */
        margin: 0;
    }

        .Introduction figure img {
            width: 100%; /* 讓圖片充滿 figure */
            height: auto; /* 等比例縮放 */
            max-height: 200px; /* 限制圖片高度，避免過大 */
            object-fit: contain; /* 保持圖片完整性，不變形 */
        }

    .Introduction .caption {
        flex: 1; /* 讓 caption 佔右半邊 */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .Introduction figure .ButtonBehavior {
        margin-top: 10px;
        display: flex;
        justify-content: center; /* 水平置中 */
        align-items: center; /* 垂直置中 */
    }

    .Introduction .caption .Title {
        font-family: "Cactus Classical Serif", serif;
        font-weight: 400;
        font-style: normal;
        line-height: 24px;
        color: #810000;
        padding-bottom: 10px;
        text-transform: uppercase;
        padding-top: 10px;
        width: 100%; /* 或指定寬度 */
        word-wrap: break-word; /* 讓長單詞在需要時換行 */
        overflow-wrap: break-word; /* 現在更推薦使用 */
        min-height: 48px; /* 根據字體大小與行距調整 */
    }

    .Introduction .caption .Description {
        font-style: italic;
        color: #331202;
        padding-bottom: 10px;
        width: 100%; /* 或指定寬度 */
        word-wrap: break-word; /* 讓長單詞在需要時換行 */
        overflow-wrap: break-word; /* 現在更推薦使用 */
    }

    .Introduction .caption .Cost {
        font-family: "LXGW WenKai Mono TC", monospace;
        font-weight: 300;
        font-style: normal;
        color: #331202;
        line-height: 24px;
        padding-bottom: 10px;
    }



.BT_Add, .BT_Reduce, .meals-countinput, .BT_Trash {
    width: 40px; /* 設定按鈕的寬度 */
    height: 40px; /* 設定按鈕的高度 */
    font-size: 16px; /* 調整按鈕中文字的大小 */
    padding: 5px; /* 調整按鈕內部的空間 */
    background-color: #f0f0f0; /* 設定背景顏色 */
    border: 1px solid #ccc; /* 設定按鈕的邊框 */
    border-radius: 5px; /* 設定按鈕的圓角 */
    cursor: pointer; /* 設定滑鼠移過按鈕時的指針樣式 */
}

    .BT_Add:hover, .BT_Reduce:hover {
        background-color: #ddd; /* 設定按鈕在滑鼠懸停時的背景色 */
    }

.Amount {
    text-align: right;
}

.BT_Trash {
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
    width: 50px; /* 設置按鈕的寬度，根據需要調整 */
    height: 50px; /* 設置按鈕的高度，根據需要調整 */
    text-decoration: none; /* 移除超連結的下劃線 */
}

    .BT_Trash .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px; /* 圖示大小，可以根據需要調整 */
    }


/* 手機模式 */
@media (max-width: 450px) { /* 可根據實際需要調整寬度 */
    .Introduction {
        flex-basis: 100%; /* 手機顯示時，每列一個 */
        margin-bottom: 20px;
    }
        .Introduction figure img {
            width: 71px;
            height: 114px;
        }
}