/* ==========================================================================
   homepage-index-ebay.css
   ebayus 首頁 v2 專屬樣式。於 homepage-index.css / top.css 之後載入，只補
   ebayus 才有、共用 css 未覆蓋的樣式。不修改任何共用檔。
   參考來源：letao/tw/css/top.css
     - .indexBannerWrapper .indexBannerInfo .infoHeadTab / .infoPage / .indexInfo（1505-1578）
     - .indexBannerWrapper .indexBannerInfo .infoHeadTab .item / .spacer / .tab_active
     - .indexArticle .item-list .item .p .price .jpy / .ntd（1940-1953）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 右欄 notice-tab（right-info 組件 .indexInfo 內的資訊 tab）
   --------------------------------------------------------------------------
   共用 top.css 的 .infoHeadTab / .infoPage / .indexInfo 容器與字級樣式可直接
   沿用（descendant selector，中間多一層 .infoWrapper 不影響）。
   但共用 css 的 tab 是用 .item / .item.on，且 .tab_active 是「絕對定位的底線
   小條」。v2 right-info.js 改用 <span class="tab"> + active 時加 .tab_active
   到 span 本身（@mouseover 切換），這是共用 css 沒有的結構，故在此補齊：
     - .tab：比照 v1 .item 的 inline-block 尺寸與置中
     - .tab.tab_active：active 狀態改用底線高亮（覆寫 v1 絕對定位的 .tab_active）
   tab active 狀態由組件 :class 切換，這裡只負責呈現。
-------------------------------------------------------------------------- */

/* notice tab 每個 tab（對應 v1 .infoHeadTab .item，寬度比照原 40px） */
.indexBannerWrapper .indexBannerInfo .indexInfo .infoHeadTab .tab {
  display: inline-block;
  width: 40px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.indexBannerWrapper .indexBannerInfo .indexInfo .infoHeadTab .tab a {
  font-size: 13px;
  color: #555;
}

/* active tab：覆寫共用 css 把 .tab_active 當絕對底線條的樣式。
   這裡 .tab_active 是掛在 span 上的狀態 class，改成底部紅線高亮，
   數值沿用共用 css 的 #db192b 主色。 */
.indexBannerWrapper .indexBannerInfo .indexInfo .infoHeadTab .tab.tab_active {
  position: static;
  width: 40px;
  height: 30px;
  background: none;
  border-bottom: 2px solid #db192b;
  -webkit-transform: none;
  transform: none;
  transition: none;
}

.indexBannerWrapper .indexBannerInfo .indexInfo .infoHeadTab .tab.tab_active a {
  color: #333;
}

/* infoPage：共用 css 預設 display:none，會蓋掉 Vue v-show 顯示時的還原
   （v-show 顯示時移除 inline display:none，會 fallback 回 css 的 none）。
   這裡改回 display:block，讓 v-show 完整掌控顯示/隱藏。 */
.indexBannerWrapper .indexBannerInfo .indexInfo .infoPage {
  display: block;
  padding: 5px 10px;
}

.indexBannerWrapper .indexBannerInfo .indexInfo .infoPage ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   2. USD 雙幣價微調（熱門類別商品 .price）
   --------------------------------------------------------------------------
   product-grid 在 ebayus（currency.source=USD）會輸出：
     <span class="jpy">US $X</span><span class="ntd">NT Y</span>
   "US $X" 比日幣價字串長，沿用 top.css .price .jpy/.ntd 的配色，只補：
     - 同一行不換行、避免溢出截斷
   此檔只在 ebayus 載入，覆寫安全、不影響 auction(JPY)。
-------------------------------------------------------------------------- */

.indexArticle .item-list .item .p .price {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* US $X 主價，配色沿用共用 css 的紅（#ff002f） */
.indexArticle .item-list .item .p .price .jpy {
  color: #ff002f;
}

/* NT 換算價，配色與左間距沿用共用 css */
.indexArticle .item-list .item .p .price .ntd {
  padding-left: 5px;
  color: #888;
}

/* --------------------------------------------------------------------------
   3. 首屏三欄改用 flex（取代 index.css 的 float 排版）
   --------------------------------------------------------------------------
   v2 category-menu 渲染 id="Left"，ebayus 舊 CSS 以 id float 左欄不命中；而 index.css
   的 `#Middle_top{float:right;width:82.5%}` 是比例寬，跟固定 197px 選單之間：
   - 寬視窗(1350)留 236px 給左邊 − 選單 197 = 39px **空隙**；
   - 窄視窗(~1160)留不到 197px → float 掉行、banner 擠到選單下面破版。
   改用 flex 一次解掉兩個問題：選單固定 197px、#Middle_top flex:1 填滿右側剩餘空間，
   無空隙、不掉行。內層 bannerWrapper/infoWrapper 仍是 float(各佔 Middle_top 的 %)，不受影響。
   只 ebayus 載入，不影響 auction。
-------------------------------------------------------------------------- */
.indexFsWrapper .innerWrapper {
  display: flex;
  align-items: flex-start;
}
.indexFsWrapper .indexLeft {
  flex: 0 0 197px;
  width: 197px;
  float: none;
}
.indexFsWrapper #Middle_top {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  float: none;
  margin-left: 6px; /* 選單與中欄之間的小間隔（不用 flex gap：容器尾端的空 .clearfix
                       會讓 gap 在 Middle_top 右側也多一道空隙，改用 margin 只加左側） */
}

/* --------------------------------------------------------------------------
   4. 左選單溢出修復（ebay 分類多）
   --------------------------------------------------------------------------
   主分類直列表 .untBody1 在共用 homepage-index.css 固定高 655px（設計給分類
   較少的 auction，剛好塞滿 banner 高度）。ebay 有 36 個頂層分類（36×26px≈936px），
   溢出 655 容器 ~281px 蓋住下方開箱 s5 區。
   根因是 .untBody1（非 .acMdCateSearch）的固定高 → 放開它讓直列表自然撐開；
   並 clearfix 首屏 innerWrapper 使其包住浮動的高選單，下方 #Page 接在選單之後。
   flyout 子分類面板 .acMdCateLinks 仍 position:absolute，不受影響。
   specificity (0,4,0) > 原 .untBody1 (0,1,0)，確保覆蓋。
-------------------------------------------------------------------------- */
.indexFsWrapper .indexLeft .acMdCateSearch .untBody1 {
  height: auto;
}
.indexFsWrapper .innerWrapper::after {
  content: "";
  display: block;
  clear: both;
}

/* --------------------------------------------------------------------------
   5. 全寬內容區 #center-info（熱門類別商品 + guide-fav reclaim 全寬）
   --------------------------------------------------------------------------
   v2 把 indexArticle ×6 + guide-fav 從 #Middle_top（index.css 的 float:right
   82.5% 右欄）移出，放進 .indexFsWrapper 外的 #center-info，避免被右欄拘束、
   左側 45–281 留白。比照 v1：v1 #center-info 帶 max-width:1350 + margin:auto
   置中（staging v1 CSS）；本機 repo 唯一的 #center-info 規則在 order_existed.css
   (width:990，且 index 頁不載)，故在此明確補上 1350 置中，與 v1 渲染一致。
   只 ebayus 載入，不影響共用組件 / auction。
-------------------------------------------------------------------------- */
#center-info {
  max-width: 1350px;
  min-width: 1140px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   6. 左側分類選單 acMdCateSearch — ebay 藍色系（取代 auction 深色金字）
   --------------------------------------------------------------------------
   共享 category-menu.js 渲染的 acMdCateSearch 樣式在 homepage-index.css 是
   auction 配色：active 項 #33322f 深底 + #d7a50d 金字、flyout 面板 #33322f 深底
   白字無邊框、hover 金色。ebay v1 是白底 + #007eff 藍邊框 + 深字 + 藍 active。
   此處只 ebay 載入，用 .indexLeft 前綴覆蓋共享值，把選單改回 ebay 藍（#007eff），
   不動共享 category-menu.js / homepage-index.css，auction 不受影響。
-------------------------------------------------------------------------- */

/* 主列表容器邊框：auction 金色 #ffc10b（homepage-index.css 左/右/下框）→ ebay 藍 #007eff */
.indexLeft .untBody1 {
  border-color: #007eff;
}

/* 主列表 active 項：auction 深底金字 → ebay 實心藍底 #4a7ecd + 白字（對齊 v1 image #6）*/
.indexLeft .untBody1 ul li.on {
  background: #4a7ecd;
}
.indexLeft .untBody1 ul li.on a {
  color: #fff;
  background: transparent;
}

/* hover 連結色：auction 金 (#d7a50d) → ebay 藍 */
.indexLeft .acMdCateSearch a:hover {
  color: #007eff;
}

/* flyout 面板：auction 深底無邊框 → ebay 白底 + #007eff 藍邊框 */
.indexLeft .acMdCateLinks {
  background: #fff;
  border: 2px solid #007eff;
  box-sizing: border-box;
}

/* flyout 標題（電玩遊戲）：白字 → 深字 + 底線分隔 */
.indexLeft .acMdCateLinks .untHead {
  border-bottom: 1px solid #e5e5e5;
}
.indexLeft .acMdCateLinks .untHead h3 a {
  color: #333;
}

/* flyout 子分類連結：白字 → 深字（白底上才看得到）*/
.indexLeft .acMdCateLinks .untBody ul li a {
  color: #555;
}

/* flyout 內層 .untBody：移除 auction 分類促銷 sprite 大圖
   （homepage-index.css:180 的 yahoojp/index/spr_catelinks_01.jpg，會蓋住右欄子分類）
   + 移除深色內框（外層 .acMdCateLinks 已有藍框）+ 收回為圖預留的 120px 右邊距，
   讓兩欄子分類乾淨呈現（對齊 ebay v1 image #4）。 */
.indexLeft .acMdCateLinks .untBody {
  background-image: none;
  border: none;
  padding-right: 15px;
}

/* --------------------------------------------------------------------------
   7. 次級 banner .index-sec-banner-list 間距（ebay）
   --------------------------------------------------------------------------
   共享 top.css 是 `margin:5px 0` + `justify-content:space-between`：3 張固定 300px
   被 space-between 撐開，剩餘空間平分成 ~20px 兩個間距（過大）。
   ebay 要：上方間距、三張之間固定 8px。改 flex:1 等寬填滿 + gap:8px，間距剛好 8px
   且填滿容器與上方主 banner 對齊（圖 300→~308px 微放大可忽略）。
   ⚠️ 主 banner 分頁圓點(swiper-pagination)絕對定位在 banner 底部、會凸進間距裡，
   故 margin-top 設 1.1rem 讓 sub-banner 明顯落在圓點下方，
   只 4px 會被圓點吃掉看起來貼著。 */
.indexFsWrapper .index-sec-banner-list {
  margin-top: 1.1rem;
  gap: 8px;
}
.indexFsWrapper .index-sec-banner-list__link {
  flex: 1 1 0;
}
.indexFsWrapper .index-sec-banner-list__link img {
  width: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   8. CLS placeholder：桌面 Vue mount 區預留高度
   --------------------------------------------------------------------------
   #homepage-app 內的 Vue 組件（首屏三欄 + #center-info 商品/guide-fav）掛載前
   為空，沒預留高度 → 掛載瞬間把下方內容（含 footer）整個往下推，CLS≈0.98。
   比照手機 .m-cls-placeholder 做法，給這兩個既有容器 min-height 預留（值為
   1440px 實測高度，provisional）。只 ebayus 載入，不影響 auction。
-------------------------------------------------------------------------- */
.indexFsWrapper {
  min-height: 967px;
}
#center-info {
  min-height: 4152px;
}