/**
 * 商品詳細ページ専用 CSS
 * 概要: template-product カラースキーム / subscription-selector / 購入フォーム / ギャラリー
 */

/* 商品詳細ページの余白・背景 */
body.template-product {
  background-color: #fff;
}

body.template-product .header__row.header__row--top {
  background-color: #fff;
}

body.template-product #MainContent {
  margin: 0 16px;
  background-color: #fff;
  background-image: none;
}

body.template-product .section-background.color-scheme-4 {
  /* position: relative; */
}

@media screen and (min-width: 750px) {
  body.template-product #MainContent {
    margin: 0 40px;
  }
}

/* scheme-4: 変数のみ定義。背景色は section-background に任せる */
body.template-product #MainContent .color-scheme-4 {
  --color-background: rgb(191 220 240 / 1);
  --color-background-rgb: 191 220 240;
  --opacity-5-15: 0.05;
  --opacity-10-25: 0.1;
  --opacity-35-55: 0.35;
  --opacity-40-60: 0.4;
  --opacity-30-60: 0.3;
  --color-foreground: rgb(0 0 0 / 0.81);
  --color-foreground-rgb: 0 0 0;
  --color-foreground-heading: rgb(0 0 0 / 1);
  --color-foreground-heading-rgb: 0 0 0;
  --color-primary: rgb(0 0 0 / 0.81);
  --color-primary-rgb: 0 0 0;
  --color-primary-hover: rgb(0 0 0 / 1);
  --color-primary-hover-rgb: 0 0 0;
  --color-border: rgb(29 54 134 / 0.5);
  --color-border-rgb: 29 54 134;
  --color-shadow: rgb(0 0 0 / 1);
  --color-shadow-rgb: 0 0 0;
  --color-primary-button-text: rgb(255 255 255 / 1);
  --color-primary-button-background: rgb(0 0 0 / 1);
  --color-primary-button-border: rgb(29 54 134 / 1);
  --color-primary-button-hover-text: rgb(255 255 255 / 1);
  --color-primary-button-hover-background: rgb(51 51 51 / 1);
  --color-primary-button-hover-border: rgb(0 0 0 / 1);
  --color-input-background: rgb(0 0 0 / 0);
  --color-input-text: rgb(0 0 0 / 0.81);
  --color-input-text-rgb: 0 0 0;
  --color-input-border: rgb(0 0 0 / 0.81);
  --color-error: #8b0000;
  --style-border-width: 1px;
  --style-border-radius-inputs: 4px;
  --style-border-width-inputs: 1px;
  --input-border-radius: var(--style-border-radius-inputs);
  --input-padding-x: 0.8rem;
  --opacity-subdued-text: var(--opacity-70, 0.7);
  color: var(--color-foreground);
}

/* セクション本体は透明（base.css と同じ。MainContent 背景が透ける） */
body.template-product #MainContent .shopify-section:not(.header-section) :is(.section, .cart__summary-container) {
  background: transparent;
}

/* 背景レイヤーのみ scheme-4 の色を適用 */
body.template-product #MainContent .section-background.color-scheme-4 {
  background-color: var(--color-background);
}

body.template-product #MainContent .sticky-add-to-cart__bar.color-scheme-1 {
  --color-background: rgb(255 255 255 / 1);
  --color-background-rgb: 255 255 255;
  --color-foreground: rgb(0 0 0 / 0.81);
  --color-foreground-rgb: 0 0 0;
  --color-border: rgb(0 0 0 / 0.06);
  --color-border-rgb: 0 0 0;
  background-color: var(--color-background);
}

body.template-product .product-details {
  width: 100%;
  min-width: 0;
}

body.template-product .product-details > .group-block {
  width: 100%;
  min-width: 0;
}

body.template-product .product-information__grid--half.product-information--media-left .product-details {
  min-width: 0;
}

.template-product .product-details .text-block.h3 h1 {
  font-size: var(--font-h3--size, 1.5rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.3;
  margin: 0;
}

.template-product .product-details__excerpt.rte {
  font-size: var(--font-paragraph--size, 1rem);
  line-height: 1.7;
}

/* フッターは color-scheme-4 だが PDP 用の淡い青を上書きしない */
body.template-product .footer--dark-tone {
  --color-background: #202020;
  --color-background-rgb: 32 32 32;
  --color-foreground: #ffffff;
  --color-foreground-rgb: 255 255 255;
  --color-foreground-heading: #ffffff;
  --color-foreground-heading-rgb: 255 255 255;
  --color-primary: #ffffff;
  --color-primary-rgb: 255 255 255;
  --color-primary-hover: #e8e8e8;
  --color-primary-hover-rgb: 232 232 232;
  --color-border: rgb(255 255 255 / 0.22);
  --color-border-rgb: 255 255 255;
  --color-shadow: #000000;
  --color-shadow-rgb: 0 0 0;
  color: var(--color-foreground);
  background-color: var(--color-background);
}

.my-subscription {
  margin-bottom: 1rem;
  min-width: 0;
  max-width: 100%;
}

.my-subscription__purchase {
  border: none;
  border-radius: 4px;
  padding: 0;
  margin: 0 0 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.my-subscription__option {
  display: inline-flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease;
  line-height: 1.2;
  background-color: #fff;
}

.my-subscription__option:last-child {
  border-bottom: none;
}

.my-subscription__option--disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.my-subscription__option input[type="radio"] {
  margin: 0 0.75rem 0 0;
  flex-shrink: 0;
}

.my-subscription__option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.my-subscription__option-label {
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}

.my-subscription__option-price {
  font-weight: 500;
  margin-left: auto;
}

.my-subscription__tax {
  font-size: 0.8em;
  font-weight: 500;
  opacity: 0.85;
}

.my-subscription__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.my-subscription__badge--soon {
  color: #7a4a00;
  background-color: rgba(250, 173, 20, 0.12);
}

.my-subscription__badge--maintenance {
  color: #b42318;
  background-color: rgba(180, 35, 24, 0.08);
}

.license-notice {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(180, 107, 0, 0.25);
  border-radius: 8px;
  background-color: #fffaf0;
  color: #4a3b15;
  min-width: 0;
  max-width: 100%;
}

.license-notice__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #8a5a0a;
}

.license-notice__summary::-webkit-details-marker {
  display: none;
}

.license-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background-color: #8a5a0a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.license-notice__body {
  padding-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.license-notice__lead {
  margin: 0 0 0.75rem;
}

.license-notice__table-wrap {
  overflow-x: auto;
  margin-bottom: 0.75rem;
  max-width: 100%;
}

.license-notice__table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  background-color: #fff;
}

.license-notice__table th,
.license-notice__table td {
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.4rem 0.6rem;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

.license-notice__table th {
  background-color: rgba(180, 107, 0, 0.08);
  font-weight: 600;
}

.license-notice__caution {
  margin: 0;
  color: #4a3b15;
}

.license-notice__caution a {
  color: #8a5a0a;
  text-decoration: underline;
}

.license-notice__link {
  font-weight: 600;
}

.product-form-site-url {
  width: 100%;
  margin-block-end: 1rem;
}

.product-form-site-url .field {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.product-form-site-url__label {
  display: block;
  margin-block-end: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
}

.product-form-site-url__field-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: var(--style-border-width-inputs, 1px) solid rgb(29 54 134 / 0.5);
  border-radius: 0px;
  background-color: #fff;
}

.product-form-site-url__field-wrap .product-form-site-url__input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  padding: var(--input-padding-y, 0.8rem) var(--input-padding-x, 0.8rem);
  background-color: transparent;
}

.product-form-site-url__field-wrap .product-form-site-url__input:focus {
  box-shadow: none;
  outline: none;
}

.product-form-site-url__prefix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-inline: var(--input-padding-x, 0.8rem);
  font-size: inherit;
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.7));
  background-color: rgb(var(--color-foreground-rgb) / 0.06);
  border-radius: var(--input-border-radius, var(--style-border-radius-inputs, 4px)) 0 0
    var(--input-border-radius, var(--style-border-radius-inputs, 4px));
}

.product-form-site-url__suffix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-inline: var(--input-padding-x, 0.8rem);
  font-size: inherit;
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.7));
  background-color: rgb(var(--color-foreground-rgb) / 0.06);
  border-radius: 0 var(--input-border-radius, var(--style-border-radius-inputs, 4px))
    var(--input-border-radius, var(--style-border-radius-inputs, 4px)) 0;
}

.product-form-site-url__required {
  color: var(--color-error, #8b0000);
}

.product-form-buttons {
  width: 100%;
}

.product-form-buttons .button {
  width: 100%;
}

.product-form__submit {
  position: relative;
}

.product-form__submit[data-added="true"] .add-to-cart-text {
  opacity: 0;
}

.product-form__submit[data-added="true"] .add-to-cart__added {
  display: flex;
}

// .add-to-cart__added {
//   display: none;
//   position: absolute;
//   inset: 0;
//   align-items: center;
//   justify-content: center;
// }

.product-details__excerpt {
  margin-block-end: 1rem;
}

.product-details__excerpt p:last-child {
  margin-bottom: 0;
}

.media-gallery__grid {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-gallery--two-column .media-gallery__grid,
.media-gallery--two-columns .media-gallery__grid {
  grid-template-columns: repeat(2, 1fr);
}

.media-gallery--one-column .media-gallery__grid {
  grid-template-columns: 1fr;
}

.media-gallery__grid-item--featured {
  grid-column: 1 / -1;
}

.media-gallery__zoom-trigger {
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
  border: none;
  background: none;
}

.media-gallery__zoom-trigger .product-media__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.media-gallery-zoom {
  border: none;
  padding: 0;
  max-width: min(90vw, 960px);
  max-height: 90vh;
  background: transparent;
}

.media-gallery-zoom::backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.media-gallery-zoom__content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-gallery-zoom__image {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

.media-gallery-zoom__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border: none;
}
.accordion--product-details {
  margin-block: 1rem;
}

.accordion--product-details .details__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding-block: 0.75rem;
}

.accordion--product-details .details__header::-webkit-details-marker {
  display: none;
}

.accordion--product-details .details-content {
  padding-block-end: 0.75rem;
}

.accordion--product-details.accordion--dividers .details {
  border-block-start: var(--style-border-width, 1px) solid var(--color-border);
  border-block-end: var(--style-border-width, 1px) solid var(--color-border);
}

.divider--full-width {
  width: 100%;
  border: none;
  border-top: var(--style-border-width, 1px) solid var(--color-border);
  margin-block: 1rem;
}

.list-unstyled {
  list-style: none;
}

.button-unstyled {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* ズームダイアログ閉じるボタン（本番同等: 黒アイコン） */
body.template-product .dialog-zoomed-gallery__close-button {
  color: #000;
  mix-blend-mode: normal;
}

body.template-product .group-block {
  padding-top: 20px;
}

@media screen and (max-width: 749px) {
  body.template-product .group-block {
    width: 100%;
  }
}

body.template-product .sticky-add-to-cart__button {
  background-color: #000;
}

/* WooCommerce 標準の「View cart」リンクを非表示 */
body.template-product .product-form-buttons .added_to_cart {
  display: none !important;
}

/* checkmark-burst アニメーション（compiled_assets.css と連携） */
body.template-product .product-form__submit.add-to-cart-button {
  position: relative;
  overflow: hidden;
}

/* おすすめ: product-card__link がコンテンツ全体をラップする構成 */
.product-recommendations .product-card__link {
  position: static;
  inset: auto;
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.product-recommendations .product-card__content {
  height: 100%;
}

.product-media-container--video .js-product-video {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-media__video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #fff;
  pointer-events: none;
}

.deferred-media__poster-button {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--video-aspect-ratio, auto);
  cursor: pointer;
}

.product-media-container--video .deferred-media__poster-button {
  width: 100%;
  height: auto;
  max-height: 100%;
  flex-shrink: 0;
}

.js-product-video .js-product-video-poster-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #00000013;
  z-index: 1;
  pointer-events: none;
}

.js-product-video.add-has-played .js-product-video-poster-button::before,
.js-product-video.add-has-played .js-product-video-poster {
  display: none;
}

.js-product-video.add-has-played .js-product-video-poster-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-height: 100%;
  z-index: 2;
  opacity: 1;
  pointer-events: none;
}

.js-product-video-poster-button.add-is-playing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.js-product-video {
  cursor: pointer;
}

.js-product-video[data-media-loaded] > .js-product-video-player {
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  aspect-ratio: var(--video-aspect-ratio, auto);
  transform: translate(-50%, -50%);
  object-fit: cover;
  background-color: #fff;
  cursor: pointer;
}

.deferred-media__poster-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.js-product-video:not(.add-has-played) .deferred-media__poster-icon--play {
  opacity: 1;
  visibility: visible;
}

.js-product-video.add-has-played .deferred-media__poster-icon {
  opacity: 0;
  visibility: hidden;
}

.js-product-video.add-has-played.add-is-paused:hover .deferred-media__poster-icon--play {
  opacity: 1;
  visibility: visible;
}

.js-product-video.add-has-played:not(.add-is-paused):hover .deferred-media__poster-icon--pause {
  opacity: 1;
  visibility: visible;
}

.deferred-media__poster-icon svg {
  width: 4rem;
  height: 4rem;
  color: #fff;
  filter: drop-shadow(var(--shadow-button, 0 2px 8px rgb(0 0 0 / 0.3)));
}

.deferred-media__poster-icon--pause svg {
  --icon-stroke-width: 1.5px;
}

.media-fit-contain :is(img, .deferred-media__poster-image) {
  background-color: #fff;
}

.deferred-media__poster-button .product-media__video-poster {
  display: block;
}

/* SP ドット / PC グリッド切替（base.css 相当） */
@media screen and (min-width: 750px) {
  .desktop\:hidden {
    display: none !important;
  }
}

media-gallery {
  display: block;
  width: 100%;
}

media-gallery:where(.media-gallery--grid) .media-gallery__grid {
  display: none;
}

media-gallery:where(.media-gallery--grid) .media-gallery__grid {
  grid-template-columns: 1fr;
  gap: var(--image-gap, 4px);
}

media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
  height: 100%;
}

.product-media-container--video .product-media,
.product-media-container--video deferred-media {
  width: 100%;
  height: 100%;
}

:not(.dialog-zoomed-gallery) > .product-media-container {
  --slide-width: round(up, 100%, 1px);
  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: 100%;
  position: relative;
  overflow: hidden;
}

:not(.dialog-zoomed-gallery) > .product-media-container:where(.constrain-height) {
  --viewport-offset: 400px;
  --constrained-min-height: 300px;
  --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 749px) {
  .product-media-container.constrain-height {
    max-height: none;
  }
}

@media screen and (min-width: 750px) {
  .product-media-container.constrain-height {
    --viewport-offset: var(--header-height, 100px);
    --constrained-min-height: 500px;
  }
}

.product-media :is(deferred-media, product-model) {
  position: absolute;
}

.media-gallery__mobile-controls {
  grid-area: auto;
}

@media screen and (min-width: 750px) {
  media-gallery.media-gallery--grid.media-gallery--two-column .media-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-gallery--large-first-image .product-media-container:first-child,
  .media-gallery--two-column .product-media-container:only-child {
    grid-column: span 2;
  }

  media-gallery:is(.media-gallery--grid) slideshow-component {
    display: none;
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: grid;
  }
}

.dialog-thumbnails-list__thumbnail--video {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 0.06);
}

.dialog-thumbnails-list__thumbnail-video-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgb(0 0 0 / 0.5);
}

.dialog-thumbnails-list__thumbnail-video-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media screen and (max-width: 750px) {
  body.template-product #MainContent .section--page-width.spacing-style.color-scheme-4 {
    padding-top: 42px;
  }
}