/* =====================================================================
   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) にも使われるため、そちらにも同様に効く
     （どちらも管理画面から自由入力される説明文的テキストであり、スコープ外への
     波及ではない）。
   ────────────────────────────────────────────────────────────────────────
   デザイントークンは 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;
}

/* =====================================================================
   スマホ (<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;
  }
}