/* ============================================================
   search-collapse — 收合於工具列的搜尋（點放大鏡展開成 field-pill）
   ------------------------------------------------------------
   收合時只見放大鏡 icon 鈕；展開時滑開成 field-pill 輸入（自帶放大鏡＋✕）。
   任一時刻只露一個放大鏡。內層重用既有 .field-pill（不重造輸入框），
   本元件只負責「觸發鈕 ↔ 可過渡外殼」這一層。開合的 .is-open 由頁面 JS 切換。
   Promoted 2026-07-01 from e-shop.html inline（F3 工作列搜尋）。

   anatomy
     .search-collapse
       <button.btn.btn--icon.search-collapse__toggle>   觸發（放大鏡）
       <label.field-pill.search-collapse__field>        可過渡外殼（包 field-pill）
         .field-pill__input + <button.search-collapse__close>（✕）
   states：.is-open（展開）
   ============================================================ */
.search-collapse { display: flex; align-items: center; }

/* 收合態：兩個 class 選擇器 (.search-collapse .search-collapse__field) 的優先級要壓過
   後載入的 .field-pill 基礎 padding（單 class、同優先級時載入順序輸）——否則收合時 field-pill
   的 14px 內距＋1px 邊框沒被歸零，殘留約 30px 幽靈寬度，把觸發鈕往左推、與右鄰控制項間距不一致
   （2026-07-24 修正）。 */
.search-collapse .search-collapse__field {
  width: 0; min-width: 0;
  padding-left: 0; padding-right: 0;
  border-width: 0;
  opacity: 0; overflow: hidden;
  border-color: transparent;
  transition: width var(--duration) var(--easing),
              opacity var(--duration) var(--easing),
              padding var(--duration) var(--easing);
}
.search-collapse.is-open .search-collapse__field {
  width: 240px;
  padding-left: var(--sp-12); padding-right: var(--sp-4);
  border-width: 1px;
  opacity: 1;
  border-color: var(--border);
}
.search-collapse.is-open .search-collapse__toggle { display: none; }
.search-collapse__close { flex: none; margin-left: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  .search-collapse__field { transition: none; }
}
@media (max-width: 760px) {
  .search-collapse.is-open .search-collapse__field { width: 180px; }
}