/* =========================================================
   PDP: product-desc-images + Right-side Specs Tabs
   (Design tokens aligned)
   ========================================================= */

/* mu-plugin が出す説明画像セクション */
.product-desc-images {
  margin-top: var(--space-8); /* 32px */
}

/* JSが付ける：2カラム化 */
.product-desc-images.pdi--is-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: var(--space-6);          /* 24px */
  align-items: start;
}

/* 画像群をラップ（JSで生成） */
.product-desc-images .pdi__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Specs Tabs (top labels + divider + underline) ---- */
.pdi__specs {
  position: relative;
  background: var(--c-bg);
}

/* ラッパ */
.pdi-tabs {
  display: grid;
  gap: 0;
}

/* タブラベル行：下罫線 */
.pdi-tabs__labels{
  position: relative;                /* インクバー基準 */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);               /* 24px */
  padding: var(--space-3) var(--space-4); /* 12px 16px */
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

/* ラベル：枠なし・背景なし・下線用の疑似要素 */
.pdi-tabs__label{
  appearance: none;
  background: none;
  border: 0;
  position: relative;
  padding: calc(var(--space-3) - 2px) 4px; /* 10px相当 */
  font-size: var(--fs-base);               /* 16px */
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--c-fg-muted);
  cursor: pointer;
}

/* ラベル間の縦仕切り（見本の細い線） */
.pdi-tabs__label + .pdi-tabs__label{
  margin-left: var(--space-6); /* 24px */
}
.pdi-tabs__label + .pdi-tabs__label::before{
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -0.5); /* -12px */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.1em;
  background: var(--c-border);
}

/* アクティブ色 */
.pdi-tabs__label[aria-selected="true"]{
  color: var(--c-fg);
}

/* 下線（アクティブのみ表示） */
.pdi-tabs__label::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -13px; /* 下罫線の少し下に重ねる */
  height: 2px;
  background: var(--c-brand-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.pdi-tabs__label[aria-selected="true"]::after{
  transform: scaleX(1);
}

/* パネル：外枠は付けず、内容だけ余白 */
.pdi-tabs__panels{
  background: var(--c-bg);
  padding: var(--space-4) var(--space-4) var(--space-6); /* 16 16 24 */
  border: 0;
}
.pdi-tabs__panel[aria-hidden="true"]{ display: none; }

/* ---- 可変インクバー（スライド用） ---- */
.pdi-tabs__ink{
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--c-brand-blue);
  transform: translateX(0);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
  pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 767.98px){
  .product-desc-images.pdi--is-grid{
    grid-template-columns: 1fr;
    gap: var(--space-4); /* 16px */
  }
  .pdi-tabs__labels{
    gap: var(--space-4);              /* 16px */
    padding: var(--space-2) var(--space-3); /* 8px 12px */
  }
  .pdi-tabs__label{
    font-size: var(--fs-sm);          /* 13px */
    padding: var(--space-2) 2px;      /* 8px相当 */
  }
  .pdi-tabs__label + .pdi-tabs__label{
    margin-left: var(--space-4);      /* 16px */
  }
  .pdi-tabs__label + .pdi-tabs__label::before{
    left: -8px;
  }
  .pdi-tabs__label::after{
    bottom: -10px;
  }
}

/* bgb.bgb-bgb_package 内の h4 をノーマルウェイトに */
.bgb__title{
  font-weight: var(--fw-regular); /* 400 */
  margin-bottom: var(--space-4);
}

.pdi-tabs p {
  font-size: var(--fs-15);
  line-height: var(--lh-loose);
}
/* Specs タブラベル：ノーマルウェイトに */
.pdi-tabs__label{
  font-weight: var(--fw-regular); /* 400（ノーマル） */
}

/* アクティブ時も太字にしない */
.pdi-tabs__label[aria-selected="true"]{
  font-weight: var(--fw-regular);
}

/* モバイルは少し控えめ */
@media (max-width: 768px){
  .product-desc-images.pdi--is-grid{
    margin-top: var(--space-6); /* 24px */
  }
}