/* =============================================================================
 *  KT CLINIC — ドクターズコスメ 一覧（archive-product.php）
 *  2026-08-03 モック（KTドクターズコスメ一覧_完成形b.html）に合わせて刷新。
 *  セレクタは .kt-cprd 配下にスコープしている。
 *
 *  それまでこのページは phase6-pages.css の .kt-product-archive を使っていて、
 *  色（#1A1F2E の青みグレー）も書体も、リニューアル後の他ページと別だった。
 *  ここでサイト共通の変数（--ink / --gold / --serif …）に揃えている。
 *
 *  ページ見出し（.kt-page-en / .kt-page-h1 / .kt-page-lead）の体裁は
 *  assets/css/page-head.css が持つ。**このファイルに書かないこと。**
 * ========================================================================== */

.kt-cprd{color:var(--ink);font-family:var(--sans);line-height:1.75;padding:0 0 6rem;}
.kt-cprd *{box-sizing:border-box;}
.kt-cprd a{color:inherit;text-decoration:none;}
.kt-cprd img{display:block;max-width:100%;}

.kt-cprd .cprd-inner{max-width:68rem;margin:0 auto;padding:0 2.5rem;}
.kt-cprd .cprd-empty{font-size:.92rem;color:var(--sub);text-align:center;padding:3rem 0;margin:0;}

/* --- シリーズの目次 ---
   絞り込みではなくアンカー。押すとそのシリーズの位置へ移動する。
   料金一覧ページの目次（.prc-idx）と同じ見た目。 */
.kt-cprd .cprd-idx{display:flex;flex-wrap:wrap;gap:.5rem;margin:2.75rem 0 3.25rem;
                   padding-bottom:2.25rem;border-bottom:1px solid var(--grey-line);}
.kt-cprd .cprd-idx a{font-size:.82rem;letter-spacing:.04em;color:var(--sub);padding:.5rem 1.1rem;
                     border:1px solid var(--grey-line);border-radius:999px;white-space:nowrap;
                     transition:border-color .2s,color .2s;}
.kt-cprd .cprd-idx a:hover{border-color:var(--gold-line);color:var(--gold-deep);}

/* --- シリーズ ---
   説明文はターム編集画面の「説明」欄。空なら行ごと出ない。 */
.kt-cprd .cprd-ser + .cprd-ser{margin-top:4rem;}
.kt-cprd .cprd-ser-head{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap;
                        margin:0 0 1.4rem;padding-bottom:.9rem;
                        border-bottom:1px solid var(--grey-line);}
.kt-cprd .cprd-ser-name{font-family:var(--serif);font-size:1.35rem;font-weight:500;
                        letter-spacing:.06em;line-height:1.6;margin:0;
                        scroll-margin-top:7rem;/* 固定ヘッダーに隠れないように */}
.kt-cprd .cprd-ser-desc{font-size:.82rem;line-height:1.9;color:var(--sub);margin:0;}

/* --- 商品カード ---
   載せるのは 写真・商品名・容量・価格 の4つ（2026-08-03 ともちん決定）。
   シリーズ名はすぐ上の見出しと重複するのでカードには出さない。 */
.kt-cprd .cprd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.25rem 1.75rem;}
.kt-cprd .cprd-card{display:flex;flex-direction:column;}
.kt-cprd .cprd-card-img{aspect-ratio:1/1;background:var(--cream2);border:1px solid var(--line);
                        display:flex;align-items:center;justify-content:center;overflow:hidden;
                        margin-bottom:.95rem;transition:border-color .25s;}
.kt-cprd .cprd-card-img img{width:100%;height:100%;object-fit:cover;}
.kt-cprd .cprd-card-img span{font-size:.72rem;letter-spacing:.1em;color:#C2B9A9;}
.kt-cprd .cprd-card:hover .cprd-card-img{border-color:var(--gold-line);}
.kt-cprd .cprd-card-name{font-size:.92rem;font-weight:600;line-height:1.7;margin:0 0 .25rem;}
.kt-cprd .cprd-card-vol{font-size:.76rem;color:var(--sub);margin:0 0 .55rem;}

/* 価格の見せ方は料金表（price-table.css）と同じ考え方。
   数字を大きく、単位を数字の72%に落として数字を主役にする。
   一覧のカードなので、料金表の1.35remより少しだけ小さい1.2rem。 */
.kt-cprd .cprd-card-price{font-family:var(--serif);font-size:1.2rem;font-weight:500;
                          letter-spacing:.01em;font-variant-numeric:tabular-nums;
                          margin:auto 0 0;}
.kt-cprd .cprd-card-price .unit{font-size:.72em;font-weight:500;margin-left:.08em;}
.kt-cprd .cprd-card-price .from{font-family:var(--sans);font-size:.72rem;font-weight:400;
                                color:var(--sub);margin-left:.3rem;}
.kt-cprd .cprd-card-tax{font-family:var(--sans);font-size:.68rem;font-weight:400;
                        color:var(--sub);margin-left:.4rem;}

/* --- 末尾の注記 --- */
.kt-cprd .cprd-note{margin-top:4rem;font-size:.8rem;line-height:2;color:#8C8A85;}
.kt-cprd .cprd-note p{margin:0;}

/* ===== スマホ =========================================================== */
@media (max-width:1080px){
  .kt-cprd{padding-bottom:4.5rem;}
  .kt-cprd .cprd-inner{padding:0 1.25rem;}
  .kt-cprd .cprd-idx{margin:2rem -1.25rem 2.5rem;padding:0 1.25rem 1.75rem;gap:.45rem;
                     flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .kt-cprd .cprd-idx::-webkit-scrollbar{display:none;}
  .kt-cprd .cprd-idx a{padding:.45rem 1rem;font-size:.78rem;}
  .kt-cprd .cprd-ser + .cprd-ser{margin-top:3rem;}
  .kt-cprd .cprd-ser-name{font-size:1.15rem;}
  .kt-cprd .cprd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1.1rem;}
  .kt-cprd .cprd-card-price{font-size:1.1rem;}
}

/* =============================================================================
 *  シリーズページ（taxonomy-product_series.php）
 *  2026-08-03 追加。商品カードは上の .cprd-* をそのまま使うので、
 *  ここにはシリーズ固有の要素だけを書く。
 *
 *  ページ見出し（.kt-page-en / .kt-page-h1 / .kt-page-lead）の体裁は
 *  assets/css/page-head.css が持つ。**このファイルに書かないこと。**
 * ========================================================================== */

/* --- メイン画像 ---
   施術詳細のヒーロー画像と同じ幅（46rem）・同じ比率（16:9）。
   推奨サイズ 1600×900px を使いまわせる。未設定ならテンプレート側が出さない。
   2026-08-04 ともちん指示：画像の周りの枠は無し。
   商品写真は白背景のものが多く、枠を付けると写真より枠が目に入る。
   背景色は読み込まれるまでの受け皿として残している（読み込み後は隠れる）。 */
.kt-cser .cser-img{max-width:46rem;margin:3rem auto 0;aspect-ratio:16/9;overflow:hidden;
                   background:var(--cream2);}
.kt-cser .cser-img img{width:100%;height:100%;object-fit:cover;}

/* --- こんな方におすすめ ---
   施術ページ（.trs-cnc）・商品ページ（.prd-rec）と同じ見た目。 */
.kt-cser .cser-rec{background:var(--cream2);padding:2.5rem;margin:3.5rem 0 0;}
.kt-cser .cser-rec-h2{font-family:var(--serif);font-size:1.25rem;font-weight:500;letter-spacing:.06em;
                      text-align:center;margin:0 0 1.5rem;}
.kt-cser .cser-rec-list{list-style:none;margin:0 auto;padding:0;max-width:46rem;
                        display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem 2.5rem;}
.kt-cser .cser-rec-list li{display:flex;gap:.85rem;align-items:flex-start;font-size:.92rem;line-height:1.9;}
.kt-cser .cser-rec-list li::before{content:"";flex:none;width:7px;height:7px;margin-top:.65rem;
                                   background:var(--gold);border-radius:50%;}

/* --- このシリーズの商品 --- */
.kt-cser .cser-sec{margin-top:4rem;}
.kt-cser .cser-sec-h2{font-family:var(--serif);font-size:1.2rem;font-weight:600;letter-spacing:.06em;
                      margin:0 0 1.6rem;padding-bottom:.75rem;border-bottom:1px solid var(--grey-line);}

/* --- ほかのシリーズ ---
   シリーズページに直接来た人が行き止まりにならないようにする。
   見た目は一覧ページの目次チップ（.cprd-idx）と同じ。 */
.kt-cser .cser-other{margin-top:4rem;padding-top:2.25rem;border-top:1px solid var(--grey-line);}
.kt-cser .cser-other-t{font-size:.82rem;letter-spacing:.06em;color:var(--sub);margin:0 0 1rem;}
.kt-cser .cser-other-list{display:flex;flex-wrap:wrap;gap:.5rem;}
.kt-cser .cser-other-list a{font-size:.82rem;letter-spacing:.04em;color:var(--sub);padding:.5rem 1.1rem;
                            border:1px solid var(--grey-line);border-radius:999px;white-space:nowrap;
                            transition:border-color .2s,color .2s;}
.kt-cser .cser-other-list a:hover{border-color:var(--gold-line);color:var(--gold-deep);}

.kt-cser .cprd-note{margin-top:3.5rem;}

@media (max-width:1080px){
  .kt-cser .cser-img{margin-top:2rem;}
  /* 枠を画面いっぱいに広げる。左右に余白が残ると囲われた感じが弱くなる */
  .kt-cser .cser-rec{margin:2.5rem -1.25rem 0;padding:2rem 1.25rem;}
  .kt-cser .cser-rec-h2{font-size:1.15rem;text-align:left;}
  .kt-cser .cser-rec-list{grid-template-columns:minmax(0,1fr);gap:.7rem;}
  .kt-cser .cser-sec{margin-top:3rem;}
  .kt-cser .cser-other{margin-top:3rem;}
}