@charset "UTF-8";

/* =========================================================
   Commerce Creator用：商品一覧のレイアウト・スタイル調整
========================================================= */

/* --- A. 商品名の2行制限（全体のレイアウト統一のため維持） --- */
.fs-c-productListItem__productName {
  margin-bottom: 8px !important;
}
.fs-c-productListItem__productName .fs-c-productName__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.8em; /* 1.4の行間 × 2行分の高さ。環境に合わせて微調整してください */
}

/* --- B. 文字サイズの統一（商品名と独自コメント2） --- */
/* 内側に予期せぬタグ（pやspanなど）が自動生成されていても、すべて強制的に上書きします */
.custom-product-code,
.custom-product-code * {
  font-size: 13px !important; /* ※1 */
  color: #333 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}

/* --- C. お気に入りハートの色変更（強化版） --- */
.fs-c-button--addToWishList--icon {
  color: #8a6c65 !important;
}
/* アイコンが疑似要素（::beforeなど）で描画されている場合 */
.fs-c-button--addToWishList--icon::before {
  color: #8a6c65 !important;
}
/* アイコンがSVG画像で描画されている場合（線） */
.fs-c-button--addToWishList--icon svg path {
  stroke: #8a6c65 !important;
}
/* アイコンがSVG画像で描画されている場合（塗りつぶし） */
.fs-c-button--addToWishList--icon svg {
  fill: #8a6c65 !important;
}

/* --- D. 価格と「税込」の色変更 --- */

/* 価格テキスト（通貨記号と数値） */
.fs-c-price {
  color: #8a6c65 !important; /* 価格の色。!importantで上書き */
}

/* 「税込」テキスト */
.fs-c-productPrice__addon {
  color: #8a6c65 !important; /* 「税込」の色。!importantで上書き */
}

/* --- E. スマホ表示時のレイアウト調整（品番とハートを横並びに） --- */
@media screen and (max-width: 768px) {
  /* 親枠の崩れ防止（維持） */
  .productdetailcontents::after {
    content: "";
    display: block;
    clear: both;
  }
  
  /* 商品名の下の隙間をスマホ時だけ極限まで減らす（維持） */
  .fs-c-productListItem__productName {
    margin-bottom: 0px !important;
  }

  /* 品番を左側に配置（維持） */
  .custom-product-code {
    float: left;
    width: calc(100% - 35px) !important;
    margin-top: 2px !important; /* ※1. 商品名に近すぎた場合のためのわずかな余白。据え置き */
    margin-bottom: 12px !important;
  }

  /* --- 今回の変更点：ハートだけをさらに少し下に下げる --- */
  .fs-c-productListItem__control {
    float: right;
    width: 30px;
    text-align: right;
    /* ハートの位置を下に下げるための調整。プラスにすると下がる。マイナスで上がる。
       前回の 0px から、例えば 3px に変更して、少し下げます。
       目で見てピタッと合う数値に微調整してください。
    */
    margin-top: 4px !important; 
  }

  /* 価格エリアの崩れ防止（維持） */
  .fs-c-productListItem__prices {
    clear: both;
  }
  
  /* --- 追加：在庫切れなどの通知の回り込みを解除して整える --- */
  .fs-c-productListItem__outOfStock,
  .fs-c-productListItem__notice {
    clear: both !important;        /* 左右の回り込みを解除 */
    display: block !important;     /* 独立したブロックとして表示 */
    width: 100% !important;        /* 横幅をいっぱいまで使う */
    margin-bottom: 8px !important; /* すぐ下に来る価格との間に少し隙間を作る */
  }
}