/* ============================================================
   VERETTA SOUNDS — Header Search Toggle
   header__icon-btn(検索)クリックで開閉する検索パネル
   fs-header-search.js が生成する .header__search-panel 用
   ============================================================ */

:root {
  --hs-bg:     #fff;
  --hs-text:   #111110;
  --hs-muted:  #7C7A74;
  --hs-border: #DAD7CF;
}

/* 検索アイコンボタン: アクティブ時の見た目 */
.header__icon-btn[aria-label="検索"].is-active {
  opacity: 1 !important;
}

/* 検索パネル本体（HTMLに直書き、初期状態は非表示） */
.header__search-panel {
  display:   grid !important;
  grid-template-rows: 0fr;
	coler:#fff;
  overflow:  hidden !important;
  background: #000 !important;
  border-bottom: 1px solid transparent;
  transition: grid-template-rows 0.35s ease, border-color 0.35s ease;
  position: relative !important;
  z-index: 90 !important;
}
.header__search-panel.is-active {
  grid-template-rows: 1fr;
  border-bottom-color: var(--hs-border) !important;
}
.header__search-panel svg{  filter: invert(100%);}
.header__search-panel > * { min-height: 0; }

/* フォーム */
.header__search-form {
  display:     flex !important;
  align-items: center !important;
  gap:         12px !important;
  max-width:   720px !important;
  margin:      0 auto !important;
  padding:     0 24px !important;
  height:      0;
  overflow:    hidden;
  transition:  height 0.35s ease, padding 0.35s ease;
}
.header__search-panel.is-active .header__search-form {
  height:  72px !important;
  padding: 12px 24px !important;
}

/* 入力欄 */
.header__search-input {
  flex:        1 !important;
  border:      none !important;
  border-bottom: 1px solid #fff !important;
  background:  transparent !important;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important;
  font-size:   16px !important;
  letter-spacing: 0.02em !important;
  color:       #fff !important;
  padding:     8px 2px !important;
  outline:     none !important;
  box-shadow:  none !important;
  border-radius: 0 !important;
}
.header__search-input::placeholder { color: var(--hs-muted) !important; }
.header__search-input:focus { border-bottom-color: var(--hs-text) !important; }

/* 検索 / 閉じるボタン */
.header__search-submit,
.header__search-close {
  flex-shrink: 0 !important;
  display:     flex !important;
  align-items: center !important;
  justify-content: center !important;
  width:       36px !important;
  height:      36px !important;
  padding:     0 !important;
  border:      none !important;
  background:  transparent !important;
  color:       var(--hs-text) !important;
  cursor:      pointer !important;
  box-shadow:  none !important;
  transition:  color 0.15s ease, opacity 0.15s ease;
}
.header__search-submit:hover,
.header__search-close:hover { color: var(--hs-muted) !important; }

/* レスポンシブ */
@media (max-width: 600px) {
  .header__search-form { padding: 0 16px !important; gap: 8px !important; }
  .header__search-panel.is-active .header__search-form { padding: 8px 16px !important; height: 64px !important; }
  .header__search-input { font-size: 15px !important; }
}