/* =============================================================
   side_mp-tw.css — 新東西市集 共用側欄樣式
   說明：side_mp-tw.asp 專用樣式，從 mp_theme-tw.css 拆分出來，
   讓任何要 include side_mp-tw.asp 的頁面都能單獨引用本檔案。
   依賴：需與 mp_theme-tw.css 一起載入（沿用其中的 CSS 變數）。
   若同一頁面也載入 head_mp-tw.css，sticky 的 top 偏移量已對齊
   NAV 高度（100px）+ 間距，避免側欄被 NAV 蓋住。
   ============================================================= */

.mp-below-side { flex: 0 0 320px; max-width: 320px; min-width: 0; }
@media (max-width: 1023px) {
  .mp-below-side { display: none !important; }
}

.mp-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 116px; }
.mp-side-ad { display: flex; justify-content: center; overflow: hidden; border-radius: var(--mp-radius); }

.mp-side-card {
  background: var(--mp-card);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  box-shadow: var(--mp-shadow-sm);
}
.mp-side-card-head {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 800;
  color: var(--mp-foreground);
  background: var(--mp-primary-light);
  border-bottom: 1px solid var(--mp-border);
}
.mp-side-list { display: flex; flex-direction: column; }
.mp-side-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mp-border);
  transition: background-color .15s;
}
.mp-side-item:last-child { border-bottom: none; }
.mp-side-item:hover { background: var(--mp-muted); }
.mp-side-item svg { flex-shrink: 0; width: 13px; height: 13px; margin-top: 3px; color: var(--mp-primary); }
.mp-side-item-title {
  font-size: 12.5px; color: var(--mp-foreground); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}