/* ==================================================================
   物販ブロック・商品棚（2026-09-21）
   editorial-v4 に合わせる。罫線・余白・タイポグラフィで組み、
   角丸・影・グラデーション・pill は使わない。
   .art-body の既存指定に勝つため、記事内の要素は2重セレクタで書く。
   ================================================================== */

/* ---- 共通 ---- */
.miyo-block-head,
.art-body .miyo-block-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 52px 0 18px;
  padding: 11px 0 0;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.5;
  letter-spacing: -.025em;
}
.miyo-block-en {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}

.miyo-facts,
.art-body .miyo-facts { margin: 0; }
.miyo-facts > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.miyo-facts dt { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.miyo-facts dd, .art-body .miyo-facts dd { margin: 0; font-size: 15px; line-height: 1.75; }
.miyo-facts ul, .art-body .miyo-facts ul { margin: 0; padding: 0; list-style: none; }
.miyo-facts li, .art-body .miyo-facts li {
  position: relative;
  margin: 0 0 4px;
  padding-left: 16px;
}
.miyo-facts li::before { content: "—"; position: absolute; left: 0; color: var(--accent-text); }
.miyo-empty { color: var(--muted); }

/* ---- 結論ボックス ---- */
.miyo-verdict,
.art-body .miyo-verdict {
  margin: 34px 0 44px;
  padding: 0 0 4px;
  border: 0;
  border-top: 2px solid var(--ink);
  background: var(--sunken);
  padding: 22px 26px 8px;
}
.miyo-verdict .miyo-block-head,
.art-body .miyo-verdict .miyo-block-head { margin: 0 0 14px; padding: 0; border-top: 0; }
.miyo-verdict .miyo-facts > div:last-child { border-bottom: 0; }
.miyo-verdict-jump { margin: 0; padding: 14px 0 12px; border-top: 1px solid var(--line); }
.miyo-verdict-jump a, .art-body .miyo-verdict-jump a {
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---- 試した記録 ---- */
.miyo-try, .art-body .miyo-try { margin: 44px 0; }
.miyo-try-item, .art-body .miyo-try-item {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}
.miyo-try-item span {
  margin-left: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.miyo-try-disclosure, .art-body .miyo-try-disclosure {
  margin: 14px 0 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* ---- 比較表 ---- */
.miyo-compare, .art-body .miyo-compare { margin: 44px 0; }
.miyo-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.miyo-compare-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}
.miyo-compare-table th,
.miyo-compare-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.miyo-compare-table thead th {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
.miyo-compare-brand {
  display: block;
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
}
.miyo-compare-name { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.miyo-compare-axis {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 96px;
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.miyo-compare-axis-head { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.miyo-compare-buy td { padding-top: 16px; }
.miyo-compare-hint { display: none; margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.miyo-compare-note {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}
.miyo-compare-note-label { color: var(--accent-text); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.miyo-compare-note p, .art-body .miyo-compare-note p { margin: 0; font-size: 15px; line-height: 1.85; }

/* ---- 色見本 ---- */
.miyo-swatch, .art-body .miyo-swatch { margin: 44px 0; }
.miyo-swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}
.miyo-swatch-cell, .art-body .miyo-swatch-cell { margin: 0; }
.miyo-swatch-photo { aspect-ratio: 1/1; overflow: hidden; background: var(--sunken); }
.miyo-swatch-photo img { width: 100%; height: 100%; object-fit: cover; }
.miyo-swatch-placeholder { display: block; width: 100%; height: 100%; }
.miyo-swatch-cell figcaption { padding-top: 10px; border-top: 1px solid var(--ink); margin-top: 10px; }
.miyo-swatch-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; }
.miyo-swatch-brand { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.miyo-swatch-condition { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.miyo-swatch-note, .art-body .miyo-swatch-note { margin: 16px 0 0; color: var(--muted); font-size: 12px; }

/* ---- 動画 ---- */
.miyo-video, .art-body .miyo-video { margin: 40px 0; }
.miyo-video-frame {
  position: relative;
  overflow: hidden;
  background: var(--sunken);
  border-top: 1px solid var(--ink);
}
.miyo-video--tiktok .miyo-video-frame { max-width: 325px; aspect-ratio: 9/16; }
.miyo-video--instagram .miyo-video-frame { max-width: 400px; aspect-ratio: 4/5; }
.miyo-video-frame img, .miyo-video-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.miyo-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.miyo-video figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  max-width: 400px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.miyo-video figcaption a, .art-body .miyo-video figcaption a {
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
}

/* ---- 商品ボックスの追加分 ---- */
.miyo-product--photo { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: start; }
.miyo-product-media img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.miyo-product-sub, .art-body .miyo-product-sub { margin: 0 0 12px; color: var(--muted); font-size: 12px; letter-spacing: .02em; }
.miyo-price-stale {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border-left: 2px solid var(--accent-text);
  background: #fff;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}
.miyo-price-stale--block, .art-body .miyo-price-stale--block { margin: 14px 0 0; }

/* ---- 購入ボタン（商品ボックス・比較表・商品棚で共通） ---- */
.miyo-product .miyo-btn,
.miyo-compare .miyo-btn,
.shelf-page .miyo-btn {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.miyo-product .miyo-btn--rakuten,
.miyo-compare .miyo-btn--rakuten,
.shelf-page .miyo-btn--rakuten { background: var(--ink); color: #fff; }
.miyo-product .miyo-btn--rakuten:hover,
.miyo-compare .miyo-btn--rakuten:hover,
.shelf-page .miyo-btn--rakuten:hover { background: #fff; color: var(--ink); }
.miyo-product .miyo-btn--tiktok,
.miyo-compare .miyo-btn--tiktok,
.shelf-page .miyo-btn--tiktok { background: #fff; color: var(--ink); }
.miyo-product .miyo-btn--tiktok:hover,
.miyo-compare .miyo-btn--tiktok:hover,
.shelf-page .miyo-btn--tiktok:hover { background: var(--ink); color: #fff; }
.miyo-product .miyo-btn--official,
.miyo-compare .miyo-btn--official,
.shelf-page .miyo-btn--official {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

/* 比較表の購入ボタンは列ごとに縦へ積む（上の共通指定より後ろに置いて上書きする） */
.miyo-compare .miyo-compare-buy .miyo-btn {
  display: block;
  margin-bottom: 8px;
}
.miyo-compare .miyo-compare-buy .miyo-btn--official { display: inline-block; }

/* ---- 一覧カードの「試した」表示 ---- */
.card-try {
  padding: 1px 7px 2px;
  border: 1px solid var(--accent-text);
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

/* ---- トップ「最近試したもの」 ---- */
.fp-tried .tried-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px 26px;
}
.tried-card { color: inherit; }
.tried-photo { overflow: hidden; aspect-ratio: 4/3; background: var(--sunken); }
.tried-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.tried-card:hover .tried-photo img { transform: scale(1.018); }
.tried-body { padding-top: 14px; }
.tried-flag {
  display: inline-block;
  margin-bottom: 9px;
  padding: 1px 7px 2px;
  border: 1px solid var(--accent-text);
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}
.tried-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.025em;
}
.tried-date { display: block; margin-top: 11px; color: #686268; font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---- 商品情報の中の公式リンク（購入ボタンとは分ける） ---- */
.miyo-product .miyo-official-link,
.miyo-compare .miyo-official-link {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 400;
}
.miyo-product .miyo-official-link:hover,
.miyo-compare .miyo-official-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.miyo-sep { margin: 0 8px; color: var(--line); }
.miyo-compare-official { display: block; margin-top: 6px; font-weight: 400; }

/* ---- 商品棚 ---- */
.shelf-disclosure {
  margin: 0 0 18px;
  padding: 12px 0;
  border: solid var(--line);
  border-width: 1px 0;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}
.shelf-empty { margin: 34px 0 0; color: var(--ink); font-size: 16px; line-height: 1.9; }
.shelf-lead { max-width: 640px; margin: 0 0 34px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.shelf-lead p { margin: 0 0 8px; }
.shelf-filter { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0 0 30px; border-bottom: 1px solid var(--ink); }
.shelf-filter-btn {
  padding: 10px 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}
.shelf-filter-btn span { margin-left: 6px; font-size: 10px; font-variant-numeric: tabular-nums; }
.shelf-filter-btn.is-current { border-bottom-color: var(--ink); color: var(--ink); }
.shelf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 22px; }
.shelf-cell { min-width: 0; }
.shelf-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.shelf-thumb img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--sunken); }
.shelf-cell-meta { display: block; padding-top: 11px; }
.shelf-cell-brand { display: block; color: var(--accent-text); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.shelf-cell-name { display: block; margin-top: 5px; font-size: 14px; font-weight: 700; line-height: 1.55; }
.shelf-cell-price { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.shelf-thumb[aria-expanded="true"] .shelf-cell-name { border-bottom: 1px solid var(--ink); }
.shelf-panel { grid-column: 1 / -1; padding: 6px 0 22px; border-bottom: 1px solid var(--ink); }
.shelf-panel .miyo-product { margin-top: 0; }
.shelf-related { margin-top: 18px; }
.shelf-related-head { margin: 0 0 8px; color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.shelf-related ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.shelf-related li { border-bottom: 1px solid var(--line); }
.shelf-related a { display: block; padding: 11px 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.shelf-close {
  margin-top: 18px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .06em;
  cursor: pointer;
}

/* ---- 1024px以下 ---- */
@media (max-width: 1024px) {
  .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fp-tried .tried-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 640px以下 ---- */
@media (max-width: 640px) {
  .miyo-block-head, .art-body .miyo-block-head { margin-top: 40px; font-size: 18px; gap: 10px; }
  .miyo-facts > div { grid-template-columns: 1fr; gap: 4px; padding: 11px 0; }
  .miyo-facts dd, .art-body .miyo-facts dd { font-size: 14.5px; }
  .miyo-verdict, .art-body .miyo-verdict { padding: 18px 18px 6px; }
  .miyo-compare-hint { display: block; }
  .miyo-compare-table { font-size: 13px; }
  .miyo-compare-table th, .miyo-compare-table td { padding: 11px 12px; }
  .miyo-compare-axis { min-width: 78px; box-shadow: 1px 0 0 var(--line); }
  .miyo-compare-note { grid-template-columns: 1fr; gap: 6px; }
  .miyo-compare .miyo-btn { padding: 10px 12px; font-size: 12px; }
  .miyo-swatch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .miyo-product--photo { grid-template-columns: 1fr; gap: 16px; }
  .fp-tried .tried-grid { grid-template-columns: 1fr; gap: 34px; }
  .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .shelf-filter { gap: 0 18px; }
  .shelf-panel .miyo-product-actions { flex-direction: column; }
}