/*
 * SPS EC Theme — 商品詳細ページ CSS
 * ハードコードした色・フォントサイズは使用禁止。必ず var(--ec-*) を参照すること。
 */

/* ============================================================
   商品詳細 — メインレイアウト
   ============================================================ */

.ec-product-detail {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.ec-product-detail__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 32px 0;
}

/* ============================================================
   左カラム（ギャラリー + 商品説明 + 仕様 + レビュー）
   ============================================================ */

.ec-product-detail__gallery {
}

/* ギャラリー — メイン画像 */
.ec-gallery {
  width: 100%;
}

.ec-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--ec-radius-product-image);
  background-color: var(--ec-surface-main);
}

.ec-gallery__main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.ec-gallery__main-image.is-fading {
  opacity: 0;
}

/* ギャラリー — 画像カウンター */
.ec-gallery__counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background-color: var(--ec-overlay-dark);
  color: var(--ec-text-inverse);
  font-family: var(--ec-font-numeric);
  font-size: var(--ec-fz-xs);
  padding: 4px 10px;
  border-radius: var(--ec-radius-card);
  letter-spacing: var(--ec-letter-spacing-body);
}

/* ギャラリー — モデル情報テキスト */
.ec-gallery__model-info {
  font-size: var(--ec-fz-xs);
  color: var(--ec-text-subdued);
  margin-top: 8px;
  line-height: 1.5;
}

/* ギャラリー — サムネイル一覧 */
.ec-gallery__thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ec-gallery__thumb {
  width: 64px;
  height: 64px;
  border-radius: calc(var(--ec-radius-product-image) - 4px);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color 0.15s;
}

.ec-gallery__thumb.is-active {
  border-color: var(--ec-text-main);
}

.ec-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   左カラム — 商品詳細コンテンツ（商品説明、仕様、注意事項、レビュー）
   ============================================================ */

.ec-product-detail__content {
  margin-top: 40px;
}

/* アコーディオン — Figma: +/- トグルUI（オプションと統一） */
.ec-detail-section {
  border-top: 1px solid var(--ec-border-default);
}

.ec-detail-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--ec-font-body);
  font-size: var(--ec-fz-base);
  font-weight: 700;
  letter-spacing: var(--ec-letter-spacing-body);
  color: var(--ec-text-main);
}

/* +/- トグルアイコン */
.ec-detail-section__toggle {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
  margin-left: 10px;
}

.ec-detail-section__toggle::before,
.ec-detail-section__toggle::after {
  content: '';
  position: absolute;
  background-color: var(--ec-text-main);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s, opacity 0.2s;
  border-radius: 40px;
}

/* 横棒 (−) — 常に表示 */
.ec-detail-section__toggle::before {
  width: 24px;
  height: 2px;
}

/* 縦棒 (+) — 閉じている時のみ表示 */
.ec-detail-section__toggle::after {
  width: 2px;
  height: 24px;
}

/* 開いた状態: 縦棒を非表示 → − のみ */
.ec-detail-section__header[aria-expanded="true"] .ec-detail-section__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.ec-detail-section__body {
  padding: 0 0 20px;
  font-size: var(--ec-fz-sm);
  line-height: 1.8;
  color: var(--ec-text-main);
}

.ec-detail-section__body[hidden] {
  display: none;
}

/* 仕様・サイズテーブル */
.ec-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ec-fz-sm);
}

.ec-spec-table th,
.ec-spec-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ec-border-subdued);
}

.ec-spec-table th {
  font-weight: 700;
  background-color: var(--ec-surface-main);
  white-space: nowrap;
  width: 30%;
}

.ec-spec-table td {
  color: var(--ec-text-main);
}

/* 注意事項 */
.ec-detail-notes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ec-detail-notes__item {
  display: flex;
  gap: 4px;
  font-size: var(--ec-fz-xs);
  color: var(--ec-text-subdued);
  line-height: 1.6;
  margin-bottom: 8px;
}

.ec-detail-notes__mark {
  flex-shrink: 0;
  color: var(--ec-text-subdued);
}

/* お客様の声 */
.ec-reviews {
  padding: 0;
}

.ec-review {
  padding: 16px 0;
  border-bottom: 1px solid var(--ec-border-subdued);
}

.ec-review:last-child {
  border-bottom: none;
}

.ec-review__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.ec-review__author {
  font-weight: 700;
  font-size: var(--ec-fz-sm);
}

.ec-review__date {
  font-size: var(--ec-fz-xs);
  color: var(--ec-text-subdued);
}

.ec-review__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ec-review__rating-label {
  font-size: var(--ec-fz-xs);
  color: var(--ec-text-subdued);
}

.ec-review__stars {
  display: flex;
  gap: 2px;
}

.ec-review__star {
  width: 14px;
  height: 14px;
  color: var(--ec-color-rating-star);
}

.ec-review__text {
  font-size: var(--ec-fz-sm);
  line-height: 1.7;
}

/* ============================================================
   右カラム — 商品情報（ラベル、名前、価格、バリエーション、カート）
   ============================================================ */

.ec-product-detail__info {
  /* デフォルトは静的配置（パターンB: 右 ≥ 左）— 通常スクロール */
  position: static;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* パターンA（右 < 左）: JS が .is-sticky を付与して sticky 化 */
.ec-product-detail__info.is-sticky {
  position: sticky;
  top: 16px;
}

/* ラベルバッジ */
.ec-product-detail__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.ec-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  font-size: var(--ec-fz-xs);
  font-weight: 700;
  border-radius: var(--ec-radius-badge);
  line-height: 1.4;
}

.ec-label--new {
  background-color: var(--ec-brand-primary);
  color: var(--ec-brand-on-primary);
}

.ec-label--sale {
  background-color: var(--ec-status-sale);
  color: var(--ec-text-inverse);
}

.ec-label--stock {
  border: 1px solid var(--ec-status-alert);
  color: var(--ec-status-alert);
  background-color: transparent;
}

.ec-label--free-shipping {
  border: 1px solid var(--ec-status-success);
  color: var(--ec-status-success);
  background-color: transparent;
}

.ec-label--custom {
  border: 1px solid var(--ec-text-subdued);
  color: var(--ec-text-subdued);
  background-color: transparent;
}

/* 商品名 */
.ec-product-detail__name {
  font-size: var(--ec-fz-base);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 8px;
  word-break: break-word;
}

/* 商品番号 */
.ec-product-detail__item-no {
  font-size: var(--ec-fz-xs);
  color: var(--ec-text-subdued);
  margin-bottom: 12px;
}

/* キャッチコピー */
.ec-product-detail__catch {
  font-size: var(--ec-fz-sm);
  color: var(--ec-text-subdued);
  margin-bottom: 12px;
}

/* 価格 */
.ec-product-detail__price {
  margin-bottom: 24px;
}

/* オプション必須マーク */
.ec-option-group__required {
  display: inline-block;
  font-size: var(--ec-fz-xs);
  color: var(--ec-status-alert);
  margin-left: 4px;
  font-weight: 700;
}

/* オプション説明文 */
.ec-option-group__desc {
  font-size: var(--ec-fz-xs);
  color: var(--ec-text-subdued);
  margin-bottom: 8px;
}

/* オプション価格注記 */
.ec-option-group__price-note {
  font-size: var(--ec-fz-xs);
  color: var(--ec-text-subdued);
  margin-top: 4px;
}

/* バリエーション選択 */
.ec-variation {
  margin-bottom: 20px;
}

.ec-variation__group {
  margin-bottom: 20px;
}

.ec-variation__label {
  font-size: var(--ec-fz-sm);
  font-weight: 400;
  margin-bottom: 10px;
  color: var(--ec-text-main);
}

/* カラーチップ */
.ec-variation__colors {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ec-variation__color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s;
  position: relative;
}

.ec-variation__color-swatch input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ec-variation__color-swatch.is-selected {
  border-color: var(--ec-text-main);
}

/* サイズボタン */
.ec-variation__sizes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ec-variation__size-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ec-variation__size-link {
  font-size: var(--ec-fz-xs);
  color: var(--ec-action-interactive);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ec-variation__size-link:hover {
  opacity: 0.7;
}

.ec-variation__size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ec-border-default);
  border-radius: var(--ec-radius-button);
  cursor: pointer;
  font-size: var(--ec-fz-sm);
  color: var(--ec-text-main);
  background-color: var(--ec-surface-card);
  transition: all 0.15s;
}

.ec-variation__size-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ec-variation__size-btn.is-selected {
  border-color: var(--ec-text-main);
  background-color: var(--ec-text-main);
  color: var(--ec-text-inverse);
}

/* 存在しない組み合わせ（SKU が無い）→ 選択不可 */
.ec-variation__size-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  text-decoration: line-through;
}

/* 在庫切れ → 選択は可能（クリックすると「在庫切れ」を表示） */
.ec-variation__size-btn.is-soldout {
  opacity: 0.5;
  pointer-events: auto;
  cursor: pointer;
}

/* 在庫切れでも選択中であることが分かるようにする */
.ec-variation__size-btn.is-soldout.is-selected {
  opacity: 1;
}

/* 在庫状況 */
.ec-variation__stock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ec-variation__stock-label {
  font-size: var(--ec-fz-sm);
  font-weight: 700;
  white-space: nowrap;
}

/* 数量 */
.ec-variation__qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.ec-variation__qty-label {
  font-size: var(--ec-fz-sm);
  font-weight: 400;
  white-space: nowrap;
}

.ec-variation__qty-control {
  display: flex;
  padding: 16px 17px;
  align-items: center;
  gap: 28px;
  border-radius: 54px;
  border: 1px solid var(--ec-border-default);
  background: var(--ec-surface-card);
}

.ec-variation__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--ec-fz-lg);
  line-height: 1;
  color: var(--ec-text-subdued);
  transition: color 0.15s;
}

.ec-variation__qty-btn:hover {
  color: var(--ec-text-main);
}

.ec-variation__qty-input {
  width: 24px;
  text-align: center;
  border: none;
  background: transparent;
  padding: 0;
  font-size: var(--ec-fz-lg);
  font-weight: 700;
  font-family: var(--ec-font-numeric);
  color: var(--ec-text-main);
  -moz-appearance: textfield;
}

.ec-variation__qty-input::-webkit-inner-spin-button,
.ec-variation__qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ec-variation__qty-input.is-invalid {
  color: var(--ec-status-sale);
}

/* 在庫なしバリエーション選択時：数量コントローラー無効状態（Figma: kosuu 無効） */
/* 操作抑止は JS の disabled 属性、見た目はここで定義する */
/* TODO: 各色は後で var(--ec-***) に置き換え */
.ec-variation__qty-control.is-disabled {
  pointer-events: none;
  background: rgba(51, 51, 51, 0.2); /* Figma: bg rgba(51,51,51,0.2) */
}

.ec-variation__qty-control.is-disabled .ec-variation__qty-input {
  color: rgba(51, 51, 51, 0.2); /* Figma: 数字「10」text rgba(51,51,51,0.2) */
  -webkit-text-fill-color: rgba(51, 51, 51, 0.2); /* :disabled 時の既定色を上書き(WebKit) */
  opacity: 1; /* :disabled の既定 opacity を打ち消す(Safari) */
}

.ec-variation__qty-control.is-disabled .ec-variation__qty-btn {
  color: rgba(51, 51, 51, 0.25); /* Figma: ± アイコン #333 opacity 25% */
  -webkit-text-fill-color: rgba(51, 51, 51, 0.25);
  opacity: 1;
}

.ec-variation__qty-error {
  margin: 8px 0 16px;
  font-size: var(--ec-fz-sm);
  color: var(--ec-status-sale);
}

.ec-variation__stock-text {
  font-size: var(--ec-fz-sm);
}

/* ============================================================
   オプション（刺繍・加工）— カード単位で独立表示
   ============================================================ */

/* オプション群コンテナ — 各カードを縦に並べる */
.ec-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

/* 個別オプションカード（オプション 1 件 = 1 カード） */
.ec-option-group {
  border: 1px solid var(--ec-border-default);
  border-radius: var(--ec-radius-card);
  padding: 14px 16px;
  background-color: var(--ec-surface-card);
  margin-bottom: 0;
}

.ec-option-group__label {
  font-size: var(--ec-fz-sm);
  font-weight: 400;
  margin-bottom: 8px;
  color: var(--ec-text-main);
}

/* ---- カラースウォッチ（丸形パレット、仕様書「カラーコード」） ---- */
.ec-option-group__color-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ec-option-group__color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 2px;
  cursor: pointer;
  background: none;
  transition: border-color 0.15s;
  position: relative;
}

.ec-option-group__color-swatch:hover {
  border-color: var(--ec-border-default);
}

.ec-option-group__color-swatch.is-selected {
  border-color: var(--ec-text-main);
}

.ec-option-group__color-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ---- プルダウン選択肢（通常 & 2カラムグリッド） ---- */
.ec-option-group__items {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ec-option-group__items--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ec-option-group__btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 60px;
  padding: 14px 18px;
  border: 1px solid var(--ec-border-default);
  border-radius: var(--ec-radius-button);
  cursor: pointer;
  font-size: var(--ec-fz-sm);
  font-weight: 600;
  color: var(--ec-text-main);
  background-color: var(--ec-surface-card);
  text-align: left;
  line-height: 1.4;
  transition: all 0.15s;
}

.ec-option-group__btn:hover:not(.is-selected) {
  border-color: var(--ec-text-subdued);
}

.ec-option-group__btn.is-selected {
  border-color: var(--ec-text-main);
  background-color: var(--ec-text-main);
  color: var(--ec-text-inverse);
}

.ec-option-group__btn.is-soldout,
.ec-option-group__btn[disabled] {
  cursor: not-allowed;
  color: var(--ec-text-subdued);
  background-color: var(--ec-surface-main);
  border-color: var(--ec-border-subdued);
  text-decoration: line-through;
}

.ec-option-group__btn.is-soldout:hover,
.ec-option-group__btn[disabled]:hover {
  border-color: var(--ec-border-subdued);
}

.ec-option-group__btn-label {
  flex: 1 1 auto;
}

.ec-option-group__btn-price {
  font-size: var(--ec-fz-xs);
  font-weight: 400;
  opacity: 0.85;
}

/* ---- プルダウン選択肢: <select> UI ---- */
.ec-option-group__select-wrap {
  position: relative;
}

.ec-option-group__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ec-text-main);
  border-bottom: 2px solid var(--ec-text-main);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.ec-option-group__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--ec-border-default);
  border-radius: var(--ec-radius-button);
  background-color: var(--ec-surface-card);
  font-size: var(--ec-fz-sm);
  color: var(--ec-text-main);
  cursor: pointer;
  line-height: 1.3;
  transition: border-color 0.15s;
}

.ec-option-group__select:hover {
  border-color: var(--ec-text-subdued);
}

.ec-option-group__select:focus {
  outline: none;
  border-color: var(--ec-text-main);
}

.ec-option-group__select:disabled {
  cursor: not-allowed;
  background-color: var(--ec-surface-main);
  color: var(--ec-text-subdued);
}

/* ---- テキスト入力 ---- */
.ec-option-group__text-wrap {
  margin-bottom: 4px;
}

.ec-option-group__input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--ec-border-default);
  border-radius: var(--ec-radius-button);
  padding: 0 12px;
  font-size: var(--ec-fz-sm);
  color: var(--ec-text-main);
}

.ec-option-group__input::placeholder {
  color: var(--ec-text-subdued);
}

.ec-option-group__extra-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.ec-option-group__extra-lines[hidden] {
  display: none;
}

/* ---- 展開ボタン（2行目/3行目追加） ---- */
.ec-option-group__expand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  cursor: pointer;
  background-color: var(--ec-surface-main);
  border: 1px solid var(--ec-border-subdued);
  border-radius: var(--ec-radius-button);
  font-size: var(--ec-fz-sm);
  color: var(--ec-text-main);
  padding: 10px 12px;
  transition: background-color 0.15s;
}

.ec-option-group__expand:hover {
  background-color: var(--ec-border-subdued);
}

.ec-option-group__expand[aria-expanded="true"] .ec-option-group__expand-icon::after {
  display: none;
}

.ec-option-group__expand-icon {
  width: 16px;
  height: 16px;
  position: relative;
  flex-shrink: 0;
}

.ec-option-group__expand-icon::before,
.ec-option-group__expand-icon::after {
  content: '';
  position: absolute;
  background-color: var(--ec-text-main);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ec-option-group__expand-icon::before {
  width: 12px;
  height: 1.5px;
}

.ec-option-group__expand-icon::after {
  width: 1.5px;
  height: 12px;
}

/* ============================================================
   商品出荷日
   ============================================================ */

.ec-shipping {
  margin-bottom: 20px;
}

.ec-shipping__title {
  font-size: var(--ec-fz-sm);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ec-text-main);
}

.ec-shipping__dest {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ec-fz-sm);
  margin-bottom: 8px;
}

.ec-shipping__dest-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-bottom: 1px dashed var(--ec-text-main);
  padding-bottom: 1px;
}

.ec-shipping__dest-arrow {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ec-text-main);
  border-bottom: 1.5px solid var(--ec-text-main);
  transform: rotate(45deg);
}

.ec-shipping__info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ec-shipping__date {
  font-size: var(--ec-fz-sm);
  font-weight: 700;
}

.ec-shipping__condition {
  font-size: var(--ec-fz-xs);
  color: var(--ec-text-subdued);
}

.ec-shipping__links {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.ec-shipping__link {
  font-size: var(--ec-fz-xs);
  color: var(--ec-text-main);
  text-decoration: underline;
  padding: 6px 12px;
  border: 1px solid var(--ec-border-default);
  border-radius: var(--ec-radius-button);
}

.ec-shipping__notes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ec-shipping__note {
  display: flex;
  gap: 4px;
  font-size: var(--ec-fz-xs);
  color: var(--ec-text-subdued);
  line-height: 1.6;
  margin-bottom: 4px;
}

/* ============================================================
   CTA ボタンエリア
   ============================================================ */

.ec-product-detail__cart-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.ec-btn--buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background-color: var(--ec-action-buy);
  color: var(--ec-text-inverse);
  border: none;
  border-radius: var(--ec-radius-button);
  font-size: var(--ec-fz-base);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s;
}

.ec-btn--buy-now:hover {
  background-color: var(--ec-action-buy-hover);
  text-decoration: none;
}

.ec-btn--buy-now svg {
  width: 20px;
  height: 20px;
}

.ec-btn--cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background-color: var(--ec-action-buy);
  color: var(--ec-text-inverse);
  border: none;
  border-radius: var(--ec-radius-button);
  font-size: var(--ec-fz-base);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, opacity 0.15s;
}

.ec-btn--cart:hover {
  background-color: var(--ec-action-buy-hover);
  text-decoration: none;
}

.ec-btn--cart svg {
  width: 20px;
  height: 20px;
}

.ec-btn--cart.is-disabled,
.ec-btn--buy-now.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  /* pointer-events は除去 — hover表示を維持しつつ、クリック無効化はJSで制御 */
}

/* 再入荷通知ボタン（Figma node 2:897）— 在庫0×「入荷連絡待」ON 時にカートと差し替え */
/* TODO: 各値は後で var(--ec-***) に置き換え */
.ec-btn--restock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px 32px;
  background-color: #fff;        /* Figma: surface white */
  color: #291b17;                /* Figma: text-main #291b17 */
  border: 1px solid #ccc;        /* Figma: border-default #ccc */
  border-radius: 2px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.9px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}

.ec-btn--restock:hover {
  text-decoration: none;
}

/* hidden 属性での表示/非表示を確実に効かせる（各ボタンは display:flex のため UA 既定に勝つ） */
.ec-product-detail__cart-area .ec-btn[hidden] {
  display: none;
}

/* お気に入り — Figma: ピル型アウトラインボタン */
.ec-product-detail__favorite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--ec-font-body);
  letter-spacing: 0.1em;
  cursor: pointer;
  background: none;
  border: 1px solid var(--ec-border-default);
  border-radius: 60px;
  font-size: var(--ec-fz-sm);
  font-weight: 700;
  color: var(--ec-text-main);
  width: 100%;
  transition: color 0.15s, border-color 0.15s;
}

.ec-product-detail__favorite:hover {
  color: var(--ec-action-favorite);
  border-color: var(--ec-action-favorite);
}

.ec-product-detail__favorite svg {
  width: 20px;
  height: 20px;
}

/* シェア */
.ec-product-detail__share {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.ec-product-detail__share-label {
  font-size: var(--ec-fz-xs);
  font-family: var(--ec-font-heading);
  font-weight: 700;
  letter-spacing: var(--ec-letter-spacing-heading);
  color: var(--ec-text-main);
}

.ec-product-detail__share-icons {
  display: flex;
  gap: 12px;
}

.ec-product-detail__share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--ec-surface-inverse);
  color: var(--ec-text-inverse);
  text-decoration: none;
  transition: opacity 0.15s;
}

.ec-product-detail__share-icon:hover {
  opacity: 0.7;
  text-decoration: none;
}

.ec-product-detail__share-icon svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   商品説明（右カラム内 — SPで表示される部分）
   ============================================================ */

.ec-product-detail__description {
  margin-top: 20px;
  font-size: var(--ec-fz-sm);
  line-height: 1.8;
  color: var(--ec-text-main);
}

/* ============================================================
   関連商品セクション
   ============================================================ */

.ec-related-products {
  max-width: 1280px;
  margin: 60px auto 0;
  padding: 0 16px;
  overflow: hidden;
}

.ec-related-products__heading {
  margin-bottom: 24px;
}

.ec-related-products__en {
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fz-lg);
  font-weight: 700;
  letter-spacing: var(--ec-letter-spacing-heading);
  color: var(--ec-text-main);
  display: block;
}

.ec-related-products__ja {
  font-size: var(--ec-fz-sm);
  color: var(--ec-text-main);
  display: block;
}

.ec-related-products .ec-product-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.ec-related-products .ec-product-grid > * {
  flex: 0 0 calc((100% - 80px) / 5);
  min-width: 180px;
  scroll-snap-align: start;
}

/* ============================================================
   特集セクション
   ============================================================ */

.ec-featured-section {
  max-width: 1280px;
  margin: 60px auto 0;
  padding: 0 16px;
}

.ec-featured-section__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ec-featured-section__en {
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fz-lg);
  font-weight: 700;
  letter-spacing: var(--ec-letter-spacing-heading);
  color: var(--ec-text-main);
  display: block;
}

.ec-featured-section__ja {
  font-size: var(--ec-fz-sm);
  color: var(--ec-text-main);
  display: block;
}

.ec-featured-section__link {
  font-size: var(--ec-fz-xs);
  color: var(--ec-action-interactive);
}

/* ============================================================
   レスポンシブ — スマートフォン
   ============================================================ */

@media (max-width: 768px) {
  .ec-product-detail__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  /* SP: ギャラリー → 商品情報+カート → 商品説明コンテンツ の順 */
  .ec-product-detail__left {
    display: contents;
  }

  .ec-product-detail__gallery {
    order: 1;
    position: static;
    margin: 0 -16px;
  }

  .ec-product-detail__info,
  .ec-product-detail__info.is-sticky {
    /* SP では sticky 化を無効にして縦積みのまま */
    position: static;
    order: 2;
  }

  .ec-product-detail__content {
    order: 3;
  }

  .ec-gallery__main {
    border-radius: 0;
  }

  .ec-gallery__thumbs {
    padding: 0 16px;
  }

  .ec-gallery__model-info {
    padding: 0 16px;
  }

  .ec-product-detail__info {
    padding: 16px 0;
  }

  .ec-product-detail__name {
    font-size: var(--ec-fz-sm);
  }

  .ec-product-detail__content {
    margin-top: 24px;
  }

  /* 関連商品 — SP 横スクロール */
  .ec-related-products .ec-product-grid > * {
    flex: 0 0 calc((100% - 24px) / 3);
    min-width: 140px;
  }

  /* CTA ボタン */
  .ec-btn--buy-now,
  .ec-btn--cart {
    padding: 14px 20px;
    font-size: var(--ec-fz-sm);
  }

  .ec-gallery__thumb {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 480px) {
  .ec-related-products .ec-product-grid > * {
    flex: 0 0 calc((100% - 10px) / 2.3);
    min-width: 120px;
  }
}

/* ============================================================
   レビューセクション（review CPT）
   ============================================================ */

.ec-review-section {
  /* アコーディオン本体の上罫線は出さない（Figma準拠） */
}

.ec-review-section__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ec-space-unit) * 4);
}

.ec-review-section__empty {
  color: var(--ec-text-subdued);
  font-size: var(--ec-fz-sm);
}

/* レビューカード ― Figmaデザイン準拠（角丸なし） */
.ec-review-card {
  border: 1px solid var(--ec-border-default);
  background-color: var(--ec-surface-card);
}

/* ヘッダー行（名前＋投稿日）― Figma: グレー背景 #F4F4F4 */
.ec-review-card__header {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--ec-space-unit) * 2.5);
  padding: calc(var(--ec-space-unit) * 2.5);
  background-color: var(--ec-surface-main);
  border-bottom: 1px solid var(--ec-border-default);
}

.ec-review-card__author {
  flex: 1;
  font-size: var(--ec-fz-xs);
  font-weight: 700;
  color: var(--ec-text-main);
  line-height: 2.25;
}

.ec-review-card__date {
  width: fit-content;
  white-space: nowrap;
  font-size: var(--ec-fz-xs);
  font-weight: 400;
  color: var(--ec-text-subdued);
  letter-spacing: 0.1em;
  line-height: 2.25;
}

/* 評価行（おすすめ度＋星） */
.ec-review-card__rating {
  display: flex;
  align-items: center;
  gap: calc(var(--ec-space-unit) * 2.5);
  padding: calc(var(--ec-space-unit) * 2.5);
  border-bottom: 1px solid var(--ec-border-default);
}

.ec-review-card__rating-label {
  width: 6em;
  flex-shrink: 0;
  font-size: var(--ec-fz-xs);
  font-weight: 700;
  color: var(--ec-text-main);
  line-height: 2.25;
}

.ec-review-card__stars {
  display: flex;
  align-items: center;
  gap: calc(var(--ec-space-unit) * 2.5);
}

.ec-review-card__star {
  color: var(--ec-border-default);
  font-size: var(--ec-fz-lg);
  line-height: 1;
}

.ec-review-card__star.is-filled {
  color: var(--ec-color-rating-star);
}

/* 本文行 */
.ec-review-card__body {
  padding: calc(var(--ec-space-unit) * 2.5);
  font-size: var(--ec-fz-sm);
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: var(--ec-text-main);
  white-space: pre-wrap;
}

/* ショップ返信 */
.ec-review-card__reply {
  margin: 0 calc(var(--ec-space-unit) * 2.5) calc(var(--ec-space-unit) * 2.5);
  padding: calc(var(--ec-space-unit) * 4);
  background-color: var(--ec-surface-main);
  border-radius: var(--ec-radius-button);
}

.ec-review-card__reply-label {
  font-size: var(--ec-fz-xs);
  font-weight: 700;
  color: var(--ec-text-main);
  margin: 0 0 calc(var(--ec-space-unit) * 2);
}

.ec-review-card__reply-body {
  font-size: var(--ec-fz-sm);
  line-height: 1.75;
  color: var(--ec-text-main);
  margin: 0;
  white-space: pre-wrap;
}

@media (max-width: 768px) {
  .ec-review-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ec-space-unit);
  }
}

/* ============================================================
   サイズ表モーダル
   ============================================================ */
.ec-size-chart-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ec-size-chart-modal[hidden] {
  display: none;
}
.ec-size-chart-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.ec-size-chart-modal__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: var(--ec-surface-card, #fff);
  border-radius: var(--ec-radius-card, 8px);
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: auto;
}
.ec-size-chart-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--ec-surface-inverse, #2d2d2d);
  color: var(--ec-text-inverse, #fff);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.ec-size-chart-modal__close:hover {
  opacity: 0.8;
}
.ec-size-chart-modal__image {
  display: block;
  max-width: 100%;
  height: auto;
}