/* ==========================================
   食材一覧レイアウト（ingredient_list 専用）
   - <=1024px：カード内は縦並び（ラベル＋値）
   - >1024px ：横並びも可能（必要なら）
   ========================================== */

/* ------------------------------
   上部アクションボタン
------------------------------ */
.ingredient-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.ingredient-actions .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* nowrap が原因で2列が崩れることがあるので、まずは外すのが安全 */
  /* white-space: nowrap; */
}

/* タブレット相当（600〜1024px）で 2列 */
@media (min-width: 600px) and (max-width: 1024px) {
  .ingredient-actions .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
  }
}

/* スマホ（〜599px）は 1列 */
@media (max-width: 599px) {
  .ingredient-actions .btn {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

/* ------------------------------
   上部の「ヘッダー行」を消す
   ※あなたが貼ったHTMLのクラスは ingredient-header-row
------------------------------ */
.ingredient-header-row {
  display: none;
}

/* ------------------------------
   1カード内の行（食材名/カテゴリ/メモ/操作）
------------------------------ */
.ingredient-row {
  display: flex;
  flex-direction: column; /* デフォルト：スマホ/タブレットは縦 */
  gap: 10px;
}

.ingredient-col {
  text-align: left;
}

/* ラベル（食材名/カテゴリ/メモ） */
.ingredient-label {
  font-weight: 700;
  margin-right: 0.35em;
}

/* コロン付与（これが今回の要件） */
.ingredient-label::after {
  content: "：";
  margin-right: 0.25em;
}

/* 値 */
.ingredient-value {
  font-weight: 400;
}

/* ------------------------------
   PC（1025px以上）
   ※「上部見出しは不要」なので、ヘッダー行は出さないまま。
   必要ならここで横並びだけ維持する。
------------------------------ */
@media (min-width: 1025px) {
  .ingredient-row {
    /* PCでもカード内を横並びにしたい場合は row にする */
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .ingredient-row .ingredient-col {
    /* 既存デザインを崩しにくい無難な幅 */
    min-width: 200px;
    max-width: 260px;
    overflow-wrap: break-word;
  }

  /* PCでは「ラベル：」を消したい場合はコメント解除
  .ingredient-label {
    display: none;
  }
  */
}

/* =====================================================
   ingredient_list: ページ限定（ingredient-page）で確実に効かせる
===================================================== */

/* カテゴリフィルタ：インラインstyleをCSSに寄せる（見た目は同じ） */
.ingredient-page .ingredient-filter {
  margin-bottom: 16px;
}

.ingredient-page .ingredient-filter-select {
  width: 200px;
  display: inline-block;
}

/* 上部ボタン：タブレットで2列、スマホで1列 */
.ingredient-page .ingredient-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.ingredient-page .ingredient-actions .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* 折り返しを許可（2列崩れの原因になりやすいのでnowrapは外す） */
  white-space: normal;
}

@media (min-width: 600px) and (max-width: 1024px) {
  .ingredient-page .ingredient-actions .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
  }
}

@media (max-width: 599px) {
  .ingredient-page .ingredient-actions .btn {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

/* 万一テンプレ側に残っていても、ヘッダー行は消す（保険） */
.ingredient-page .ingredient-header-row {
  display: none !important;
}

/* ラベルにコロン付与（あなたのHTMLは ingredient-label） */
.ingredient-page .ingredient-label {
  font-weight: 700;
  margin-right: 0.35em;
}

.ingredient-page .ingredient-label::after {
  content: "：";
  margin-right: 0.25em;
}