.woocommerce-page table.cart td.actions .input-text{
	width: 150px !important;
}

/* =================================
   黑金奢華版 - 徽章牆樣式
   ================================= */

/* --- 整體卡片容器 (模擬實體黑卡) --- */
.ninety-badge-wall {
    /* 使用深灰到黑色的漸層，比純黑更有質感 */
    background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%);
    padding: 35px;
    border-radius: 20px; /* 圓角大一點 */
    
    /* 微微的深色邊框 */
    border: 1px solid #333;
    
    /* 深邃的陰影，讓卡片浮起來 */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    
    margin-bottom: 40px;
    position: relative;
    overflow: hidden; /* 確保光暈不跑出去 */
}

/* (選用) 在卡片右上角加一個裝飾光澤，增加高級感 */
.ninety-badge-wall::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 150px; height: 150px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    filter: blur(40px);
}

/* --- 標題設定 --- */
.ninety-badge-wall h3 {
    margin-bottom: 30px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important; /* 強制白色文字 */
    letter-spacing: 1px; /* 字距拉開一點點 */
    border-bottom: 1px solid #444; /* 分隔線改深灰色 */
    padding-bottom: 15px;
}

/* --- 徽章網格排列 --- */
.ninety-badge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: flex-start;
}

/* --- 單個徽章容器 --- */
.ninety-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 更有彈性的動畫 */
}

.ninety-badge-item img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    margin-bottom: 12px;
    border: 2px solid transparent; /* 預留邊框空間 */
}

/* --- 徽章下方的文字 --- */
.ninety-badge-item .badge-name {
    font-size: 13px;
    margin-top: 5px;
    transition: color 0.3s;
}

/* =================================
   狀態樣式：未解鎖 vs 已解鎖
   ================================= */

/* 1. 未解鎖 (Locked) */
.ninety-badge-item.inactive img {
    filter: grayscale(100%);
    opacity: 0.3; /* 在黑底上 0.3 比較剛好，若太暗可改 0.4 */
    transform: scale(0.95);
}
.ninety-badge-item.inactive .badge-name {
    color: #666; /* 深灰色文字，低調 */
}

/* 2. 已解鎖 (Active) - 重點效果！ */
.ninety-badge-item.active img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.15); /* 放大 */
    
    /* 金色發光邊框 */
    border: 2px solid #D4AF37; 
    
    /* 強烈的金色光暈，在黑底上會很亮 */
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6); 
}

.ninety-badge-item.active .badge-name {
    color: #fff; /* 白色文字 */
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255,255,255,0.3); /* 文字微微發光 */
}


/* =================================
   手機版專用微調 (標題單行 + 5個一排)
   ================================= */
@media (max-width: 767px) {
    
    /* 1. 針對標題：縮小字體 + 強制不換行 */
    .ninety-badge-wall h3 {
        font-size: 15px !important; /* 字體縮小 */
        white-space: nowrap !important; /* 禁止換行 */
        overflow: hidden; /* 預防萬一太長溢出 */
        text-overflow: ellipsis; 
        margin-bottom: 20px !important;
        padding-bottom: 10px !important;
    }

    /* 2. 針對容器：減少內距，爭取空間 */
    .ninety-badge-wall {
        padding: 15px !important; /* 邊緣不用留那麼多空白 */
    }

    /* 3. 針對網格：間距縮到最小 */
    .ninety-badge-grid {
        gap: 5px !important; /* 徽章之間的縫隙縮小 */
        justify-content: space-between !important; /* 平均分散 */
    }

    /* 4. 針對單個徽章：強制設定寬度為 1/5 (約 19%) */
    .ninety-badge-item {
        /* 100% 除以 5 大約是 20%，扣掉縫隙設 18-19% */
        width: 19% !important; 
        margin-bottom: 5px !important;
    }
    
    /* 5. 針對徽章文字：因為圖變小，字也要變超小才不會跑版 */
    .ninety-badge-item .badge-name {
        font-size: 10px !important; /* 最小清晰字體 */
        transform: scale(0.9); /* 如果還是太大，再稍微縮放 */
        white-space: nowrap; /* 國名不准換行 */
    }
}
/* =================================
   自動排序設定：讓亮燈的排在最前面
   ================================= */

/* 1. 設定亮燈 (Active) 的徽章：優先權 1 */
.ninety-badge-item.active {
    order: 1; 
}

/* 2. 設定未亮燈 (Inactive) 的徽章：優先權 2 */
.ninety-badge-item.inactive {
    order: 2; 
}



/* 強制禁止手機版左右滑動 */
html, body {
    overflow-x: hidden !important;
    position: relative;
    max-width: 100%;
}

/* 針對 Elementor 的額外保險 */
.elementor-section-wrap {
    overflow-x: hidden !important;
}


/* ==============================================
   1. 修復 WooCommerce 購物車「移除按鈕 (紅色叉叉)」
   ============================================== */
.woocommerce a.remove, 
.woocommerce-cart .product-remove a.remove {
    background-image: none !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-decoration: none !important;
    border: 1px solid #7d433f !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 20px !important;
    color: #7d433f !important;
}

.woocommerce a.remove::before {
    content: "\00d7" !important; 
    font-size: 20px !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
}

.woocommerce a.remove:hover {
    background-color: #7d433f !important;
    color: #ffffff !important;
}

/* ==============================================
   2. 終極解決方案：保護色戰術 ＋ Flex 強制置中
   ============================================== */

/* 第一步：把那個頑固的格子變成彈性盒子，讓內容強制置中 */
.woocommerce-cart td.product-thumbnail {
    display: flex !important;           /* 開啟 Flex 排版 */
    justify-content: center !important; /* 水平置中 */
    align-items: center !important;     /* 垂直置中 */
    border: none !important;
    height: 100% !important;            /* 確保高度充滿 */
    min-height: 100px !important;       /* 給一點最小高度，避免太扁 */
}

/* 第二步：針對連結卡片，填上你的「灰色保護色」 */
.woocommerce-cart td.product-thumbnail a {
    /* 🔴 請將下方的 #f5f5f5 改成你網站背景的正確灰色色號 🔴 */
    background-color: #eeeeee !important; 
    
    display: flex !important;           /* 讓裡面的圖片也置中 */
    justify-content: center !important;
    align-items: center !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;             /* 寬度自動，不要撐滿 */
}

/* 第三步：控制圖片大小 */
.woocommerce-cart td.product-thumbnail img {
    max-width: 90px !important;        /* 限制圖片最大寬度 */
    height: auto !important;
    object-fit: contain !important;     /* 保持圖片比例 */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}