/* =============================================================================
 *  KT CLINIC — ドクターズコスメ 商品詳細（single-product.php）
 *  2026-08-03 新規。モック（KTドクターズコスメ商品ページ_モックb.html）に合わせた。
 *  セレクタは .kt-prd 配下にスコープしている。
 *
 *  それまでこのページは phase6-pages.css の .kt-cos / .kt-product-single を使っていて、
 *  色も書体もリニューアル後の他ページと別だった。
 *  ここでサイト共通の変数（--ink / --gold / --serif …）に揃えている。
 *
 *  【価格の見せ方】
 *  数字 1.35rem・太さ500／「円」はその72%。
 *  **料金一覧・施術詳細（price-table.css）と同じ値にすること。**
 *  同じ商品の価格が一覧とここで違って見えると、金額そのものを疑われる。
 * ========================================================================== */

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

.kt-prd .prd-inner{max-width:68rem;margin:0 auto;padding:0 2.5rem;}

/* --- 上段：画像 ＋ 基本情報 --- */
.kt-prd .prd-head{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;
                  margin:2rem 0 4.5rem;}

.kt-prd .prd-main{aspect-ratio:1/1;background:var(--cream2);border:1px solid var(--line);
                  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.kt-prd .prd-main img{width:100%;height:100%;object-fit:cover;}
.kt-prd .prd-main span{font-size:.74rem;letter-spacing:.12em;color:#C2B9A9;}

/* サムネイル。2枚以上あるときだけテンプレート側が出す */
.kt-prd .prd-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-top:.6rem;}
.kt-prd .prd-thumbs button{all:unset;cursor:pointer;aspect-ratio:1/1;background:var(--cream2);
                           border:1px solid var(--line);overflow:hidden;transition:border-color .2s;}
.kt-prd .prd-thumbs button img{width:100%;height:100%;object-fit:cover;}
.kt-prd .prd-thumbs button.is-active{border-color:var(--gold);}
.kt-prd .prd-thumbs button:hover{border-color:var(--gold-line);}

.kt-prd .prd-series{display:inline-block;font-size:.72rem;letter-spacing:.14em;color:var(--gold-deep);
                    border:1px solid var(--gold-line);border-radius:999px;padding:.3rem 1rem;margin:0 0 1.1rem;
                    transition:border-color .2s,opacity .2s;}
.kt-prd a.prd-series:hover{border-color:var(--gold);opacity:.8;}
.kt-prd .prd-h1{font-family:var(--serif);font-size:1.75rem;font-weight:500;letter-spacing:.05em;
                line-height:1.55;margin:0 0 1.6rem;}

/* --- 価格 --- */
.kt-prd .prd-prices{border-top:1px solid var(--grey-line);margin:0;}
.kt-prd .prd-price-row{display:flex;align-items:baseline;gap:1rem;padding:1.15rem .1rem;
                       border-bottom:1px solid var(--grey-line);font-size:.9rem;}
.kt-prd .prd-price-name{flex:1;min-width:0;}
.kt-prd .prd-price-sub{font-size:.78rem;color:var(--sub);margin-left:.4rem;}
.kt-prd .prd-price-sub::before{content:"（";}
.kt-prd .prd-price-sub::after{content:"）";}
.kt-prd .prd-price-yen{flex:none;font-family:var(--serif);font-size:1.35rem;font-weight:500;
                       font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap;}
.kt-prd .prd-price-yen .unit{font-size:.72em;font-weight:500;margin-left:.08em;}
.kt-prd .prd-price-tax{font-family:var(--sans);font-size:.68rem;font-weight:400;color:var(--sub);
                       margin-left:.45rem;}

/* --- 医療機関専売品 ---
   管理画面のチェックが入っているときだけ出る。
   2026-08-03 ともちん指示：先頭の点・説明文・背景色はいずれも不要。
   枠線と文字だけ（すぐ上のシリーズのチップと同じ扱い）。 */
.kt-prd .prd-pro{margin:1.6rem 0 0;}
.kt-prd .prd-pro-label{display:inline-block;font-size:.76rem;letter-spacing:.1em;color:var(--gold-deep);
                       border:1px solid var(--gold-line);padding:.4rem 1.1rem;}

/* --- 下段：セクション --- */
.kt-prd .prd-sec + .prd-sec{margin-top:3.5rem;}
.kt-prd .prd-sec-h2{font-family:var(--serif);font-size:1.2rem;font-weight:600;letter-spacing:.06em;
                    margin:0 0 1.1rem;padding-bottom:.75rem;border-bottom:1px solid var(--grey-line);}
.kt-prd .prd-text{font-size:.94rem;line-height:2.05;margin:0;}

/* こんな方におすすめ。
   見た目は施術ページの「こんなお悩みはありませんか」（.trs-cnc）に揃えている。
   同じ性質のものが2つのページで別の見た目だと、編集する側も見る側も覚え直しになる。 */
.kt-prd .prd-rec{background:var(--cream2);padding:2.5rem;}
.kt-prd .prd-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-prd .prd-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-prd .prd-rec-list li{display:flex;gap:.85rem;align-items:flex-start;font-size:.92rem;line-height:1.9;}
.kt-prd .prd-rec-list li::before{content:"";flex:none;width:7px;height:7px;margin-top:.65rem;
                                 background:var(--gold);border-radius:50%;}

/* 使い方・主要成分のリスト。
   2026-08-03 ともちん指示：行と行のあいだの線は不要。点と余白だけで区切りは足りる。 */
.kt-prd .prd-list{list-style:none;margin:0;padding:0;}
.kt-prd .prd-list li{position:relative;padding:0 0 0 1.4rem;margin-bottom:.5rem;
                     font-size:.94rem;line-height:1.95;}
.kt-prd .prd-list li:last-child{margin-bottom:0;}
.kt-prd .prd-list li::before{content:"";position:absolute;left:.2rem;top:.85em;
                             width:.35rem;height:.35rem;background:var(--gold);border-radius:50%;}

/* --- 関連する施術 --- */
.kt-prd .prd-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem;}
.kt-prd .prd-rel-card{display:flex;flex-direction:column;}
.kt-prd .prd-rel-img{aspect-ratio:16/9;background:var(--cream2);border:1px solid var(--line);
                     display:flex;align-items:center;justify-content:center;overflow:hidden;
                     margin-bottom:.75rem;transition:border-color .25s;}
.kt-prd .prd-rel-img img{width:100%;height:100%;object-fit:cover;}
.kt-prd .prd-rel-img span{font-size:.7rem;letter-spacing:.1em;color:#C2B9A9;}
.kt-prd .prd-rel-card:hover .prd-rel-img{border-color:var(--gold-line);}
.kt-prd .prd-rel-name{font-size:.9rem;font-weight:600;line-height:1.7;margin:0;}
.kt-prd .prd-rel-go{font-size:.72rem;letter-spacing:.06em;color:var(--gold-deep);margin:.2rem 0 0;}

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

/* ===== スマホ =========================================================== */
@media (max-width:1080px){
  .kt-prd{padding-bottom:4.5rem;}
  .kt-prd .prd-inner{padding:0 1.25rem;}
  .kt-prd .prd-head{grid-template-columns:1fr;gap:2rem;margin:1.25rem 0 3rem;}
  .kt-prd .prd-h1{font-size:1.4rem;}
  .kt-prd .prd-thumbs{grid-template-columns:repeat(4,1fr);}
  .kt-prd .prd-sec + .prd-sec{margin-top:2.75rem;}
  /* 枠を画面いっぱいに広げる。左右に余白が残ると、囲われた感じが弱くなる */
  .kt-prd .prd-rec{margin:0 -1.25rem;padding:2rem 1.25rem;}
  .kt-prd .prd-rec-h2{font-size:1.15rem;text-align:left;}
  .kt-prd .prd-rec-list{grid-template-columns:minmax(0,1fr);gap:.7rem;}
  .kt-prd .prd-rel{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;}
  .kt-prd .prd-note{margin-top:2.75rem;}
}