/*
 * Color collection card — 2026-08-04
 *
 * けんし提供のモックに合わせた作り直し。
 * 左＝台紙を外したチップ10本（実物写真の切り抜き）／右＝カラー選択と購入。
 * このファイルは responsive-polish.css より後に読み込む。外せば従来の見た目へ戻る。
 */

.product-lineup .purchase-card--colors {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  align-items: stretch;
  gap: 0;
  width: min(100%, 1080px);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 26px;
  box-shadow: 0 26px 60px rgba(122, 92, 70, 0.11);
}

/* ── 左：チップの写真 ─────────────────────────── */
.purchase-card--colors .purchase-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  padding: 40px 34px 30px;
  background: linear-gradient(168deg, #f6efe6 0%, #fbf7f1 62%, #fdfaf6 100%);
}

.purchase-card--colors .purchase-visual::before,
.purchase-card--colors .purchase-visual::after {
  content: none;
}

.color-script {
  align-self: flex-start;
  margin: 0;
  color: var(--tip-accent, #7c8894);
  font-family: "Pinyon Script", "Cormorant Garamond", serif;
  font-size: 46px;
  font-weight: 400;
  line-height: 1.05;
}

.color-script-sub {
  align-self: flex-start;
  /* 下の余白は「最低限の間隔」。余った分は写真の上下で等分される。 */
  margin: 6px 0 18px;
  color: #948779;
  font-size: 12px;
  letter-spacing: 0.16em;
}

/* styles.css の height:100% を打ち消し、余った縦の余白を上下で等分する
   （＝チップがパネルの中央に来る）。 */
.purchase-card--colors .purchase-visual .product-image-link {
  display: block;
  width: 100%;
  height: auto;
  margin-block: auto;
  margin-inline: 0;
}

.purchase-card--colors .purchase-visual .product-image-link picture {
  display: block;
  width: 100%;
}

.purchase-card--colors .purchase-visual .product-image-link img {
  height: auto;
}

.purchase-card--colors .purchase-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  object-fit: contain;
  filter: none;
  transform: none;
}

.visual-caption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  align-self: flex-start;
  color: #948779;
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.visual-caption::before {
  content: "";
  width: 34px;
  height: 1px;
  background: #cbbcab;
}

/* ── 右：カラー選択と購入 ───────────────────────── */
.purchase-card--colors .purchase-info--colors {
  display: flex;
  flex-direction: column;
  padding: 42px 38px 36px !important;
  background: #fff;
}

.purchase-card--colors .product-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #efe6db;
}

.purchase-card--colors .product-line strong {
  color: #3d2817;
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.purchase-card--colors .product-line span {
  color: var(--tip-accent, #7c8894);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.purchase-card--colors .color-collection-copy {
  margin: 0 0 18px;
  color: #6b5a4a;
  font-size: 13.5px;
  line-height: 2;
}

/* カラー選択：2×2 */
.purchase-card--colors .color-choice-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}

.purchase-card--colors .color-choice {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 11px 12px;
  background: #fff;
  border: 1px solid #eee4d8;
  border-radius: 13px;
  transform: none;
}

.purchase-card--colors .color-choice > span[aria-hidden] {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 22px;
  height: 22px;
  background-size: cover;
  background-position: 50% 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(90, 70, 55, 0.18);
}

.purchase-card--colors .color-choice strong {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  color: #3d2817;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.purchase-card--colors .color-choice small {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  color: #948779;
  font-size: 10.5px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右端のラジオ */
.purchase-card--colors .color-choice::after {
  content: "";
  position: static;
  grid-column: 3;
  grid-row: 1 / 3;
  display: block;
  width: 19px;
  height: 19px;
  background: #fff;
  border: 1px solid #ded1c2;
  border-radius: 50%;
  opacity: 1;
  transform: none;
}

.purchase-card--colors .color-choice.is-selected {
  background: #fffdfa;
  border-color: var(--choice-accent, #c9b9a6);
  box-shadow: 0 0 0 1px var(--choice-accent, #c9b9a6);
  transform: none;
}

.purchase-card--colors .color-choice.is-selected::after {
  content: "✓";
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  background: var(--choice-accent, #8d949c);
  border-color: var(--choice-accent, #8d949c);
}

/* 安心ポイント：2×2 */
.purchase-card--colors .purchase-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.purchase-card--colors .purchase-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  color: #6b5a4a;
  font-size: 12.5px;
  background: #faf5ef;
  border: 0;
  border-radius: 10px;
}

.purchase-card--colors .purchase-trust li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: #c9a961;
  border-radius: 50%;
}

/* 購入ボタン。padding-top は「カラー選択との最低限のあき」＝ボタンを少し下げる。 */
.purchase-card--colors .button-grid {
  display: block;
  padding-top: 30px;
  margin: auto 0 0;
}

.purchase-card--colors .button-grid a {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 62px;
  padding: 0 24px;
  color: #fff;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  background: linear-gradient(180deg, #c97b89 0%, #bd6c7b 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(189, 108, 123, 0.28);
}

.purchase-card--colors .button-grid a:hover {
  background: linear-gradient(180deg, #c1717f 0%, #b46171 100%);
}

.buy-note {
  margin: 12px 0 0;
  color: #9b8e85;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ── タブレット・スマホ ───────────────────────── */
@media (max-width: 900px) {
  .product-lineup .purchase-card--colors {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .purchase-card--colors .purchase-visual {
    height: auto !important;
    padding: 30px 24px 22px !important;
  }

  .purchase-card--colors .purchase-visual img {
    transform: none !important;
  }

  .color-script {
    font-size: 38px;
  }

  .purchase-card--colors .purchase-info--colors {
    padding: 28px 22px 26px !important;
  }

  .purchase-card--colors .product-line strong {
    font-size: 23px;
  }
}

@media (max-width: 480px) {
  .purchase-card--colors .color-choice-list,
  .purchase-card--colors .purchase-trust {
    grid-template-columns: 1fr;
  }

  .purchase-card--colors .color-choice small {
    white-space: normal;
  }
}