/* ==========================================================================
   EZP cloudy_3 — 視覺重新設計覆蓋層 (v3 20260419)
   原則：保留 cloudy_2 所有 DOM 結構與功能（詢價車、主導航、utility bar、
         所有 lbi），僅做視覺加強 — 新色/圓角/陰影/字體/動效。
         絕不使用 display:none 隱藏既有元素。
   ========================================================================== */

@import url("tokens.css");

/* ── 全站字體升級 ── */
body {
  font-family: var(--font-sans) !important;
  color: var(--c-slate-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 促銷提示橫列（保留原 DOM，重上色） ── */
.site-promo-banner {
  background: var(--c-promo-bg) !important;
  color: #fff !important;
  box-shadow: var(--sh-sm);
}
.site-promo-banner a { color: #fff !important; font-weight: var(--fw-semibold); }
.site-promo-banner .promo-highlight { color: #FFE066 !important; font-weight: var(--fw-bold); }

/* ── 頂部 utility bar 保留但升級品牌色 ── */
.bg-ezp-dark-blue {
  background: var(--c-primary-700) !important;
}

/* ── Logo 加陰影與過渡 ── */
.site-logo img, .site-logo-mobile img {
  transition: transform var(--t-base) var(--ease-out);
}
.site-logo:hover img { transform: scale(1.05); }

/* ── 搜尋列升級（原結構保留） ── */
.bg-white.shadow-sm input[type="search"],
.bg-white.shadow-sm input[type="text"],
#desktop-search-form input[type="text"] {
  border-radius: var(--r-full) !important;
  border-color: var(--c-slate-200) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
#desktop-search-form input[type="text"]:focus,
.bg-white.shadow-sm input[type="search"]:focus {
  border-color: var(--c-primary-500) !important;
  box-shadow: 0 0 0 3px rgba(43, 92, 158, 0.15) !important;
}

/* ── 主導航 tabbar（保留結構，升級色系） ── */
#mainNavbar .nav-link,
.navbar-nav .nav-link {
  font-weight: var(--fw-medium) !important;
  transition: color var(--t-fast) var(--ease-out);
}
#mainNavbar .nav-link.active,
#mainNavbar .nav-link[aria-current="page"] {
  color: var(--c-primary-500) !important;
  border-bottom: 3px solid var(--c-primary-500) !important;
}
#mainNavbar .nav-link.bg-danger,
#mainNavbar .btn-danger {
  background: var(--c-accent-500) !important;
  border: 0 !important;
  box-shadow: var(--sh-sm);
}

/* ── 詢價車 / 購物車 badge ── */
.badge-quote, .badge {
  font-family: var(--font-num) !important;
  font-weight: var(--fw-bold) !important;
}
.position-relative .badge.rounded-pill {
  box-shadow: 0 0 0 2px #fff;
}

/* ── 按鈕現代化 ── */
.btn {
  border-radius: var(--r-md) !important;
  font-weight: var(--fw-semibold) !important;
  transition: all var(--t-base) var(--ease-out) !important;
  letter-spacing: 0.01em;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--c-primary-500) !important;
  border-color: var(--c-primary-500) !important;
  box-shadow: 0 2px 4px rgba(43, 92, 158, 0.15);
}
.btn-primary:hover {
  background: var(--c-primary-600) !important;
  border-color: var(--c-primary-600) !important;
  box-shadow: 0 4px 8px rgba(43, 92, 158, 0.25);
  transform: translateY(-1px);
}

/* btn-danger = 真正的危險/刪除動作（語意紅） */
.btn-danger {
  background: var(--c-danger) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25);
}
.btn-danger:hover {
  background: #DC2626 !important;
  box-shadow: 0 6px 12px rgba(239, 68, 68, 0.35);
  transform: translateY(-1px);
}

/* btn-cta = 主動作/促購（鮮粉紅） */
.btn-cta {
  background: var(--c-accent-500) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: var(--r-md) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 4px rgba(255, 90, 122, 0.25);
  transition: all var(--t-base) var(--ease-out) !important;
}
.btn-cta:hover {
  background: var(--c-accent-600) !important;
  color: #fff !important;
  box-shadow: 0 6px 12px rgba(255, 90, 122, 0.35);
  transform: translateY(-1px);
}
.btn-cta:active { transform: translateY(1px); }

.btn-outline-primary {
  color: var(--c-primary-500) !important;
  border-color: var(--c-primary-500) !important;
}
.btn-outline-primary:hover {
  background: var(--c-primary-500) !important;
  color: #fff !important;
}

/* ── Bootstrap 原生色 → design token 統一覆寫 ── */

/* Success 綠 — 對齊 --c-success #10B981（原 BS #198754） */
.btn-success {
  background-color: var(--c-success) !important;
  border-color: var(--c-success) !important;
  color: #fff !important;
}
.btn-success:hover,
.btn-success:focus {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}
.btn-outline-success {
  color: var(--c-success) !important;
  border-color: var(--c-success) !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: var(--c-success) !important;
  color: #fff !important;
}

/* Danger 紅 — 對齊 --c-danger #EF4444（原 BS #DC3545） */
.btn-outline-danger {
  color: var(--c-danger) !important;
  border-color: var(--c-danger) !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--c-danger) !important;
  color: #fff !important;
}

/* Warning 橘 — 對齊 --c-warning #F59E0B */
.btn-warning {
  background-color: var(--c-warning) !important;
  border-color: var(--c-warning) !important;
  color: #fff !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background-color: #D97706 !important;
  border-color: #D97706 !important;
  color: #fff !important;
}
.btn-outline-warning {
  color: var(--c-warning) !important;
  border-color: var(--c-warning) !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background-color: var(--c-warning) !important;
  color: #fff !important;
}

/* Info 青藍 — 對齊 --c-info #0EA5E9 */
.btn-info {
  background-color: var(--c-info) !important;
  border-color: var(--c-info) !important;
  color: #fff !important;
}
.btn-outline-info {
  color: var(--c-info) !important;
  border-color: var(--c-info) !important;
}

/* btn-outline-secondary 靜止狀態文字夠深（WCAG AA） */
.btn-outline-secondary {
  color: var(--c-slate-700) !important;
  border-color: var(--c-slate-300) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--c-slate-100) !important;
  border-color: var(--c-slate-500) !important;
  color: var(--c-slate-900) !important;
}

/* ==========================================================================
   商品卡 Badge 標準系統（pcard-badge）
   用於所有 recommend / cat_goods / bought_goods / goods_related / search 等
   ========================================================================== */
.pcard-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  color: #fff !important;
}
.pcard-badge i { font-size: 0.72rem !important; }

/* 熱銷 / HOT — 鮮粉（統一 recommend_hot 的 bg-warning 與 promotion_best_sellers 的 bg-danger） */
.pcard-badge--hot { background: var(--c-accent-500); }

/* 新品 / NEW — 綠 */
.pcard-badge--new { background: var(--c-success); }

/* 精選 / BEST — 金/橘警示 */
.pcard-badge--best { background: var(--c-warning); }

/* 特價 / SALE — 真紅 */
.pcard-badge--sale { background: var(--c-danger); }

/* 活動折扣 — 藍（品牌色強調活動） */
.pcard-badge--event { background: var(--c-primary-500); }

/* 批發 — 青藍 info（統一：推翻 recommend_best 的 bg-success 撞色） */
.pcard-badge--batch { background: var(--c-info); }

/* 覆寫：商品卡上的 Bootstrap badge bg-* 若仍存在，對齊 token 不閃色
   （批發 bg-success → 改為 info；HOT bg-warning → 改為 accent） */
.product-card .badge.bg-warning { background-color: var(--c-warning) !important; }
.product-card .badge.bg-info { background-color: var(--c-info) !important; color: #fff !important; }
.product-card .badge.bg-success { background-color: var(--c-success) !important; }
.product-card .badge.bg-danger { background-color: var(--c-danger) !important; }

/* ──────────────────────────────────────────────────────────────────
   商品卡浮動 Badge 統一（商品圖左上/右上角 badge）
   只鎖定商品卡內的 badge（排除 rounded-pill 購物車/詢價車計數徽章、translate-middle 浮於 icon 上的徽章）
   ────────────────────────────────────────────────────────────────── */
.badge.position-absolute:not(.rounded-pill):not(.translate-middle) {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.02em;
  line-height: 1.2 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.badge.position-absolute:not(.rounded-pill):not(.translate-middle) i { font-size: 0.72rem; }

/* 商品卡 badge 顏色對齊 design token（同樣排除 pill/translate-middle） */
.badge.position-absolute:not(.rounded-pill):not(.translate-middle).bg-danger  { background-color: var(--c-danger) !important; color: #fff !important; }
.badge.position-absolute:not(.rounded-pill):not(.translate-middle).bg-warning { background-color: var(--c-warning) !important; color: #fff !important; }
.badge.position-absolute:not(.rounded-pill):not(.translate-middle).bg-success { background-color: var(--c-success) !important; color: #fff !important; }
.badge.position-absolute:not(.rounded-pill):not(.translate-middle).bg-info    { background-color: var(--c-info) !important; color: #fff !important; }
.badge.position-absolute:not(.rounded-pill):not(.translate-middle).bg-primary { background-color: var(--c-primary-500) !important; color: #fff !important; }

/* Rounded-pill 徽章（如 header 詢價車/購物車計數）也要對齊 token 色，但保留 pill 形狀 */
.badge.rounded-pill.bg-danger  { background-color: var(--c-danger) !important; }
.badge.rounded-pill.bg-warning { background-color: var(--c-warning) !important; }
.badge.rounded-pill.bg-success { background-color: var(--c-success) !important; }
.badge.rounded-pill.bg-info    { background-color: var(--c-info) !important; }
.badge.rounded-pill.bg-primary { background-color: var(--c-primary-500) !important; }

/* ── 卡片升級（商品卡、分類卡、活動卡等） ── */
.card {
  border: 0 !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm) !important;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-lg) !important;
}
.card-img-top, .card img {
  transition: transform var(--t-slow) var(--ease-out);
}
.card:hover .card-img-top,
.card:hover img.card-img-top {
  transform: scale(1.04);
}

/* ── 活動專區 / 限時活動卡片 ── */
.idx-zone-card, .zone-card {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.idx-zone-card:hover, .zone-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
}
.idx-zone-discount {
  background: var(--c-accent-500) !important;
  font-weight: var(--fw-bold);
  box-shadow: var(--sh-md);
}

/* ── 商品分類側邊欄（#footer-category 等） ── */
.content-box {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  background: #fff;
  margin-bottom: var(--sp-4);
}
.content-box-title {
  font-weight: var(--fw-bold) !important;
  color: var(--c-slate-900) !important;
  letter-spacing: -0.01em;
}
.content-box .list-group-item {
  border-color: var(--c-slate-100) !important;
  transition: background var(--t-fast) var(--ease-out);
}
.content-box .list-group-item:hover {
  background: var(--c-primary-50) !important;
  color: var(--c-primary-700) !important;
}

/* ── 商店公告 / 熱門搜尋 badge ── */
.badge.bg-light, .badge.bg-secondary {
  background: var(--c-slate-100) !important;
  color: var(--c-slate-700) !important;
  border: 1px solid var(--c-slate-200);
  font-weight: var(--fw-medium) !important;
}

/* ── 價格顯示更搶眼 ── */
.text-danger.fw-bold, .price, .shop-price {
  font-family: var(--font-num) !important;
}

/* ── 表單輸入升級 ── */
.form-control, .form-select {
  border-radius: var(--r-md) !important;
  border-color: var(--c-slate-200) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-primary-500) !important;
  box-shadow: 0 0 0 3px rgba(43, 92, 158, 0.15) !important;
}

/* ── C4 Mobile 分類頁商品卡片優化 ── */
@media (max-width: 767.98px) {
  /* 商品卡片間距：p-1 → p-2 let in a little breathing room */
  .product-grid, #show_grid_area > [class*="col-"] { padding: 0.35rem !important; }
  /* 卡片陰影更輕，Mobile 才不擠 */
  .product-grid, #show_grid_area .product-card { box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; }
  /* 商品名稱稍大更好讀 */
  .product-grid, #show_grid_area .card-title { font-size: 0.85rem !important; line-height: 1.35; min-height: 2.4em; }
  /* 主價格放大好讀 */
  .product-grid, #show_grid_area .card-text span.text-danger { font-size: 1rem; }
  /* Mobile 下購物車/詢價車按鈕 — icon-only 省空間 */
  .product-grid, #show_grid_area .card-body .d-flex.gap-1 .btn { padding: 0.3rem 0.4rem !important; font-size: 0.75rem; }
  .product-grid, #show_grid_area .card-body .d-flex.gap-1 .btn i { font-size: 0.9rem; }
  /* 圖片區域 aspect 4:5 看起來更像電商卡片 */
  .product-grid, #show_grid_area .product-card .card-img-top { aspect-ratio: 1/1; object-fit: cover; }
}

/* ── C4 Mobile sticky 篩選/排序按鈕 ── */
@media (max-width: 767.98px) {
  .mobile-category-toolbar {
    position: sticky;
    top: 48px;
    z-index: 5;
    background: #ffffff;
    border-bottom: 1px solid #eee;
    padding: 6px 8px;
    margin: 0 -12px 10px;
  }
}

/* ── B2 商品屬性表 Mobile 堆疊排版 ── */
@media (max-width: 575.98px) {
  #goodsDetail .table-responsive,
  .content-box .table-responsive { border: 0; }
  #goodsDetail table.table-bordered,
  .content-box table.table-bordered { border: 0; font-size: 0.875rem; }
  #goodsDetail table.table-bordered thead,
  .content-box table.table-bordered thead { display: none; }
  #goodsDetail table.table-bordered tr,
  .content-box table.table-bordered tr {
    display: block;
    margin-bottom: 8px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 4px 8px;
    background: #fff;
  }
  #goodsDetail table.table-bordered td,
  .content-box table.table-bordered td {
    display: block;
    border: 0 !important;
    padding: 4px 0;
  }
  #goodsDetail table.table-bordered td:first-child,
  .content-box table.table-bordered td:first-child {
    font-weight: 600;
    color: var(--c-primary-700, #003A5D);
    font-size: 0.8rem;
    border-bottom: 1px dashed #eee !important;
    padding-bottom: 4px;
  }
}

/* ── Footer 升級 ── */
footer.footer, .footer {
  background: var(--c-slate-900) !important;
  color: var(--c-slate-300) !important;
}
footer.footer a, .footer a { color: var(--c-slate-300) !important; }
footer.footer a:hover, .footer a:hover { color: #fff !important; }

/* Footer 區塊標題在深色背景上需亮化（cloudy_3 footer 是 slate-900） */
footer.footer .footer-section-title,
.footer .footer-section-title {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}
/* Footer 連結預設色（非 a）— 幫助文章列表、底部選單的項目 */
footer.footer .footer-links a,
.footer .footer-links a {
  color: var(--c-slate-300) !important;
}
footer.footer .footer-links a:hover,
.footer .footer-links a:hover {
  color: #fff !important;
  padding-left: 4px;
}
/* 聯絡資訊段落 icon 對比 */
footer.footer .footer-contact p,
.footer .footer-contact p { color: var(--c-slate-200) !important; }
footer.footer .footer-contact i,
.footer .footer-contact i { color: var(--c-slate-100) !important; }

/* ── 新增：cloudy_3 專屬 Hero section ── */
.ez3-hero {
  background: var(--c-primary-700);
  color: #fff;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-xl);
  margin: var(--sp-3) 0;
  box-shadow: var(--sh-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  align-items: center;
}
@media (min-width: 992px) {
  .ez3-hero { grid-template-columns: 1.5fr 1fr; padding: var(--sp-5) var(--sp-6); }
}
.ez3-hero__title {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
  color: #fff;
}
.ez3-hero__title em {
  color: #FFE066;
  font-style: normal;
}
.ez3-hero__desc {
  font-size: var(--fs-sm);
  opacity: 0.92;
  margin-bottom: var(--sp-3);
  line-height: var(--lh-normal);
}
.ez3-hero__ctas {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.ez3-hero__ctas .btn { padding: 0.5rem 1rem; font-size: var(--fs-sm); }
.ez3-hero__ctas .btn-cta {
  background: #fff !important;
  color: var(--c-primary-700) !important;
  border: 0 !important;
  box-shadow: var(--sh-md);
}
.ez3-hero__ctas .btn-cta:hover {
  background: #FFE066 !important;
  color: var(--c-primary-900) !important;
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
}
.ez3-hero__ctas .btn-ghost {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(6px);
}
.ez3-hero__ctas .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: #fff !important;
}
.ez3-hero__trust {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  opacity: 0.92;
  list-style: none;
  padding: 0;
}
.ez3-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ez3-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-3);
}

/* ── 新增：Feature strip ── */
.ez3-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
}
@media (min-width: 768px) { .ez3-features { grid-template-columns: repeat(4, 1fr); } }
.ez3-feature {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  background: #fff;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base) var(--ease-out);
}
.ez3-feature:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.ez3-feature__icon {
  width: 40px; height: 40px;
  background: var(--c-primary-50);
  color: var(--c-primary-500);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl);
  flex-shrink: 0;
}
.ez3-feature__title { font-weight: var(--fw-semibold); margin: 0; font-size: var(--fs-sm); }
.ez3-feature__desc { font-size: var(--fs-xs); color: var(--c-slate-500); margin: 2px 0 0; }

/* ── 分類頁 Hero Banner ── */
.ez3-category-hero {
  background: var(--c-primary-600);
  color: #fff;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  margin: var(--sp-3) 0 var(--sp-4);
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
}

.ez3-category-hero__title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-1);
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.3;
}
.ez3-category-hero__subtitle {
  font-size: var(--fs-sm);
  opacity: 0.88;
  margin: 0 0 var(--sp-2);
  max-width: 700px;
  line-height: var(--lh-normal);
  color: #fff;
}
.ez3-category-hero__desc {
  font-size: var(--fs-sm);
  opacity: 0.88;
  margin: 0 0 var(--sp-2);
  max-width: 700px;
  line-height: var(--lh-normal);
}
.ez3-category-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  opacity: 0.95;
}
.ez3-category-hero__meta strong { font-family: var(--font-num); font-weight: var(--fw-bold); color: #FFE066; }
.ez3-category-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── 分頁現代化 ── */
.pagination .page-link {
  border-radius: var(--r-md) !important;
  margin: 0 2px;
  border: 1px solid var(--c-slate-200) !important;
  color: var(--c-slate-700) !important;
  transition: all var(--t-fast) var(--ease-out);
  font-weight: var(--fw-medium);
}
.pagination .page-link:hover {
  background: var(--c-primary-50) !important;
  border-color: var(--c-primary-500) !important;
  color: var(--c-primary-700) !important;
}
.pagination .page-item.active .page-link {
  background: var(--c-primary-500) !important;
  border-color: var(--c-primary-500) !important;
  color: #fff !important;
  box-shadow: var(--sh-sm);
}

/* ── Modal 現代化 ── */
.modal-content {
  border: 0 !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-xl) !important;
}
.modal-header {
  border-bottom: 1px solid var(--c-slate-100) !important;
}
.modal-footer {
  border-top: 1px solid var(--c-slate-100) !important;
}

/* ── Tabs 現代化 ── */
.nav-tabs {
  border-bottom: 2px solid var(--c-slate-100) !important;
}
.nav-tabs .nav-link {
  color: var(--c-slate-600) !important;
  border: 0 !important;
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-4);
  transition: color var(--t-fast), border-color var(--t-fast);
  margin-bottom: -2px;
}
.nav-tabs .nav-link:hover {
  color: var(--c-primary-500) !important;
}
.nav-tabs .nav-link.active {
  color: var(--c-primary-500) !important;
  border-bottom: 3px solid var(--c-primary-500) !important;
  background: transparent !important;
  font-weight: var(--fw-semibold);
}

/* ── 麵包屑現代化 ── */
.breadcrumb {
  background: transparent !important;
  padding: var(--sp-2) 0 !important;
  font-size: var(--fs-sm);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--c-slate-300) !important;
}
.breadcrumb-item a {
  color: var(--c-slate-600) !important;
}
.breadcrumb-item a:hover {
  color: var(--c-primary-500) !important;
}
.breadcrumb-item.active {
  color: var(--c-slate-900) !important;
  font-weight: var(--fw-medium);
}

/* ── Alert 升級 ── */
.alert {
  border: 0 !important;
  border-radius: var(--r-md) !important;
  border-left: 4px solid !important;
}
.alert-info { border-left-color: var(--c-info) !important; background: var(--c-info-bg) !important; }
.alert-success { border-left-color: var(--c-success) !important; background: var(--c-success-bg) !important; }
.alert-warning { border-left-color: var(--c-warning) !important; background: var(--c-warning-bg) !important; }
.alert-danger { border-left-color: var(--c-danger) !important; background: var(--c-danger-bg) !important; }

/* ── Table 升級 ── */
.table {
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th {
  background: var(--c-slate-50);
  color: var(--c-slate-700) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--c-slate-200) !important;
}
.table td, .table th {
  border-top: 1px solid var(--c-slate-100) !important;
  padding: var(--sp-3) !important;
}

/* ── 數量選擇器（批發常用） ── */
.quantity-control, .qty-control {
  border-radius: var(--r-md) !important;
  overflow: hidden;
}
.quantity-control button, .qty-control button {
  border: 1px solid var(--c-slate-200) !important;
  background: #fff !important;
  transition: background var(--t-fast);
}
.quantity-control button:hover, .qty-control button:hover {
  background: var(--c-primary-50) !important;
  color: var(--c-primary-500) !important;
}

/* ── 行動版（< 768）微調 ── */
@media (max-width: 767.98px) {
  .ez3-hero { padding: var(--sp-6) var(--sp-4); margin: var(--sp-3) 0; }
  .ez3-hero__title { font-size: 1.5rem; }
  .ez3-hero__ctas { flex-direction: column; }
  .ez3-hero__ctas .btn { width: 100%; }
  .ez3-category-hero { padding: var(--sp-4); }
  .card { border-radius: var(--r-md) !important; }
  .btn-lg { font-size: var(--fs-base) !important; padding: 0.625rem 1.25rem !important; }
}

/* ================================================================
   會員中心 sidebar 現代化（P2 細部升級）
   ================================================================ */

.user-sidebar {
  background: #fff;
  border-radius: var(--r-xl) !important;
  overflow: hidden;
  box-shadow: var(--sh-md) !important;
  border: 1px solid var(--c-slate-100);
}

/* 用戶 hero — 乾淨深藍，不用重漸層 */
.user-sidebar__hero {
  background: var(--c-primary-600);
  color: #fff;
  padding: var(--sp-5) var(--sp-4);
  position: relative;
  overflow: hidden;
}

.user-sidebar__avatar {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--sp-3);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.user-sidebar__avatar .bi {
  color: #fff;
  font-size: 1.75rem;
}
.user-sidebar__name {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 4px;
  color: #fff;
}
.user-sidebar__rank {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.18);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-weight: var(--fw-medium);
}
.user-sidebar__rank .bi {
  font-size: 0.75rem;
  color: #FFE066;
}

/* 選單 section 標題 */
.user-sidebar .menu-section-title {
  padding: var(--sp-3) var(--sp-4) !important;
  font-size: 0.8125rem !important;
  font-weight: var(--fw-bold) !important;
  color: var(--c-slate-700) !important;
  background: var(--c-slate-50) !important;
  border-bottom: 1px solid var(--c-slate-100) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 選單項目（字體加大） */
.user-sidebar .menu-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2);
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  font-weight: var(--fw-medium);
  color: var(--c-slate-800) !important;
  text-decoration: none !important;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), padding-left var(--t-fast) var(--ease-out);
  border-left: 3px solid transparent;
  line-height: 1.4;
}
.user-sidebar .menu-item:hover {
  background: var(--c-primary-50) !important;
  color: var(--c-primary-700) !important;
  padding-left: 1.25rem !important;
}
.user-sidebar .menu-item.active {
  background: var(--c-primary-500) !important;
  color: #fff !important;
  font-weight: var(--fw-semibold);
  border-left-color: var(--c-accent-500);
  box-shadow: inset 2px 0 8px rgba(0,0,0,0.1);
}
.user-sidebar .menu-item.active .bi {
  color: #fff !important;
}
.user-sidebar .menu-item .bi {
  font-size: 1.125rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* ================================================================
   會員中心主區：扁平化 — 去漸層、白底卡片、避免標題重複
   ================================================================ */

/* 所有 card-header 漸層移除，改為白底 + 品牌色左邊條 */
#content .card-header.bg-gradient,
#content .card-header[style*="linear-gradient"],
#content div.card-header[style*="background:"] {
  background: #fff !important;
  background-image: none !important;
  color: var(--c-slate-900) !important;
  border-bottom: 1px solid var(--c-slate-100) !important;
  border-left: 4px solid var(--c-primary-500) !important;
  padding: var(--sp-3) var(--sp-4) !important;
}
#content .card-header .card-title,
#content .card-header h5,
#content .card-header h6 {
  color: var(--c-slate-800) !important;
  font-weight: var(--fw-semibold) !important;
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}
#content .card-header .bi {
  color: var(--c-primary-500) !important;
}

/* 卡片整體（會員中心） */
#content .card.border-0.shadow,
#content .card.shadow-sm {
  border: 1px solid var(--c-slate-100) !important;
  box-shadow: var(--sh-sm) !important;
  border-radius: var(--r-lg) !important;
}

/* ────────────────────────────────────────────────────────────
   會員中心統一 Page Banner（每頁第一個主標）
   ──────────────────────────────────────────────────────────── */

/* 方案 A: 有 h2 的 action（profile/order_list/quote_list/booking_list 等） */
#content h2.h4.mb-3.border-bottom,
#content h2.h3 {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 1.375rem !important;
  font-weight: var(--fw-bold) !important;
  color: var(--c-slate-900) !important;
  padding: 1rem 1.25rem !important;
  margin: 0 0 1.5rem !important;
  background: #fff !important;
  border: 0 !important;
  border-left: 5px solid var(--c-primary-500) !important;
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  line-height: 1.3;
}
#content h2.h4.mb-3.border-bottom .bi,
#content h2.h3 .bi {
  color: var(--c-primary-500) !important;
  font-size: 1.5rem;
  flex-shrink: 0;
}
#content h2.h3 + p.text-muted {
  margin: -1rem 0 1.5rem 1.25rem;
  color: var(--c-slate-500) !important;
}

/* 方案 B: 沒有 h2 的 action（notification_settings / collection_list 等）
   讓主區第一個 card-header 視覺同 Page Banner */
#content .col-lg-9 > .mb-4:first-of-type > .card.border-0:first-child > .card-header:first-child,
#content .col-lg-9 > *:first-child > .card:first-child > .card-header:first-child {
  font-size: 1.25rem !important;
  font-weight: var(--fw-semibold) !important;
  padding: 1rem 1.25rem !important;
  border-left: 5px solid var(--c-primary-500) !important;
  background: #fff !important;
  color: var(--c-slate-900) !important;
}

/* 主區內容區卡片統一間距 */
#content .col-lg-9 .mb-4 {
  margin-bottom: var(--sp-5) !important;
}

/* 手機版會員中心 padding 縮小、按鈕滿版 */
@media (max-width: 991.98px) {
  #content h2.h4.mb-3.border-bottom,
  #content h2.h3 {
    font-size: 1.125rem !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
  }
  #content h2.h4.mb-3.border-bottom .bi,
  #content h2.h3 .bi { font-size: 1.25rem; }

  /* 手機版表格 horizontal scroll */
  #content .col-lg-9 .table-responsive,
  #content .col-lg-9 table {
    font-size: 0.875rem;
  }

  /* 手機版多欄表單改單欄 */
  #content .col-lg-9 .row > [class*="col-md-"] {
    margin-bottom: 0.75rem;
  }

  /* 手機版按鈕組滿版 */
  #content .col-lg-9 .btn-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
  }
  #content .col-lg-9 .btn-group .btn {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
  }
}

/* 空狀態統一樣式 */
#content .col-lg-9 .empty-state,
#content .col-lg-9 [class*="empty-"] {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--c-slate-500);
}
#content .col-lg-9 .empty-state .bi,
#content .col-lg-9 [class*="empty-"] .bi {
  font-size: 3rem;
  color: var(--c-slate-300);
  margin-bottom: 1rem;
  display: block;
}

/* 歡迎頁主區 hero — 只針對 .profile-summary，不動手機 sidebar hero */
.profile-summary {
  background: #fff !important;
  color: var(--c-slate-900) !important;
  border: 1px solid var(--c-slate-200) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-sm);
}
.profile-summary *,
.profile-summary .h3,
.profile-summary .h4,
.profile-summary .fw-bold {
  color: var(--c-slate-900) !important;
}

/* 手機版 user sidebar hero（user_menu.lbi mobile 版）— 保留新漸層 + 白字 */
.d-lg-none > .mb-3[style*="linear-gradient(135deg, var(--ezp-brand-blue)"] {
  background: var(--c-primary-600) !important;
  background-image: none !important;
}
.d-lg-none > .mb-3[style*="linear-gradient(135deg, var(--ezp-brand-blue)"] h6,
.d-lg-none > .mb-3[style*="linear-gradient(135deg, var(--ezp-brand-blue)"] small,
.d-lg-none > .mb-3[style*="linear-gradient(135deg, var(--ezp-brand-blue)"] .text-white {
  color: #fff !important;
}

/* account_deposit 行銷卡片 — 扁平化（若模板仍保留） */
#content .card[style*="linear-gradient(135deg, #28a745"],
#content .card[style*="linear-gradient(135deg, #007bff"],
#content .card[style*="linear-gradient(135deg, #f8f9fa"] {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--c-slate-200) !important;
}
#content .card[style*="linear-gradient(135deg, #28a745"] .text-white,
#content .card[style*="linear-gradient(135deg, #007bff"] .text-white {
  color: var(--c-slate-900) !important;
}

/* ==========================================================================
   P0-4 Phase 1 — 手機版結帳流程優化（flow.php）
   ========================================================================== */
@media (max-width: 767.98px) {
  /* 表單欄位觸控友好 */
  body .needs-validation input.form-control,
  body .needs-validation select.form-select,
  body .needs-validation textarea.form-control {
    font-size: 16px !important;  /* 防止 iOS Safari auto-zoom */
    min-height: 44px;
    padding: 10px 12px;
  }

  /* 區域選擇器 4 級下拉在手機版改 2x2 */
  #consigneeAccordion .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* consignee 頁 submit 按鈕區 sticky 底部（無 mobile-checkout-bottom 時） */
  #consigneeAccordion .accordion-body > form > .row.g-3 > .col-12.mt-3 {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0 !important;
    margin: 12px -16px -16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-top: 1px solid var(--c-slate-200);
    z-index: 50;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
  }

  /* consignee submit 按鈕觸控區放大 */
  #consigneeAccordion button[type="submit"] {
    min-height: 50px;
    font-weight: 700;
    font-size: 1rem;
    padding: 12px 20px;
  }

  /* 已存地址卡片在手機版滿版 + 按鈕放大 */
  .address-card .card-body {
    padding: 1rem;
  }
  .address-card button[type="submit"] {
    min-height: 46px !important;
    font-size: 0.95rem;
  }

  /* flow_checkout 付款/配送卡片觸控友好 */
  #pay_div .form-check-label,
  #shipping_div .form-check-label,
  .payment-option,
  .shipping-option {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
  }

  /* 購物車頂部差額橫幅 sticky 避開 header */
  .cart-shortage-banner {
    top: 60px !important;  /* 避開 mobile header */
  }
}

/* ==========================================================================
   結帳流程 Sticky 底部欄統一樣式（桌機不套用）
   ========================================================================== */
@media (max-width: 991.98px) {
  .mobile-cart-bottom,
  .mobile-checkout-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px 12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-top: 2px solid var(--c-accent-500);
  }
  /* 避免 sticky 欄蓋住 footer 內容 */
  .flow-content,
  main[role="main"],
  #content {
    padding-bottom: 90px !important;
  }
}

/* ── 打印隱藏裝飾 ── */
@media print {
  .ez3-hero, .site-promo-banner, .sticky-cta { display: none !important; }
}