/* 頂部導航樣式（自 index.html 抽出） */
.top-nav { position: sticky; top: 0; z-index: 10000; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background-color: #ffffff; border-bottom: 1px solid #eee; }
.brand-row { display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; }
.search { display: flex; align-items: center; gap: 8px; }
.search-input { height: 32px; border: 1px solid #ddd; border-radius: 6px; padding: 0 10px; min-width: 220px; }
.search-go { border: none; background: #f5f5f5; border-radius: 6px; padding: 6px 10px; cursor: pointer; display: none; }
/* 有文字時顯示跳轉按鈕；空文字時隱藏 */
.search-input:not(:placeholder-shown) + .search-go { display: inline-flex; }
.menu { display: flex; align-items: center; gap: clamp(8px, 2vw, 16px); }
.menu a { color: #333; text-decoration: none; padding: 6px 10px; border-radius: 6px; transition: background-color .2s ease, color .2s ease; font-size: clamp(13px, 1.4vw, 15px); }
.menu a.active, .menu a:hover { background: #f5f5f5; }
.menu-toggle { display: none; border: 1px solid #ddd; background: #f5f5f5; border-radius: 6px; padding: 6px 10px; cursor: pointer; }

/* 確保任何帶有 hidden 屬性的元素都隱藏 */
[hidden] { display: none !important; }
/* kwatch 折疊樣式 */
.kwatch-group { position: relative; }
.kwatch-toggle { background: transparent; border: none; color: inherit; padding: 6px 6px; border-radius: 0; cursor: pointer; appearance: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.kwatch-toggle::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; transition: transform .2s ease; }
.kwatch-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.kwatch-toggle:hover { opacity: .85; }
.kwatch-dropdown { background: transparent; border: 1px solid #ddd; color: #333; padding: 6px 10px; border-radius: 6px; cursor: pointer; margin-left: 8px; display: none; }
.kwatch-dropdown:hover { background: #f5f5f5; }
.brand-toggle { background: transparent; border: 1px solid #ddd; color: #333; padding: 6px 10px; border-radius: 6px; cursor: pointer; margin-left: 8px; }
.brand-toggle:hover { background: #f5f5f5; }
.kwatch-panel { position: absolute; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); min-width: 160px; z-index: 10002; }
.kwatch-panel a { padding: 6px 8px; }
.kwatch-group.open .kwatch-toggle { background: transparent; }
/* 懸停/開啟顯示面板，離開延遲 150ms 收起（純 CSS） */
.kwatch-panel { position: absolute; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); min-width: 160px; opacity: 0; visibility: hidden; transition: opacity 150ms ease 0s, visibility 0s linear 0s; z-index: 2147483646; }
.kwatch-panel.fixed { position: fixed; z-index: 2147483647; }
.kwatch-panel.open { display: flex !important; opacity: 1; visibility: visible; transition: opacity 150ms ease 0s, visibility 0s linear 0s; }
/* 只有在 kwatch 按鍵懸停時展開；面板自身懸停保持展開；觸控設備 open 類保持展開 */
.kwatch-group:has(.kwatch-toggle:hover) .kwatch-panel,
.kwatch-panel:hover,
.kwatch-group.open .kwatch-panel { opacity: 1; visibility: visible; transition: opacity 150ms ease 0s, visibility 0s linear 0s; }

/* 面板內子菜單（商品類型） */
.kwatch-item { position: relative; }
.kwatch-item > .kwatch-label { display: block; padding: 6px 8px; border-radius: 6px; color: #333; text-decoration: none; }
.kwatch-item > .kwatch-label:hover { background: #f5f5f5; }
.kwatch-submenu { position: absolute; top: 0; left: calc(100% + 8px); display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); min-width: 180px; opacity: 0; visibility: hidden; transition: opacity 150ms ease 0s, visibility 0s linear 150ms; z-index: 2147483646; }
.kwatch-submenu a { padding: 6px 8px; border-radius: 6px; color: #333; text-decoration: none; white-space: nowrap; }
.kwatch-submenu a:hover { background: #f5f5f5; }
.kwatch-item:hover > .kwatch-submenu { opacity: 1; visibility: visible; transition: opacity 150ms ease 0s, visibility 0s linear 0s; }
.kwatch-group.expand-all .kwatch-submenu { opacity: 1; visibility: visible; }

/* 通用圖像縮放，避免在小屏溢出 */
img { max-width: 100%; height: auto; }

/* 防止全頁水平溢出 */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
.page, .content, .header { max-width: 100%; overflow-x: hidden; }
.top-nav, .menu { max-width: 100%; }
.header { z-index: 10001 !important; position: relative; }
#site-top { z-index: 10001; position: relative; }
/* 確保菜單容器在頂層 */
#site-menu { position: relative; z-index: 10001; }

/* 響應式：窄屏下頂部導航改為縱向排版，菜單橫向滾動 */
@media (max-width: 768px) {
  .top-nav { flex-direction: column; align-items: stretch; gap: 8px; }
  .brand-row { flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  .search { flex: 1 1 auto; }
  .search-input { min-width: 0; width: 100%; }
  .menu-toggle { display: inline-flex; align-self: flex-end; }
  .menu { display: none; flex-direction: column; gap: 8px; padding: 8px; background: #fff; border: 1px solid #eee; border-radius: 8px; }
  .menu.open { display: flex; }
  .menu a { display: block; }
  .kwatch-dropdown { display: inline-flex; }
  .kwatch-panel { position: static; width: 100%; box-shadow: none; border-radius: 8px; margin-top: 6px; max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .kwatch-item { margin-bottom: 6px; }
  .kwatch-submenu { position: static; left: auto; top: auto; box-shadow: none; border: none; padding: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .kwatch-submenu a { white-space: normal; }
  .kwatch-group { width: 100%; }
}

@media (max-width: 480px) {
  .kwatch-panel { max-height: 45vh; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .menu { flex-wrap: wrap; row-gap: 8px; }
  .menu a { flex: 0 0 auto; }
}

@media (min-width: 1200px) {
  .menu a { padding: 8px 12px; }
}

@media (max-width: 480px) {
  .search-input { height: 30px; }
  .kwatch-toggle { padding: 6px 4px; }
}