/* =====================================================================
   bySENSE — product-detail.css （商品詳細 /shop/products/<sku> の意匠差分）
   ────────────────────────────────────────────────────────────────────────
   対象テンプレート（テーマ直編集・安定レイヤ＝build.sh 非生成）:
     theme/shop/sections/products_show_content.liquid
       ← ec-force 標準テンプレート（sample_theme_1.30.1 の同名ファイル）を
         丸ごとコピーして安定レイヤ化したもの。このCSSを <link> している。
         マークアップの差分は2箇所のみ：
           1) このCSSの <link> 追加
           2) 「レビューを見る」ボタン `<button class="c-product_info__show-review">`
              に装飾用クラス `p-review-cta` を追加（js-modal__open / data-target-modal-id
              などJSフック・フォーム部品は一切変更していない）
   ────────────────────────────────────────────────────────────────────────
   1. 「レビューを見る」をテキストリンクからボタンリンクへ（.p-review-cta）
     背景色は購入ボタン（u-color__btn--bg＝テーマカスタマイザ color_btn_bg、
     現行値 #393c41＝var(--ink) の濃色塗り）と被らない、明るい配色にした：
       背景 var(--white) / 文字・アイコン・枠線 var(--ink)。
     「個人の勝手な色」を発明せず、base.css（_head でグローバル読込済）の
     既存トークンのみを再利用している。角丸 2px は本テーマの他ボタン
     （購入ボタン・line-guidance.css・account/contact系）と統一。
     ホバーは購入ボタン自身と同じ「opacity:.4」（bundle.css の
     .c-product_info__form__submit:hover と同一の手法）を踏襲。
   ────────────────────────────────────────────────────────────────────────
   2. 商品本文（product.description）内のインラインリンク装飾
     products_show_content.liquid の detail capture（.c-product_info__description,
     id="product-description"）は product.description / description_mobile を
     エスケープ・strip_html なしでそのまま出力＝管理画面の商品説明にHTML（<a>等）を
     書けば描画される。ブラウザ既定の青文字下線のままだとブランドトーンから外れる
     ため、本文内リンクにブランドの文字色・下線意匠を与える。
     同じクラスは「SKU詳細」(#description) にも使われるため、そちらにも同様に効く
     （どちらも管理画面から自由入力される説明文的テキストであり、スコープ外への
     波及ではない）。
   ────────────────────────────────────────────────────────────────────────
   3. レビュー投稿UI（投稿権限のある会員にだけ出る部分）
     レビュー欄は ec-force 標準セクション products_show_review（テーマで上書きして
     いない＝sample_theme の同名ファイルがそのまま描画）。同じページの別セクション
     だが、このCSSは products_show_content から <link> されているので効く。
     check_review_writing_rule が true の会員（購入済み等）にだけ
       ・投稿ボタン .p-review__inner__entry__btn と投稿フォーム #review-form
       ・投稿結果の flash（.control-alert）
       ・レビューモーダルの「この商品のレビューを投稿する」リンク
     が出る。非購入者では確認できず、標準の見た目のまま残っていた（2026-10 の
     「購入者が #product_review を開くと崩れる」報告を受けて洗い出し）。
     方針:
       ・マークアップ／validate[...]／name・id／JSフックは一切変えない（標準逐語）
       ・#review-form の display には触らない（bundle.js の slideToggle が開閉する）
       ・書体はページ内の他要素と同じカスタマイザ値（u-text--* の !important）に乗る。
         入力欄だけは account/contact と同じ var(--sans) 16px に揃える（標準は
         名前・メールが 13px、タイトル・コメントが 16px とバラバラで、16px 未満は
         iOS Safari がフォーカス時に画面を拡大する）。u-text--input が font-size /
         font-family を !important で出すため、この2つだけ !important で取り返す
       ・星の色（#f1cb6b）はレビュー一覧・平均評価と揃えるため標準のまま
       ・ボタンは 1. の .p-review-cta と同じ白地＋ink 枠／角丸 2px／hover opacity .4
       ・flash は account.css のフラッシュ（赤系 / 白地）と同じ配色
   ────────────────────────────────────────────────────────────────────────
   デザイントークンは base.css（_head でグローバル読込）の :root を使う:
     --ink #393c41 / --ink-60 #4b4e54 / --white #fff / --bg #d0d0d0 /
     --sans / --ease
   ===================================================================== */

/* ============ 1. 「レビューを見る」ボタン化 ============ */
.p-review-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 18px;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 2px;
  transition: opacity .3s var(--ease);
}
.p-review-cta:hover {
  opacity: .4;
}
.p-review-cta img {
  width: 16px;
  height: 16px;
}
.p-review-cta span {
  text-decoration: none;
  white-space: nowrap;
}

/* ============ 2. 商品説明本文中のインラインリンク ============ */
.c-product_info__description a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-60);
  text-underline-offset: 3px;
  transition: opacity .3s var(--ease);
}
.c-product_info__description a:visited {
  color: var(--ink);
}
.c-product_info__description a:hover {
  opacity: .4;
}

/* ============ 3. レビュー投稿UI（投稿権限のある会員のみ） ============ */
/* 投稿ボタン（button）／「ログインしてレビューを書く」（a）／モーダルの投稿リンク。
   標準は 13px の下線テキストで、レビュー欄の中で見落とされやすかった */
.p-review__inner__entry__btn,
.p-review_modal__add-review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 14px 28px;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 2px;
  text-decoration: none;
  letter-spacing: .08em;
  cursor: pointer;
  transition: opacity .3s var(--ease);
}
.p-review__inner__entry__btn:hover,
.p-review_modal__add-review:hover {
  opacity: .4;
}
.p-review_modal__add-review {
  margin-top: 10px;
}

/* 投稿フォームの器：薄い背景（#F4F8FA）の上で入力欄が浮かないよう白いカードにする。
   display は bundle.js（slideToggle）の担当なので指定しない */
.p-review__inner__entry__content {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.p-review__inner__entry__content__notes {
  margin: 10px 0 32px;
}

/* 入力テーブル：ラベル列の幅を固定して入力欄の左端を揃える */
.p-review .c-form_table {
  width: 100%;
}
.p-review .c-form_table > tbody > tr > th {
  width: 9em;
  padding-top: 15px;
  letter-spacing: .04em;
}
.p-review .c-form_table > tbody > tr > th .u-color__text--alert {
  margin-left: 4px;
  color: #b23a2e;
}
.p-review .c-form_table > tbody > tr > td {
  padding: 8px 0;
}
.p-review .c-form_table input[type="text"],
.p-review .c-form_table textarea {
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--sans) !important;
  font-size: 16px !important;
  font-weight: 400;
  transition: box-shadow .3s var(--ease);
}
.p-review .c-form_table input[type="text"] {
  height: 50px;
  padding: 0 16px;
}
.p-review .c-form_table textarea {
  min-height: 140px;
  padding: 14px 16px;
  line-height: 1.8;
  resize: vertical;
}
/* 枠色は u-color__border--input（!important）が持つので、フォーカスは box-shadow で示す */
.p-review .c-form_table input[type="text"]:focus,
.p-review .c-form_table textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--ink);
}
/* ログイン会員はメール欄が disabled（会員のメールアドレスを表示するだけ） */
.p-review .c-form_table input:disabled {
  color: var(--ink-60);
  opacity: .6;
  cursor: not-allowed;
}
.p-review .c-review_star {
  gap: 4px;
  padding-top: 6px;
}
.p-review .c-review_star__item {
  cursor: pointer;
}

/* 送信・キャンセル：標準のマークアップ順（キャンセル → 投稿）のまま、表示だけ
   「投稿」を上・「キャンセル」をその下の補助リンクにする（order のみ。DOM は不変） */
.p-review__inner__entry__content__form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-review__inner__entry__content__form > .c-form_table {
  align-self: stretch;
}
.p-review__inner__entry__content__form__submit {
  order: 1;
  margin: 32px auto 0;
  letter-spacing: .12em;
}
.p-review__inner__entry__content__form__cancel {
  order: 2;
  margin-top: 20px;
  padding-bottom: 1px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* 投稿結果の flash（.control-alert > .text）：account.css のフラッシュと同じ配色 */
.p-review .control-alert {
  max-width: 720px;
  margin: 24px auto 32px;
  padding: 0;
}
.p-review .control-alert > .text {
  padding: 14px 18px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.6;
}
.p-review .alert-danger > .text {
  background: rgba(192, 57, 43, .07);
  border: 1px solid rgba(192, 57, 43, .38);
  color: #b23a2e;
}
.p-review .alert-success > .text {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* =====================================================================
   スマホ (<768) — 他コンポーネント（items/contact/account/line-guidance）と
   同じブレークポイントを踏襲。レビュー行（.c-product_info__review）は
   星評価とボタンを横並びにしている bundle.css の flex(nowrap) のままだと
   幅の狭い端末で1行に収まらないため、折り返しのみ許可する。
   ===================================================================== */
@media (max-width: 767px) {
  .c-product_info__review {
    flex-wrap: wrap;
  }
  .p-review-cta {
    padding: 7px 16px;
  }
  /* 3. レビュー投稿UI：ラベルは入力欄の上に積む（bundle の SP 縦積みに合わせる） */
  .p-review__inner__entry__content {
    padding: 32px 20px;
  }
  .p-review .c-form_table > tbody > tr > th {
    width: auto;
    padding-top: 0;
  }
  .p-review .c-form_table > tbody > tr > td {
    padding: 0;
  }
  .p-review__inner__entry__content__form__submit {
    margin-top: 28px;
  }
}