/* ──────────────────────────────────────────────
   /opt/hosecraft.jp/static/css/product_detail.css
   商品詳細ページ専用スタイル – 購入パネル固定版
   2025-05-24  rev-O
      • デスクトップ：サイドスライド 380 px (変更なし)
      • タブレット/スマホ：ボトムシート方式（画面下 34 vh）
      • Safe-Area & AI チャット FAB を回避
────────────────────────────────────────────── */

/* ========================================================
   0. ルート変数
======================================================== */
:root{
  --primary-color:      #0056b3;
  --primary-hover:      #004494;
  --card-border:        #e0e0e0;

  --heart-size:         32px;
  --heart-red:          #e0245e;
  --gold3:              #d4af37;

  /* 画像切替ナビ */
  --nav-size:           42px;
  --nav-bg:             rgba(0,0,0,.28);
  --nav-bg-hover:       rgba(0,0,0,.45);

  /* Sticky ヘッダー高さ（JS で実測値を上書き） */
  --hc-header-h:        72px;

  /* モバイル：下端ボタンとホームバーを避ける距離 */
  --mobile-fab-gap:     96px;     /* AI チャット FAB 分 */
  
}

/* ========================================================
   1. 汎用
======================================================== */
*,*::before,*::after{box-sizing:border-box;}

#product-detail img.img-fallback{
  width:100%;height:auto;object-fit:contain;background:#f8f9fa;
}

/* ========================================================
   2. お気に入りハート（省略せず完全） */
.fav-heart-btn{
  position:absolute;z-index:3;
  width:var(--heart-size);height:var(--heart-size);
  border:none;border-radius:50%;
  background:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .18s var(--hc-motion-ease, ease),transform .18s var(--hc-motion-ease, ease),box-shadow .18s var(--hc-motion-ease, ease);
}
.fav-heart-btn i{font-size:1.1rem;color:var(--heart-red);}
.fav-heart-btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 0 0 2px var(--gold3);}
.fav-heart-btn.add{border:1px solid var(--card-border);}
.fav-heart-btn:not(.add){border:1px solid transparent;}

/* ========================================================
   3. 画像ナビ ← →
======================================================== */
.img-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:var(--nav-size);height:var(--nav-size);
  border:none;border-radius:50%;
  background:var(--nav-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;line-height:1;color:#fff;z-index:2;
  transition:background-color .18s var(--hc-motion-ease, ease),box-shadow .18s var(--hc-motion-ease, ease),transform .18s var(--hc-motion-ease, ease);
}
.img-nav:hover{background:var(--nav-bg-hover);box-shadow:0 2px 6px rgba(0,0,0,.28);transform:translateY(-50%);}
.img-nav:focus-visible{outline:2px solid var(--primary-color);}
.img-prev{left:.25rem;}
.img-next{right:.25rem;}

/* ========================================================
   4. バリエーション表
======================================================== */
#product-detail table thead th{white-space:nowrap;}
@media(max-width:575.98px){
  #product-detail table thead{font-size:.9rem;}
}
.var-table-wrapper{
  overflow-y:auto;position:relative;
}
.var-table-wrapper thead th{
  position:-webkit-sticky;position:sticky;top:0;background:#f8f9fa;z-index:1;
}
.price-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.22rem;
}
.variation-name-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.18rem;
  line-height:1.25;
}
.variation-mobile-extra{
  display:none;
  color:#6c757d;
  font-size:.72rem;
  line-height:1.2;
}
.stock-status-badge{
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  padding:.13rem .45rem;
  border:1px solid #f5c2c7;
  border-radius:999px;
  background:#fff5f5;
  color:#b02a37;
  font-size:.72rem;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
}
.stock-status-badge i{
  font-size:.75rem;
  line-height:1;
}

/* ========================================================
   5. 数量インプット
======================================================== */
input.qty-input{max-width:60px;padding-inline:.25rem;}
.input-group>.btn-minus,.input-group>.btn-plus{width:2.5rem;padding:0;}

/* ========================================================
   6. トースト
======================================================== */
#addCartToast{min-width:260px;pointer-events:none;}
#addCartToast .toast-body{font-size:1.05rem;display:flex;align-items:center;justify-content:center;gap:.25rem;}

/* ========================================================
   7. Carousel
======================================================== */
#prodCarousel .carousel-item img{object-fit:contain;max-height:480px;}
#prodCarousel .carousel-control-prev,#prodCarousel .carousel-control-next{width:3rem;}


/* ========================================================
   9. 購入パネル & トグルボタン
======================================================== */

/* 9-A. デスクトップ (幅 ≥992 px) — 横スライド */
.buy-panel{
  position:fixed;top:var(--hc-header-h);right:0;
  width:380px;max-width:100%;
  height:calc(100vh - var(--hc-header-h));
  padding:0.5rem;
  background:#fff;overflow-y:auto;
  box-shadow:-2px 0 12px rgba(0,0,0,.2);
  z-index:1090;
  transform:translateX(100%);
  transition:transform .24s var(--hc-motion-ease, ease), box-shadow .24s var(--hc-motion-ease, ease);
  will-change:transform;
}
.buy-panel.show{transform:translateX(0);}
@media(min-width:992px){
  .buy-panel.show-desktop{transform:translateX(0);}
}
.buy-close{position:absolute;top:.75rem;right:.75rem;opacity:.7;}
.buy-close:hover{opacity:1;}

.buy-panel table {
  width:100%;
  table-layout:fixed;
  font-size:0.9rem;
}
.buy-panel table th,
.buy-panel table td{
  padding:.58rem .45rem;
  vertical-align:middle;
}
.buy-panel table th:first-child,
.buy-panel table td:first-child{
  width:31%;
}
.buy-panel table th:nth-last-child(2),
.buy-panel table td:nth-last-child(2){
  width:31%;
  text-align:right;
}
.buy-panel table th:last-child,
.buy-panel table td:last-child,
.buy-panel table .qty-col{
  width:38%;
  text-align:right;
}
.buy-panel .price-stack{
  align-items:flex-end;
  gap:.12rem;
  line-height:1.15;
}
.buy-panel .variation-name-stack{
  min-width:0;
  align-items:flex-start;
}
.buy-panel .stock-status-badge{
  padding:.07rem .32rem;
  border-color:#f1b6be;
  background:#fff7f7;
  font-size:.66rem;
  line-height:1.05;
}
.buy-panel .stock-status-badge i{
  display:none;
}
.buy-panel table .input-group{
  flex-wrap:nowrap;
  width:112px;
  min-width:112px;
  margin-left:auto;
}
.buy-panel table .input-group>.btn-minus,
.buy-panel table .input-group>.btn-plus{
  flex:0 0 34px;
  width:34px;
  height:38px;
}
.buy-panel table input.qty-input{
  flex:0 0 42px;
  width:42px;
  min-width:42px;
  max-width:42px;
  padding:0 .2rem;
}



/* デスクトップ・トグルボタン */
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,86,179,.4);}50%{box-shadow:0 0 0 8px rgba(0,86,179,0);}}
.buy-toggle{
  position:fixed;
  top:calc(var(--hc-header-h) + 3%);
  right:0;
  transform:translateY(-50%);
  width:64px;height:64px;border:none;border-radius:12px 0 0 12px;
  background:var(--primary-color);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:1095;font-size:1.7rem;
  animation:pulse 2.8s infinite;
  transition:background-color .18s var(--hc-motion-ease, ease),transform .24s var(--hc-motion-ease, ease),box-shadow .18s var(--hc-motion-ease, ease);
}
.buy-toggle:hover{background:var(--primary-hover);}
.buy-toggle.opened{animation:none;}

/* ▼ buy-toggle をデスクトップで少し下げる (2025-06-06 patch) */
@media (min-width: 992px){          /* デスクトップだけ */
  .buy-toggle{
    top: calc(var(--hc-header-h) + 3.5%);  /* ← ここを好みで調整 */
  }
}


/* 9-B. モバイル / タブレット (幅 ≤991.98 px) — ボトムシート */
@media(max-width:991.98px){
  :root{
    --buy-panel-mobile-h:min(74dvh, calc(100dvh - var(--hc-header-h) - .75rem));
  }

  .buy-panel{
    top:auto;bottom:0;right:0;left:0;
    width:100%;
    height:var(--buy-panel-mobile-h);
    max-height:calc(100dvh - var(--hc-header-h) - .75rem);
    padding:.7rem .75rem calc(.9rem + env(safe-area-inset-bottom,0));
    border-top-left-radius:12px;border-top-right-radius:12px;
    box-shadow:0 -4px 12px rgba(0,0,0,.25);
    transform:translateY(100%);
    transition:transform .24s var(--hc-motion-ease, ease), box-shadow .24s var(--hc-motion-ease, ease);
  }
  .buy-panel.show{transform:translateY(0);}
  .buy-panel h2{
    position:sticky;
    top:0;
    z-index:3;
    margin:-.7rem -.75rem .55rem;
    padding:.7rem 3.65rem .55rem .75rem;
    background:#fff;
    border-bottom:1px solid #e9ecef;
    font-size:1rem;
  }
  .buy-panel .var-table-wrapper{
    max-height:calc(var(--buy-panel-mobile-h) - 10.75rem);
    min-height:10rem;
    overflow-y:auto;
    margin:0 -.25rem .65rem;
    padding:0 .25rem;
    border-top:1px solid #edf0f2;
  }
  .buy-panel .var-table-wrapper thead{
    display:none;
  }
  .buy-panel table,
  .buy-panel tbody{
    display:block;
    width:100%;
  }
  .buy-panel tbody tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) 112px;
    grid-template-areas:
      "variation qty"
      "price qty";
    gap:.28rem .7rem;
    padding:.72rem .25rem;
    border-bottom:1px solid #e4e7eb;
    background:#fff;
  }
  .buy-panel tbody tr.selected-variation-row{
    border-radius:.35rem;
    background:#eef6ff;
  }
  .buy-panel table td{
    display:block;
    width:auto!important;
    padding:0;
    border:0;
  }
  .buy-panel tbody td:first-child{
    grid-area:variation;
    min-width:0;
  }
  .buy-panel tbody td:nth-last-child(2){
    grid-area:price;
    align-self:end;
    text-align:left;
  }
  .buy-panel tbody td:last-child{
    grid-area:qty;
    align-self:center;
    text-align:right;
  }
  .buy-panel .variation-extra-col,
  .buy-panel .variation-extra-cell{
    display:none!important;
  }
  .buy-panel .variation-mobile-extra{
    display:block;
  }
  .buy-panel .price-stack{
    align-items:flex-start;
    font-size:.88rem;
  }
  .buy-panel .stock-status-badge{
    font-size:.68rem;
  }
  .buy-panel table .input-group{
    width:112px;
    min-width:112px;
  }
  .buy-panel .d-grid .btn{
    min-height:44px;
    font-size:.95rem;
  }

  .buy-toggle{
    top:auto;
    bottom:calc(1rem + env(safe-area-inset-bottom,0));
    right:1rem;
    width:46px;height:46px;
    border-radius:50%;
    transform:none;                 /* 回転だけ */
  }
  .buy-toggle.opened{
    animation:none;
    top:auto;
    right:.65rem;
    bottom:calc(var(--buy-panel-mobile-h) - 3.15rem + env(safe-area-inset-bottom,0));
    border-radius:50%;
    box-shadow:0 2px 10px rgba(0,0,0,.22);
  }
}

@media(max-width:575.98px){
  :root{
    --buy-panel-mobile-h:min(78dvh, calc(100dvh - var(--hc-header-h) - .5rem));
  }
  .buy-panel .var-table-wrapper{
    max-height:calc(var(--buy-panel-mobile-h) - 10.25rem);
  }
}



/* ========================================================
   stockModal – 2025-06-05 rev-T2 (PC / Tablet / Mobile)
   --------------------------------------------------------
   • PC         : 高さ制限＋スクロール付き
   • Tablet     : ヘッダー直下〜画面底まで full-screen
   • Mobile     : ヘッダー直下〜画面底まで full-screen
   • 共通       : ヘッダー高さ (--hc-header-h) を自動回避
   =======================================================*/

/* ── 0. 共通カラー ─────────────────────────────── */
:root {
  --stock-blue:        #003F7D;
  --stock-blue-light:  #e7eef9;
  --stock-z:           calc(var(--hc-z-header) + 100);
}

/* ── 1. backdrop を常にヘッダー下へ ─────────────── */
#stockModal {
  top: var(--hc-header-h) !important;
}
#stockModal,
#stockModal + .modal-backdrop.show {
  z-index: var(--stock-z) !important;
}

/* ── 2. PC (≥768px) ───────────────────────────── */
@media (min-width:768px) {
  #stockModal .modal-dialog {
    width: 600px;
    max-width: 95vw;
    margin: .75rem auto;
  }
  #stockModal .modal-content {
    border-radius: .5rem;
    max-height: calc(100vh - var(--hc-header-h) - 2rem);
    display: flex;
    flex-direction: column;
  }
  #stockModal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
  }
}

/* ── 3. Tablet & Mobile (≤767.98px) – フルスクリーン ─ */
@media (max-width:767.98px) {
  #stockModal .modal-dialog {
    position: fixed;
    top: var(--hc-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0;
  }
  #stockModal .modal-content {
    height: calc(100dvh - var(--hc-header-h));
    height: calc(100vh - var(--hc-header-h));
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  #stockModal .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    font-size: .8rem;
  }
  body.modal-open {
    padding-right: 0 !important;
  }
}

/* ── 4. ヘッダー・ボタン ───────────────────────── */
#stockModal .modal-header {
  background: var(--stock-blue);
  color: #fff;
  border: none;
  padding: .8rem 1rem;
}
#stockModal .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .8;
}
#stockModal .btn-close:hover {
  opacity: 1;
}

/* ── 5. テーブル（2 列を 50 / 50） ─────────────── */
#stockModal table {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: .9rem;
}
#stockModal thead th {
  background: var(--stock-blue);
  color: #fff;
  font-weight: 600;
  padding: .55rem .7rem;
  white-space: nowrap;
  border: none;
}
#stockModal tbody td {
  border: 1px solid #d0d5e0;
  padding: .45rem .6rem;
  text-align: center;
  word-break: break-all;
}
#stockModal tbody tr:nth-child(even) {
  background: var(--stock-blue-light);
}
@media (max-width:991.98px) {
  #stockModal table {
    font-size: .8rem;
  }
}



/* ========================================================
   9xx ↓  モバイル / タブレット 調整（< 768px）
======================================================== */
@media(max-width:767.98px){

  /* 本文・見出しを 0.9 倍に縮小 */
  .tinymce-content{font-size:.95rem;line-height:1.7;}
  .tinymce-content h2{font-size:1.35rem;}
  .tinymce-content h3{font-size:1.1rem;}
  .tinymce-content h4{font-size:1rem;}

  /* テーブルをスマホ用にやや縮小 */
  .pdx-table{
    min-width:480px;        /* 画面幅に合わせて可読範囲を保つ */
    font-size:.85rem;
  }
}

/* --- 詳細案内カード共通調整 ------------------------------- */
.detail-card{
  width:100%;
}


/* 1. バリエーション表ヘッダーの重なり順を上げる */
.var-table-wrapper thead th{
  position: -webkit-sticky; /* iOS 12 対応 */
  position: sticky;
  top: 0;
  background:#f8f9fa;
  z-index: 2;               /* 旧値 1 → 2 */
}

/* 2. 視差・アニメーションを控える環境への配慮 */
@media (prefers-reduced-motion: reduce){
  .buy-toggle{ animation: none; }
}


/* 4. スマホでの可読幅を clamp で自動調整 */
@media (max-width: 767.98px){
  .pdx-table{
    min-width: clamp(420px, 85vw, 640px);
  }
}


/* ========================================================
   10. お問い合わせボタン – グラデーションブルー
   --------------------------------------------------------
   Bootstrap の .btn に重ねるだけで有効
   HTML では  class="btn btn-lg btn-contact" などと指定
======================================================== */

.btn-contact{
  background: linear-gradient(135deg,#1e88e5 25%,#3298f1 50%,#4fb0fb 100%);
  color:#fff !important;
  border:none;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  transition:opacity .18s var(--hc-motion-ease, ease), transform .18s var(--hc-motion-ease, ease), box-shadow .18s var(--hc-motion-ease, ease);
}
.btn-contact:hover  { opacity:.92; transform:translateY(-1px); box-shadow:0 5px 12px rgba(30,136,229,.22); }
.btn-contact:active { opacity:.8; }


/* ========================================================
   11. 商品詳細ページ専用パディング調整
   -------------------------------------------------------- */
#product-detail.pb-5,
#product-detail .pb-5 {
  padding-bottom: 0 !important;
}