/* === 強化版購物 - 前台樣式 === */

/* 移除購物車頁原生的「優惠券代碼」輸入框：本外掛的視覺化優惠券卡片＋彈出視窗已完整取代這個入口，
   兩套並存容易讓顧客搞不清楚要用哪一個。這裡只隱藏購物車頁自己的（WooCommerce cart-form.php
   輸出的 `<div class="coupon">`，範圍限定在 `.woocommerce-cart-form` 底下），結帳頁原生的優惠券
   欄位是不同的 class/markup（`.checkout_coupon`），不受影響——本外掛本來就不會在結帳頁自動注入
   視覺化優惠券區塊，所以結帳頁維持原生欄位可用。 */
.woocommerce-cart-form .coupon {
    display: none !important;
}

/* 購物車／結帳頁隱藏原生「已套用優惠券」列的移除按鈕（block-based 版型）：classic 版型
   （wc_cart_totals_coupon_html() 輸出的 `<a class="woocommerce-remove-coupon">`）已在 PHP 端
   用 `twshop_hide_cart_coupon_remove_link` filter 整個拿掉連結，但 Cart/Checkout block 的
   已套用優惠券是 React 元件（Chip 元件，`.wc-block-components-totals-discount__coupon-list-item`
   內的 `.wc-block-components-chip__remove` 按鈕）純前端渲染，無法用 PHP filter 處理，只能用
   CSS 隱藏。scope 同時涵蓋 `.wc-block-cart`（Cart block）與 `.wc-block-checkout`
   （Checkout block）兩種外層 wrapper。 */
.wc-block-cart .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove,
.wc-block-checkout .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove {
    display: none !important;
}

/* 購物車頁「已套用優惠券」列，手機版標題後方多一個冒號的修正：
   WooCommerce cart-totals.php 把 wc_cart_totals_coupon_label() 回傳的字串同時用在兩個地方——
   桌機版 <th> 直接顯示全文、手機版當作 <td data-title="..."> 屬性值。twshop_cart_coupon_label_use_title()
   （twshop.php）把這個字串改成「優惠券: 標題」（已經自帶冒號），但主題 Blocksy 手機版的響應式表格樣式
   （table.shop_table_responsive tbody td[data-title]:before { content: attr(data-title) ": "; }，
   @media max-width:689.98px）會再幫每一格自動補一個「: 」，兩者疊加變成「優惠券: 標題: 」，多了一個
   不該有的冒號。其餘列（小計/運費/合計等）的 data-title 是 WC 原生的純標籤文字（沒有冒號），
   Blocksy 補的冒號對那些列是正確、必要的，所以只針對「已套用優惠券」列（.cart-discount）覆寫，
   改成不再額外補冒號；選擇器多了 tr.cart-discount 這層 class，比 Blocksy 原本的規則更精確，
   靠選擇器特異度自然覆蓋，不需要 !important。 */
@media (max-width: 689.98px) {
    table.shop_table_responsive tbody tr.cart-discount td[data-title]:before {
        content: attr(data-title);
    }
}

/* 會員中心頁籤 AJAX 切換時的載入態 */
.woocommerce-MyAccount-content.twshop-account-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* 會員中心頁籤自訂圖示（Lucide 線條風 SVG，見 assets/icons/）：只加間距與尺寸，顏色沿用連結文字本身的
   顏色（SVG 本身是 stroke="currentColor"，不覆寫主題的強調色變數），只有後台實際設定過圖示的頁籤才會有
   .twshop-tab-icon，其餘頁籤不受影響。間距沿用 Blocksy 主題原生圖示（a:before）的 margin-inline-end:15px，
   讓自訂圖示與主題預設圖示跟文字的距離一致；不額外做 position/top 微調，改依賴主題
   `.woocommerce-MyAccount-navigation ul li a` 本身的 `display:flex; align-items:center;` 做垂直置中，
   跟主題原生圖示的對齊方式一致。SVG 尺寸對齊主題原生圖示的 icon box 寬度（Blocksy 該規則是
   font-size:16px + width:20px——字型圖示的實際視覺墨色通常比 font-size 數字看起來更滿版，
   單純把 SVG 也設成 16px 反而視覺上偏小，改對齊 20px 的 box 寬度比較接近觀感）。 */
.woocommerce-MyAccount-navigation-link a .twshop-tab-icon {
    display: inline-flex;
    margin-inline-end: 15px;
    color: inherit;
}
.woocommerce-MyAccount-navigation-link a .twshop-tab-icon svg {
    width: 20px;
    height: 20px;
}

/* 會員中心頁籤文字不要底線：Blocksy 的「連結樣式 = 底線」(body[data-link=type-2]) 規則是
   `[data-link=type-2] :where(.entry-content :where(ul,ol) a, ...):not(:hover) { --theme-text-decoration: underline }`，
   用的是「.entry-content 底下任何 ul/ol 裡的 a」這種後代選擇器。會員中心整塊是 [woocommerce_my_account]
   輸出、包在 .entry-content 裡，頁籤又剛好是 nav > ul > li > a，所以會被這條當成「內文清單連結」畫上底線。
   主題自己那條 `.woocommerce-MyAccount-navigation ul li a` 只設了顏色/高度/padding，沒宣告 text-decoration，
   擋不下來。這裡直接宣告 text-decoration:none（(0,1,3) 勝過主題套底線的 `a{}` (0,0,1)），不需要 !important，
   換主題也不會有副作用。 */
.woocommerce-MyAccount-navigation ul li a {
    text-decoration: none;
}

/* 會員中心頁籤：手機版改為可橫向滑動，按鈕本身樣式（顏色/高度/間距等）與桌機版完全相同，只改排列方向。
   後台「頁籤排序與開關」區塊可關閉此功能（wc_account_tab_mobile_scroll），關閉時不會加上 body class，
   以下規則就不會生效，改沿用佈景主題原本的直向清單。 */
@media (max-width: 689.98px) {
    body.twshop-account-tab-mobile-scroll .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.twshop-account-tab-mobile-scroll .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }
    body.twshop-account-tab-mobile-scroll .woocommerce-MyAccount-navigation ul li {
        flex: 0 0 auto;
    }
    body.twshop-account-tab-mobile-scroll .woocommerce-MyAccount-navigation ul li a {
        white-space: nowrap;
    }
    /* 主題原本 :hover 和 .is-active 共用同一組強調色，觸控裝置點擊後 :hover 容易卡住不放，
       導致「剛點過的頁籤」和「目前真正作用中的頁籤」看起來一樣。手機版拿掉 hover 專屬的強調色，
       只保留 .is-active 一個視覺狀態。 */
    body.twshop-account-tab-mobile-scroll .woocommerce-MyAccount-navigation ul li:hover:not(.is-active) a {
        background: transparent;
        color: var(--account-nav-text-initial-color, var(--theme-palette-color-3));
    }
}

/* 點數異動顏色：新增吃主題強調色、扣除吃主題標題色（正負號已表達方向，不再用固定的綠／紅）。
   非 Blocksy 主題沒有這些變數時退回綠／紅；也可在站台 CSS 覆寫 --twshop-points-earn-color／--twshop-points-use-color */
.twshop-points-earn { color: var(--twshop-points-earn-color, var(--theme-palette-color-1, #2e7d32)); font-weight: 700; }
.twshop-points-use  { color: var(--twshop-points-use-color, var(--theme-headings-color, #c62828)); font-weight: 700; }
.twshop-points-notice--applied { color: var(--theme-palette-color-1, #2271b1); }

/* 點數紀錄滾動容器 */
.twshop-points-history-wrap {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 1em;
}
.twshop-points-history-wrap table.shop_table {
    margin-bottom: 0;
}
/* 在行動版響應式模式下，時間欄位縮小以避免過長 */
.twshop-points-history-wrap table.shop_table td:first-child {
    font-size: 12px;
    color: var(--theme-text-color, inherit);
    opacity: 0.75;
}

/* 點數異動紀錄：手機版改為卡片式（比照 .twshop-tier-table 的響應式作法），
   並把「時間＋異動點數」提升為卡片標頭同一行顯示，一眼就能看到何時變動多少，
   其餘（說明/餘額/使用期限）維持 label:value 各自一行，比純文字表格直排更容易閱讀。 */
@media screen and (max-width: 600px) {
    /* 手機不再用內部捲動框：手指在長頁面上滑動時容易卡在框裡，改回跟著整頁捲動 */
    .twshop-points-history-wrap {
        max-height: none;
        overflow-y: visible;
    }
    .twshop-points-history-wrap table.shop_table tr td.twshop-cell-empty {
        display: none;
    }
    .twshop-points-history-wrap table.shop_table thead {
        display: none;
    }
    .twshop-points-history-wrap table.shop_table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 10px 14px;
    }
    .twshop-points-history-wrap table.shop_table tr:last-child {
        margin-bottom: 0;
    }
    .twshop-points-history-wrap table.shop_table td {
        border: none;
        white-space: normal;
        padding: 0;
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(1) {
        order: 1;
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(2) {
        order: 2;
        margin-inline-start: auto;
        font-size: 17px;
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(3),
    .twshop-points-history-wrap table.shop_table td:nth-child(4),
    .twshop-points-history-wrap table.shop_table td:nth-child(5) {
        flex-basis: 100%;
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-top: 6px;
        text-align: right;
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(3) {
        order: 3;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px dashed rgba(0, 0, 0, 0.1);
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(4) { order: 4; }
    .twshop-points-history-wrap table.shop_table td:nth-child(5) { order: 5; }
    .twshop-points-history-wrap table.shop_table td[data-title]::before {
        content: attr(data-title);
        font-weight: 600;
        text-align: left;
        color: var(--theme-text-color, #555);
        opacity: 0.75;
    }
    .twshop-points-history-wrap table.shop_table td:nth-child(1)::before,
    .twshop-points-history-wrap table.shop_table td:nth-child(2)::before {
        content: none;
    }
}

/* 會員中心：兩個區塊之間的分隔線（顏色跟隨主題邊框色） */
.twshop-section-divider {
    border: none;
    border-top: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.08));
    margin: 2.5em 0;
}

/* 結帳頁：隱藏移動後在 order review 裡的空白運送列 */
tr.twshop-shipping-hidden { display: none !important; }

/* 結帳／編輯地址頁：郵遞區號改由「縣/市 ＋ 鄉鎮市區」自動帶入，欄位不顯示但仍在表單裡照常送出
   （見 twshop_taiwan_hide_postcode_field()）。
   !important 是必要的：twshop-frontend.js 的超商取貨切換在「非超商」分支會對整組地址欄位列
   呼叫 jQuery .show()，那會寫成 inline style="display: block"，沒有 !important 就蓋不過去。 */
.twshop-postcode-auto { display: none !important; }

/* 結帳／編輯地址頁：只有一個允許銷售/運送的國家時，「國家/地區」欄位不顯示
   （見 twshop_hide_single_country_field()）。欄位本身仍正常送出唯一允許的國別代碼
   （WooCommerce 核心對單一國家的 <select> 本來就寫死該值，不受這裡隱藏影響）。
   !important 理由同上一條 .twshop-postcode-auto。 */
.twshop-country-auto { display: none !important; }

/* 結帳頁：移入帳單表單的運送方式選擇區塊。外框對齊 Blocksy 結帳頁「付款方式」選項框
   （1px 邊框、無圓角、透明底），標題對齊表單欄位標籤（15px/500）。 */
#twshop-shipping-placeholder {
    clear: both;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 25px;
    margin-bottom: 1em;
    border: 1px solid var(--theme-border-color, #e9ebec);
    border-radius: 0;
    background: transparent;
}
.twshop-shipping-label {
    margin: 0 0 10px;
    font-weight: 500;
    font-size: 15px;
}
#twshop-shipping-placeholder ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
}
#twshop-shipping-placeholder ul#shipping_method li {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#twshop-shipping-placeholder ul#shipping_method li:last-child {
    margin-bottom: 0;
}

/* 會員等級權益總覽表 */
.twshop-tier-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.twshop-tier-table th,
.twshop-tier-table td {
    white-space: nowrap;
}

/*
 * Blocksy 全域規則 table.shop_table tr>*:first-child / :last-child 會把
 * 首末格的 padding-inline-start/end 清零，導致「等級」偏左、「升等禮」偏右。
 * 此處提升特異度（相同 0,0,2,2），靠 CSS 載入順序蓋回去。
 */
table.twshop-tier-table tr > *:first-child { padding-inline-start: 12px; }
table.twshop-tier-table tr > *:last-child  { padding-inline-end:   12px; }

@media screen and (max-width: 600px) {
    .twshop-tier-table thead {
        display: none;
    }
    /* 每個等級一張卡片：等級名稱當標題，門檻／效期／倍率／折扣排成兩欄，
       生日禮／升等禮整列顯示；沒有內容的欄位（—）不顯示，卡片比逐欄直排短很多。
       欄位用 block（不用 flex）：折扣／禮物欄的內容含 <br>，flex 會把文字片段拆成各自一列。 */
    body .woocommerce table.shop_table.twshop-tier-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.08));
        border-radius: 6px;
        margin-bottom: 1.4em;
        padding: 0 0 8px;
        overflow: hidden;
    }
    body .woocommerce table.shop_table.twshop-tier-table tbody tr td {
        display: block;
        padding: 8px 14px;
        border: none;
        white-space: normal;
        text-align: left;
    }
    body .woocommerce table.shop_table.twshop-tier-table tbody tr td:first-child {
        grid-column: 1 / -1;
        font-weight: 700;
        font-size: 1.15em;
        color: var(--theme-headings-color, inherit);
        padding-top: 12px;
        padding-bottom: 12px;
        margin-bottom: 6px;
        /* 等級名稱列：淡底色，一眼分辨每張卡片是哪個等級 */
        background: rgba(0, 0, 0, 0.05);
    }
    body .woocommerce table.shop_table.twshop-tier-table tbody tr td:first-child::before { content: none !important; }
    body .woocommerce table.shop_table.twshop-tier-table tbody tr td:nth-child(n+5) { grid-column: 1 / -1; }
    body .woocommerce table.shop_table.twshop-tier-table tbody tr td.twshop-cell-empty { display: none; }
    body .woocommerce table.shop_table.twshop-tier-table tbody tr td:first-child { padding-inline-start: 14px; }
    body .woocommerce table.shop_table.twshop-tier-table tbody tr td:last-child  { padding-inline-end:   14px; }
    body .woocommerce table.shop_table.twshop-tier-table tbody tr td[data-title]::before {
        content: attr(data-title);
        font-weight: 600;
        float: none;
        display: block;
        text-align: left;
        font-size: 12px;
        margin-bottom: 2px;
        color: var(--theme-text-color, #555);
        opacity: 0.75;
    }
}

/* 等級資訊列：補強手機版換行（視覺樣式由 woocommerce-message 提供） */
.twshop-tier-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    line-height: 1.7;
}

/* 等級表格：目前等級列 */
.twshop-tier-table tr.twshop-tier-current {
    background: var(--theme-form-field-background-initial-color, rgba(0, 0, 0, 0.04));
    font-weight: 700;
}

@media screen and (max-width: 600px) {
    .twshop-tier-table tr.twshop-tier-current {
        border: 2px solid var(--theme-palette-color-1, rgba(0, 0, 0, 0.22));
    }
    /* 目前等級：名稱列整條主色底白字，跟其他等級明顯區隔 */
    body .woocommerce table.shop_table.twshop-tier-table tbody tr.twshop-tier-current td:first-child {
        background: var(--theme-palette-color-1, #2271b1);
        color: #fff;
    }
}

/* 視覺化優惠券卡片：外框/字級對齊 Blocksy 購物車總計框與商品標題（見 .visual-coupon-card）；
   按鈕沿用 WooCommerce/主題既有的 .button / .button.alt class，不再另外覆寫顏色，套用哪個佈景主題按鈕長怎樣，卡片按鈕就跟著長怎樣。 */
.twshop-visual-coupons-wrapper {
    clear: both;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}
/* 購物車頁：優惠券按鈕緊接在點數/儲值金區塊下方，該區塊本身已有 margin-bottom，這裡不用再疊加上緣間距。
   儲值金區塊（wallet 模組啟用時）的 wrapper 固定輸出在點數區塊與優惠券區塊之間（見
   twshop_classic_cart_wallet() 的 priority 15，介於點數 10 與優惠券 20 之間），所以「緊接在
   點數區塊後面」這個相鄰選擇器在 wallet 模組啟用時實際上永遠不會成立，要另外處理
   儲值金 wrapper 緊接優惠券 wrapper 的情況（v25.8.76 效仿點數區塊樣式時一併修正）。 */
.twshop-points-redemption-wrapper + .twshop-visual-coupons-wrapper,
.twshop-wallet-redemption-wrapper + .twshop-visual-coupons-wrapper {
    margin-top: 0;
}
.twshop-visual-coupons-wrapper,
.twshop-coupons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.twshop-no-coupon-msg {
    color: var(--theme-text-color, #666);
    margin-top: 20px;
    width: 100%;
    grid-column: 1 / -1;
}

/* 購物車/結帳頁的優惠券入口按鈕＋彈出視窗：帳戶頁（我的優惠券）不使用這組樣式，維持原本一律展開的網格 */
.twshop-coupons-dialog {
    width: min(560px, calc(100% - 32px));
    max-height: min(80vh, 640px);
    padding: 0;
    margin: auto;
    border: none;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    /* 開關動畫：淡入＋輕微上移縮放，比原生 <dialog> 預設的「瞬間出現/消失」自然。
       display/overlay 搭配 allow-discrete，讓 close() 觸發的關閉也會播放同一組轉場，
       瀏覽器會延後真正把 dialog 移出畫面，直到轉場結束（不支援 @starting-style 的舊瀏覽器則優雅退化為無動畫直接顯示）。 */
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}
.twshop-coupons-dialog[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
}
@starting-style {
    .twshop-coupons-dialog[open] {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
}
.twshop-coupons-dialog::backdrop {
    background: rgba(0, 0, 0, 0);
    transition: background-color 0.2s ease allow-discrete;
}
.twshop-coupons-dialog[open]::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
@starting-style {
    .twshop-coupons-dialog[open]::backdrop {
        background: rgba(0, 0, 0, 0);
    }
}
.twshop-coupons-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--theme-border-color, #eee);
}
.twshop-coupons-dialog-head h3 {
    margin: 0;
    font-size: 16px;
    color: var(--theme-text-color, #333);
}
.twshop-coupons-dialog-close {
    flex-shrink: 0;
    padding: 4px;
    border: none;
    background: none;
    color: var(--theme-text-color, #666);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.twshop-coupons-dialog-close:hover {
    opacity: 0.7;
}
.twshop-coupons-dialog .twshop-coupons-grid {
    grid-template-columns: 1fr;
    padding: 16px 18px 20px;
    margin: 0;
    max-height: calc(min(80vh, 640px) - 56px);
    overflow-y: auto;
}
.visual-coupon-card {
    /* 對齊 Blocksy 購物車總計框：2px 邊框、無圓角、無陰影（該主題沒定義 --theme-border-radius／
       --theme-content-background／--theme-box-shadow，先前吃到的是這裡自己的 fallback） */
    border: 2px solid var(--theme-border-color, #e9ebec);
    padding: 15px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    text-align: left;
    transition: 0.3s;
}
.visual-coupon-card.is-used {
    filter: grayscale(100%);
    opacity: 0.6;
}
/* body（文案）+ 按鈕 這一排維持原本 flex 並排，跟 v25.5.92 新增的滿額提示區塊（垂直堆疊在下方）分開 */
.twshop-coupon-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.twshop-coupon-card-body {
    flex: 1;
    padding-right: 15px;
    overflow: hidden;
}
.twshop-coupon-price {
    margin-bottom: 5px;
    font-size: 1.5em;
    line-height: 1;
}
.twshop-coupon-title {
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--theme-headings-color, #111518);
}
.twshop-coupon-desc {
    margin: 0;
    font-size: 14px;
    color: var(--theme-text-color, #687279);
    line-height: 1.4;
}
.twshop-coupon-expiry {
    font-size: 11px;
    color: var(--theme-text-color, #999);
    margin-top: 8px;
    opacity: 0.8;
}
.visual-coupon-card .v-coupon-message {
    display: none;
    font-size: 11px;
    font-weight: bold;
    margin-top: 6px;
}
.twshop-coupon-btn {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 80px;
    white-space: nowrap;
    text-align: center;
}
.twshop-coupon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.twshop-coupon-btn-remove {
    background-color: #dc3232 !important;
    color: #fff !important;
    border-color: #dc3232 !important;
}

/* 優惠券「還差 $X 即可使用」提示（v25.5.92），優惠券因未達最低消費而暫不可用時輸出在卡片底下。
   v25.8.8 起只剩這一行文字：原本還有進度條（-track/-fill）與推薦加購清單（-hint/-products/
   -product/__name/__price/-add）共 8 個 class，連同背後的全站商品查詢一起移除，
   理由見 includes/modules/membership.php 的 twshop_render_coupon_gap_info()。 */
.twshop-coupon-gap {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 12px;
    color: var(--theme-text-color, #444);
}

/* 極窄螢幕：卡片內容跟按鈕並排會太擠，改成上下堆疊、按鈕滿版方便點按 */
@media screen and (max-width: 400px) {
    .twshop-coupon-card-main {
        flex-direction: column;
        align-items: stretch;
    }
    .twshop-coupon-card-body {
        padding-right: 0;
        margin-bottom: 10px;
    }
    .twshop-coupon-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* 購物車 / 結帳頁點數折抵區塊 */
.twshop-points-redemption-wrapper {
    margin-bottom: 1em;
}
.twshop-points-redemption {
    padding: 0 0 15px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
    background: none;
}
.twshop-points-redemption h4 {
    margin: 0 0 8px;
    font-size: 15px;
}
.twshop-points-redemption p {
    margin-bottom: 10px;
    font-size: 14px;
}
.twshop-points-redemption .twshop-points-input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.twshop-points-redemption .twshop-points-input-row input {
    flex: 1;
    min-width: 130px;
    /* 強制跟主題表單元件同一個高度變數，避免 type="number" 的原生上下箭頭（spinner）
       在部分行動瀏覽器（尤其 iOS Safari）撐高輸入框，導致跟按鈕/主題其他欄位對不齊、
       看起來像是「另外定義」的高度。桌機版原本就沒有明顯落差，這裡統一套用不分斷點。 */
    height: var(--theme-form-field-height, 40px);
    box-sizing: border-box;
}
/* 隱藏 number input 原生的上下箭頭：這組箭頭在不同瀏覽器/系統的預設尺寸不一致，
   是實際撐高輸入框、讓它看起來跳出主題風格的主因；點數只需要文字輸入，不需要這組控制項。 */
.twshop-points-redemption .twshop-points-input-row input[type="number"]::-webkit-outer-spin-button,
.twshop-points-redemption .twshop-points-input-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.twshop-points-redemption .twshop-points-input-row input[type="number"] {
    -moz-appearance: textfield;
}
.twshop-points-notice {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--theme-text-color, #666);
    opacity: 0.85;
}

/* 手機版：輸入框與按鈕改為上下堆疊，只調整排列方向，寬度交給主題表單元件的預設 100% 寬，
   不額外覆寫 width，避免跟主題自己的輸入框樣式打架。
   已用實際頁面（Chrome DevTools 量測）驗證找到根因並修正：input 原本的 `flex: 1`
   在橫向排列（flex-direction: row）時只影響「寬度」沒問題，但改成 column 後，
   flex:1 等同 flex-basis:0%，這時 flex-basis 影響的是主軸＝「高度」，會讓 input
   的高度被 flex 排版邏輯搶去（實測整個崩塌到 20px），而旁邊沒有 flex:1 的按鈕仍是
   正常的 40px，兩者高度對不齊，就是「輸入框在手機版另外定義」的真正原因。
   這裡改回 `flex: none`，讓 input 在直排時维持自己原本的 height（40px）。 */
@media screen and (max-width: 480px) {
    .twshop-points-redemption .twshop-points-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    .twshop-points-redemption .twshop-points-input-row input {
        flex: none;
    }
}

/* 購物車 / 結帳頁儲值金折抵區塊（v25.8.76 起效仿上面的點數折抵區塊樣式，
   class 命名與規則逐一對應，只是前綴從 twshop-points 換成 twshop-wallet）。 */
.twshop-wallet-redemption-wrapper {
    margin-bottom: 1em;
}
.twshop-wallet-redemption {
    padding: 0 0 15px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 15px;
    background: none;
}
.twshop-wallet-redemption h4 {
    margin: 0 0 8px;
    font-size: 15px;
}
.twshop-wallet-redemption p {
    margin-bottom: 10px;
    font-size: 14px;
}
.twshop-wallet-redemption .twshop-wallet-input-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.twshop-wallet-redemption .twshop-wallet-input-row input {
    flex: 1;
    min-width: 130px;
    height: var(--theme-form-field-height, 40px);
    box-sizing: border-box;
}
.twshop-wallet-redemption .twshop-wallet-input-row input[type="number"]::-webkit-outer-spin-button,
.twshop-wallet-redemption .twshop-wallet-input-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.twshop-wallet-redemption .twshop-wallet-input-row input[type="number"] {
    -moz-appearance: textfield;
}
.twshop-wallet-notice {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--theme-text-color, #666);
    opacity: 0.85;
}
@media screen and (max-width: 480px) {
    .twshop-wallet-redemption .twshop-wallet-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    .twshop-wallet-redemption .twshop-wallet-input-row input {
        flex: none;
    }
}

/* 會員中心：點數單一卡片 — 餘額置頂最醒目，其餘規則以 label/value 列表呈現（獨立版面，不依賴主題的 woocommerce-message 樣式）。
   v25.8.132：外框與分隔線對齊 Blocksy 購物車總計框／優惠券卡片（2px 主題邊框、無圓角、透明底），數字用主題主色。 */
.twshop-points-card {
    padding: 28px;
    border: 2px solid var(--theme-border-color, #e9ebec);
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
    margin-bottom: 1.2em;
}
@media (max-width: 480px) {
    .twshop-points-card {
        padding: 20px 16px;
    }
}
.twshop-points-card__balance {
    text-align: center;
    padding-bottom: 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.08));
}
.twshop-points-card__balance-label {
    font-size: 12px;
    opacity: .6;
    margin-bottom: 6px;
}
.twshop-points-card__balance-value {
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--theme-palette-color-1, inherit);
}
.twshop-points-card__balance-unit {
    font-size: 0.4em;
    font-weight: 400;
    opacity: .7;
}
.twshop-points-card__balance-worth {
    font-size: 13px;
    opacity: .65;
    margin-top: 6px;
}

.twshop-points-card__details {
    display: flex;
    flex-direction: column;
}
.twshop-points-card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.08));
    font-size: 13px;
    line-height: 1.6;
}
.twshop-points-card__row:first-child {
    border-top: none;
}
.twshop-points-card__row-label {
    flex: 0 0 auto;
    font-weight: 700;
    opacity: .6;
    white-space: nowrap;
}
.twshop-points-card__row-value {
    flex: 1 1 auto;
    text-align: right;
    color: var(--theme-text-color, inherit);
}
.twshop-points-card__row--highlight .twshop-points-card__row-value {
    font-weight: 700;
}

/* 購物車頁「滿額/滿件進度」區塊
   v25.8.127：位置改到購物車總計框內最上方（woocommerce_before_cart_totals，priority 5，點數折抵之前），
   跟點數/儲值金/優惠券區塊一樣靠底部細線分隔；達標時文字不換色，只靠進度條滿格表示。
   顏色一律跟主題：金額與進度條用主色（palette-color-1），軌道用主題邊框色。 */
.twshop-cart-progress-wrapper:not(:empty) {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.08));
}
.twshop-cart-progress-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* 兩份擇一顯示：並排版面（總計框在右側）只顯示總計框內那份；上下堆疊（Blocksy ≤999.98px，
   總計框被排到商品列表下方）改顯示商品列表上方那份，手機/平板一進頁面就看得到進度。 */
.twshop-cart-progress--top { display: none; }
@media (max-width: 999.98px) {
    .twshop-cart-progress--top { display: block; }
    .twshop-cart-progress--totals { display: none; }
}
.twshop-cart-progress-text {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
    color: var(--theme-text-color, #444);
}
.twshop-cart-progress-text strong {
    color: var(--theme-palette-color-1, #2271b1);
    font-weight: 700;
}
.twshop-cart-progress-track {
    height: var(--twshop-bar-height, 8px);
    border-radius: var(--twshop-bar-radius, 4px);
    background: var(--theme-border-color, rgba(0, 0, 0, 0.08));
    overflow: hidden;
}
.twshop-cart-progress-fill {
    height: 100%;
    border-radius: var(--twshop-bar-radius, 4px);
    background: var(--theme-palette-color-1, #2271b1);
    transition: width 0.3s ease;
}

/* 加購商品／點數兌換商品區塊：外框與標題對齊主題（Blocksy）購物車總計框（.cart_totals）——
   2px 邊框、無圓角、無陰影、標題 15px/700/標題色。量測本站時發現 --theme-border-radius、
   --theme-content-background、--theme-box-shadow 在這個主題根本沒定義，先前的 fallback
   （8px 圓角、陰影、白底）因此不是主題的值，這裡改成不依賴那三個變數。
   內部商品格線是真正的 WooCommerce 商品迴圈（content-product.php），字級/價格/按鈕由主題負責。 */
.twshop-cart-addons,
.twshop-points-redeem-products {
    margin-top: 30px;
    margin-bottom: 20px;
    clear: both;
    padding: 30px;
    border: 2px solid var(--theme-border-color, #e9ebec);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

.twshop-cart-addons-title,
.twshop-points-redeem-products-title {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-headings-color, #111518);
}

/* 極窄螢幕：卡片內距收緊，避免商品格線被過大的左右留白擠壓。沿用本檔其餘規則已經在用的
   600px 斷點，不另外引入新的斷點值。 */
@media screen and (max-width: 600px) {
    .twshop-cart-addons,
    .twshop-points-redeem-products {
        padding: 20px;
    }
}

.twshop-points-redeem-cost {
    font-weight: 700;
    color: var(--theme-palette-color-1, #2271b1); /* 跟隨主題主色，與進度條等一致 */
}

/* 購物車列表內「用點數兌換商品」項目的數量欄位（twshop_lock_redeemed_item_quantity()
   輸出的固定文字，取代原生可編輯的數量輸入框） */
.twshop-redeem-qty {
    display: inline-block;
    opacity: 0.7;
}

/* 「用點數兌換商品」卡片上、按鈕旁的兌換數量下拉（單次兌換上限 max_qty > 1 時才會渲染，
   見 twshop_render_points_redeemable_products_section()），跟按鈕並排、不佔滿整行寬度。 */
.twshop-redeem-qty-select {
    width: auto;
    margin-right: 6px;
    vertical-align: middle;
}

/* 主題把商品卡片的價格／加入購物車圖層關掉時，twshop_render_product_cards() 自己補在卡片最後的
   價格與按鈕（沒關的話不會出現這個容器）。 */
.twshop-card-fallback {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.twshop-points-redeem-min-notice{ margin:0 0 12px; font-size:14px; color:var(--theme-text-color, #687279); }

/* 購物車/結帳總計：折抵費用金額（WooCommerce 輸出「-NT$1,000」）與點數列，
   手機欄寬不夠時不要在負號或「點數」中間斷行 */
.fee .woocommerce-Price-amount,
.twshop-points-used td strong,
.twshop-estimated-points td strong { white-space: nowrap; }

/* 購物車／結帳／迷你購物車：自動贈品標籤 */
.twshop-gift-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--theme-palette-color-1, #2271b1); /* 跟隨主題主色，與滿額進度條一致 */
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}

/* 商品頁加購（折扣規則 product_addon）：商品卡片本身完全是主題的商品卡片（跟商店列表同一個模板、
   同樣的 ul.products／li.product 結構，不改卡片的內距、邊框、字級），這裡只做「增減」：
   - 減：商品頁沒有按鈕（整張卡片點選，pdp-addons.js）；
   - 增：已選取的卡片畫在卡片外圍的主題色外框＋淡色光暈＋勾勾徽章（outline／box-shadow 都在卡片
     外面，不改變卡片本身的尺寸與內容位置）；
   - 調：商品頁右側欄比商店列表窄，格線固定兩欄（主題預設四欄在這裡會縮到太小）。
   外框與標題沿用購物車加購區塊的 .twshop-cart-addons（PHP 端同時帶這兩個 class）。 */
.twshop-pdp-addons {
    margin-top: 0;
}
.twshop-pdp-addons ul.products {
    --shop-columns: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 卡片裡標題、價格…下方的外距：主題規則是 margin-bottom: var(--product-element-spacing, 10px)，自訂器對每個
       圖層的設定是直接設在元素上（只有跟預設不同才輸出，加購卡片是同一組元素，所以會跟著改）；但商品頁的
       .entry-summary 把這個變數設成 35px，加購區塊在 summary 裡會繼承到，所以在這裡還原成「未設定」，
       讓沒被自訂器個別設定的圖層回到主題預設 10px（跟商店列表一致）。
       卡片之間的間距不在這裡寫：主題的格線是 column-gap: var(--grid-columns-gap, 30px)，自訂器的「卡片間距」
       設在 [data-products] 上，加購卡片的 ul 同樣有這個屬性，不覆寫就會跟著商店列表的設定（含平板／手機）。 */
    --product-element-spacing: initial;
}
.twshop-pdp-addons-hint {
    margin: -12px 0 24px;
    font-size: 13px;
    opacity: .7;
}
.twshop-pdp-addons li.product {
    cursor: pointer;
}
/* 已選取：外框與光暈都在卡片外圍（outline-offset / 擴散陰影），包住整張卡片 */
.twshop-pdp-addons li.product.is-selected {
    position: relative;
    outline: 2px solid var(--theme-palette-color-1, #2271b1);
    outline-offset: 8px;
    /* 淡底：box-shadow 只畫在卡片外圍，卡片本身是透明的（露出頁面白底），內外要同色才會是一整塊 */
    --twshop-pdp-tint: color-mix(in srgb, var(--theme-palette-color-1, #2271b1) 8%, transparent);
    background-color: var(--twshop-pdp-tint);
    box-shadow: 0 0 0 8px var(--twshop-pdp-tint);
}
.twshop-pdp-addons li.product.is-selected::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--theme-palette-color-1, #2271b1);
    /* 白色勾勾（內嵌 SVG，不依賴字型） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}
/* 勾選框只留給鍵盤與螢幕閱讀器（真正送出的欄位），畫面上不顯示 */
.twshop-pdp-addon-check {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.twshop-pdp-addons li.product:has(input:focus-visible) {
    outline-color: currentColor;
}

/* 商品頁加購品合併在主商品那一列底下（購物車／結帳／迷你購物車）。字級、顏色沿用主題（小一號、次要文字色），
   數量跟著主商品（唯讀文字）。 */
.twshop-pdp-addon-lines {
    margin-top: 8px;
    font-size: .9em;
}
.twshop-pdp-addon-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 4px 0;
}
.twshop-pdp-addon-line-name { font-weight: 600; }
/* 購物車頁：加購品清單排在這一格最後面（主題輸出順序是 名稱 → 規格資料 → 單價，
   加購清單掛在名稱後面，會夾在名稱與規格之間）。用 flex 欄位的 order 調到最後。 */
.woocommerce-cart-form td.product-name:has(.twshop-pdp-addon-lines) {
    display: flex;
    flex-direction: column;
}
.woocommerce-cart-form td.product-name .twshop-pdp-addon-lines { order: 10; }

/* ── 退換貨（會員中心）──────────────────────────────────────────────
   表格、按鈕、輸入框沿用主題與 WooCommerce 的樣式，這裡只補狀態標籤與表單欄位的間距。 */
.twshop-returns-field { margin-bottom: 18px; }
.twshop-returns-label { display: block; margin-bottom: 6px; font-weight: 600; }
.twshop-returns-field label { margin-right: 14px; }
.twshop-returns-field select,
.twshop-returns-field textarea,
.twshop-returns-field input[type="text"] { width: 100%; max-width: 480px; }
.twshop-returns-qty { width: 80px; }
.twshop-returns-hint { display: block; margin-top: 4px; font-size: 13px; opacity: .7; }
.twshop-returns-message { margin-left: 10px; font-size: 14px; }
.twshop-returns-message.is-error { color: #b32d2e; }
.twshop-returns-status {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: color-mix(in srgb, var(--theme-palette-color-1, #2271b1) 12%, transparent);
    color: var(--theme-palette-color-1, #2271b1);
}
.twshop-returns-status--rejected,
.twshop-returns-status--cancelled { background: rgba(0, 0, 0, .06); color: inherit; opacity: .75; }
.twshop-returns-instructions { margin: 16px 0; padding: 14px 16px; border: 2px solid var(--theme-border-color, #e9ebec); }
.twshop-returns-photos a { margin-right: 10px; }
.twshop-returns-order-block { margin-top: 30px; }