/**
 * OSSLAB Unit Manager - Frontend CSS
 * Version: 1.0.1
 */

/* ========================================
   4.7 Desktop Vertical Gallery Layout
   桌面版垂直縮圖列（類似 Amazon 商品頁）
   支援: 標準 WooCommerce Gallery + woo-variation-gallery
   ======================================== */

/* 桌面版：兩欄式佈局 */
@media (min-width: 768px) {

    /* ---- 標準 WooCommerce Gallery ---- */
    .woocommerce-product-gallery {
        display: flex;
        flex-direction: row;
    }

    .woocommerce-product-gallery .flex-control-nav {
        order: -1;
        display: flex;
        flex-direction: column;
        width: 80px;
        min-width: 80px;
        margin-right: 15px;
        margin-top: 0;
    }

    .woocommerce-product-gallery .flex-control-nav li {
        margin-bottom: 10px;
        margin-right: 0;
        width: 100%;
    }

    .woocommerce-product-gallery .flex-control-nav li img {
        width: 100%;
        height: auto;
        border: 2px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        transition: border-color 0.2s ease;
    }

    .woocommerce-product-gallery .flex-control-nav li img:hover {
        border-color: #0073aa;
    }

    .woocommerce-product-gallery .flex-control-nav li img.flex-active {
        border-color: #0073aa;
    }

    .woocommerce-product-gallery__wrapper {
        flex: 1;
        max-width: calc(100% - 95px);
    }

    /* ---- woo-variation-gallery 外掛：縮圖在主圖下方 ---- */

    /* Container 變成 flex column，讓主圖在上、縮圖在下 */
    .woo-variation-gallery-wrapper .woo-variation-gallery-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 主圖滑塊區域 - 固定尺寸 686x775 */
    .woo-variation-gallery-wrapper .woo-variation-gallery-slider-wrapper {
        order: 0 !important;
        width: 686px !important;
        height: 775px !important;
        max-width: 100% !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* 主圖 Slider 尺寸：686x775px */
    .woo-variation-gallery-slider.slick-slider {
        width: 686px !important;
        height: 775px !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .woo-variation-gallery-slider .slick-list {
        width: 686px !important;
        height: 775px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .woo-variation-gallery-slider .slick-track {
        height: 775px !important;
    }

    .woo-variation-gallery-slider .slick-slide {
        width: 686px !important;
        height: 775px !important;
    }

    .woo-variation-gallery-wrapper .wvg-single-gallery-image-container,
    .woo-variation-gallery-wrapper .wvg-gallery-image {
        width: 686px !important;
        height: 775px !important;
    }

    .woo-variation-gallery-wrapper .woo-variation-gallery-slider img,
    .woo-variation-gallery-wrapper .wvg-single-gallery-image-container img {
        width: 686px !important;
        height: 775px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    /* Pagination（左右箭頭）- 浮在首圖上方 */
    .woo-variation-gallery-slider .slick-arrow.wvg-slider-prev-arrow,
    .woo-variation-gallery-slider .slick-arrow.wvg-slider-next-arrow {
        position: absolute !important;
        bottom: 40px !important;
        top: auto !important;
        z-index: 100 !important;
        background: rgba(255,255,255,0.95) !important;
        border-radius: 8px !important;
        width: 46px !important;
        height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
        color: #707070 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 箭頭圖示置中對齊 */
    .woo-variation-gallery-slider .slick-arrow.wvg-slider-prev-arrow,
    .woo-variation-gallery-slider .slick-arrow.wvg-slider-next-arrow {
        text-align: center !important;
        line-height: 46px !important;
    }

    .woo-variation-gallery-slider .slick-arrow.wvg-slider-prev-arrow::before,
    .woo-variation-gallery-slider .slick-arrow.wvg-slider-next-arrow::before {
        font-size: 24px !important;
        line-height: 46px !important;
        color: #707070 !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    .woo-variation-gallery-slider .slick-arrow:hover {
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    }

    /* 左箭頭位置：距左 16px */
    .woo-variation-gallery-slider .slick-arrow.wvg-slider-prev-arrow {
        left: 16px !important;
        right: auto !important;
    }

    /* 右箭頭位置：距右 16px (686 - 46 - 16 = 624) */
    .woo-variation-gallery-slider .slick-arrow.wvg-slider-next-arrow {
        right: 16px !important;
        left: auto !important;
    }

    /* 縮圖包裝區域：移到下方，與主圖左側對齊 */
    .woo-variation-gallery-wrapper .woo-variation-gallery-thumbnail-wrapper {
        order: 1 !important;
        width: 686px !important;
        max-width: 100% !important;
        margin: 24px 0 0 0 !important;
        padding: 0 !important;
    }

    /* 縮圖滑塊：水平排列 */
    .woo-variation-gallery-wrapper .woo-variation-gallery-thumbnail-slider {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: flex-start !important;
    }

    /* 縮圖項目 */
    .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image {
        width: 120px !important;
        height: 120px !important;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }

    /* 縮圖圖片 - 置中偏下裁切（產品通常在圖片下方） */
    .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 70% !important;
        border: 2px solid transparent;
        border-radius: 4px;
        cursor: pointer;
        transition: border-color 0.2s ease;
    }

    /* 縮圖 hover 效果 */
    .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image:hover img {
        border-color: #0073aa;
    }

    /* 當前選中的縮圖 */
    .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image.current-thumbnail img {
        border-color: #0073aa;
    }

    /* ---- 說明欄位區塊（圖庫下方）---- */
    .wum-info-blocks {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 686px;
        max-width: 100%;
    }

    .wum-info-block {
        width: 686px;
        height: 88px;
        max-width: 100%;
        background-color: #E7F3FF;
        border-radius: 10px;
        display: flex;
        align-items: center;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .wum-info-block-icon {
        width: 60px;
        height: 60px;
        flex-shrink: 0;
        margin-right: 16px;
        margin-left: 1em;
    }

    .wum-info-block-icon img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    .wum-info-block-text {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        line-height: 1.3;
    }
}

/* ========================================
   商品內容區塊（Package Contents）
   可重複使用元件，內容動態載入
   ======================================== */

.wum-package-contents {
    margin-top: 24px;
    margin-bottom: 16px;
    padding: 20px 24px;
    background-color: #EFEEEE;
    border-radius: 10px;
    box-sizing: border-box;
}

.wum-package-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.4;
}

.wum-package-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.wum-package-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 8px 0;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    line-height: 1.4;
    white-space: nowrap;
}

/* Divider between items */
.wum-package-item:not(:last-child) {
    border-right: 1px solid rgba(0,0,0,0.08);
    padding-right: 16px;
    margin-right: 16px;
}

.wum-package-item-icon {
    font-size: 18px;
    line-height: 1;
}

.wum-package-item-text {
    font-size: 15px;
}

/* 手機版響應式 */
@media (max-width: 767px) {
    .wum-package-contents {
        padding: 16px 20px;
        margin-top: 16px;
    }

    .wum-package-title {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .wum-package-items {
        flex-wrap: wrap;
        gap: 8px 0;
    }

    .wum-package-item {
        font-size: 14px;
        padding: 6px 12px 6px 0;
    }

    .wum-package-item:not(:last-child) {
        padding-right: 12px;
        margin-right: 12px;
    }

    .wum-package-item-icon {
        font-size: 16px;
    }
}

/* ========================================
   4.5 Rich List Group（Unit 選擇列表）
   ======================================== */

/* Unit 列表容器 - 限高 + 垂直滾動 Slide Bar */
.wum-unit-list {
    margin: 16px 0 8px;
    margin-left: 4px;             /* Scroll bar margin-left */
    max-height: 400px;            /* 約等於一個展開的 Unit Card 高度 */
    overflow-y: auto;
    border: none;
    padding: 4px;                 /* Unit card container padding */
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 優雅的捲軸樣式 - 細灰色整合設計 */
.wum-unit-list::-webkit-scrollbar {
    width: 6px;
}

.wum-unit-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.wum-unit-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.wum-unit-list::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Firefox 捲軸樣式 */
.wum-unit-list {
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
}

/* 單一 Unit 項目 - Compact Card */
.wum-unit-item {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    margin-bottom: 0;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

/* Unit Header（名稱 + 價格）*/
.wum-unit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* 手機版保留 margin-bottom */
@media (max-width: 767px) {
    .wum-unit-item {
        margin-bottom: 8px;
    }
    .wum-unit-item:last-child {
        margin-bottom: 0;
    }
}

.wum-unit-item:hover {
    border-color: #0073aa;
    background: #f8f9fa;
}

/* 選中狀態 - 更明顯的邊框 */
.wum-unit-item.selected {
    border-color: #0073aa;
    border-width: 2px;
    background: #e7f3ff;
    box-shadow: 0 0 0 1px #0073aa;
}

/* 左側資訊 - 兩行式佈局 */
.wum-unit-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* 允許文字截斷 */
}

/* Line 1: 主要備註 - 粗體、深色、較大字體 */
.wum-unit-primary {
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Line 2: 次要資訊 - 電池摘要等 */
.wum-unit-secondary {
    font-size: 0.8rem;
    font-weight: 400;
    color: #888;
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 保留舊 class 相容性（可移除） */
.wum-unit-notes {
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
}

.wum-unit-sn {
    font-size: 0.8rem;
    color: #888;
}

/* 右側價格與勾選 */
.wum-unit-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wum-unit-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0073aa;
}

/* 勾選圖示 */
.wum-unit-check {
    width: 24px;
    height: 24px;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.wum-unit-item.selected .wum-unit-check {
    border-color: #0073aa;
    background: #0073aa;
    color: #fff;
}

.wum-unit-check::after {
    content: '';
}

.wum-unit-item.selected .wum-unit-check::after {
    content: '\2713';
    font-size: 14px;
}

/* 隱藏 radio input */
.wum-unit-item input[type="radio"] {
    display: none;
}

/* ========================================
   4.6 WUM Info Bar（Unit 詳細資訊列）
   ======================================== */

/* 外框：淺灰背景，圓角，左側藍色強調線 */
.wum-info-bar {
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-left: 4px solid #0073aa;
    border-radius: 4px;
    padding: 0;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* SKU Confirmation Header - 機台識別標頭 */
.wum-sku-header {
    background-color: #e7f3ff;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: #333;
    border-bottom: 1px solid #d0e3f7;
    border-radius: 4px 4px 0 0;
}

.wum-sku-header strong {
    color: #0073aa;
    font-weight: 700;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.5px;
}

/* Info Bar 內容區（電池/外觀/保固） */
.wum-info-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
}

/* 每一個項目區塊 */
.wum-info-item {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 10px;
}

/* 中間加分隔線 (除了最後一個) */
.wum-info-item:not(:last-child) {
    border-right: 1px solid #ddd;
}

/* Icon 樣式 */
.wum-icon {
    font-size: 1.2em;
    margin-right: 10px;
    opacity: 0.8;
}

/* 文字排版 */
.wum-info-content {
    display: flex;
    flex-direction: column;
}

.wum-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.wum-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
}

/* 手機版響應式設計：變成垂直堆疊 */
@media (max-width: 600px) {
    .wum-info-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .wum-info-item {
        width: 100%;
        border-right: none !important;
        border-bottom: 1px solid #eee;
        padding: 8px 0;
    }

    .wum-info-item:last-child {
        border-bottom: none;
    }
}

/* ========================================
   數量選擇器隱藏（Unit 商品固定為 1）
   ======================================== */

/* 使用 body class 在頁面載入時就隱藏數量選擇器 */
body.wum-product-has-units form.cart .quantity {
    display: none !important;
}

/* 保留原本的 class 選擇器作為備用 */
.wum-has-units .quantity {
    display: none !important;
}

/* ========================================
   無可售 Unit 提示
   ======================================== */

.wum-no-units-message {
    padding: 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    text-align: center;
    margin: 15px 0;
}

/* ========================================
   缺貨按鈕樣式
   ======================================== */

.single_add_to_cart_button.wum-out-of-stock {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* ========================================
   Swatch 預先驗證樣式
   無可售 Unit 的屬性選項視覺回饋
   ======================================== */

/* woo-variation-swatches 外掛的 Swatch */
.variable-item.wum-swatch-unavail {
    opacity: 0.5;
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
}

/* 標準 WooCommerce Select 的 option（如有需要）*/
select option.wum-swatch-unavail {
    color: #999;
}

/* ========================================
   階層式選擇：先選 Hardware 才顯示 Grade
   ======================================== */

/* 初始狀態：隱藏第二層屬性（貨況分級） */
body.wum-product-has-units .variations tr:nth-child(2) {
    display: none;
}

/* 當有選擇硬體規格時，顯示貨況分級 */
body.wum-product-has-units.wum-hardware-selected .variations tr:nth-child(2) {
    display: table-row;
}

/* 保留主賣場價格範圍顯示，只隱藏 variation 選擇後的單一價格 */
body.wum-product-has-units .woocommerce-variation-price {
    display: none !important;
}

/* ========================================
   Swatch 樣式調整（根據設計稿）
   ======================================== */

/* 隱藏 Swatch hover 提示文字（tooltip） */
body.wum-product-has-units .variable-item[title] {
    pointer-events: auto;
}
body.wum-product-has-units .variable-item::after,
body.wum-product-has-units .variable-item::before,
body.wum-product-has-units .variable-item .variable-item-tooltip,
body.wum-product-has-units .wvs-tooltip,
body.wum-product-has-units .variable-item-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 硬體規格、貨況分級標題 - 粗體顯示 */
body.wum-product-has-units .variations th.label label {
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #333 !important;
}

/* 隱藏 swatch 選中值顯示（: undefined） */
body.wum-product-has-units .woo-selected-variation-item-name {
    display: none !important;
}

/* 隱藏重複的屬性標籤 */
body.wum-product-has-units .woocommerce-product-attributes-item__label {
    display: none !important;
}
body.wum-product-has-units .woocommerce-product-attributes-item__value {
    display: none !important;
}

/* 隱藏 td.value 的 ::before 偽元素（重複的標題） */
body.wum-product-has-units .variations td.value::before {
    display: none !important;
    content: none !important;
}

/* Swatch 按鈕樣式 - font-size:16px, padding:8px */
body.wum-product-has-units .variable-item {
    font-size: 16px !important;
    padding: 8px 12px !important;
    min-width: auto !important;
    border-radius: 6px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
}

body.wum-product-has-units .variable-item:hover {
    border-color: #0073aa !important;
    background: #f8f9fa !important;
}

body.wum-product-has-units .variable-item.selected {
    border-color: #0073aa !important;
    background: #e7f3ff !important;
    box-shadow: 0 0 0 1px #0073aa !important;
}

/* Swatch 容器間距 */
body.wum-product-has-units .variable-items-wrapper {
    gap: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 顯示標籤名稱（硬體規格：、貨況分級：）*/
body.wum-product-has-units .variations tr {
    display: block !important;
    margin-bottom: 16px !important;
}

body.wum-product-has-units .variations td.value {
    display: block !important;
    width: 100% !important;
}

/* 標籤樣式 */
body.wum-product-has-units .variations td.value::before {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
}

body.wum-product-has-units .variations tr:first-child td.value::before {
    content: "硬體規格：";
}

body.wum-product-has-units .variations tr:nth-child(2) td.value::before {
    content: "貨況分級：";
}

/* ========================================
   隱藏 SKU Header + Info Bar（電池/外觀/保固）
   ======================================== */

#wum-unit-details-bar {
    display: none !important;
}

/* ========================================
   Mobile UX 優化：資料優先佈局
   Data-First Mobile Layout
   ======================================== */

@media (max-width: 767px) {

    /* ---- 1. 手機版佈局：標題 → 規格 → Unit → 圖片 → 加購物車 ---- */

    /* Nectar 主題容器 */
    .nectar-prod-wrap {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 圖庫區塊：order 50（在 summary 內的元素之間） */
    .nectar-prod-wrap > .col.single-product-main-image,
    .nectar-prod-wrap > .span_5,
    .single-product-main-image {
        order: 50 !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 摘要區在上面 */
    .nectar-prod-wrap > .summary,
    .summary.entry-summary {
        order: 1 !important;
        width: 100% !important;
    }

    /* 通用 WooCommerce 結構 */
    .woocommerce div.product {
        display: flex !important;
        flex-direction: column !important;
    }

    .woocommerce div.product div.images,
    .woocommerce-product-gallery,
    .woo-variation-gallery-wrapper,
    .product-gallery {
        order: 50 !important;
        margin: 16px 0 !important;
    }

    .woocommerce div.product div.summary,
    .product-info {
        order: 1 !important;
    }

    /* Summary 內部元素排序 */
    .summary.entry-summary {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 標題區 */
    .summary .product_title,
    .summary > h1,
    .summary > h2 {
        order: 1 !important;
    }

    /* 價格 */
    .summary > .price,
    .summary .woocommerce-variation-price {
        order: 2 !important;
    }

    /* Variation 表單（包含 swatch + unit list） */
    .summary form.variations_form {
        order: 3 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Add to Cart 按鈕放最後 */
    .summary .single_add_to_cart_button,
    .summary form.cart .button {
        order: 100 !important;
    }

    /* ---- 2. 隱藏 variation 標籤 ---- */
    .variations th.label,
    .variations td.label,
    .variations label {
        display: none !important;
    }

    /* 緊縮 variation 行間距 */
    .variations tr {
        margin-bottom: 8px;
    }

    .variations td {
        padding: 4px 0;
    }

    /* Swatch wrapper 全寬 */
    .variations td.value {
        width: 100%;
        display: block;
    }

    /* ---- 3. Unit Card 精簡顯示 ---- */
    .wum-unit-item {
        padding: 10px 12px;
    }

    .wum-unit-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }

    .wum-unit-info {
        flex: 1;
        min-width: 0;
    }

    .wum-unit-primary {
        font-size: 0.9rem;
        font-weight: 600;
        color: #222;
        white-space: normal;
        line-height: 1.3;
    }

    .wum-unit-secondary {
        font-size: 0.75rem;
        color: #666;
        margin-top: 2px;
    }

    .wum-unit-right {
        flex-shrink: 0;
        margin-left: 12px;
    }

    .wum-unit-price {
        font-size: 1rem;
        font-weight: 700;
        color: #009FE3;
    }

    /* ---- 4. 選中狀態強調 ---- */
    .wum-unit-item.selected {
        border-color: #009FE3;
        background: linear-gradient(to bottom, #e7f6fd, #fff);
        box-shadow: 0 0 0 2px #009FE3;
    }

    .wum-unit-item.selected .wum-unit-check {
        border-color: #009FE3;
        background: #009FE3;
    }

    /* ---- 5. Add to Cart 按鈕 OSSLab Blue ---- */
    .single_add_to_cart_button {
        background-color: #009FE3 !important;
        border-color: #009FE3 !important;
        color: #fff !important;
        font-weight: 600;
        padding: 14px 24px;
        font-size: 1rem;
        border-radius: 6px;
        width: 100%;
        margin-top: 12px;
    }

    .single_add_to_cart_button:hover {
        background-color: #0088c7 !important;
        border-color: #0088c7 !important;
    }

    /* ---- 6. Info Bar 緊湊模式 ---- */
    .wum-info-bar {
        border-left-color: #009FE3;
    }

    .wum-info-bar-content {
        flex-direction: column;
        padding: 0;
    }

    .wum-info-item {
        padding: 8px 12px;
        border-right: none !important;
        border-bottom: 1px solid #eee;
    }

    .wum-info-item:last-child {
        border-bottom: none;
    }

    .wum-sku-header {
        background-color: #e7f6fd;
        border-bottom-color: #b8e4f7;
    }

    .wum-sku-header strong {
        color: #009FE3;
    }

    /* ---- 7. Swatch 選中狀態 Blue ---- */
    .variable-item.selected,
    .variable-item:hover {
        border-color: #009FE3 !important;
        box-shadow: 0 0 0 1px #009FE3;
    }

    /* ---- 8. 底部圖庫樣式 ---- */
    .woocommerce div.product div.images {
        position: relative;
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid #eee;
    }

    /* 圖庫標題提示 */
    .woocommerce div.product div.images::before {
        content: '商品圖片';
        display: block;
        font-size: 0.85rem;
        color: #888;
        margin-bottom: 12px;
        font-weight: 500;
    }

    /* 縮圖條：水平滾動 */
    .woo-variation-gallery-wrapper .woo-variation-gallery-thumbnail-wrapper {
        order: 1 !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-top: 8px !important;
        overflow-x: auto;
        white-space: nowrap;
    }

    .woo-variation-gallery-wrapper .woo-variation-gallery-thumbnail-slider {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px;
    }

    .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image {
        width: 50px !important;
        min-width: 50px !important;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
    }

    .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image img {
        border-radius: 4px;
        border: 2px solid transparent;
    }

    .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image.current-thumbnail img {
        border-color: #009FE3;
    }

    /* ---- 9. 價格區強調 ---- */
    .woocommerce-variation-price .price,
    .summary .price {
        color: #009FE3 !important;
        font-size: 1.4rem !important;
        font-weight: 700 !important;
    }

    /* ---- 10. 緊湊間距 ---- */
    .woocommerce div.product div.summary {
        padding: 0 12px;
    }

    .wum-unit-list {
        margin: 12px 0;
        padding: 8px;
    }

    .wum-unit-selection {
        margin: 8px 0;
    }

    /* 價格範圍隱藏（因為會在 Unit 卡片顯示） */
    .summary > .price {
        display: none;
    }
}

/* ========================================
   5. Unit 卡片 Accordion 效果
   預設展開第一個，點選其他收合
   限高 + 垂直滾動 Slide Bar
   ======================================== */

/* Unit 卡片 - Accordion 樣式 */
.wum-unit-item {
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
    flex-shrink: 0;
    padding: 0 !important;
}

/* Unit Header（三欄摘要：電池、外觀、保固）*/
.wum-unit-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    background: #fafafa !important;
    transition: background 0.2s ease !important;
}

.wum-unit-item:hover .wum-unit-header {
    background: #f0f0f0 !important;
}

.wum-unit-item.selected .wum-unit-header {
    background: #e7f3ff !important;
}

/* Unit 摘要區（單行）*/
.wum-unit-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.wum-unit-stat {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* Unit 右側（toggle + check）*/
.wum-unit-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Toggle 箭頭 */
.wum-unit-toggle {
    font-size: 12px;
    color: #666;
    transition: transform 0.3s ease;
}

.wum-unit-toggle::after {
    content: '▼';
}

.wum-unit-item.expanded .wum-unit-toggle::after {
    content: '▲';
}

/* Unit 勾選圖示 */
.wum-unit-check {
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #ccc !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wum-unit-item.selected .wum-unit-check {
    border-color: #0073aa !important;
    background: #0073aa !important;
}

.wum-unit-item.selected .wum-unit-check::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

/* Unit 詳細內容（展開區）- 1秒動畫效果 */
.wum-unit-details {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    background: #fff;
    transition: max-height 1s ease-in-out, padding 0.5s ease-in-out;
}

.wum-unit-item.expanded .wum-unit-details {
    max-height: 400px;
    padding: 12px 16px 14px;
}

/* 展開區內的價格樣式（位於詳細規格最下方） */
.wum-unit-details .wum-unit-price {
    font-size: 24px;
    font-weight: 700;
    color: #00AAFF;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    font-family: "Noto Sans TC", sans-serif;
}

/* 詳細規格列表 - 緊湊版 */
.wum-unit-specs {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wum-unit-spec-row {
    display: flex;
    padding: 2px 0;
}

.wum-unit-spec-key {
    flex: 0 0 90px;
    font-size: 16px;
    font-weight: 500;
    color: #888;
}

.wum-unit-spec-value {
    flex: 1;
    font-size: 16px;
    color: #444;
    white-space: normal;
    word-break: break-word;
    line-height: 1.5;
}

/* 隱藏舊的 Short Description 區塊 */
#wum-unit-short-desc {
    display: none !important;
}

/* Full Specs List (key: value 格式) */
.wum-specs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wum-spec-row {
    display: flex;
    padding: 4px 0;
    border-bottom: 1px solid #f5f5f5;
}

.wum-spec-row:last-child {
    border-bottom: none;
}

.wum-spec-key {
    flex: 0 0 100px;
    font-weight: 500;
    color: #666;
    font-size: 0.85rem;
}

.wum-spec-value {
    flex: 1;
    color: #333;
    font-size: 0.85rem;
}

/* ========================================
   5.1 SKU 確認區塊（購物車上方，兩欄：電池循環 + 保固天數）
   ======================================== */

/* 隱藏 SKU 確認區塊 */
.wum-sku-confirm {
    display: none !important;
}

.wum-sku-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.wum-sku-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

.wum-sku-icon {
    font-size: 1.4em;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 50%;
}

.wum-sku-text {
    display: flex;
    flex-direction: column;
}

.wum-sku-label {
    font-size: 0.75rem;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.wum-sku-value {
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
}

/* 手機版響應式 */
@media (max-width: 767px) {
    .wum-sku-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .wum-sku-item {
        padding: 10px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }

    .wum-sku-icon {
        font-size: 1.2em;
        width: 36px;
        height: 36px;
    }

    .wum-sku-value {
        font-size: 0.9rem;
    }
}

/* 舊樣式保留（相容性）*/
.wum-spec-row {
    display: flex;
    padding: 4px 0;
    border-bottom: 1px solid #f5f5f5;
}

.wum-spec-row:last-child {
    border-bottom: none;
}

@media (max-width: 767px) {
    .wum-spec-row {
        flex-direction: column;
        gap: 2px;
    }

    .wum-spec-key {
        flex: none;
        font-size: 0.75rem;
        color: #888;
    }

    .wum-spec-value {
        font-size: 0.8rem;
    }
}

/* ========================================
   6. Trust & Payment 區塊
   ======================================== */

.wum-trust-section {
    margin: 20px 0;
    padding: 16px;
    background: #f8fdf8;
    border: 1px solid #d4edda;
    border-radius: 8px;
}

.wum-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.wum-trust-item:not(:last-child) {
    border-bottom: 1px solid #e8f5e9;
}

.wum-trust-icon {
    font-size: 1.2em;
    width: 28px;
    text-align: center;
}

.wum-trust-text {
    font-size: 0.9rem;
    color: #2e7d32;
    font-weight: 500;
}

/* ========================================
   7. In-the-Box 區塊
   ======================================== */

.wum-inbox-section {
    margin: 20px 0;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.wum-inbox-header {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.wum-inbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.wum-inbox-list li {
    font-size: 0.85rem;
    color: #555;
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
}

.wum-inbox-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4caf50;
    font-weight: bold;
}

@media (max-width: 767px) {
    .wum-inbox-list {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   8. Mobile Sticky CTA
   ======================================== */

.wum-sticky-cta {
    display: none;
}

@media (max-width: 767px) {
    .wum-sticky-cta {
        display: none; /* 預設隱藏，JS 控制顯示 */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 12px 16px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 9999;
        border-top: 1px solid #eee;
    }

    .wum-sticky-cta.visible {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .wum-sticky-price {
        font-size: 1.2rem;
        font-weight: 700;
        color: #009FE3;
    }

    .wum-sticky-btn {
        flex: 1;
        max-width: 200px;
        padding: 14px 24px;
        background: #009FE3;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        text-align: center;
    }

    .wum-sticky-btn:hover {
        background: #0088c7;
    }

    .wum-sticky-btn.disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    /* 當 Sticky CTA 顯示時，給 body 加底部 padding */
    body.wum-sticky-active {
        padding-bottom: 70px;
    }
}