/* ============================================================
   room.css — サイズのミニ部屋レイアウト＋サイズカード
   「絨毯=生活空間に敷くオアシス」を家具との対比で可視化。
   ============================================================ */
.roomviz { margin: 0; inline-size: 100%; }
.roomviz__svg { inline-size: 100%; block-size: auto; display: block; }
.rv-rug { fill: var(--red); }
.rv-furn rect { fill: var(--paper-3); stroke: var(--ink-3); stroke-width: 1; }
.rv-sofa-seat { fill: var(--paper-2); }
.rv-sofa-line { stroke: var(--ink-3); stroke-width: 1; }
.rv-table { fill: var(--paper-2); stroke: var(--ink-3); stroke-width: 1; }
.roomviz__cap {
  font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-wide);
  color: var(--ink-3); text-align: center; margin-block-start: var(--s-2xs);
}

/* —— サイズカード一覧（旧サイト準拠の4列グリッド） —— */
.size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-md); }
.size-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--s-md) var(--s-sm); border: var(--hair); background: var(--paper);
  text-decoration: none; color: var(--ink);
  transition: border-color var(--d1) var(--ease), box-shadow var(--d1) var(--ease), transform var(--d1) var(--ease);
}
.size-card:hover { border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-2px); }
.size-card .roomviz { inline-size: 78%; max-inline-size: 180px; }
.size-card h3 {
  font-family: var(--serif); font-weight: 600; font-size: var(--t-md);
  margin: var(--s-sm) 0 var(--s-3xs); color: var(--ink);
}
.size-card .range { font-size: var(--t-sm); color: var(--ink-3); line-height: var(--lh-snug); }
.size-card .more {
  margin-block-start: var(--s-xs); font-family: var(--grotesk); font-size: var(--t-2xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--red);
}
@media (max-width: 900px) { .size-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .size-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-sm); } }

/* —— 商品詳細の設置シミュレーション —— */
.pd-room {
  border: var(--hair); padding: var(--s-md); background: var(--paper-2);
  display: grid; grid-template-columns: 1fr; gap: var(--s-sm); place-items: center;
}
.pd-room .roomviz { max-inline-size: 280px; }
.pd-room__note { font-size: var(--t-sm); color: var(--ink-2); text-align: center; line-height: var(--lh-snug); }
.pd-room__note b { color: var(--red-deep); }

/* —— 主画像の拡大ルーペ（カーソル追従ズーム） —— */
.pd-zoom {
  position: relative; overflow: hidden; cursor: zoom-in;
  border: var(--hair); background: var(--paper-2);
}
.pd-zoom img {
  display: block; inline-size: 100%; block-size: auto;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform .2s var(--ease);
}
.pd-zoom.is-zoom { cursor: zoom-out; }
.pd-zoom.is-zoom img { transform: scale(2.2); transition: none; }
.pd-zoom__hint {
  position: absolute; inset-inline-end: .5rem; inset-block-end: .5rem;
  font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--ink-2);
  background: color-mix(in oklab, #fff 82%, transparent); padding: .2em .55em; pointer-events: none;
}
.pd-zoom.is-zoom .pd-zoom__hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pd-zoom img { transition: none; } }

/* —— 商品の物語（構造化展開） —— */
.pd-story { padding-block: var(--s-2xl); border-block-start: var(--rule);
  background: radial-gradient(120% 80% at 50% -10%, var(--red-tint), transparent 55%), var(--paper); }
.pd-story .heading { margin-block-end: var(--s-lg); }

.pd-colors { display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap;
  justify-content: center; margin-block-end: var(--s-xl); }
.pd-colors__label { font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-3); }
.pd-colors__row { display: flex; gap: var(--s-md); flex-wrap: wrap; }
.pd-swatch { display: inline-flex; align-items: center; gap: var(--s-2xs); font-size: var(--t-sm); color: var(--ink-2); }
.pd-swatch__dot { inline-size: 22px; block-size: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), var(--shadow); }
@media (prefers-reduced-motion: no-preference) {
  .pd-swatch__dot { animation: pdDot .5s var(--ease) both; }
  .pd-swatch:nth-child(2) .pd-swatch__dot { animation-delay: .08s; }
  .pd-swatch:nth-child(3) .pd-swatch__dot { animation-delay: .16s; }
  .pd-swatch:nth-child(4) .pd-swatch__dot { animation-delay: .24s; }
}
@keyframes pdDot { from { transform: scale(0); } to { transform: scale(1); } }

.pd-narr { max-width: 40em; margin-inline: auto; }
.pd-narr p { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); margin-block-end: var(--s-md); }
.pd-narr__lead { font-family: var(--serif); font-size: var(--t-md); color: var(--ink); }
.pd-narr__lead::first-letter {
  float: inline-start; font-family: var(--serif); font-weight: 700; color: var(--red);
  font-size: 3.2em; line-height: .82; padding-inline-end: .08em; padding-block-start: .04em;
}

.pd-specs { display: grid; grid-template-columns: 1fr; gap: 0;
  border-block-start: var(--hair); margin-block: var(--s-xl); max-width: 40em; margin-inline: auto; }
.pd-specs > div { display: grid; grid-template-columns: 8em 1fr; gap: var(--s-sm);
  padding-block: var(--s-xs); border-block-end: var(--hair); padding-inline: var(--s-xs); align-items: baseline; }
.pd-specs dt { font-family: var(--grotesk); font-size: var(--t-xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--ink-3); }
.pd-specs dd { margin: 0; color: var(--ink); font-size: var(--t-sm); }
/* ベースカラー行：テキスト横に色見本ドットを併記 */
.pd-specs dd.has-dots { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2xs); }
.pd-spec-dots { display: inline-flex; gap: 5px; }
.pd-spec-dot { inline-size: 14px; block-size: 14px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
@media (max-width: 480px) { .pd-specs > div { grid-template-columns: 6.5em 1fr; } }

.pd-story__oasis { text-align: center; font-family: var(--serif); font-size: var(--t-lg);
  line-height: 1.6; color: var(--red-deep); margin-block: var(--s-2xl) var(--s-lg); }

/* 色ノート（テキスト併用） */
.pd-colors__note { flex-basis: 100%; text-align: center; font-size: var(--t-sm);
  color: var(--ink-2); line-height: var(--lh-snug); margin: var(--s-2xs) auto 0; max-width: 40em; }

/* 配送（展開固定・2段） */
.pd-ship { max-width: 44em; margin-inline: auto; border-block-start: var(--hair); padding-block-start: var(--s-lg); }
.pd-ship__block { margin-block-end: var(--s-md); }
.pd-ship__h { font-family: var(--serif); font-size: var(--t-md); color: var(--ink);
  margin: 0 0 var(--s-2xs); display: flex; align-items: baseline; gap: var(--s-2xs); }
.pd-ship__sub { font-family: var(--grotesk); font-size: var(--t-2xs); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--ink-3); }
.pd-ship__block p { font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-snug); margin: 0 0 .25em; }
.pd-eta { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5em, 1fr)); gap: var(--s-2xs) var(--s-md); }
.pd-eta li { display: flex; flex-direction: column; gap: 1px;
  border-block-end: 1px dotted var(--line); padding-block: .3em; font-size: var(--t-sm); }
.pd-eta__r { color: var(--ink-3); font-size: var(--t-xs); }
.pd-eta__t { color: var(--red-deep); white-space: nowrap; font-family: var(--serif); }
.pd-ship__note { font-size: var(--t-xs); color: var(--ink-3); line-height: var(--lh-snug); margin-block-start: var(--s-sm); }
@media (max-width: 560px) { .pd-eta { grid-template-columns: 1fr; } }

/* —— 織り密度メーター（ノット数） —— */
.knot-meter { margin-block: var(--s-sm); }
.knot-meter__bar { block-size: 8px; background: var(--paper-3); position: relative; overflow: hidden; }
.knot-meter__fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--red);
  inline-size: var(--kn, 50%); }
.knot-meter__row { display: flex; justify-content: space-between; font-family: var(--grotesk);
  font-size: var(--t-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3); margin-block-start: var(--s-3xs); }