/* =============================================================================
   SELUNEA 画面別スタイル（購入者向け）
   -----------------------------------------------------------------------------
   トップ／イベント詳細／購入フロー／ログイン・会員登録／注文一覧・詳細など、
   画面固有のレイアウト。共有パーシャル（支払い案内・購入条件・QR）の
   page-customer 向け上書きもここに集約する。すべて body.page-customer 配下。
   ============================================================================= */

/* ---------------------------------------------------------------------------
   公開トップ
   --------------------------------------------------------------------------- */
.home-hero {
  text-align: center;
  padding: var(--space-8) 0 var(--space-6);
}
.home-hero__logo {
  margin: 0;
  font-size: clamp(2.5rem, 9vw, 4rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  padding-right: 0.24em;
  color: var(--color-text);
}
.home-hero__lead {
  max-width: 620px;
  margin: var(--space-4) auto 0;
  font-size: clamp(1rem, 3vw, 1.15rem);
  line-height: 1.9;
  color: var(--color-text-muted);
}
.home-hero__cta {
  margin-top: var(--space-5);
}

/* 出展・出品者向けセクション（静かで上品に。淡い月光のみ） */
.seller-cta {
  margin-top: var(--space-8);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.seller-cta__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
}
.seller-cta__lead {
  max-width: 560px;
  margin: var(--space-3) auto var(--space-5);
  color: var(--color-text-muted);
  line-height: 1.9;
}

.home-events { margin-top: var(--space-4); }
.home-events__heading {
  margin: 0 0 var(--space-5);
  font-size: var(--text-xl);
  font-weight: 600;
  text-align: center;
}
.home-events__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-7) 0;
}

/* -----------------------------------------------------------------------------
   イベント一覧（横型・一覧性重視カード）
   チゲっとのレイアウトをベンチマーク：縦長をやめ「画像左＋情報右」の横型カードに。
   1画面に4〜6件見え、画像で一瞬で識別でき、イベント名が読みやすいことを最優先。
   色・フォント・世界観は SELUNEA（Apple風＋淡い月光）のまま。横スクロールは厳禁。
   -------------------------------------------------------------------------- */
.event-grid {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);            /* カード間を広げ「1イベント=1カード」を明確に */
  grid-template-columns: 1fr;
}
/* タブレット以上は横型カードを2列に（1画面の一覧性をさらに高める） */
@media (min-width: 768px) {
  .event-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
/* グリッド項目は min-width:auto だと内容幅まで広がり横溢れする。0 にして列幅に収める */
.event-grid > li { min-width: 0; }

/* カード全体を1つのリンクにして「どこを押しても詳細へ」。中にリンクは入れない。
   仕上げ方針：純白カード＋やや強い枠線＋影は最小＋小さめ角丸で「パキッと」締める。
   画像は内側に少し余白を取って挿入し、カードと一体化しすぎないようにする（Apple風の上品さ）。 */
.event-card {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);            /* ⑤ 画像と文字の距離をしっかり取る */
  min-width: 0;
  padding: var(--space-2);        /* ⑤ 画像を内側に挿入（縁と一体化させない） */
  background: var(--color-surface);          /* ① 純白 #ffffff */
  border: 1px solid var(--color-border-strong); /* ② 枠線を一段強く（#d3d8e0） */
  border-radius: var(--radius-md);           /* ④ 角丸を少し小さく（20→14px） */
  box-shadow: none;                          /* ③ 影に頼らず白いカードで見せる */
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.event-card:hover {
  border-color: #c3cad6;         /* ほんの少しだけ濃く（浮かせずに反応を伝える） */
  box-shadow: var(--shadow-sm);  /* ホバー時だけ控えめな影 */
}
.event-card:focus-visible {
  outline: 2px solid var(--color-brand-ring);
  outline-offset: 2px;
}

/* 画像は左固定・比率統一。内側に余白を取り、角丸のサムネイルとして独立させる */
.event-card__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 100px;
  align-self: stretch;
  background: var(--color-surface-soft);
  border-radius: var(--radius-sm);  /* ⑤ カードと分離した角丸サムネイル */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 430px) { .event-card__thumb { width: 120px; } }
@media (min-width: 768px) { .event-card__thumb { width: 132px; } }
.event-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-faint);
  letter-spacing: 0.16em;
  font-size: var(--text-xs);
  padding-left: 0.16em;
}
.event-card__placeholder .moon-arc { width: 22px; height: 22px; }

/* 情報は右。上からイベント名→開催日時→会場。min-width:0 で省略を効かせ横溢れを防ぐ */
.event-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
}
/* ⑥ イベント名を主役に：少し大きく・Medium・濃い文字色。日時/会場と明確に差を付ける */
.event-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text);
  /* 最大2行で省略（読みやすさと高さの一定化を両立） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* 日時・会場は控えめに（主役のイベント名との差を付ける） */
.event-card__date {
  margin: 3px 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.event-card__date svg { flex: none; color: var(--color-text-faint); }
.event-card__venue {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.event-card__venue svg { flex: none; color: var(--color-text-faint); }
/* 会場名は1行省略（長い会場名でも崩れず横スクロールしない） */
.event-card__venue-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ⑦ 「詳細を見る」は控えめに（カード全体が押せるため）。小さめ・グレー・矢印だけブランド色 */
.event-card__cta-text {
  margin-top: auto;
  padding-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}
.event-card__arrow { color: var(--color-brand); font-weight: 600; }
.event-card:hover .event-card__arrow { color: var(--color-brand-hover); }

/* ---------------------------------------------------------------------------
   イベント詳細（購入者・公開ページ）
   --------------------------------------------------------------------------- */
.event-hero {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
  background: var(--color-surface-soft);
}
.event-hero__image { width: 100%; height: auto; display: block; }
.event-hero--placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-head__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
}
.event-facts {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.event-fact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.event-fact__icon { flex: none; color: var(--color-brand); margin-top: 2px; }
.event-fact__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.event-fact__value { display: block; font-weight: 500; }
.event-desc {
  white-space: pre-wrap;
  line-height: 1.9;
  color: var(--color-text);
}

/* 商品セクション（購入者） */
.event-products { margin-top: var(--space-6); }

/* 公開商品が無いときの空状態（空白でフッターへ続けない） */
.products-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.products-empty__title { margin: 0; font-weight: 600; }
.products-empty__note {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.product-items {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
/* 商品カード（コンパクト）。チケット情報タブ内で複数商品を縦並び表示する。
   画像＋名前＋価格＋在庫＋説明＋数量＋カート追加を1枚に収める（詳細ページへは遷移しない）。 */
.product-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  min-width: 0;                 /* グリッド項目が内容幅で広がり横溢れするのを防ぐ */
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: none;
}
.product-item__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}
/* 商品名は短ければ1行。長い場合は自然に折り返す（文字単位で不自然に割らない） */
.product-item__name {
  font-size: var(--text-base); font-weight: 600; color: var(--color-text);
  min-width: 0; word-break: keep-all; overflow-wrap: anywhere;
}
/* 商品説明（チケット情報タブ内・改行を保持して控えめに表示） */
.product-item__desc {
  margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);
  line-height: 1.7; white-space: pre-wrap; word-break: break-word;
}
.product-item__type {
  font-size: var(--text-xs);
  color: var(--color-brand-strong);
  background: var(--color-brand-soft);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  flex: none;
}
.product-item__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: 2px;
}
.product-item__price { font-size: var(--text-lg); font-weight: 700; }
.product-item__stock { font-size: var(--text-sm); color: var(--color-text-muted); }
.product-item__cta { margin-top: var(--space-1); }

/* ---------------------------------------------------------------------------
   購入フロー共通（数量選択・確認・チェックアウト）
   --------------------------------------------------------------------------- */
.buy-detail { margin-bottom: var(--space-5); }
.buy-detail__name { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.buy-detail__price { margin: var(--space-1) 0; font-size: var(--text-xl); font-weight: 700; }
.buy-detail__desc { margin: var(--space-2) 0; color: var(--color-text-muted); white-space: pre-wrap; }
.buy-detail__stock { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* 数量入力は幅を絞って押しやすく */
.qty-field .input { max-width: 160px; }

/* チェックアウトのセクション区切り */
.checkout-section { margin-top: var(--space-5); }
.checkout-section__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.checkout-section__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  font-size: var(--text-sm);
  font-weight: 700;
  flex: none;
}

/* ---------------------------------------------------------------------------
   共有パーシャルの page-customer 向け上書き
   （_guide.html=pay-guide / _requirements.html / _qr.html）
   ※ 管理画面は legacy のまま。ここは page-customer 配下のみ適用。
   --------------------------------------------------------------------------- */

/* 支払い案内 */
.page-customer .pay-guide {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-base);
}
.page-customer .pay-guide__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1) 0;
}
.page-customer .pay-guide__label { color: var(--color-text-muted); }
.page-customer .pay-guide__value { font-weight: 600; text-align: right; }
.page-customer .pay-guide__body {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  white-space: pre-line;
  word-break: break-word;
  line-height: 1.9;
}

/* 購入条件・注意事項 */
.page-customer .requirements {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}
.page-customer .requirements__block + .requirements__block {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.page-customer .requirements__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}
.page-customer .requirements__list { margin: 0; padding-left: 1.2rem; line-height: 1.9; }
.page-customer .requirements__text {
  margin: 0;
  white-space: pre-line;
  word-break: break-word;
  line-height: 1.9;
}
/* 購入条件同意チェック（購入条件のある商品のみ表示） */
.page-customer .form__agreement {
  padding: var(--space-4);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
}
.page-customer .form__agreement .form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}
.page-customer .form__agreement .form__check input {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--color-brand);
}

/* QRチケット */
.page-customer .qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.page-customer .qr__frame {
  background: #fff;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  line-height: 0;
}
.page-customer .qr__img { width: 220px; max-width: 100%; height: auto; display: block; }
.page-customer .qr__zoom {
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.page-customer .qr__zoom:hover { background: var(--color-surface-soft); }
.page-customer .qr__status { margin: 0; }
.page-customer .qr__used-at { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   注文一覧（購入者）
   ※ .order-list / .order-card は legacy(style.css)でも定義され管理画面が使用する
   ため、購入者向けの見た目は必ず .page-customer 配下にスコープする（非干渉）。
   --------------------------------------------------------------------------- */
.page-customer .order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.page-customer .order-card {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.page-customer .order-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-md); }
.page-customer .order-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.page-customer .order-card__number { font-weight: 700; color: var(--color-brand-strong); word-break: break-all; }
.page-customer .order-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.page-customer .order-card__amount { font-weight: 700; }
.page-customer .order-card__sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-7) var(--space-4);
}

/* ---------------------------------------------------------------------------
   ログイン後トップ（マイページ）の2択カード（探す / 出展・出品する）
   --------------------------------------------------------------------------- */
.choice-cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .choice-cards { grid-template-columns: 1fr 1fr; }
}
.choice-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.choice-card__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; }
.choice-card__desc { margin: 0 0 var(--space-5); color: var(--color-text-muted); flex: 1 1 auto; }
.choice-card__btn { margin-top: auto; }

/* 出品者メニュー（マイページ内の補助的な管理カード。押せることは明確に） */
.seller-menu { margin-top: var(--space-4); }
.seller-menu__title { margin: 0 0 var(--space-1); font-size: var(--text-lg); font-weight: 600; }
.seller-menu__desc { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

/* ---------------------------------------------------------------------------
   ログイン・会員登録
   --------------------------------------------------------------------------- */
.auth {
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-7) 0;
}
.auth__card {
  width: 100%;
  max-width: var(--width-narrow);
}
.auth__brand {
  text-align: center;
  margin-bottom: var(--space-5);
}
.auth__logo {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  padding-right: 0.22em;
  color: var(--color-text);
}
.auth__title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xl);
  font-weight: 600;
}
.auth__switch {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   注文完了・ゲスト確認
   --------------------------------------------------------------------------- */
.complete-hero {
  text-align: center;
  margin-bottom: var(--space-5);
}
.complete-hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: var(--color-success-soft);
  color: var(--color-success-text);
  margin-bottom: var(--space-3);
}
.complete-hero__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 600;
}
.complete-hero__lead {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
}

/* 専用URLの表示＋コピー（完了画面）。JS無効でも入力欄で選択・手動コピー可能。 */
.url-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;
}
.url-box__input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.url-box__input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}
.url-box__copy { flex: none; }

/* 初回出品の3ステップ全体像（登録完了画面）。派手にせず静かに提示。 */
.flow-overview {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.flow-overview__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.flow-overview__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  flex: none;
}

/* ===========================================================================
   カート（複数商品購入）。スマホ最優先・押せる場所が分かる・静かで上品。
   =========================================================================== */

/* 小さめボタン・テキスト風ボタン（既存 .btn を補完） */
.btn--sm {
  min-height: var(--tap-min);   /* 44px 以上のタップ領域を確保 */
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}
.linklike {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-brand);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.linklike:hover { color: var(--color-brand-hover); text-decoration: underline; }

/* ヘッダーのカード導線とバッジ */
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* イベント詳細：商品追加まわり */
.products-lead {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.cart-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-brand-soft);
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
}
.cart-banner__text { font-weight: 600; color: var(--color-brand-strong); }

/* 数量入力（イベント詳細・カート共通の見た目） */
.add-to-cart { display: flex; flex-direction: column; gap: var(--space-3); }
.qty-field { display: flex; align-items: center; gap: var(--space-3); }
.qty-field__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.qty-field__input,
.cart-qty__input {
  width: 5rem;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  text-align: center;
}
/* 一覧カード内の数量＋カート追加は横並びでコンパクトに（カード高さを抑える）。
   共有の .add-to-cart は変えず、カード配下のみに限定する。 */
.product-item__cta .add-to-cart { flex-direction: row; align-items: center; gap: var(--space-2); }
.product-item__cta .qty-field { flex: none; }
.product-item__cta .qty-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.product-item__cta .qty-field__input { width: 3.4rem; min-height: 40px; }
.product-item__cta .btn { flex: 1 1 auto; min-height: 40px; }

/* カート明細 */
.cart-lines { list-style: none; margin: var(--space-4) 0; padding: 0; }
.cart-line {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}
.cart-line:last-child { border-bottom: 1px solid var(--color-border); }
.cart-line--issue { background: var(--color-warning-soft, #fff8ec); }
.cart-line__head {
  display: flex; align-items: baseline; gap: var(--space-2);
  flex-wrap: wrap;
}
.cart-line__name { font-weight: 600; word-break: break-word; }
.cart-line__type {
  font-size: var(--text-xs); color: var(--color-brand-strong);
  background: var(--color-brand-soft); padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
}
.cart-line__meta {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-1); color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.cart-line__issue {
  margin: var(--space-2) 0 0; color: var(--color-warning-text, #9a5b00);
  font-size: var(--text-sm); font-weight: 600;
}
.cart-line__controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3);
}
.cart-qty { display: flex; align-items: center; gap: var(--space-2); }
.cart-qty__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.cart-line__amount {
  display: flex; align-items: center; gap: var(--space-4);
  margin-left: auto;
}
.cart-line__subtotal { font-weight: 700; }

/* カート合計・空表示 */
.cart-summary { margin-top: var(--space-5); }
.cart-summary__blocked { color: var(--color-warning-text, #9a5b00); }
.cart-clear { display: flex; justify-content: center; margin-top: var(--space-2); }
.cart-empty { text-align: center; }
.cart-empty__title { margin: 0 0 var(--space-4); color: var(--color-text-muted); }

/* checkout：複数明細の注文内容 */
.checkout-event { font-weight: 600; margin: 0 0 var(--space-3); }
.checkout-lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.checkout-line {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.checkout-line__head {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
}
.checkout-line__name { font-weight: 600; word-break: break-word; }
.checkout-line__type {
  font-size: var(--text-xs); color: var(--color-brand-strong);
  background: var(--color-brand-soft); padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
}
.checkout-line__calc {
  display: flex; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-1); color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.checkout-line__subtotal { color: var(--color-text); font-weight: 600; }
.checkout-line__recv {
  margin: var(--space-1) 0 0; color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.checkout-requirements { margin-top: var(--space-4); }
.checkout-requirements__for { font-weight: 600; margin: 0 0 var(--space-2); }

/* 注文詳細の明細（購入者・複数商品対応） */
.order-items { list-style: none; margin: var(--space-3) 0; padding: 0; }
.order-item { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.order-item__head {
  display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap;
}
.order-item__name { font-weight: 600; word-break: break-word; }
.order-item__type {
  font-size: var(--text-xs); color: var(--color-brand-strong);
  background: var(--color-brand-soft); padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
}
.order-item__calc {
  display: flex; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm);
}
.order-item__subtotal { color: var(--color-text); font-weight: 600; }
.order-item__recv {
  margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm);
}

/* 複数QRの並び */
.qr-list { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; }
.qr__for { font-weight: 600; margin: 0 0 var(--space-2); text-align: center; }

/* ===========================================================================
   商品サムネイル（1:1・購入者画面共通）。角丸・object-fit cover・月モチーフの
   プレースホルダー。イベント画像と統一されたトーンで表示する。
   =========================================================================== */
.product-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 88px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
}
.product-thumb--sm { width: 56px; border-radius: var(--radius-sm); }
.product-thumb--md { width: 104px; }
.product-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb--placeholder {
  background: radial-gradient(120% 120% at 70% 22%,
              var(--color-brand-soft), var(--color-surface-soft));
  color: var(--color-brand);
}
.product-thumb__moon { width: 44%; height: 44%; opacity: 0.7; }

/* サムネイル + 内容 のレイアウト（既存カードに flex 行を足す） */
.product-item__row { display: flex; gap: var(--space-4); align-items: flex-start; }
.product-item__content {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.cart-line__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.cart-line__main { flex: 1 1 auto; min-width: 0; }
.checkout-line { display: flex; gap: var(--space-3); align-items: flex-start; }
.checkout-line__body { flex: 1 1 auto; min-width: 0; }
.order-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.order-item__body { flex: 1 1 auto; min-width: 0; }
.buy-detail { display: flex; gap: var(--space-4); align-items: flex-start; }
.buy-detail__info { flex: 1 1 auto; min-width: 0; }
.confirm-product {
  display: flex; gap: var(--space-3); align-items: center;
  margin-bottom: var(--space-4);
}
.confirm-product__name { font-weight: 600; word-break: break-word; }

/* 注文キャンセル（弱い危険操作）。主要導線と混同しないよう控えめな赤テキストで下部に配置 */
.cancel-action {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.cancel-action__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  color: var(--color-danger-text);
  font-size: var(--text-sm);
  font-weight: 500;
}
.cancel-action__link:hover { text-decoration: underline; }

/* =============================================================================
   受付専用ページ（Reception Mode）— body.page-reception
   イベント当日にスタッフが一日中使う「受付専用アプリ」。Apple風の落ち着き＋淡い月光。
   大きなタップ領域・最小限の情報・迷わない導線を最優先にする。
   ============================================================================= */
.page-reception .container { max-width: 560px; }

.rc { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4) 0 var(--space-8); }
.rc-back { margin: 0; }
.rc-back a { color: var(--color-text-muted); font-size: var(--text-sm); }

.rc-head { text-align: center; }
.rc-head__title {
  margin: 0; font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 600; letter-spacing: 0.01em;
  word-break: break-word;
}
.rc-head__lead { margin: var(--space-2) 0 0; color: var(--color-text-muted); }

/* イベント一覧（受付トップ） */
.rc-events { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.rc-event {
  display: grid; gap: var(--space-1); padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rc-event:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.rc-event--open { border-color: var(--color-success); box-shadow: 0 0 0 1px var(--color-success) inset; }
.rc-event__title { font-size: var(--text-lg); font-weight: 600; word-break: break-word; }
.rc-event__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.rc-state {
  justify-self: start; margin-top: var(--space-2); padding: 2px 12px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600;
  background: var(--color-surface-soft); color: var(--color-text-muted);
}
.rc-state--open { background: var(--color-success-soft); color: var(--color-success-text); }
.rc-state--closed { background: var(--color-surface-soft); color: var(--color-text-faint); }
.rc-empty { text-align: center; color: var(--color-text-muted); padding: var(--space-7) 0; }

/* イベント詳細 */
.rc-detail { display: grid; gap: var(--space-2); margin: 0; }
.rc-detail > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.rc-detail dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.rc-detail dd { margin: 0; font-weight: 500; text-align: right; word-break: break-word; }
.rc-detail--compact { gap: var(--space-1); }

/* 状態バナー */
.rc-status {
  border-radius: var(--radius-md); padding: var(--space-4); text-align: center;
  font-weight: 600; line-height: 1.7;
}
.rc-status--on { background: var(--color-success-soft); color: var(--color-success-text); font-size: var(--text-lg); }
.rc-status--pre { background: var(--color-warning-soft); color: var(--color-warning-text); }

/* 固定ヘッダー（受付中：イベント名）。共通ヘッダー(sticky)の直下に重ならず貼り付く */
.rc-bar {
  position: sticky; top: var(--header-h, 56px); z-index: 40;
  background: var(--color-success); color: #fff; font-weight: 700; text-align: center;
  padding: var(--space-3) var(--space-4); letter-spacing: 0.02em;
}

/* 大きなボタン（受付専用アプリの主要操作） */
.rc-btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: var(--tap-min); padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--text-lg); font-weight: 600; cursor: pointer; text-decoration: none;
}
.rc-btn--xl { min-height: 68px; font-size: 1.25rem; border-radius: var(--radius-lg); }
.rc-btn--primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-brand-contrast); }
.rc-btn--primary:hover { background: var(--color-brand-hover); }
.rc-btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.rc-btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); }
.rc-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* スキャン画面 */
.rc--scan { gap: var(--space-4); }
.rc-scan__form { display: flex; flex-direction: column; gap: var(--space-3); }
.rc-scan__input {
  width: 100%; min-height: 56px; padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text);
}
.rc-scan__close { margin-top: var(--space-3); }

/* 受付件数 */
.rc-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.rc-count {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-4) var(--space-2); background: var(--color-surface-soft);
  border-radius: var(--radius-md);
}
.rc-count__value { font-size: 1.6rem; font-weight: 700; }
.rc-count__label { font-size: var(--text-xs); color: var(--color-text-muted); }

/* 確認画面の結果 */
.rc-result { padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.rc-result--unused { border-color: var(--color-success); background: var(--color-success-soft); }
.rc-result--used, .rc-result--void, .rc-result--none {
  border-color: var(--color-border-strong); background: var(--color-surface-soft);
}
.rc-result__head { margin: 0 0 var(--space-3); font-size: var(--text-xl); font-weight: 700; text-align: center; }
.rc--confirm { gap: var(--space-4); }

/* ダッシュボードの受付導線を少し強調（緑のアクセント） */
.dash-shortcut--accent { border-color: var(--color-success); }

/* =============================================================================
   プレビュー（公開ページと同一テンプレートで描画。違いはこのバナー／案内のみ）
   ============================================================================= */
.preview-banner {
  position: sticky;
  top: var(--header-h, 56px);
  z-index: 30;
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand-soft);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-strong);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.preview-banner__back { margin-left: var(--space-2); color: var(--color-brand); white-space: nowrap; }
/* 購入導線を押したときの案内（下部固定バーの上に重ならないよう少し上に出す） */
.preview-notice {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 24px rgba(20, 25, 40, 0.25);
}
.preview-notice[hidden] { display: none; }

/* =============================================================================
   イベント公開ページ（購入者の主導線・TIGET 参考の情報設計／スマホ操作優先）
   大きなイベント画像 → イベント名 → 地域 → 共有 → タブ(イベント詳細/チケット情報)
   → 下部固定「チケットを購入」。既存の在庫・価格・カート・DBは一切変更しない。
   タブ内の情報ブロック・固定バー・残りわずかバッジは商品詳細ページ(.pdetail-*)と共有する。
   ============================================================================= */
/* 下部固定バーに本文が隠れないよう十分な余白（iPhone 下部UI＝safe-area 考慮） */
.edetail { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* 1. 大きなイベント画像：比率を崩さず contain・切り抜かない・小さめ角丸・影なし。
   縦長でも最大46vh に抑え、直後のタブが初回表示（ファーストビュー）に収まるようにする。
   左右余白は .wrap の左右パディング（約18〜22px）でとる（画像側に余分な余白を足さない）。 */
.edetail-hero {
  margin: var(--space-2) 0 var(--space-4);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-soft);
}
.edetail-hero__img {
  display: block; width: 100%; height: auto; max-height: 46vh;
  object-fit: contain;
}
.edetail-hero--placeholder {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; color: var(--color-text-faint);
}
.edetail-hero--placeholder .moon-arc { width: 44px; height: 44px; }

/* 2. イベント名：24〜28px・太字・左揃え・文字単位で不自然に割らない */
.edetail-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.5rem, 6.4vw, 1.75rem); font-weight: 700; line-height: 1.35;
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 3. 地域・会場（アイコン付き・グレー・情報が無ければ非表示） */
.edetail-place {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-4);
  color: var(--color-text-muted); font-size: var(--text-sm);
}
.edetail-place svg { flex: none; color: var(--color-brand); }

/* 4. SNS共有（横一列を維持・控えめサイズ・大きな丸ボタンにしない・タップ領域は確保）。
   flex:1 で3等分し min-width:0 + nowrap で常に1行・横幅内に収める（375/390/430で溢れない）。
   高さ40px / 左右padding12px / 文字14px / 角丸8px / ボタン間gap8px。アイコンは文字と同サイズ。 */
.edetail-share { display: flex; flex-wrap: nowrap; gap: var(--space-2); margin: 0 0 var(--space-2); }
.edetail-share .share-btn {
  flex: 1 1 0; min-width: 0; justify-content: center;
  min-height: 40px; padding: 0 var(--space-3); gap: 6px;
  font-size: var(--text-sm); border-radius: 8px;
  white-space: nowrap; overflow: hidden;
}
.edetail-share .share-btn > span { overflow: hidden; text-overflow: ellipsis; }

/* 6-7. タブ（ARIA: role=tab / aria-selected）。
   既定は両パネル表示（JS 無効でも購入導線に到達可）。JS 有効時に非選択パネルへ hidden を付ける。 */
.edetail-tabs { margin-top: var(--space-4); }
.edetail-tabbar {
  display: flex; border-bottom: 1px solid var(--color-border); margin: 0 0 var(--space-4);
}
.edetail-tab {
  flex: 1 1 0; min-height: 54px; padding: var(--space-3) var(--space-2);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--color-text-muted); font-size: var(--text-base); font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.edetail-tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-brand); }
.edetail-tab:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: -2px; }
.edetail-panel { display: block; }
.edetail-panel[hidden] { display: none; }        /* JS 有効時：非選択パネルを隠す */
.edetail-panel:focus { outline: none; }

/* =============================================================================
   商品詳細ページ（購入者・TIGET 参考の情報設計／スマホ操作優先）
   大きな画像 → 商品名 → 地域 → 共有 → タブ(イベント/チケット) → 下部固定購入ボタン。
   既存の購入導線(cart.add)へ進むだけで、在庫・価格・カート・DBは変更しない。
   ============================================================================= */
/* 下部固定バーに本文が隠れないよう十分な余白（iPhone 下部UI＝safe-area 考慮） */
.pdetail { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* 1. メイン画像：比率を崩さず contain。縦長でも 60vh で頭打ち、無理な拡大をしない */
.pdetail-hero {
  display: flex; align-items: center; justify-content: center;
  margin: var(--space-2) 0 var(--space-5);
  padding: var(--space-2);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pdetail-hero__img {
  /* 大きく見せつつ、直後のタブが初回表示（ファーストビュー）に収まる高さに抑える。
     縦長でも比率を崩さず、画像の下の商品名・共有・タブがスクロールなしで見えるようにする。 */
  display: block; width: 100%; height: auto; max-height: 38vh;
  object-fit: contain; border-radius: var(--radius-md);
}
.pdetail-hero--placeholder {
  aspect-ratio: 16 / 10; color: var(--color-text-faint);
}
.pdetail-hero--placeholder .moon-arc { width: 44px; height: 44px; }

/* 2. 商品名：省略せず自然改行。文字単位で割らない */
.pdetail-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.35rem, 5vw, 1.7rem); font-weight: 600; line-height: 1.4;
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 3. 地域・会場 */
.pdetail-place {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-4);
  color: var(--color-text-muted); font-size: var(--text-sm);
}
.pdetail-place svg { flex: none; color: var(--color-brand); }

/* 4. SNS共有ボタン（横一列・小さめ・タップ領域確保） */
.pdetail-share { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }
.share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 40px; padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.share-btn:hover { background: var(--color-surface-soft); }
.share-btn--x { background: #111; color: #fff; border-color: #111; }
.share-btn--x:hover { background: #333; }
.share-btn--line { background: #06c755; color: #fff; border-color: #06c755; }
.share-btn--line:hover { background: #05b34c; }
.share-btn__label { font-weight: 600; }

/* 7-8. タブ（CSSラジオ＝JavaScript 不要） */
.pdetail-tab__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pdetail-tabbar {
  display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.pdetail-tab {
  flex: 1 1 0; text-align: center; padding: var(--space-3) var(--space-2);
  min-height: var(--tap-min); display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-weight: 600; font-size: var(--text-base);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  user-select: none;
}
.pdetail-panel { display: none; }
/* 選択中タブ＝濃い文字＋下線、選択中パネルを表示 */
#tab-event:checked ~ .pdetail-tabbar .pdetail-tab[for="tab-event"],
#tab-ticket:checked ~ .pdetail-tabbar .pdetail-tab[for="tab-ticket"] {
  color: var(--color-text); border-bottom-color: var(--color-brand);
}
#tab-event:checked ~ .pdetail-panel--event,
#tab-ticket:checked ~ .pdetail-panel--ticket { display: block; }
.pdetail-tab__radio:focus-visible ~ .pdetail-tabbar .pdetail-tab { outline: 2px solid var(--color-brand-ring); }

/* タブ内の情報ブロック（見出し＋薄い区切り線） */
.pdetail-block { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.pdetail-block:last-child { border-bottom: 0; }
.pdetail-block__title {
  margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted); letter-spacing: 0.02em;
}
.pdetail-block__body { font-size: var(--text-base); line-height: 1.8; word-break: break-word; }
.pdetail-prose { white-space: pre-wrap; }
.pdetail-prose a, .pdetail-block__body a { color: var(--color-brand); }
.pdetail-map { margin-left: var(--space-2); font-size: var(--text-sm); }
.pdetail-price { font-size: clamp(1.4rem, 6vw, 1.9rem); font-weight: 700; color: var(--color-text); }

/* 9-10. 下部固定 購入バー（safe-area 対応・本文最大幅に合わせて中央） */
.pdetail-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 24px rgba(20, 25, 40, 0.08);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
.pdetail-buybar__inner {
  position: relative; max-width: 640px; margin: 0 auto; width: 100%;
}
.pdetail-buybar__form { margin: 0; }
.pdetail-buybar__btn {
  min-height: 58px; font-size: 1.15rem; font-weight: 700; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
/* 「残りわずか」バッジ（購入ボタン右上・小さく・ボタンを隠さない） */
.stock-badge {
  position: absolute; top: -12px; right: 4px; z-index: 1;
  background: var(--color-danger); color: #fff;
  font-size: var(--text-xs); font-weight: 700; line-height: 1;
  padding: 5px 10px; border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.35);
}

@media (min-width: 768px) {
  .pdetail-hero__img { max-height: 52vh; }
}