/* ==========================================================
   山武弓具店 商品一覧（PC）改善CSS 試作
   対象：ショップサーブ PC版 商品一覧「レイアウト1」（table.itemList）
   ・表組みをCSSグリッドに変えて3列・大きい画像にする
   ・画像は正方形の枠にそろえ、縦長画像も切らずに収める
   ・商品名は2行で「…」省略
   ========================================================== */

/* 表組み → 3列グリッド */
table.itemList,
table.itemList > tbody{display:block;width:100%!important}
table.itemList > tbody{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px;padding:8px 0 24px}
table.itemList > tbody > tr{display:contents}
table.itemList > tbody > tr > td{display:block;width:auto!important;padding:0!important;vertical-align:top}
table.itemList .layout1,
table.itemList .layout1 table,
table.itemList .layout1 tbody,
table.itemList .layout1 tr,
table.itemList .layout1 td{display:block;width:100%!important;padding:0!important}

/* 画像：正方形の枠にそろえる */
table.itemList .item a{display:block;aspect-ratio:1/1;background:#fff;border:1px solid #e6e1d6;overflow:hidden}
table.itemList .item img{width:100%!important;height:100%!important;object-fit:contain;transition:transform .4s}
table.itemList .item a:hover img{transform:scale(1.04)}

/* 商品名：2行で省略 */
table.itemList h2.goods{margin:14px 0 0;padding:0;border:0;background:none;font-size:15px;font-weight:500;line-height:1.6}
table.itemList h2.goods a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#1d1b18;text-decoration:none}
table.itemList h2.goods a:hover{color:#b3241c;text-decoration:underline}
table.itemList h2.goods br{display:none}
table.itemList h2.goods img{display:block;margin-top:6px}

/* 価格 */
table.itemList .price{margin-top:6px;font-size:18px;font-weight:700;color:#b3241c}


/* ==========================================================
   2026-10-26 追加補正（既存テーマ・店舗CSSとの併用対策）
   前任ご担当者様へ：上部は受領した pc/list.css の原文です。
   原文の指定を残し、本ブロックで必要な項目だけ上書きしています。
   対象は table.itemList 内。ページ全体のCSSは変更しません。
   管理画面head欄では、このファイル全体を <style> で囲み、
   reset.css / layout.css / meganavi.css の読み込みより後に配置。
   ========================================================== */

/* PC-01：画像枠のborder・既存layout1の余白で列幅がはみ出さないよう補正。
   Grid列も最小幅0とし、長い商品名による列幅の押し広げを防ぎます。 */
table.itemList > tbody {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
table.itemList > tbody > tr > td,
table.itemList .layout1 {
  min-width: 0;
  box-sizing: border-box;
}
table.itemList .layout1 {
  margin: 0;
}
table.itemList .item a {
  box-sizing: border-box;
}

/* PC-02：テーマの .item img {padding:5px} を一覧内だけ解除。
   高さ100%の親高さへの依存を避け、画像自身も正方形にします。
   object-fit:containは原文どおり。ホバー時の拡大演出も維持します。 */
table.itemList .item img {
  box-sizing: border-box;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1;
}

/* PC-03：店舗CSSの a:hover と a:hover img の透明度が
   二重に適用されるのを防止。商品名・画像を読める濃さに保ちます。 */
table.itemList a,
table.itemList a:hover,
table.itemList a img,
table.itemList a:hover img {
  opacity: 1;
}

/* PC-04：テーマの h2.goods a の太字指定を明示的に上書き。
   1行の商品名でも2行分（15px × 1.6 × 2）の領域を確保します。 */
table.itemList h2.goods a {
  font-weight: 500;
  min-height: 48px;
  overflow-wrap: anywhere;
}

/* PC-05：商品名2行48px＋タグ余白6px＋タグ領域16pxを最低確保。
   PICK UPタグがない商品でも価格の開始位置をそろえます。
   複数タグなどで高さが増えた場合は切り捨てず表示を優先します。 */
table.itemList h2.goods {
  min-height: 70px;
}
table.itemList h2.goods img {
  max-width: 100%;
  height: auto;
}
/* ================== 追加補正ここまで ================== */