.del{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:28px; height:28px;
    border:none;            /* 移除框線 */
    background:transparent; /* 背景透明 */
    cursor:pointer;
    padding:0;              /* 去除預設間距 */
}
.del img{
    width:16px; height:16px;
    display:block;
}
.del:hover img{
    opacity:0.8;            /* 滑過時淡一點效果 */
}
.del:focus-visible{ outline:none }



/* 桌面版： */
.cart-table td:nth-child(7),
.cart-table th:nth-child(7){ text-align:center }

/* 手機版：讓刪除按鈕靠右，且不顯示 data-label 文字 */
@media (max-width:768px){
    .cart-table td[data-label="刪除"]{
        display:flex; justify-content:flex-end; align-items:center;
        padding:8px 0 0;              /* 與其他欄保持視覺距離 */
    }
    .cart-table td[data-label="刪除"]::before{ content:""; } /* 隱藏左側欄名 */
}


/* 外層圓角四角框 */
.cart-wrap{
    max-width: 1000px;
    margin: 28px auto;
    padding: 16px;
    color: #FFFFFF;
    border-radius:20px;
}
.cart-wrap::before{
    content:"";
    position:absolute; inset:8px;
    pointer-events:none;
}

/* Steps 示意 */
.steps{
    text-align: center;
    margin-bottom: 50px;
}

.steps img{
    width: 60%;
    height: auto;
}


/* === 面板：雙層描邊圓角盒 === */
.panel {
    position: relative;
    background: linear-gradient(var(--panel-tint), var(--panel-tint)),
    var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding-top: 28px;
    padding-right: 28px;
    padding-left: 28px;
    padding-bottom: 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.panel::before {
    /* 外層金色細框（做出雙線感） */
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 20px;
    border: 1px solid #916328;
    pointer-events: none;
}


/* 購物車表格 */
.cart-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:transparent;
    margin:0 0 8px 0;
}
.cart-table colgroup col {
    width: var(--w);
}

.cart-table thead th {
    background: #90622d;
    color: #fff;
    padding: 14px 12px;
    border-bottom: 1px solid #90622d;
}

/* 左上角圓角 */
.cart-table thead th:first-child {
    border-top-left-radius: 6px;
}

/* 右上角圓角 */
.cart-table thead th:last-child {
    border-top-right-radius: 6px;
}

.cart-table tbody tr{
    border-bottom:1px solid var(--line); /* 每列下方有底線 */
}
.cart-table th, .cart-table td{
    padding:14px 12px;
    text-align:center;
    border-bottom: 1px solid #916328;
}
.cart-table th:nth-child(6),
.cart-table td:nth-child(6){ text-align:right } /* 小計靠右 */
.cart-table a{
    color: #FFFFFF;
    text-decoration: none;
}
.cart-table a:hover{
    border-bottom-color: transparent;
    color: #f4ead7;
}
.cart-table img {
    width: 70px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0; /* 確認無圓角 */
    transition: filter 0.3s ease; /* 平滑過渡 */
}

.cart-table img:hover {
    filter: brightness(70%); /* 滑過去變暗 (70% 亮度) */
}


.cart-table select{
    background:rgba(26,16,6,.8); color:#fff; border:1px solid var(--line);
    border-radius:6px;
    padding:6px 8px;
}
/* 總計 */
.summary{
    margin:16px 0 0;
    display:grid;
    grid-template-columns: 10.9% 14% 30% 10% 12% 14% 9.1%; /* 對齊表格 7 欄 */
    row-gap:6px;
}
.summary > div{ display:contents; border:none }
.summary dt{
    grid-column:1 / 6;           /* 橫跨到單價為止 */
    justify-self:end;
    color:var(--muted);
    padding-right:12px;
}
.summary dd{
    grid-column:6 / 7;           /* 放在「小計」欄 */
    justify-self:end;
    margin:0;
    font-variant-numeric:tabular-nums;
}
.summary .total dt,
.summary .total dd{ font-weight:700; color:#fff }





/* 總計 */
.summary2{
    margin:16px 0 0;
    display:grid;
    grid-template-columns: 18.8% 14% 30% 10% 12% 14% 1.2%; /* 對齊表格 7 欄 */
    row-gap:6px;
}
.summary2 > div{ display:contents; border:none }
.summary2 dt{
    grid-column:1 / 6;           /* 橫跨到單價為止 */
    justify-self:end;
    color:var(--muted);
    padding-right:12px;
}
.summary2 dd{
    grid-column:6 / 7;           /* 放在「小計」欄 */
    justify-self:end;
    margin:0;
    font-variant-numeric:tabular-nums;
}
.summary2 .total dt,
.summary2 .total dd{ font-weight:700; color:#fff }


.form-section{
    border-bottom: 0px;
    border-top: 1px solid #916328;
    margin-top: 10px;
    padding-top: 30px;
    padding-bottom: 10px;
    border-right-width: 0px;
    border-left-width: 0px;
    line-height: 26px;
}


/* 付款方式 */
.pay{
    margin: 0px;
    padding-top: 10px;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    border-width: 0px;
}
.pay legend{ margin-bottom:-50px }
.pay label{ margin-right:16px; white-space:nowrap }
.pay input{ accent-color:#d1b06b }


.pay h2{
    font-size: 20px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 8px;
    padding: 0px;
    color: #d7a86c;
    font-weight: 600;
}


/* 按鈕 */
.actions{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    margin-left: 16px;
    margin-right: 16px;
}

.btn {
    display: inline-block;
    min-width: 180px;
    text-align: center;
    padding: 12px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .25s, color .25s, transform .25s;
    background: rgba(0, 0, 0, 0.6); /* 半透明黑 */
    color: #fff;                    /* 白字 */
}

.btn:hover {
    background: #000;    /* 最黑 */
    color: #d7a86c;      /* 金色 */
    transform: scale(1.05); /* 微微放大 */
}

/* 手機：表格折行卡片式，summary 兩欄顯示 */
@media (max-width: 768px){
    .cart-table thead{ display:none }
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display:block; width:100% }
    .cart-table tbody tr{
        padding:12px 12px;
        border-radius:6px;
        margin-bottom:12px;
        background:rgba(0,0,0,.1);
        border: 1px solid #67513c;
    }

    .cart-table td {
        text-align: left;
        padding: 8px 0 8px 120px;
        position: relative;
        border: none;
    }

    /* 商品照片：改成 flex，標籤與圖片垂直置中 */
    .cart-table td[data-label="商品照片"] {
        display: flex;
        align-items: center;   /* 垂直置中 */
        gap: 47px;
        padding: 8px 12px;     /* 調整內距，取消原本大縮排 */
    }

    .cart-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 12px;
        top: 8px;
        color:#d7a86c;
        font-weight: 600;
        min-width: 96px;
        text-align: left;
    }

    /* 商品照片：標籤不要絕對定位，改跟圖片同列 */
    .cart-table td[data-label="商品照片"]::before {
        position: static;
        min-width: auto;
        margin: 0;
    }


    .summary{
        grid-template-columns: 1fr auto;
        margin-left: 5%;
        margin-right: 5%;
    }
    .summary dt{ grid-column:1 / 2; justify-self:start; padding-right:0 }
    .summary dd{ grid-column:2 / 3; justify-self:end }



    .summary2{
        grid-template-columns: 1fr auto;
        margin-left: 5%;
        margin-right: 5%;
    }
    .summary2 dt{ grid-column:1 / 2; justify-self:start; padding-right:0 }
    .summary2 dd{ grid-column:2 / 3; justify-self:end }


    .actions{ flex-direction:column }
    .btn{ width:100% }
    .cart-table td:nth-child(6){ text-align:left } /* 小計靠右 */

    .pay {
        margin-top: 0px;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 8px;
        padding-top: 10px;
        padding-right: 5%;
        padding-left: 5%;
        padding-bottom: 0px;
    }
    .steps img {
        width: 90%;
        height: auto;
    }
    .panel {
        padding: 5%;
    }
}