/* =========================================================
   わがみ小路 / 商品一覧  product-list.css
   ---------------------------------------------------------
   読み込み例:
     <link rel="stylesheet" href="/wagamikoji/css/product-list.css">

   ・クラス名はすべて .plist- 接頭辞で統一しています。
     既存サイトのCSSと衝突しません。
   ・配色は下の :root の変数を書き換えれば一括で変わります。
   ・カテゴリー画像は既存のものをそのまま使う想定です。
     HTML側の <img src="..."> だけ差し替えてください。
   ========================================================= */

:root{
  --plist-bg:        #f5f3f2;  /* 指定の背景色 */
  --plist-card:      #ffffff;
  --plist-ink:       #332f2c;  /* 墨 */
  --plist-ink-soft:  #7b736c;
  --plist-line:      #e5dfd9;
  --plist-accent:    #b13c3c;  /* 紅 */
  --plist-accent-bg: #f8eeee;
  --plist-shadow:    0 1px 2px rgba(51,47,44,.05);
  --plist-shadow-hv: 0 8px 24px rgba(51,47,44,.10);

  --plist-mincho: "Zen Old Mincho","Yu Mincho",YuMincho,"Hiragino Mincho ProN","MS PMincho",serif;
  --plist-gothic: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
}

.plist-wrap{
  max-width:960px;
  margin:0 auto;
  padding:32px 16px 80px;
  background:var(--plist-bg);
  color:var(--plist-ink);
  font-family:var(--plist-gothic);
}
@media (min-width:768px){ .plist-wrap{ padding:48px 32px 100px; } }

/* --- 見出し ---------------------------------------------
   既存サイトの h1 に付いている背景色・背景画像・枠線・余白を
   打ち消しています。サイト側が #id セレクタで指定している場合に
   負けないよう !important を付けています。            */
.plist-head{
  margin:0 0 24px;
  background:none;
  background-color:transparent;
  padding:0;
  border:0;
}
.plist-head h1{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  text-indent:0 !important;
  text-align:left;
  line-height:1.4;
  color:var(--plist-ink);
  font-family:var(--plist-mincho);
  font-size:26px;
  font-weight:600;
  letter-spacing:.14em;
  margin:0 0 6px;
}
/* サイト側が擬似要素で装飾（アイコンや帯）を入れている場合の打ち消し */
.plist-head h1::before,
.plist-head h1::after{
  content:none !important;
  display:none !important;
}
@media (min-width:768px){ .plist-head h1{ font-size:32px; } }

/* --- 既存テンプレートの見出し帯を打ち消す場合 -----------------
   h1 そのものには背景指定がありません。色が付いて見えるのは
   h1 を囲んでいる親要素（CMS側のタイトル枠）の背景です。
   コンソールで親要素を特定したうえで、下のセレクタ部分を
   実際のクラス名に置き換えてコメントを外してください。

.page-header,
.page-title,
#contents h1{
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
}
--------------------------------------------------------------- */
.plist-head .plist-en{
  display:block;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--plist-ink-soft);
}

/* --- カテゴリー横断ナビ（アンカー） -----------------------
   SPでも横スクロールさせず、折り返して全項目を表示します。
   折り返すと高さが出るため、SPでは追従（sticky）を解除し、
   768px以上のときだけ上部に固定しています。            */
.plist-nav{
  margin:0 -16px 28px;
  padding:12px 16px;
  background:var(--plist-bg);
  border-top:1px solid var(--plist-line);
  border-bottom:1px solid var(--plist-line);
}
.plist-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0; padding:0;
}
@media (min-width:768px){
  .plist-nav{
    position:sticky; top:0; z-index:20;
    margin:0 -32px 36px;
    padding:12px 32px;
    background:rgba(245,243,242,.94);
    backdrop-filter:blur(6px);
    border-top:0;
  }
}
.plist-nav a{
  display:inline-block;
  padding:7px 12px;
  font-size:12.5px;
  line-height:1;
  color:var(--plist-ink);
  text-decoration:none;
  background:var(--plist-card);
  border:1px solid var(--plist-line);
  border-radius:999px;
  transition:background .2s, border-color .2s, color .2s;
}
.plist-nav a:hover,
.plist-nav a:focus-visible{
  background:var(--plist-accent);
  border-color:var(--plist-accent);
  color:#fff;
}
@media (min-width:768px){
  .plist-nav a{ padding:7px 14px; font-size:13px; }
}

/* --- グリッド --- */
.plist-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
}
@media (min-width:600px){ .plist-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } }
@media (min-width:1024px){ .plist-grid{ grid-template-columns:repeat(3,1fr); gap:24px; } }

/* --- カード --- */
.plist-card{
  background:var(--plist-card);
  border:1px solid var(--plist-line);
  border-radius:3px;
  box-shadow:var(--plist-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .25s ease, transform .25s ease;
  scroll-margin-top:72px;
}
.plist-card:hover{ box-shadow:var(--plist-shadow-hv); transform:translateY(-2px); }

/* 画像エリア：既存画像を流用（比率だけ揃えて表示） */
.plist-media{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#ece7e2;
  text-decoration:none;
}
.plist-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.plist-card:hover .plist-media img{ transform:scale(1.04); }

/* 画像が無い／読み込めない場合の代替表示 */
.plist-media.is-fallback::after{
  content:attr(data-name);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--plist-mincho);
  font-size:20px; letter-spacing:.2em;
  color:#b3a89e;
  background:
    repeating-linear-gradient(45deg,#ece7e2 0 6px,#e7e1db 6px 12px);
}

/* 画像上の題箋（縦書きラベル）は非表示にしています。
   復活させたい場合は下の display:none を外してください。 */
.plist-plate{
  display:none;
  position:absolute;
  top:12px; left:12px;
  writing-mode:vertical-rl;
  font-family:var(--plist-mincho);
  font-size:15px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--plist-ink);
  background:rgba(255,255,255,.94);
  border:1px solid rgba(177,60,60,.35);
  padding:12px 7px;
  max-height:calc(100% - 24px);
}

/* カード本文 */
.plist-body{
  padding:16px 16px 14px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.plist-cat{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding-bottom:10px;
  border-bottom:1px solid var(--plist-line);
  margin-bottom:10px;
}
.plist-cat a{
  font-family:var(--plist-mincho);
  font-size:18px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--plist-ink);
  text-decoration:none;
}
.plist-cat a:hover{ color:var(--plist-accent); }
.plist-count{
  flex:none;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--plist-ink-soft);
}

/* サブカテゴリー */
.plist-subs{
  list-style:none;
  margin:0; padding:0;
}
.plist-subs li + li{ margin-top:2px; }
.plist-subs a{
  display:block;
  position:relative;
  padding:7px 8px 7px 16px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--plist-ink);
  text-decoration:none;
  border-radius:2px;
  transition:background .18s, color .18s;
}
.plist-subs a::before{
  content:"";
  position:absolute;
  left:4px; top:calc(50% - 1px);
  width:5px; height:1px;
  background:var(--plist-accent);
  opacity:.55;
}
.plist-subs a:hover,
.plist-subs a:focus-visible{
  background:var(--plist-accent-bg);
  color:var(--plist-accent);
}

/* 「他◯件を表示」 */
.plist-more{ margin-top:2px; }
.plist-more > summary{
  list-style:none;
  cursor:pointer;
  padding:8px 8px 8px 16px;
  font-size:12.5px;
  color:var(--plist-accent);
  border-radius:2px;
}
.plist-more > summary::-webkit-details-marker{ display:none; }
.plist-more > summary::after{ content:"　＋"; }
.plist-more[open] > summary::after{ content:"　−"; }
.plist-more > summary:hover{ background:var(--plist-accent-bg); }
.plist-more[open] > summary{ color:var(--plist-ink-soft); }

/* カード下部の「すべて見る」 */
.plist-all{
  margin-top:auto;
  padding-top:12px;
}
.plist-all a{
  display:block;
  text-align:center;
  padding:10px;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--plist-accent);
  text-decoration:none;
  border:1px solid var(--plist-line);
  border-radius:2px;
  transition:background .2s, color .2s, border-color .2s;
}
.plist-all a:hover,
.plist-all a:focus-visible{
  background:var(--plist-accent);
  border-color:var(--plist-accent);
  color:#fff;
}

/* アウトレットだけ少し差をつける（カード名の左に細い罫） */
.plist-card--outlet .plist-cat a{
  padding-left:10px;
  border-left:3px solid var(--plist-accent);
}

/* フォーカス可視化 */
.plist-wrap a:focus-visible,
.plist-wrap summary:focus-visible{
  outline:2px solid var(--plist-accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .plist-card, .plist-media img{ transition:none !important; }
  .plist-card:hover{ transform:none; }
  .plist-card:hover .plist-media img{ transform:none; }
}