.elementor-9 .elementor-element.elementor-element-7641ada6{--display:flex;}/* Start custom CSS for container, class: .elementor-element-7641ada6 *//* --- 蒸氣魔法屋 專屬 購物車頁面優化 --- */

/* 1. 購物車整體背景與容器 */
.woocommerce-cart-form {
    background: #FFFFFF !important;
    padding: 30px !important;
    border-radius: 20px !important;
    border: 3px solid #6F4E37 !important;
    box-shadow: 10px 10px 0px rgba(111, 78, 55, 0.05) !important;
    margin-bottom: 40px !important;
    box-sizing: border-box;
}

/* 2. 表格標題美化 */
.shop_table.cart thead {
    background-color: #FDF5E6;
}

.shop_table.cart thead th {
    color: #6F4E37 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    border: none !important;
    padding: 15px !important;
}

/* 3. 商品列樣式 */
.woocommerce-cart-form__cart-item {
    transition: background 0.3s;
}

.woocommerce-cart-form__cart-item:hover {
    background-color: #FFFCF9;
}

.woocommerce-cart-form__cart-item td {
    padding: 20px 15px !important;
    border-bottom: 1px dashed #D2B48C !important; /* 虛線更有手帳感 */
    vertical-align: middle !important;
}

/* 4. 商品縮圖圓角 */
.product-thumbnail img {
    border-radius: 12px;
    border: 1px solid #eee;
    max-width: 80px !important;
}

/* 5. 數量輸入框美化 */
.quantity input.qty {
    border: 2px solid #D2B48C !important;
    border-radius: 8px !important;
    padding: 8px !important;
    background: #FDF5E6 !important;
    color: #6F4E37;
    font-weight: 700;
}

/* 6. 折價券與更新按鈕區塊 */
.actions {
    background: #FDF5E6;
    padding: 20px !important;
    border-radius: 0 0 15px 15px;
}

.coupon input#coupon_code {
    border: 2px solid #D2B48C !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    margin-right: 10px;
}

.actions .button {
    background: #6F4E37 !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 12px 25px !important;
    transition: 0.3s !important;
}

.actions .button:hover {
    background: #90D5EC !important; /* 變成魔法藍 */
    transform: translateY(-2px);
}

/* 7. 購物車總計區塊 (Cart Totals) */
.cart-collaterals {
    display: flex;
    justify-content: flex-end;
}

.cart_totals {
    width: 100% !important;
    max-width: 450px;
    background: #FFFFFF !important;
    padding: 30px !important;
    border: 3px solid #6F4E37 !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 0px rgba(111, 78, 55, 0.05);
}

.cart_totals h2 {
    font-size: 22px !important;
    color: #6F4E37;
    border-bottom: 2px solid #90D5EC;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 8. 前往結帳按鈕 (最醒目) */
.checkout-button {
    background: linear-gradient(135deg, #A586BD 0%, #90D5EC 100%) !important;
    font-size: 20px !important;
    padding: 20px !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 20px rgba(144, 213, 236, 0.4) !important;
    text-align: center;
    display: block;
    margin-top: 20px;
}

/* --- 手機版極致優化 --- */
@media (max-width: 767px) {
    .woocommerce-cart-form {
        padding: 15px !important;
    }

    /* 讓手機版的表格轉向，變成一張張卡片 */
    .shop_table_responsive tr {
        display: block;
        border: 2px solid #D2B48C !important;
        border-radius: 15px;
        margin-bottom: 15px;
        padding: 15px;
        position: relative;
    }

    .shop_table_responsive td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none !important;
        padding: 8px 0 !important;
    }

    .shop_table_responsive td::before {
        content: attr(data-title);
        font-weight: 700;
        color: #D2B48C;
    }

    .product-remove {
        position: absolute;
        top: 5px;
        right: 10px;
    }

    .product-thumbnail {
        justify-content: center !important;
    }

    .cart_totals {
        max-width: 100%;
    }
}/* End custom CSS */