/********************************************************
 * Catalog Show – Product Detail  (Rev.3 2025-06-06)
 *  – responsive fluid-type + mobile-smaller fonts
 * /opt/hosecraft.jp/static/css/catalog_show.css
 ********************************************************/

/* ───────────────────────────────
   0. 変数 & Reset
────────────────────────────────*/
:root{
  /* Palette */
  --c-pri-h:196;
  --c-pri-s:100%;
  --c-pri-l:40%;
  --c-pri:      hsl(var(--c-pri-h) var(--c-pri-s) var(--c-pri-l));
  --c-pri-light:hsl(var(--c-pri-h) calc(var(--c-pri-s)*.75) 60%);
  --c-pri-dark: hsl(var(--c-pri-h) var(--c-pri-s) 32%);
  --c-grad-to:  hsl(var(--c-pri-h) 90% 55%);
  --c-accent:   #ff5722;
  --c-accent-d: #e64a19;

  --c-bg-page:  #f8f9fa;
  --c-bg-card:  #ffffff;
  --c-txt:      #212529;

  /* Geometry */
  --radius-sm:.5rem;
  --radius-lg:1rem;
  --shadow-lg:0 1rem 2.5rem rgba(0,0,0,.15);

  /* Typography scale (fluid)  ――  PC 基準値 ―― */
  --fs-base: clamp(.95rem, 0.9rem + .4vw, 1.1rem);
  --fs-lg:   clamp(1.15rem, 1.05rem + .6vw, 1.5rem);
  --fs-desc: clamp(1rem,  .95rem + .3vw, 1.05rem);

  /* Timing */
  --transition:.25s cubic-bezier(.4,.0,.2,1);
}

/* 0-1. 端末幅でフォントを一段階小さく */
@media (max-width:991.98px){        /* タブレット縦・スマホ横 */
  :root{
    --fs-base: clamp(.90rem, .85rem + .35vw, 1rem);
    --fs-lg:   clamp(1.05rem, .95rem + .5vw, 1.35rem);
    --fs-desc: clamp(.95rem, .9rem  + .25vw, 1rem);
  }
}
@media (max-width:575.98px){        /* スマホ縦 */
  :root{
    --fs-base: clamp(.85rem, .78rem + .4vw, .95rem);
    --fs-lg:   clamp(.95rem, .90rem + .55vw, 1.25rem);
    --fs-desc: clamp(.88rem, .82rem + .3vw, .94rem);
  }
}

*,
*::before,
*::after{box-sizing:border-box;}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  color:var(--c-txt);
  line-height:1.7;
  font-size:var(--fs-base);
}

/* ───────────────────────────────
   1. コンテナ
────────────────────────────────*/
.catalog-detail-container{
  background:var(--c-bg-page);
  padding-block:3rem;
  padding-top: 2rem !important;  
}

/* 0-2. 縦マージン ―― カード／セクション間の間隔を確保 */
.catalog-detail-container > * + *{
  margin-block-start:2.5rem;   /* ここを調整してください */
}

.catalog-detail-container .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ───────────────────────────────
   2. 戻るボタン
────────────────────────────────*/
.catalog-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .85rem;
  border: 1px solid var(--c-pri);
  color: var(--c-pri);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: .5rem 1rem;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  box-shadow: 0 0 0 0 transparent;
}
.catalog-back-btn:hover,
.catalog-back-btn:focus-visible {
  background: var(--c-pri);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 .2rem hsl(var(--c-pri-h) 100% 85% / .45);
}

/* ───────────────────────────────
   3. パンくず
────────────────────────────────*/
.catalog-detail-container .breadcrumb{
  --bs-breadcrumb-margin-bottom:1.75rem;
}
.catalog-detail-container .breadcrumb a{
  color:var(--c-pri-dark);
}
.catalog-detail-container .breadcrumb a:hover{
  text-decoration:underline;
}

/* ───────────────────────────────
   4. 商品画像カード
────────────────────────────────*/
.catalog-detail-img{
  aspect-ratio:1/1;
  overflow:hidden;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.catalog-detail-img img{width:100%;height:100%;object-fit:cover;}

/* ───────────────────────────────
   5. リボン & 見出し
────────────────────────────────*/
.catalog-detail-ribbon{
  display:inline-block;padding:.5rem 1rem;
  font-size:.8rem;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--c-pri) 0%,var(--c-grad-to) 100%);
  border-radius:.35rem;box-shadow:0 .4rem 1rem rgba(0,0,0,.12);
  letter-spacing:.06em;
}

h1{
  font-size:var(--fs-lg);
  font-weight:700;
  margin-top:.25rem;
}

/* ───────────────────────────────
   6. 説明文（リッチ版）
────────────────────────────────*/
.catalog-detail-desc {
  margin-top: 2rem;
  font-size: var(--fs-desc);
  line-height: 1.85;
  color: var(--c-txt);
  background-color: var(--c-bg-card);
  padding: 2rem 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 0.5rem 2rem rgba(0,0,0,.05);
  overflow-x: auto;
}

/* h2 見出し */
.catalog-detail-desc h2 {
  margin-top: 3rem;
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-pri-dark);
  border-left: 5px solid var(--c-pri);
  padding-left: 0.8rem;
}

/* p 段落 */
.catalog-detail-desc p {
  margin-bottom: 1.2rem;
}

/* ul リスト */
.catalog-detail-desc ul {
  margin: 0 0 1.5rem 1.2rem;
  padding: 0;
}
.catalog-detail-desc li {
  margin-bottom: 0.5rem;
  list-style-type: disc;
}

/* テーブル */
.catalog-detail-desc table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 1.5rem;
  background: #fff;
  border-radius: 0.6rem;
  overflow: hidden;
  font-size: 0.95rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.05);
}

.catalog-detail-desc th,
.catalog-detail-desc td {
  padding: 1rem 1.25rem;
  border: 1px solid #dee2e6;
  text-align: left;
  vertical-align: top;
}

.catalog-detail-desc th {
  background: var(--c-pri-light);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.catalog-detail-desc tr:nth-child(even) td {
  background-color: #f8fafd;
}

.catalog-detail-desc tr:hover td {
  background: hsl(var(--c-pri-h) 60% 95%);
}

/* スクロールバー美化 */
.catalog-detail-desc::-webkit-scrollbar {
  height: .6rem;
}
.catalog-detail-desc::-webkit-scrollbar-thumb {
  background: var(--c-pri-light);
  border-radius: 10px;
}

/* ───────────────────────────────
   7. CTA 共通
────────────────────────────────*/
.catalog-detail-cta,
.catalog-detail-btn-shop{
  box-shadow:var(--shadow-lg);
  border-radius:var(--radius-lg);
}

.catalog-detail-cta{
  background:var(--c-bg-card);
  padding:clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
}

/* PDF ボタン */
.catalog-detail-btn-pdf{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.35rem;border:none;border-radius:50rem;
  background:var(--c-accent);color:#fff;
  padding:.65rem 1.9rem;font-weight:700;width:100%;
  transition:transform var(--transition),background var(--transition),box-shadow var(--transition);
}
.catalog-detail-btn-pdf:hover,
.catalog-detail-btn-pdf:focus-visible{
  background:var(--c-accent-d);
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 .5rem 1.2rem rgba(0,0,0,.25);
  color:#fff !important;        /* ← 文字色を常に白で固定 */
  text-decoration:none;         /* ← 下線も消しておく */
}

/* Shop ボタン */
.catalog-detail-btn-shop{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.45rem;background:linear-gradient(135deg,var(--c-pri) 0%,var(--c-grad-to) 100%);
  color:#fff;border:none;padding:.85rem 2.4rem;font-weight:700;width:100%;
  transition:transform var(--transition),opacity var(--transition),box-shadow var(--transition);
}
.catalog-detail-btn-shop:hover,
.catalog-detail-btn-shop:focus-visible{
  opacity:.94;transform:translateY(-4px) scale(1.02);
  box-shadow:0 .5rem 1.2rem rgba(0,0,0,.25);
  color:#fff !important;        /* ← 文字色を常に白で固定 */
  text-decoration:none;         /* ← 下線も消しておく */
}

/* ───────────────────────────────
   8. Table（仕様表）
────────────────────────────────*/
.catalog-detail-desc{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.catalog-detail-desc table{
  width:auto;
  min-width:100%;
  border-collapse:separate;border-spacing:0;
  font-size:var(--fs-desc);
  background:var(--c-bg-card);border-radius:var(--radius-lg);overflow:hidden;
}
.catalog-detail-desc table::before{content:"";display:block;height:.5rem;}

.catalog-detail-desc th,
.catalog-detail-desc td{
  padding:.75rem 1rem;border:1px solid #dee2e6;vertical-align:top;
}
.catalog-detail-desc th{
  position:sticky;top:0;z-index:1;
  background:var(--c-pri-light);color:#fff;font-weight:700;white-space:nowrap;
}
.catalog-detail-desc tr:nth-child(even)>td{background:#f6f8fa;}
.catalog-detail-desc tr:hover>td{
  background:hsl(var(--c-pri-h) 60% 95%);
}

/* スクロールバー美化 (WebKit) */
.catalog-detail-desc::-webkit-scrollbar{height:.6rem;}
.catalog-detail-desc::-webkit-scrollbar-track{background:transparent;}
.catalog-detail-desc::-webkit-scrollbar-thumb{
  background:var(--c-pri-light);border-radius:1rem;
}

/* ───────────────────────────────
   9. レスポンシブ微調整
────────────────────────────────*/
@media (max-width:991.98px){
  .catalog-detail-desc{
    margin-inline:-1rem;
    padding-inline:1rem;
  }
}

/* ───────────────────────────────
   10. Smartphone Ultra-Minimal Layout
   (Rev.6 2025-06-25)
────────────────────────────────*/
@media (max-width:575.98px){                       /* スマホ縦基準 */

  /* 10-0. フォント再最適化（背景色はグローバルを変更しない） */
  :root{
    --fs-base: clamp(.78rem,.73rem + .35vw,.88rem);
    --fs-lg:   clamp(.88rem,.83rem + .48vw,1.15rem);
    --fs-desc: clamp(.78rem,.73rem + .28vw,.88rem);
  }

  /* 10-1. ページ全体は既定の背景色のまま、
           商品詳細セクションだけ純白に上書き ------------- */
  .catalog-detail-container{
    background:#ffffff;                       /* セクション背景を白に */
    padding:1.25rem .5rem;                    /* 余白圧縮 */
  }

  /* 10-2. .row の負マージンを打ち消し、ガッター縮小 -------- */
  .catalog-detail-container .row{
    --bs-gutter-x:.5rem;                      /* 標準 1.5rem → 0.5rem */
    margin-left:0;                            /* −0.75rem を打ち消す */
    margin-right:0;
  }

  .mb-5 {
    margin-bottom: 1rem !important;
  }

  /* 10-3. ユーティリティ調整 ------------------------------ */
  .my-4{margin:0!important;}
  .container{
    padding-left:.2rem!important;
    padding-right:.2rem!important;
  }

  .catalog-back-btn{
  /* 既存プロパティ … */
  box-shadow:0 0 0 0 transparent;

  margin-top:.75rem;            /* ← 上部に 0.75rem の余白を追加 */
  }

  /* 10-4. シャドウ除去 ---------------------- */
  .catalog-detail-img,
  .catalog-detail-cta,
  .catalog-detail-btn-shop,
  .catalog-detail-btn-pdf{box-shadow:none;}

  /* 10-5. レイアウト縦積み ------------------ */
  .catalog-detail-row,
  .catalog-detail-cta .row{
    display:flex;
    flex-direction:column;
    gap:.9rem;
  }

  /* 10-6. 正方形画像 ------------------------ */
  .catalog-detail-img{
    aspect-ratio:1/1;
    width:100%;
    max-width:22rem;
    margin-inline:auto;
  }

  /* 10-7. 見出し & パンくず --------------- */
  h1{
    margin:.6rem 0 .8rem;
    font-size:calc(var(--fs-lg)*.96);
    line-height:1.25;
    letter-spacing:.02em;
  }
  .breadcrumb{
    flex-wrap:wrap;
    gap:.1rem .25rem;
    font-size:.68rem;
    margin-bottom:1rem;
  }
  .breadcrumb-item{
    max-width:6.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* 10-8. CTA ボタン ------------------------- */
  .catalog-detail-btn-pdf,
  .catalog-detail-btn-shop{
    font-size:.82rem;
    padding:.55rem 1.2rem;
    border-radius:50rem;
    align-self:center;
    text-align:center;
  }

  /* 10-9. 説明カード ------------------------- */
  .catalog-detail-desc{
    margin-inline:0;              /* はみ出し防止 */
    padding:1.25rem .8rem;
    font-size:calc(var(--fs-desc)*.92);
    line-height:1.75;
    scroll-snap-type:x mandatory;
    max-width:100%;
  }

  /* 10-10. テーブル横スクロール ------------- */
  .catalog-detail-desc table{
    min-width:30rem;
    scroll-snap-align:start;
  }
}