/* ============================================================================
 * common/widget/17-sidebar-widget.css — 側欄 widget（商品列表／詳情頁 ＋ 新聞貼文頁共用）
 * ============================================================================
 *   載入序：17 / 20（順序定義於 config/webThemeCss.php 的 common.layout）
 *   來源：issue #694 自 common/widget.css L2679~2969（default.css cluster A）切出；
 *         phase 2 已完成斷點對齊，並於本次併入原 18-sidebar-post.css（cluster B）。
 *
 *   [為什麼併檔] 原 17（cluster A）與 18（cluster B）是同一組側欄元件在 default.css 裡
 *   的兩段歷史堆疊，**都在定義同一批 .widget-* / .widget-product 選擇器**，只是分別
 *   出現在商品頁與貼文頁的區段。分兩支檔會讓「改側欄要看哪支」無從判斷，故合併為一支。
 *   合併時**逐字保留原順序**（先 cluster A、後 cluster B），cascade 結果與併檔前完全相同。
 *
 *   [A/B 衝突已裁決，issue #862] cluster B 在現行 Blade 的 .product-item 結構下，部分版面值
 *   會被 cluster A 較高特異性規則蓋掉；但它仍提供 overflow／background／text-align／標題
 *   樣式／line-height／margin，且在沒有 .product-item 中介層的 legacy／CKEditor DOM 中，
 *   35%／65% 欄寬、padding、價格色與字重也會生效。合成 selector 探針已證明刪除會產生
 *   computed-style 差異，故整段與 legacy 變數皆保留為相容 fallback，不再列為待裁決死碼。
 *
 *   [已移出] .user-side-menu*（會員中心側選單）與商品側欄無關，已抽至 21-user-side-menu.css。
 *
 *   [斷點] 原用 992／768 各一個整數 max-width，已改為 991.98／767.98。
 *   ≤768 區塊內與基礎規則同值的三條宣告（-webkit-line-clamp／line-clamp／min-height）
 *   已刪除，只留差異項。
 *
 *   [好覆蓋，issue #874] 可調值改由各自的側欄外層 class（皆 0,1,0）上的自訂屬性承載：
 *     .widget-categories / .widget-product — 卡片配色圓角間距、商品圖比例、角標、
 *                                            標題與價格配色字級行數、cluster B 的舊版排法值
 *     .btn-group-category（平板以下才有規則）— 下拉選單與三層分類的配色字級圓角
 *     .widget / .widget-title / .product-cat — 側欄外距、標題配色、分類樹字級行高配色
 *   .product-item／.product-img／.product-info／.product-title 等都是與商品列表頁共用的
 *   通用 class，選擇器刻意維持祖先範圍限定（去掉會誤傷列表頁），改以變數承載達成單一
 *   class 覆寫。RWD 差異一律改為在 @media 內覆寫變數。
 * ==========================================================================*/

/* ============================================================================
 * 區段 4：default.css .widget-categories / -product 商品列表側欄
 *   抽取自 default.css line 2791~3070（cluster A）
 *   .widget-categories / .widget-product 多層 product-* 子選擇器
 *   （原含的 .widget-search / .widget-categories-select 已於 #862 B-1 判死移除）
 *   對應 blade：商品列表 / 商品詳情頁側邊欄 widget
 * ============================================================================
 */

.widget-categories {
  --sidebar-card-bg: #ffffff; /* 卡片底色 */
  --sidebar-categories-radius: 0px; /* 分類區塊圓角 */
  --sidebar-item-radius: 8px; /* 項目圓角 */
  --sidebar-item-gap: 10px; /* 項目右外距 */
  --sidebar-item-pad: 12px; /* 項目內距 */
  background: var(--sidebar-card-bg, #ffffff);
  border-radius: var(--sidebar-categories-radius, 0px);
}

.widget-categories .categories-item {
  display: flex;
  flex-direction: column;
  background: var(--sidebar-card-bg, #ffffff);
  border-radius: var(--sidebar-item-radius, 8px);
  margin-bottom: 0;
  margin-right: var(--sidebar-item-gap, 10px);
  padding: var(--sidebar-item-pad, 12px);
}

.widget-product {
  --sidebar-card-bg: #ffffff; /* 卡片底色 */
  --sidebar-product-radius: 10px; /* 商品區塊圓角 */
  --sidebar-item-radius: 8px; /* 卡片圓角 */
  --sidebar-item-gap: 10px; /* 卡片右外距 */
  --sidebar-item-gap-y: 0; /* 卡片下外距 */
  --sidebar-item-pad: 12px; /* 卡片內距 */
  --sidebar-img-ratio: 1/1; /* 商品圖比例 */
  --sidebar-tag-size: 52px; /* 角標尺寸 */
  --sidebar-tag-bg: #2c2c2c; /* 角標底色 */
  --sidebar-tag-color: #ffffff; /* 角標文字色 */
  --sidebar-tag-pad: 8px; /* 角標內距 */
  --sidebar-tag-radius: 99rem; /* 角標圓角 */
  --sidebar-tag-font: 12px; /* 角標字級 */
  --sidebar-tag-top: 10px; /* 角標上位移 */
  --sidebar-tag-left: 12px; /* 角標左位移 */
  --sidebar-info-pad: 16px 10px; /* 商品資訊內距 */
  --sidebar-title-color: #1d1d1d; /* 商品標題色 */
  --sidebar-title-gap: 8px; /* 商品標題上外距 */
  --sidebar-title-lh: inherit; /* 商品標題行高（預設 inherit：原規則無此宣告，靠繼承） */
  --sidebar-title-clamp: 3; /* 商品標題最多行數 */
  --sidebar-title-min-h: 72px; /* 商品標題最小高 */
  --sidebar-price-color: #2c2c2c; /* 價格顏色 */
  --sidebar-legacy-img-w: 35%; /* cluster B 舊版圖片欄寬 */
  --sidebar-legacy-info-w: 65%; /* cluster B 舊版資訊欄寬 */
  --sidebar-legacy-info-pad: 15px 0 0 10px; /* cluster B 舊版資訊內距 */
  --sidebar-legacy-title-color: #666; /* cluster B 舊版標題色 */
  --sidebar-legacy-price-color: #999999; /* cluster B 舊版價格色 */
  border-radius: var(--sidebar-product-radius, 10px);
}

.widget-product .product-item {
  display: flex;
  flex-direction: column;
  background: var(--sidebar-card-bg, #ffffff);
  border-radius: var(--sidebar-item-radius, 8px);
  margin-bottom: var(--sidebar-item-gap-y, 0);
  margin-right: var(--sidebar-item-gap, 10px);
  padding: var(--sidebar-item-pad, 12px);
}

@media (max-width: 991.98px) {
  .widget-product {
    --sidebar-item-gap-y: 20px;
    --sidebar-item-gap: 0px;
  }

  .btn-group-category {
    --sidebar-cat-bg: #e2e2e2; /* 分類鈕列底色 */
    --sidebar-cat-radius: 10px; /* 分類鈕列圓角 */
    --sidebar-cat-btn-h: 48px; /* 分類鈕高度 */
    --sidebar-cat-font: 16px; /* 分類文字字級 */
    --sidebar-cat-color: #333333; /* 分類文字色 */
    --sidebar-cat-menu-bg: #ffffff; /* 下拉選單底色 */
    --sidebar-cat-menu-pad: 20px 16px; /* 下拉選單內距 */
    --sidebar-cat-menu-border: 1px solid #b8b8b8; /* 下拉選單外框 */
    --sidebar-cat-item-pad: 12px; /* 分類項目內距 */
    --sidebar-cat-item-gap: 10px; /* 分類項目下外距 */
    --sidebar-cat-item-radius: 8px; /* 分類項目圓角 */
    --sidebar-cat-l1-bg: #c5c5c5; /* 第一層項目底色 */
    --sidebar-cat-l2-bg: #d9d9d9; /* 第二層項目底色 */
    --sidebar-cat-l2-color: #000000; /* 第二層項目文字色 */
    --sidebar-cat-l3-bg: #f2f2f2; /* 第三層項目底色 */
    --sidebar-cat-indent: 20px; /* 子層縮排 */
    width: 100%;
    background: var(--sidebar-cat-bg, #e2e2e2);
    border-radius: var(--sidebar-cat-radius, 10px);
  }

  .btn-group-category .btn {
    width: 100%;
    height: var(--sidebar-cat-btn-h, 48px);
    font-size: var(--sidebar-cat-font, 16px);
    color: var(--sidebar-cat-color, #333333);
    border-radius: var(--sidebar-cat-radius, 10px);
    text-align: left;
  }

  .btn-group-category .dropdown-menu {
    width: 100%;
    padding: var(--sidebar-cat-menu-pad, 20px 16px);
    background: var(--sidebar-cat-menu-bg, #ffffff);
    border-radius: var(--sidebar-cat-radius, 10px);
    border: var(--sidebar-cat-menu-border, 1px solid #b8b8b8);
  }

  .btn-group-category .dropdown-item {
    width: 100%;
    padding: var(--sidebar-cat-item-pad, 12px);
    font-size: var(--sidebar-cat-font, 16px);
    color: var(--sidebar-cat-color, #333333);
  }

  .btn-group-category .product-cat-item a {
    font-size: var(--sidebar-cat-font, 16px);
    padding: var(--sidebar-cat-item-pad, 12px);
    margin-bottom: var(--sidebar-cat-item-gap, 10px);
    display: block;
    background: var(--sidebar-cat-l1-bg, #c5c5c5);
    color: var(--sidebar-cat-color, #333333);
    border-radius: var(--sidebar-cat-item-radius, 8px);
  }

  .btn-group-category .product-cat-item ul .product-cat-item {
    padding-left: var(--sidebar-cat-indent, 20px);
  }

  .btn-group-category .product-cat-item ul .product-cat-item a {
    font-size: var(--sidebar-cat-font, 16px);
    padding: var(--sidebar-cat-item-pad, 12px);
    margin-bottom: var(--sidebar-cat-item-gap, 10px);
    display: block;
    background: var(--sidebar-cat-l2-bg, #d9d9d9);
    color: var(--sidebar-cat-l2-color, #000000);
    border-radius: var(--sidebar-cat-item-radius, 8px);
  }

  .btn-group-category .product-cat-item ul .product-cat-item ul .product-cat-item a {
    font-size: var(--sidebar-cat-font, 16px);
    padding: var(--sidebar-cat-item-pad, 12px);
    margin-bottom: var(--sidebar-cat-item-gap, 10px);
    display: block;
    background: var(--sidebar-cat-l3-bg, #f2f2f2);
    color: var(--sidebar-cat-l2-color, #000000);
    border-radius: var(--sidebar-cat-item-radius, 8px);
  }
}

.widget-product .product-item .product-img {
  width: 100%;
  position: relative;
  aspect-ratio: var(--sidebar-img-ratio, 1/1);
}

.widget-product .product-item .product-tag {
  position: absolute;
  top: var(--sidebar-tag-top, 10px);
  left: var(--sidebar-tag-left, 12px);
  width: var(--sidebar-tag-size, 52px);
  height: var(--sidebar-tag-size, 52px);
  background: var(--sidebar-tag-bg, #2c2c2c);
  color: var(--sidebar-tag-color, #ffffff);
  padding: var(--sidebar-tag-pad, 8px);
  border-radius: var(--sidebar-tag-radius, 99rem);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--sidebar-tag-font, 12px);
}

.widget-product .product-item .product-info {
  width: 100%;
  padding: var(--sidebar-info-pad, 16px 10px);
}

.widget-product .product-item .product-info .product-title .product-title-link {
  color: var(--sidebar-title-color, #1d1d1d);
  margin-top: var(--sidebar-title-gap, 8px);
  line-height: var(--sidebar-title-lh, inherit);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--sidebar-title-clamp, 3);
  line-clamp: var(--sidebar-title-clamp, 3);
  text-wrap: wrap;
  min-height: var(--sidebar-title-min-h, 72px);
}

/* 手機：-webkit-line-clamp／line-clamp／min-height 與基礎規則同值，屬重複宣告已刪除，
   僅保留真正的差異項（上外距與行高），並改為覆寫變數 */
@media (max-width: 767.98px) {
  .widget-product {
    --sidebar-title-gap: 10px;
    --sidebar-title-lh: 24px;
  }
}

.widget-product .product-item .product-info .pro-price {
  color: var(--sidebar-price-color, #2c2c2c);
  font-weight: 600;
}


/* ============================================================================
 * 區段 5：default.css .widget / .widget-title / .widget-product 新聞貼文側欄
 *   抽取自 default.css line 5342~5462（cluster B）
 *   .widget / .widget-title（含 ::before）/
 *   .widget-product .product-item / .product-img / .product-info / .product-title / .pro-price
 *   （原含的 .widget-search input/button 已於 #862 B-1 判死移除）
 * ============================================================================
 */

.widget {
  --sidebar-widget-pad: 20px 8px; /* 側欄區塊內距 */
  padding: var(--sidebar-widget-pad, 20px 8px);
}

.widget-title {
  --sidebar-heading-color: #000000; /* 側欄標題文字色 */
  --sidebar-heading-pad: 5px; /* 側欄標題左內距 */
  --sidebar-heading-transform: uppercase; /* 側欄標題大小寫轉換 */
  --sidebar-heading-mark-bg: #312525; /* 側欄標題前飾塊顏色 */
  color: var(--sidebar-heading-color, #000000);
  font-display: swap;
  /* font-size: 20px; */
  font-weight: 800;
  text-transform: var(--sidebar-heading-transform, uppercase);
  position: relative;
  padding-left: var(--sidebar-heading-pad, 5px);
}

.widget-title::before {
  background: var(--sidebar-heading-mark-bg, #312525);
  content: "";
  display: none;
}

.product-cat>ul>li>ul {
  padding-left: 20px;
}

.product-cat {
  --sidebar-tree-color: #999999; /* 分類樹文字色 */
  --sidebar-tree-l1-font: 14px; /* 分類樹第一層字級 */
  --sidebar-tree-l1-lh: 30px; /* 分類樹第一層行高 */
  --sidebar-tree-l2-font: 13px; /* 分類樹第二層字級 */
  --sidebar-tree-l2-lh: 25px; /* 分類樹第二層行高 */
  --sidebar-tree-open-color: #131313; /* 展開中項目文字色 */
}

.product-cat .treeview>li>a,
.product-cat .treeview>li>ul>li>a {
  color: var(--sidebar-tree-color, #999999);
  display: inline-block;
  text-transform: capitalize;
}

.product-cat .treeview>li>a {
  font-size: var(--sidebar-tree-l1-font, 14px);
  line-height: var(--sidebar-tree-l1-lh, 30px);
}

.product-cat .treeview>li>ul>li>a {
  font-size: var(--sidebar-tree-l2-font, 13px);
  line-height: var(--sidebar-tree-l2-lh, 25px);
}

.product-cat .treeview li {
  position: relative;
}

.product-cat .hitarea {
  cursor: pointer;
  height: 30px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.product-cat .treeview .collapsable>a {
  color: var(--sidebar-tree-open-color, #131313);
}

.widget-product .product-item {
  overflow: hidden;
}

.widget-product .product-item:last-child {
  margin-bottom: 0;
}

.widget-product .product-img {
  float: left;
  width: var(--sidebar-legacy-img-w, 35%);
}

.widget-product .product-info {
  background: #fff none repeat scroll 0 0;
  float: left;
  padding: var(--sidebar-legacy-info-pad, 15px 0 0 10px);
  text-align: left;
  width: var(--sidebar-legacy-info-w, 65%);
}

.widget-product .product-title {
  color: var(--sidebar-legacy-title-color, #666);
  font-weight: 500;
  text-transform: capitalize;
}

.widget-product .pro-price {
  color: var(--sidebar-legacy-price-color, #999999);
  /* font-size: 16px; */
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0;
}