/* ============================================================
   あまた音楽堂 商品一覧・カテゴリページ専用 (amata_list.css)
   読み込み: Product/list.twig の stylesheet ブロック
   ------------------------------------------------------------
   ■ キャッシュバスターは手動採番(?v=N)を廃止し、mtime自動付与に移行済み
     (A-1 / 概要ファイル 3-19)。Twig側は |amata_v フィルタが付与する。
     このファイルに版数を書かないこと。FTPで上げ直せばURLが変わる。
   ------------------------------------------------------------
   ■ 以下の v6 / v8 / v9 は「変更履歴」であり、キャッシュバスターの版数ではない。
     経緯を残す目的でそのまま保持する。

   v9:
     ・PCでセレクトの文字が切れる問題(v8の回帰)。.form-select の
       width:100% を受け止めず min-width:0 で潰れていた → width:auto
     ・0件の子カテゴリだけ行の余白が詰まる問題。padding を <a> にしか
       置いていなかった → a と .is-empty を同じセレクタで扱う
     ※ 768pxで上アキが変わる件は本ファイルに原因なし(991/575のみ)。
       .ec-layoutRole__main の padding-block(amata_common.css)側の課題

   v8 (上部操作行の構造修正):
     上部操作行が EC-CUBE標準クラス(.ec-searchnavRole / .ec-select)に
     相乗りしていたため、標準側の 768px 分岐(padding・font-size・幅)を
     1プロパティずつ打ち消す形になっていた。クラスごと amata- 系に
     分離し、打ち消しルールを全廃(ルールブック 1-5)。
     Twig 側のクラス名も同時に変更しているため、v8 と Step 5b 修正版3 は
     必ずセットで適用すること。
     ・操作行下の余白は .amata-cards の margin-top 1箇所に集約
     ・セレクトの font-size / height はメディアクエリを持たせない

   v6 (Step 5b 実機修正):
     1. 子を持たない最後のカテゴリで罫線が2本になる問題を解消
     2. タグ軸のピルを Grid 化し幅を揃える(列数は --amata-filter-cols で管理)
     3. 選択状態の表現を :checked に一本化(is-active は廃止)
        → チェックを外しても塗りが残る不具合の修正
     4. 上部操作行のブレークポイントを 991/575 に一本化
        (EC-CUBE標準 style.css の 768px 分岐を明示的に上書き)
   ============================================================ */

/* コンテンツ全体の左右余白(下層共通の padding は main に効くが、
   一覧はカードが端に接しないよう明示的に内側余白を持たせる) */
.amata-list {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: var(--amata-container);
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

/* ============ 左: 絞り込みサイドバー ============ */
.amata-filter {
  /* タグ軸ピルの列数。PCはサイドバー内寸が約198pxしかなく、
     2列だと「オリジナル作品」が必ず折り返すため1列。
     991px以下(モーダル)で2列に切り替える。ここ1箇所で管理する。 */
  --amata-filter-cols: 1;

  flex: 0 0 240px;
  box-sizing: border-box;
  border: 1px solid var(--amata-line);
  border-radius: var(--amata-radius);
  padding: 20px;
  background: #fff;
}
.amata-filter__head {
  display: none; /* SPモーダル時のみ表示 */
}
.amata-filter__ttl {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--amata-teal);
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---- 編成(カテゴリツリー) ---- */
.amata-filter__cat {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--amata-line);
}
.amata-filter__catlist,
.amata-filter__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.amata-filter__catall {
  display: block;
  padding: 6px 0;
  color: var(--amata-ink);
  font-size: 0.88rem;
  text-decoration: none;
}
.amata-filter__catall.is-active,
.amata-filter__catall:hover {
  color: var(--amata-teal);
  font-weight: 700;
}
/* 第1カテゴリ(吹奏楽/アンサンブル/ソロ)は見出しらしく強調 */
.amata-filter__catroot-wrap {
  margin-top: 8px;
}
.amata-filter__catroot {
  display: block;
  padding: 8px 0 6px;
  color: var(--amata-ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dotted var(--amata-line);
}
.amata-filter__catroot.is-active,
a.amata-filter__catroot:hover {
  color: var(--amata-teal);
}
/* 最後のカテゴリが子を持たない場合、この点線のすぐ下に
   .amata-filter__cat のブロック区切り線が来て罫線が2本に見える。
   子を持つ場合の点線は「親と子の区切り」として意味があるので残し、
   子を持たない最終要素(= catroot が :last-child)のときだけ消す。 */
.amata-filter__catlist > li:last-child .amata-filter__catroot:last-child {
  border-bottom: none;
}
/* 子カテゴリ */
.amata-filter__sublist {
  padding: 4px 0 0 12px;
}
.amata-filter__sublist li {
  padding: 0;
}
/* 行の余白は「リンクかどうか」に依存させない。
   0件の子カテゴリは <a> ではなく <span class="is-empty"> で出力されるため、
   a だけに padding を置くと0件行だけ詰まる(実際に発生)。 */
.amata-filter__sublist a,
.amata-filter__sublist .is-empty {
  display: block;
  padding: 5px 0;
  font-size: 0.85rem;
  text-decoration: none;
}
.amata-filter__sublist a {
  color: var(--amata-ink-soft);
}
.amata-filter__sublist a.is-active,
.amata-filter__sublist a:hover {
  color: var(--amata-teal);
  font-weight: 700;
}
/* 件数 */
.amata-filter__count {
  margin-left: 4px;
  color: var(--amata-ink-soft);
  font-size: 0.78rem;
  font-weight: 400;
}
/* 0件: グレーで非リンク(押せない) */
.amata-filter__cat .is-empty {
  display: block;
  color: #b7c2c2;
  cursor: default;
}
.amata-filter__catroot.is-empty {
  border-bottom: 1px dotted var(--amata-line);
}
.amata-filter__cat .is-empty .amata-filter__count {
  color: #c8d0d0;
}

/* ---- タグ軸(ジャンル・グレード)= 複数選択 ---- */
.amata-filter__group {
  margin-bottom: 22px;
}
/* Grid にして幅を揃える。flex-wrap のままだと文字数で幅が変わる。
   列数は .amata-filter の --amata-filter-cols で一括管理。 */
.amata-filter__tags {
  display: grid;
  grid-template-columns: repeat(var(--amata-filter-cols), minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amata-filter__tags > li {
  display: flex; /* ラベルをセル全体に広げる */
}
.amata-filter__tag {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 12px;
  border: 1px solid var(--amata-line);
  border-radius: var(--amata-radius-pill);
  font-size: 0.82rem;
  line-height: 1.35;
  cursor: pointer;
  transition: color var(--amata-dur-fast) ease,
              border-color var(--amata-dur-fast) ease,
              background-color var(--amata-dur-fast) ease;
}
/* チェックボックス本体は表示する(状態表現の主役) */
.amata-filter__tag input[type="checkbox"] {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--amata-teal);
  cursor: pointer;
}
.amata-filter__tag:hover {
  border-color: var(--amata-teal);
  color: var(--amata-teal);
}
/* 選択中の表現は :checked のみに統一する。
   旧版は .is-active(サーバー側判定)と併記していたため、
   チェックを外しても塗りが残る不具合になっていた。
   :has() の詳細度は (0,2,1) で :hover(0,2,0) より強いので、
   選択中にホバーしても文字色が浅葱に化けて消えることはない。
   font-weight は変えない(太字化で文字幅が変わり2列で折り返すため)。 */
.amata-filter__tag:has(input:checked) {
  border-color: var(--amata-teal);
  background: var(--amata-teal);
  color: #fff;
}

.amata-filter__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.amata-filter__submit {
  padding: 10px;
  border: none;
  border-radius: var(--amata-radius-pill);
  background: var(--amata-grad);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--amata-dur-fast) ease;
}
.amata-filter__submit:hover {
  opacity: 0.85;
}
.amata-filter__clear {
  text-align: center;
  color: var(--amata-ink-soft);
  font-size: 0.82rem;
  text-decoration: underline;
}

/* ============ 右: 商品一覧 ============ */
.amata-list__main {
  flex: 1;
  min-width: 0; /* グリッドがはみ出さないための必須指定 */
}

/* ============ 上部の操作行(件数 / 絞り込み / 並び替え) ============
   EC-CUBE標準の .ec-searchnavRole / .ec-select は使わない。
   標準側が 768px を境に padding・margin・font-size・幅を切り替えており、
   相乗りすると打ち消しを1プロパティずつ積み増すことになるため、
   クラスごと独自側に分離した(ルールブック 1-5「土俵を分ける」)。
   このセクションに標準CSSの打ち消しは1件も無い。 */
.amata-searchnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0; /* 下の余白は .amata-cards 側の1箇所で管理する */
}
.amata-searchnav__count {
  margin: 0;
}
.amata-searchnav__error {
  margin: 0;
  color: var(--amata-red);
}
.amata-searchnav__tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.amata-searchnav__selects {
  display: flex;
  gap: 8px;
}
/* 文字サイズ・高さはメディアクエリを持たせず1箇所で固定する
   (768pxで文字サイズが変わる事故の再発防止)。
   border と矢印は .form-select のままにしたいので触らない。 */
.amata-searchnav__selects select {
  flex: 0 0 auto;
  width: auto; /* .form-select(Bootstrap) の width:100% では内容幅より潰れる */
  height: 40px;
  margin: 0;
  font-size: 0.9rem;
}

/* カードグリッド */
.amata-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 20px;
  margin-top: 24px; /* 操作行との間隔。ここ1箇所で管理する */
}
.amata-card {
  display: flex;
  flex-direction: column;
  color: var(--amata-ink);
  text-decoration: none;
  transition: transform var(--amata-dur-fast) var(--amata-ease-out);
}
.amata-card:hover {
  transform: translateY(-4px);
}
.amata-card__image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--amata-line);
  border-radius: var(--amata-radius);
  background: #fff;
}
.amata-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--amata-dur-fast) ease;
}
.amata-card:hover .amata-card__image img {
  opacity: 0.85;
}
.amata-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
}
.amata-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}
.amata-card__composer {
  font-size: 0.8rem;
  color: var(--amata-ink-soft);
}
.amata-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.amata-card__grade {
  padding: 1px 10px;
  border: 1px solid var(--amata-teal);
  border-radius: var(--amata-radius-pill);
  color: var(--amata-teal);
  font-size: 0.72rem;
  font-weight: 700;
}
.amata-card__price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--amata-red);
}

/* ============ 0件のときの代替導線 (3-5c ⑥) ============
   従来は「お探しの商品は見つかりませんでした」の1行だけで、
   その下がパンくずまで一気に空白になっていた。
   行き止まりを作らないための導線をここに置く。

   ボタンは .amata-btn(amata_top.css)を使えない。
   このページでは amata_top.css が読み込まれないためで、
   font-size を明示しないと本文サイズを継承して小さくなる(D-9)。
   ルールブックの一次ボタン表をそのまま写している。 */
.amata-empty {
  margin-top: 32px;
  padding: 40px 20px 8px;
  border-top: 1px solid var(--amata-line);
  text-align: center;
}
.amata-empty__lead {
  margin: 0 0 32px;
  color: var(--amata-ink-soft);
  font-size: 1rem;
  line-height: 1.9;
}
.amata-empty__actions {
  margin: 0 0 32px;
}
.amata-empty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 60px;
  border-radius: var(--amata-radius-pill);
  background: var(--amata-grad);
  box-shadow: var(--amata-shadow-1);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: transform var(--amata-dur-fast) var(--amata-ease-out),
              box-shadow var(--amata-dur-fast) var(--amata-ease-out);
}
.amata-empty__btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--amata-shadow-2);
  color: #fff;
}
.amata-empty__btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* 検索窓。SPではヘッダーの検索窓が .amata-pc-only で隠れており、
   ドロワーを開かないと再検索できないため、0件の画面にも置く */
.amata-empty__search {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 32px;
}
.amata-empty__searchInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--amata-line);
  border-radius: var(--amata-radius-pill);
  background: var(--amata-bg-tint-1);
  color: var(--amata-ink);
  font-family: var(--amata-font-jp);
  font-size: 1rem;
}
.amata-empty__searchInput::placeholder {
  color: var(--amata-ink-soft);
}
.amata-empty__searchButton {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--amata-radius-pill);
  background: var(--amata-grad);
  color: #fff;
  font-family: var(--amata-font-jp);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: transform var(--amata-dur-fast) var(--amata-ease-out),
              box-shadow var(--amata-dur-fast) var(--amata-ease-out);
}
.amata-empty__searchButton:hover {
  transform: translateY(-2px);
  box-shadow: var(--amata-shadow-1);
}

/* 色の変化はトランジションさせない(3章5)。パンくずのリンクと同じ作法 */
.amata-empty__navList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amata-empty__navLink {
  color: var(--amata-ink-soft);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}
.amata-empty__navLink:hover {
  color: var(--amata-teal);
  text-decoration: underline;
}

/* ---- パンくず(一覧下部・> 区切り) ---- */
.amata-breadcrumb {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--amata-line);
  font-size: 0.82rem;
  color: var(--amata-ink-soft);
}
.amata-breadcrumb a {
  color: var(--amata-ink-soft);
  text-decoration: none;
}
.amata-breadcrumb a:hover {
  color: var(--amata-teal);
  text-decoration: underline;
}
.amata-breadcrumb__sep {
  margin: 0 8px;
  color: var(--amata-ink-soft);
}

/* ============ SP開閉ボタン(PC非表示) ============ */
.amata-filter__open-btn {
  display: none;
}
/* 適用中の件数バッジ。モーダルを閉じると適用状態が見えないため外に出す */
.amata-filter__open-btn .amata-filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: var(--amata-radius-pill);
  background: var(--amata-teal);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.amata-filter__overlay {
  display: none;
}

/* ============ レスポンシブ ============ */
@media (max-width: 991px) {
  .amata-list {
    display: block;
    padding-inline: 16px;
  }
  .amata-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 一次ボタンの狭幅仕様(ルールブックの一次ボタン表) */
  .amata-empty {
    padding: 32px 0 8px;
  }
  .amata-empty__btn {
    display: flex;
    width: min(80%, 320px);
    margin-inline: auto;
    padding: 0 20px;
  }
  /* 上部操作行(991px以下): 件数を1段目、絞り込みボタンを2段目、
     並び替え・表示件数セレクトを3段目に全幅で置く。
     横1列に詰めるとセレクトの最小幅で溢れるため段組みにする。 */
  .amata-searchnav {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .amata-searchnav__tools {
    flex-wrap: wrap;
    gap: 10px;
  }
  .amata-filter__open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--amata-teal);
    border-radius: var(--amata-radius-pill);
    background: #fff;
    color: var(--amata-teal);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }
  .amata-searchnav__selects {
    width: 100%;
    gap: 10px;
  }
  /* 2つで等分。width:50% だと gap のぶん溢れるため flex で分ける */
  .amata-searchnav__selects select {
    flex: 1 1 0;
    min-width: 0;
    height: 42px;
  }
  /* サイドバーをモーダル化 */
  .amata-filter {
    --amata-filter-cols: 2; /* モーダル内寸は約266px。2列で収まるよう下でpaddingを詰める */

    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--amata-z-drawer);
    width: min(85%, 340px);
    height: 100dvh;
    flex: none;
    border: none;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform var(--amata-dur-fast) var(--amata-ease-out);
  }
  /* 2列に収めるため左右paddingと文字を詰める。
     360px幅端末で「オリジナル作品」が1行に収まる値を実測で決めている。
     これより狭い端末では折り返すが、Grid なので幅の揃いは崩れない。 */
  .amata-filter__tag {
    padding: 6px 8px;
    font-size: 0.8rem;
  }
  .amata-filter.is-open {
    transform: translateX(0);
  }
  .amata-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -20px -20px 20px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--amata-line);
    font-weight: 700;
  }
  .amata-filter__close {
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--amata-ink);
  }
  .amata-filter__overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--amata-z-overlay);
    background: rgba(23, 46, 48, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--amata-dur-fast) ease,
                visibility 0s linear var(--amata-dur-fast);
  }
  .amata-filter__overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

@media (max-width: 575px) {
  .amata-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }
  .amata-card__name {
    font-size: 0.85rem;
  }
  .amata-empty__search {
    flex-direction: column;
  }
  .amata-empty__searchButton {
    width: 100%;
    padding: 0;
  }
  .amata-empty__navList {
    gap: 12px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amata-card,
  .amata-filter,
  .amata-filter__overlay,
  .amata-empty__btn,
  .amata-empty__searchButton {
    transition: none;
  }
  .amata-empty__btn:hover,
  .amata-empty__btn:active,
  .amata-empty__searchButton:hover {
    transform: none;
  }
}