/* =========================================================
   在庫状況（カルーセル・カード・バッジ）
   ========================================================= */

.stock{ background:var(--cream); padding:1.8rem 1.2rem; }
.stock-inner{
  max-width:1280px; margin:0 auto; padding:1.6rem 2rem;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
}
.stock-top{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-bottom:.6rem;
}
.stock-top-left{ display:flex; align-items:center; gap:.8rem; }
.stock-top-right{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.stock-pear{ width:34px; height:40px; }
/* 書体は common.css の .section-heading-large を併用（HTML側でクラス指定） */
.stock-title{ margin:.3rem 0; }
.stock-subtitle{ font-weight:600; font-size:1rem; margin-top:.8rem; }
.stock-divider{ width:40px; height:1px; background:var(--green); margin:.7rem auto; }
.stock-note{ font-size:.75rem; color:var(--muted); margin-bottom:1.4rem; }
.stock-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  padding:1.4rem;
  align-content:start;
  flex:1;
}
.stock-carousel-wrap{ display:flex; align-items:center; gap:0; flex:1; }
.stock-btn{
  flex-shrink:0;
  width:52px; height:52px;
  border-radius:50%;
  border:2px solid var(--green);
  background:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
  margin:0 .4rem;
}
.stock-btn:hover{ background:var(--green); }
.stock-btn:hover svg path{ stroke:#fff; }
.stock-btn:disabled{ opacity:.3; cursor:default; }
.stock-btn:disabled:hover{ background:#fff; }
.stock-btn:disabled:hover svg path{ stroke:#5a6e3a; }
.card{
  background:#fff; border-radius:6px; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  border:1px solid #ece9dd;
  text-align:center; padding-bottom:1.1rem;
}
.card-img{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:#f0ebd6;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-img img{ width:100%; height:100%; object-fit:cover; }
.card-name{ font-family:"Noto Serif JP",serif; font-size:1.2rem; font-weight:600; margin:.9rem 0 .6rem; }
.card-info{ font-size:.9rem; color:#555; }
.card-info > div{ display:flex; justify-content:center; gap:.4rem; margin:.15rem 0; }
.card-info dt{ color:var(--muted); }
.card-info dd{ font-weight:600; color:#333; }
.badge{
  display:inline-block; margin-top:.8rem;
  font-size:.78rem; padding:.3em 1.4em; border-radius:4px;
}
.badge.in{ background:#dde6cc; color:#5a6e3a; }
.badge.out{ background:#f8d7da; color:#721c24; }
.badge-overlay{
  position:absolute; top:.6rem; right:.6rem; margin-top:0;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.info-icon{ color:var(--green); }

/* ===== モバイル用ページャー =====
   注: JS側のカルーセル切替（isMobile判定）は768px以下でページャー方式（PER=4）にしているため、
   CSS側もここを768pxに合わせる。600px以下だけをページャー扱いにすると、
   601～768px幅で「デスクトップの3枚ウィンドウ表示」と「2列グリッド」が噫み合わず崩れる。 */
.stock-pager{ display:none; }
@media(max-width:768px){
  .stock-btn{ display:none; }
  .stock-pager{
    display:flex; align-items:center; justify-content:center; gap:.9rem;
    margin-top:.8rem;
  }
  .stock-pager-btn{
    width:34px; height:34px; border-radius:50%;
    border:1.5px solid var(--green); background:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; line-height:1;
    color:var(--green); transition:.2s; padding:0;
  }
  .stock-pager-btn svg{ display:block; }
  .stock-pager-btn:disabled{ opacity:.3; cursor:default; }
  .stock-dots{ display:flex; gap:.5rem; align-items:center; }
  .stock-dot{ width:8px; height:8px; border-radius:50%; background:#ccc; transition:.25s; }
  .stock-dot.active{ background:var(--green); transform:scale(1.25); }
}

/* ===== レスポンシブ ===== */
@media (max-width:768px){
  .stock-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .stock{ padding:1.2rem .8rem; }
  .stock-inner{ padding:1.2rem 1rem; }
  .stock-cards{ grid-template-columns:repeat(2,1fr); padding:.5rem 0; gap:.7rem; }
  .card-name{ font-size:1rem; margin:.6rem 0 .4rem; }
  .card-info{ font-size:.78rem; }
  .badge{ font-size:.74rem; padding:.25em 1em; margin-top:.5rem; }
  .badge-overlay{ font-size:.68rem; padding:.22em .8em; top:.4rem; right:.4rem; }
}