/* 公開側のスタイル（お客さんが見る側）
 *
 * ★ 色を直接書かない。theme.css の変数だけを参照する
 *   （docs/spec/DIRECTORY.md §3-2）。
 *
 * ★ クラス名を .public-header / .public-footer と明示的にしてある。
 *   manage.css にも .site-header があり、**別物なのに同じ名前**だと
 *   直すファイルを取り違える。2つの CSS が同時に読まれることは無いので
 *   衝突は起きないが、読む人が迷う名前を避ける。
 *   （.chip だけは管理画面と**同じ見た目にする意図**があるので同名にしてある）
 *
 * ★ JavaScript は使わない。開閉するメニューや動くカルーセルを作らない。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* フッターを常に画面の下へ押し下げる（記事が0本のときに中途半端な位置に来ない） */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

a {
  color: var(--color-primary);
}

img {
  max-width: 100%;
  height: auto;
}

/* 目には見せず、読み上げには渡す（manage.css と同じもの） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- ヘッダー ------------------------------------------------------------ */

/* ★ 置くのはロゴと「LINEで相談」だけ（決定事項）。
   カテゴリの絞り込みはトップの中にチップで置く。
   スマホで横に並べても狭くならず、迷う場所が少ない。 */
.public-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* ★★★ 折り返すのは「ロゴとボタンの間」であって、ボタン同士の間ではない ★★★
   flex-wrap を書かないと、この行は折り返さない代わりに
   **中のボタンの箱だけが細く潰され、ボタンが縦に積み上がる**
   （2026-08-09 に実機で見つかった）。
   ここで折り返せるようにすると、狭い画面では
   「1段目にロゴ / 2段目にボタン2つ横並び」になる。

   ★ ロゴの幅は事業者がアップロードした画像で決まり、こちらでは決められない。
     **1行に収まることを前提にしない。** */
.public-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.public-header__home {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* ★ 高さで揃える。ロゴの縦横比は事業者ごとに違うので、幅では決められない。 */
.public-header__logo {
  height: 44px;
  width: auto;
}

.public-header__name {
  color: var(--color-primary);
  font-size: var(--font-size-large);
  font-weight: 700;
}

/* --- 本文とフッター ------------------------------------------------------ */

.public-main {
  /* 記事が短くてもフッターが浮き上がらないように、余った高さをここが吸う */
  flex: 1 0 auto;
}

.public-footer {
  margin-top: var(--space-6);
  background: var(--color-surface-muted);
  border-top: 1px solid var(--color-border);
}

.public-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
}

.public-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

/* ★ 指で押せる高さを確保する。フッターのリンクは小さくなりがちで、
   並んだ項目を押し間違えると別の文書が開く。 */
.public-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--font-size-small);
}

.public-footer__operator {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* --- 固定ページ（事業所案内・特商法・ポリシー） -------------------------- */

.page-text {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
}

.page-text__title {
  margin: 0 0 var(--space-4);
  color: var(--color-primary);
  font-size: var(--font-size-heading);
}

/* 項目名と中身の表。★ 狭い画面では縦積み、広い画面では2列にする。 */
.facts {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 600px) {
  .facts {
    grid-template-columns: 12em 1fr;
  }
}

.facts__key {
  padding: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.facts__value {
  margin: 0;
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
  /* ★ 長いURLやメールアドレスで横にはみ出させない。
     ここに入るのは事業者が設定画面で入れた文字列で、長さを制限していない。
     スマホの幅では、途中で折り返せないと画面ごと横スクロールになる。 */
  overflow-wrap: anywhere;
}

@media (min-width: 600px) {
  .facts__key {
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .facts__value {
    padding: var(--space-3) 0;
  }
}

/* 素の文章をそのまま出す場所（プライバシーポリシー・利用規約）。
   ★ Markdown を入れない（決定事項）ので、段落と改行だけを整える。 */
.prose > p {
  margin: 0 0 var(--space-4);
}

.note {
  color: var(--color-text-muted);
}

/* --- ボタン -------------------------------------------------------------- */

/* LINEへの導線。★ ここだけは緑を面に使う（文字には使えない色。theme.css 参照）。 */
.button-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  color: var(--color-surface);
  background: var(--color-accent-strong);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
}

.button-line:hover {
  opacity: 0.9;
}

.button-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  color: var(--color-primary);
  background: var(--color-surface);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* --- 一覧（トップ・カテゴリ別） ------------------------------------------ */

.feed {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-6);
}

.feed__title {
  margin: var(--space-4) 0 var(--space-3);
  color: var(--color-primary);
  font-size: var(--font-size-heading);
}

/* カテゴリの絞り込みチップ。参考画像から採ったのはこの構造（SPEC.md） */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chips__item {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-1) var(--space-3);
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--font-size-small);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

/* ★ いま選んでいるものは、そのカテゴリの色で塗る。
   色は apps/content/colors.py の7色だけで、どれも白文字で AA を超える（D-23）。
   「すべて」には色が無いので、既定でブランドの紫になる。 */
.chips__item--current {
  color: var(--color-surface);
  background: var(--chip-color, var(--color-primary-strong));
  border-color: transparent;
  font-weight: 700;
}

/* --- カード -------------------------------------------------------------- */

.cards {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4);
  /* 狭い画面では1列、広がるにつれ2列・3列。段数を数えて指定しない */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  background: var(--color-surface);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.card:hover {
  border-color: var(--color-line);
}

.card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ★ 表紙の縦横比を揃える。バラバラだとカードの高さが揃わず、並びが崩れて見える。 */
.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card__body {
  padding: var(--space-3);
}

.card__category {
  margin: 0 0 var(--space-2);
}

.card__title {
  margin: 0 0 var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-large);
  line-height: 1.5;
}

.card__date {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.card__excerpt {
  margin: 0;
  font-size: var(--font-size-small);
}

/* 商品のカードで、記事の「日付」の位置に入るもの（D-46）。
   ★ 日付より一段強く出す。買う人がまず見るのは金額なので。 */
.card__price {
  margin: 0 0 var(--space-2);
  font-weight: 700;
}

.card__tax {
  margin-left: 0.25em;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

/* --- ページ送り ---------------------------------------------------------- */

.pager {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.pager__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.pager__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* --- 何も無いとき -------------------------------------------------------- */

.empty {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-3);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.empty__lead {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-large);
}

/* --- プレビューの帯 ------------------------------------------------------ */

/* ★ 公開中の記事と見間違えないように、いちばん上に出す。
   「下書きなのに公開されたと思い込む」ほうが困る。 */
.preview-bar {
  margin: 0;
  padding: var(--space-3);
  color: var(--color-warn);
  background: var(--color-warn-bg);
  border-bottom: 2px solid var(--color-warn);
  font-size: var(--font-size-small);
  text-align: center;
}

/* --- 記事 ---------------------------------------------------------------- */

/* 1行が長くなりすぎないよう幅を絞る。読み手には年配の方も多い。 */
.article {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
}

.article__cover {
  width: 100%;
  border-radius: var(--radius);
}

.article__category {
  margin: var(--space-4) 0 var(--space-2);
}

/* 商品の写真（D-98）。1枚目を大きく、残りを下に小さく横一列。
   ★ 以前は5枚とも原寸で縦に積んでいた。スマホでは、写真の下にある
     商品名・価格・「カートに入れる」まで何度もスクロールが要った。
   ★ 切り替えは作らない（公開側に JavaScript を置かない）。
     小さいほうを押すと、その写真そのものが開く。 */
.gallery__main {
  width: 100%;
  border-radius: var(--radius);
}

.gallery__thumbs {
  /* ★ 4列で固定する。**写真は最大5枚**（apps/shop/forms.py の MAX_IMAGES）なので、
     大きい1枚を除いた小さいほうは、多くてもちょうど4枚に収まる。
     枚数で列数が変わると、商品ごとにサムネイルの大きさが変わって落ち着かない。 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

/* ★ 大きい写真もリンクにした（押すと大きく開く）。
   リンクの既定の下線や色が写真に付かないようにする。 */
.gallery__open {
  display: block;
}

.gallery__thumb img {
  /* ★ inline のままだと、行の下端に隙間が出て枠と写真がずれる。 */
  display: block;
  width: 100%;
  /* ★★★ ここを省かない ★★★
     上の `img { height: auto }` に頼ると、あちらを直した日に静かに壊れる。
     height が auto でないと下の `aspect-ratio` が無視され、
     **縦長の写真の枠だけが縦に伸びる**（管理画面で 2026-08-09 に踏んだ形）。 */
  height: auto;
  /* ★ 縦の写真と横の写真が混ざっても、並びの高さを揃える。
     切り取られるので、**大きいほうには使わない**（商品の全体が見えなくなる）。 */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

/* 押したときに大きく開く枠（D-100）。
   ★★★ JavaScript を1行も使っていない ★★★
     `:target` は「URLの # がこの id を指しているとき」に当たる CSS の擬似クラス。
     リンクを押す = URLの # が変わる = 見え方が変わる、というだけの仕組み。

   ★ 閉じるのは `href="#photos"`（写真の並びそのもの）へのリンク。
     どの lightbox の id でもないので、:target が外れて閉じる。 */
.lightbox {
  display: none;
}

.lightbox:target {
  display: block;
  position: fixed;
  inset: 0;
  /* ★ すべての手前に出す。公開側の CSS に他の z-index は1つも無い（2026-09-08 に確認）。
     あとから重なりを足すときは、この値より小さくすること。 */
  z-index: 100;
}

/* 暗いところ。**ここ全体が「閉じる」リンク**になっている。 */
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}

/* ★ Esc では閉じられない（JS が要る）ので、閉じる印を必ず目に見えるところへ出す。 */
.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  /* ★ 指で押せる大きさにする。小さい×は、拡大表示の人ほど押しにくい。 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  font-size: 32px;
  line-height: 1;
}

.lightbox__image {
  /* ★ 暗いところの「上」に置く。**写真そのものを押しても閉じない。**
     見ようとして押した指で閉じてしまうのを防ぐ。 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ★ 全体の `img { max-width: 100% }` は、ここでは親（画面いっぱい）に対する 100%。
     画面からはみ出さないよう、縦と横の両方で抑える。 */
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  border-radius: var(--radius);
}

.article__body {
  margin-top: var(--space-4);
}

/* 読み終わった人の行き先。★ 本文と地続きに見えないよう、面を分ける。 */
.article__cta {
  margin-top: var(--space-6);
  padding: var(--space-4);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.article__cta-lead {
  margin: 0 0 var(--space-3);
}

.article__back {
  margin: var(--space-5) 0 0;
}

/* ★ カテゴリのチップは管理画面と同じ見た目にする。
   色は apps/content/colors.py の7色だけで、どれも白文字で AA を超える（D-23）。
   ★ 記事の中では押せる（同じカテゴリの一覧へ行く）ので、a でも span でも同じ形にする。 */
.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  color: var(--color-surface);
  font-size: var(--font-size-small);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}

.article__title {
  margin: 0 0 var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-heading);
}

.article__date {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* --- 本文のブロック ------------------------------------------------------ */

.block-paragraph {
  margin: 0 0 var(--space-4);
}

.block-heading {
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-subheading);
  border-bottom: 2px solid var(--color-line);
}

.block-list {
  margin: 0 0 var(--space-4);
  padding-left: 1.4em;
}

.block-list > li {
  margin-bottom: var(--space-2);
}

.block-image {
  margin: 0 0 var(--space-4);
}

.block-image img {
  width: 100%;
  border-radius: var(--radius);
}

.block-image figcaption {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* --- 商品（T-26） -------------------------------------------------------- */

/* ★ 記事の日付（.article__date）と同じ位置に入る。
   買う人がまず見るのは金額なので、日付より大きく強く出す。 */
.item__price {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-heading);
  font-weight: 700;
}

.item__tax {
  margin-left: 0.25em;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  font-weight: 400;
}

.item__shipping-note {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* 記事の中に埋め込んだ商品（D-28）。
   ★ 本文と地続きに見えないよう、面を一段上げて囲う。
     読んでいる途中で「これは商品の案内だ」と分かることが大事。 */
.block-product {
  margin: 0 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

.block-product__link {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.block-product__link:hover .block-product__name,
.block-product__link:focus-visible .block-product__name {
  text-decoration: underline;
}

.block-product__image {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius);
}

.block-product__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.block-product__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.block-product__name {
  color: var(--color-primary);
  font-size: var(--font-size-large);
}

.block-product__price {
  font-weight: 700;
}

/* --- カート（D-54） ------------------------------------------------------ */

/* ヘッダーの右側。カートとLINEを並べる。
   ★★★ flex-shrink: 0 が要る ★★★
     既定（1）だと、**この箱のほうが先に潰れて**ボタンが縦に積み上がる。
     潰さないことにすると、代わりに親（.public-header__inner）が折り返し、
     **2段目でボタンが横に並ぶ。**

   ★ flex-wrap: wrap は最後の逃げ道として残す。
     320px のような極端に狭い画面でも、はみ出すよりは縦に積むほうがよい。 */
.public-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: var(--space-2);
}

/* ★ 緑（LINE）と並ぶので紫にする。同じ色にすると、どちらを押したか分からない。 */
.button-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  color: var(--color-surface);
  background: var(--color-primary-strong);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
}

.button-cart:hover {
  opacity: 0.9;
}

/* 商品ページの「カートに入れる」。 */
.buy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.buy__quantity {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* 選択肢（色など。D-101 〜 D-107）。
   ★ 「カートに入れる」の1行に押し込まず、**行いっぱいを使って上に置く。**
     数量とボタンの間に挟むと、狭い画面で色が潰れる。 */
.buy__options {
  flex: 1 0 100%;
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
}

.buy__options-legend {
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.buy__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* ★ 指で押せる大きさにする。ラベル全体が押せる（ラジオだけを狙わせない）。 */
  min-height: var(--tap-min);
  margin-right: var(--space-3);
  cursor: pointer;
}

/* ★★★ 色見本には必ず枠線を付ける（D-106）★★★
   白・生成りのような薄い色は、**枠が無いと背景に溶けて消える。**
   「選択肢が無い」ように見えてしまう。 */
.buy__swatch,
.swatch-dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
}

/* ★★★ 色の名前を必ず出す（D-106 / D-78 と同じ原則）★★★
   色だけで伝えると、色が見えない人には選べない。 */
.buy__option-name {
  font-size: var(--font-size-base);
}

/* カートの行に出す「色: ネイビー」。 */
.cart-line__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* ★ 高さを他のボタンとそろえる。指で押す場所が並ぶので、
   1つだけ低いと押しにくい。 */
.buy__select,
.cart-line__select {
  min-height: var(--tap-min);
  padding: var(--space-2);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--font-size-base);
}

.button-buy {
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  color: var(--color-surface);
  background: var(--color-primary-strong);
  border: none;
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
}

.button-buy:hover {
  opacity: 0.9;
}

/* --- カートの画面 -------------------------------------------------------- */

.cart {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-6);
}

.cart__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-heading);
}

.cart__messages {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

/* 「販売を終了したので外しました」の知らせ。
   ★ エラー（赤）にしない。買う人の操作が間違っていたわけではない。 */
.cart__message {
  margin-bottom: var(--space-2);
  padding: var(--space-3);
  color: var(--color-warn);
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn);
  border-radius: var(--radius);
}

.cart__lines {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

/* ★★★ 狭い画面では、操作を「行いっぱいの2段目」に落とす ★★★
   写真・名前・小計を横に並べると、真ん中の列は 175px ほどしか残らない。
   そこに「数量・変える・取り消す」を入れると**縦一列に潰れる**
   （2026-08-09 に実機で見つかった）。**操作だけ別の行にすれば横に並ぶ。**

   ★ grid-area は**直下の子にしか効かない。**
     フォームを .cart-line__body の中に戻すと、この指定は無視される。 */
.cart-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "image body subtotal"
    "form  form form";
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

/* 広い画面では、操作を名前の下（写真の右）に収める。左端に余白を作らない。 */
@media (min-width: 600px) {
  .cart-line {
    grid-template-areas:
      "image body subtotal"
      "image form form";
  }
}

.cart-line__image {
  grid-area: image;
  width: 96px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.cart-line__body {
  grid-area: body;
}

.cart-line__name {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-large);
}

.cart-line__unit {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.cart-line__form {
  grid-area: form;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ★ この2つだけ左右の余白を詰める。狭い画面で1行に収めるため。
   **高さ（--tap-min）は変えない**ので、指で押せる大きさは保たれる。 */
.cart-line__form .button-quiet {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.cart-line__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* ★ 金額は右端で縦にそろえる。桁が違っても目で足せるように。 */
.cart-line__subtotal {
  grid-area: subtotal;
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.cart-total {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.cart-total dt {
  color: var(--color-text-muted);
}

.cart-total dd {
  margin: 0;
  text-align: right;
}

/* ★ dt に .cart-total dt が当たっているので、同じ強さでは勝てない。
   要素名まで書いて詳細度を上げる（!important を使わない）。 */
.cart-total dt.cart-total__label {
  color: var(--color-text);
  font-weight: 700;
}

.cart-total__amount {
  font-size: var(--font-size-heading);
  font-weight: 700;
}

.cart__empty {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.cart__back {
  margin: 0 0 var(--space-5);
}

/* --- ご注文の前に（カートの最終確認 / D-60） ------------------------------ */
/*
   ★ この先は Stripe の決済画面で、こちらの文章を足せない。
     改正特商法が最終確認画面に求める項目を、ここで全部見せる。
   ★ 目立たせすぎない。読んでほしいが、買う手を止める飾りにはしない。 */
.cart-notes {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.cart-notes__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-large);
}

.cart-notes__list {
  margin: 0 0 var(--space-3);
}

.cart-notes__label {
  margin-bottom: var(--space-1);
  color: var(--color-text);
  font-weight: 700;
}

/* ★ dd の既定の字下げ（40px）を消す。狭い画面で本文が右に寄る。 */
.cart-notes__text {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.cart-notes__text:last-of-type {
  margin-bottom: 0;
}

.cart-notes__link {
  margin: 0;
  font-size: var(--font-size-small);
}

/* --- レジへ進む（T-27） --------------------------------------------------- */
/*
   ★ 「買い物を続ける」の上に置く。押してほしいほうを先に出す。
   ★ ボタンと注意書きを縦に積む。横に並べると、狭い画面で
     注意書きのほうが潰れる（HANDOFF §10「flex の親が折り返さないと…」）。 */
.cart-checkout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.cart-checkout__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* --- 決済の戻り先（T-28） ------------------------------------------------- */
/*
   完了 / 中止 / 失敗 の3枚が共通で使う。
   ★ 中身が短いので、カートと同じ幅に収めて視線を動かさない。 */
.checkout {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-6);
}

.checkout__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-heading);
}

.checkout__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-large);
}

.checkout__note {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

/* ★ ボタンはリンク（<a>）。.button-buy が <button> 前提の指定を持つので、
   行の高さと中央寄せをここで補う。 */
.checkout__actions {
  margin: var(--space-4) 0 var(--space-5);
}

.checkout__actions .button-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}