/* ============================================================
   MIRAI 商品ヘッダー
   参照: design-preview/style.css の .breadcrumb / .product-top /
         .gallery-main / .thumbs / .features / .price / .actions
   ============================================================ */

/* product/detail コンポーネントが外側に付ける .page-width の制約を外し、
   参照実装どおり .mj-wrap（1200px / 左右44px）で幅を決める */
.product-detail-wrapper:has(.mj-pm) {
  background-color: rgb(var(--color-background));
}
.product-detail-wrapper:has(.mj-pm) .page-width {
  max-width: none;
  padding: 0;
}
.product-detail-wrapper:has(.mj-pm) .product-detail {
  display: block;
  padding: 0;
}

/* 参照 .breadcrumb{font-size:12px;color:var(--muted);margin-bottom:25px} + inline margin-top:30px */
.mj-pm__breadcrumb {
  font-size: 12px;
  color: var(--mj-muted);
  margin-block: 30px 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mj-pm__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.mj-pm__breadcrumb a:hover {
  text-decoration: underline;
}

/* 参照 .product-top{display:grid;grid-template-columns:1.1fr 1fr;gap:65px;padding:50px 0 90px} */
.mj-pm__top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 65px;
  padding: 50px 0 90px;
}

.mj-pm__gallery,
.mj-pm__info {
  min-width: 0;
}

/* 参照 .gallery-main{width:100%;aspect-ratio:1;object-fit:cover} */
.mj-pm__main {
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(var(--color-text), 0.04);
}

.mj-pm__main-image,
.mj-pm__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 参照 .thumbs{display:flex;gap:12px;margin-top:15px}
        .thumbs button{padding:0;border:1px solid var(--line);width:80px;background:white}
        .thumbs img{aspect-ratio:1;object-fit:cover} */
.mj-pm__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 15px;
}

.mj-pm__thumb {
  padding: 0;
  border: 1px solid var(--mj-line);
  width: 80px;
  background: #fff;
  cursor: pointer;
  line-height: 0;
}

.mj-pm__thumb.is-active {
  border-color: var(--mj-brand);
}

.mj-pm__thumb-image,
.mj-pm__thumb img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 参照 .product-top h1{font:44px Georgia;margin:15px 0} */
.mj-pm__heading {
  font-family: var(--mj-font-figure);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.2;
  margin: 15px 0;
  white-space: pre-line;
}

.mj-pm__subtitle {
  font-size: 16px;
  margin: 0;
}

/* 参照 .product-top .desc{font-size:16px;margin:25px 0} */
.mj-pm__desc {
  font-size: 16px;
  margin: 25px 0;
  white-space: pre-line;
}

/* 参照 .features{display:flex;gap:25px;margin:30px 0;border-top/bottom:1px solid var(--line);padding:22px 0} */
.mj-pm__features {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 30px 0;
  border-block: 1px solid var(--mj-line);
  padding: 22px 0;
}

.mj-pm__feature {
  flex: 1 1 140px;
  font-size: 12px;
  color: var(--mj-muted);
}

/* 参照 .features strong{display:block;font:28px Georgia;color:var(--ink);margin-top:8px} */
.mj-pm__feature strong {
  display: block;
  font-family: var(--mj-font-figure);
  font-size: 28px;
  font-weight: 400;
  color: var(--mj-ink);
  margin-block-start: 8px;
}

/* 参照 .features small{font:11px sans-serif} */
.mj-pm__feature small {
  font-family: var(--mj-font-body);
  font-size: 11px;
}

/* 参照 .price{font:28px Georgia;color:var(--ink)} .price small{font:12px sans-serif;color:var(--muted)} */
.mj-pm__price {
  font-family: var(--mj-font-figure);
  font-size: 28px;
  color: var(--mj-ink);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.mj-pm__price small {
  font-family: var(--mj-font-body);
  font-size: 12px;
  color: var(--mj-muted);
}

.mj-pm__price-origin {
  font-size: 18px;
  color: var(--mj-muted);
}

.mj-pm__stock {
  font-size: 13px;
  color: var(--mj-muted);
  margin: 10px 0 0;
}

.mj-pm__stock--out {
  color: #a4442c;
}

/* 参照 .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
   カート投入はSHOPLINE標準部品。入れ子のラッパーを display:contents で透過させ、
   ボタン自身を .mj-pm__actions の直接の子として横並びにする。 */
.mj-pm__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-block-start: 25px;
}

.mj-pm__actions .product-detail__buy-buttons,
.mj-pm__actions theme-product-form,
.mj-pm__actions .product-detail__form,
.mj-pm__actions .form__buttons {
  /* detail.css の .form__buttons{display:flex;flex-direction:column} に勝たせる */
  display: contents !important;
}

.mj-pm__actions .button,
.mj-pm__actions .shopline-payment-button,
.mj-pm__actions .shopline-payment-button > * {
  min-height: 54px;
  border-radius: 2px;
  font-size: 15px;
  line-height: 1.7;
}

.mj-pm__actions .button {
  /* テーマの .button--fill は幅100%。参照 .actions は内容幅で横並びなので戻す */
  width: auto !important;
  flex: 0 0 auto;
  padding: 15px 25px;
  background: var(--mj-brand) !important;
  border: 1px solid var(--mj-brand) !important;
  color: #fff !important;
}

.mj-pm__actions .button:hover {
  background: var(--mj-brand-dark) !important;
  border-color: var(--mj-brand-dark) !important;
}

.mj-pm__actions .button[disabled] {
  background: #9fb4c3 !important;
  border-color: #9fb4c3 !important;
}

/* 相談ボタンは参照の .btn.outline と同じく高さ54pxで上揃え */
.mj-pm__actions .mj-pm__sub {
  align-self: flex-start;
}

.mj-pm__note {
  margin-block-start: 18px;
}

/* バリエーション（SHOPLINE標準のピッカー） */
.mj-pm__variants {
  display: block;
  margin-block-end: 25px;
}

.mj-pm__variant-label {
  font-size: 13px;
  color: var(--mj-muted);
  margin-block-end: 8px;
}

/* 参照 @media(max-width:760px) */
@media (max-width: 760px) {
  .mj-pm__top {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 0 55px;
  }

  .mj-pm__heading {
    font-size: 38px;
  }
}