/* ===== 商品卡片統一比例與圖片顯示 ===== */

/* 首頁商品卡圖片：固定高度區塊內完整顯示（contain），不可裁切主體 */
.product-img-wrap{
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* 有包 <a> 時（首頁網格）：讓連結吃滿圖區，圖片再在內側等比縮放 */
.product-img-wrap > a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.product-img-wrap img{
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
  object-fit: contain;
  object-position: center;
  transition: filter .2s ease;
}
/* 勿使用 scale：外層 overflow:hidden 會裁掉放大後的邊緣 */
.product-img-wrap img:hover{
  filter: brightness(1.03) drop-shadow(0 6px 14px rgba(0,0,0,.08));
}

/* 首頁卡片 hover：彈出效果 */
.card.product-card{
  transition: transform .18s ease, box-shadow .18s ease;
}
.card.product-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

/* 產品內頁圖片縮減，避免佔太多版面 */
.product-detail-img{
  max-width: 420px;
  max-height: 420px;
  object-fit: contain;
  background:#f8fafc;
  border-radius: 12px;
}

/* === 價格統一紅色（前台 + 後台） === */
.price,
.text-price,
.money,
.price span,
td.price,
.cart-price,
.order-total {
  color: #d32f2f !important;
  font-weight: 600;
}

/* === 日期統一藍色（後台） === */
.date {
  color: #1976d2 !important;
}

/* 無庫存效果 */
.out-of-stock {
  position: relative;
  overflow: hidden;
}

.out-of-stock img {
  filter: grayscale(100%) brightness(70%);
  transition: all 0.5s ease;
}

/* 補貨中遮罩 */
.out-of-stock::after {
  content: "補貨中";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background: rgba(0,0,0,0.6);
  padding: 8px 16px;
  border-radius: 8px;

  animation: fadeBlink 1.5s infinite;
}

/* 淡入淡出動畫 */
@keyframes fadeBlink {
  0%   { opacity: 0.2; }
  50%  { opacity: 1; }
  100% { opacity: 0.2; }
}

/* ===== 首頁導覽圖片卡：桌機每列顯示 5 張（修正版） ===== */
@media (min-width: 992px) {

  /* ✅ 關鍵：強制 row 使用 flex */
  .product-grid-5 {
    display: flex;
    flex-wrap: wrap;
  }

  /* ✅ 每張卡片 20%（5 等分） */
  .product-grid-5 > .product-grid-item {
    flex: 0 0 20%;
    max-width: 20%;
  }

  /* 間距微調（與 Bootstrap g-3 相容） */
  .product-grid-5 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }
}



/* ===== 強制限制產品介紹內圖片大小（覆蓋後台 inline style） ===== */

.product-description img {
  display: block !important;

  /* ✅ 關鍵：強制覆蓋 width / style */
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0.75rem auto;
  border-radius: 8px;
}

/* 保險：避免任何橫向撐開 */
.product-description {
  overflow-x: hidden;
}

/* ===== 首頁：行動／平板圖片卡每列 2 個（<992px），桌機 5 個維持原設定 ===== */
@media (max-width: 991.98px) {
  .product-grid-5 > .product-grid-item.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .product-img-wrap {
    height: 168px;
  }
}

/* ===== 首頁：清單導覽 — 較大縮圖、標題與價格層級、價格在標題下方靠左 ===== */
.home-product-list .product-list-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  /* 浮起特效：勿再用 (pointer: fine)，部分 Win 觸控／混合裝置會判成 coarse 導致整段不生效 */
  position: relative;
  z-index: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-product-list .product-list-item:hover {
  z-index: 3;
  transform: translate3d(0, -3px, 0) scale(1.018);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
  border-radius: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .home-product-list .product-list-item {
    transition: none;
  }

  .home-product-list .product-list-item:hover {
    transform: none;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
  }
}

.home-product-list .product-list-thumb {
  width: 112px;
  height: 112px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-product-list .product-list-thumb-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
}

@media (min-width: 576px) {
  .home-product-list .product-list-thumb {
    width: 128px;
    height: 128px;
  }
}

.home-product-list .product-list-title {
  font-size: 1rem;
  line-height: 1.35;
}

@media (min-width: 576px) {
  .home-product-list .product-list-title {
    font-size: 1.0625rem;
  }
}

.home-product-list .product-list-stock {
  font-size: 0.82rem;
  font-weight: 400;
}

/* 價格列：flex 排版；靠左僅限行動／平板，桌機改於下方 media lg 靠右 */
.home-product-list .product-list-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}

@media (max-width: 991.98px) {
  .home-product-list .product-list-prices {
    justify-content: flex-start;
    text-align: left;
  }
}

.home-product-list .product-list-price-line {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.home-product-list .product-list-price-num {
  color: #d32f2f;
  font-weight: 700;
  font-size: 0.9375rem;
}

.home-product-list .product-list-brand {
  font-size: 0.8rem;
}

/* 清單按鈕區：flex 排列，避免純 text-end 時內聯元件換行異常 */
.home-product-list .product-list-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

@media (max-width: 767.98px) {
  .home-product-list .product-list-actions {
    justify-content: center;
  }
}

.home-product-list .product-list-actions .btn-sm {
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
}

/* 清單內沿用首頁 inline 的 qty-inline（寬度需容納兩位數以上） */
.home-product-list .qty-inline .qty-input {
  box-sizing: border-box;
  min-width: 2.75rem;
  width: 3rem;
  max-width: 4.5rem;
}

/* ===== 首頁：行動／平板品牌改為左側 Offcanvas，桌機維持下拉 ===== */
@media (max-width: 991.98px) {
  #homeBrandOffcanvas.offcanvas-start {
    max-width: min(320px, 92vw);
  }
}

.home-brand-offcanvas-trigger {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 首頁工具列第一列：行動版搜尋區塊內容置中（表單元件仍左對齊以利輸入） */
@media (max-width: 991.98px) {
  .home-toolbar-card .row > .col-12.col-lg-5 > form.d-flex {
    justify-content: center;
  }
}

/* ===== 首頁清單導覽：桌機／筆電（≥992px）圖左放大、標題與文字區右對齊（覆寫 body text-align:start） ===== */
@media (min-width: 992px) {
  .home-product-list .product-list-thumb {
    width: 200px;
    height: 200px;
    min-width: 200px;
    border-radius: 14px;
  }

  .home-product-list .product-list-main {
    text-align: right !important;
  }

  .home-product-list .product-list-title {
    font-size: 1.125rem;
    line-height: 1.4;
    text-align: right !important;
  }

  .home-product-list .product-list-prices {
    justify-content: flex-end;
    text-align: right;
  }

  .home-product-list .product-list-brand {
    text-align: right !important;
    display: block;
  }
}