@charset "UTF-8";

/* ==========================================================================
 * 数量ステッパー ＋ お気に入りボタンの配置調整
 * --------------------------------------------------------------------------
 * 対象   : futureshop 商品詳細ページ（body に .fs-body-product が付与される）
 * 対 JS  : product-quantity.js とセット（＋／? ボタンはJSが生成する）
 *
 * レイアウト
 *     数量
 *     [ ? 1 ＋ ]                       [ お気に入り ? ]
 *
 *   システム出力のDOM順は「お気に入り → 数量」なので、
 *   flex の order で左右を入れ替えている（HTMLは変更しない）。
 *
 * 上書き対象の既存ルール（調査済み）
 *   fs_style.css     .fs-c-quantity                        → max-width:5em
 *                    .fs-c-quantity__number                → box-shadow inset
 *   fs_theme.css     .fs-c-productQuantityAndWishlist      → display:grid（実際は下記でflex）
 *   fs_original.css  .fs-c-productQuantityAndWishlist      → display:flex
 *                    …__quantity                           → margin:0 0 0 70px
 *   fs_itou.css /    …__quantity::before                    → content:"数量 :" を
 *   fs_itou_sp.css                                            top:30px / left:-30px で
 *                                                             ずらす位置合わせハック
 *                    …__quantity                           → margin:0 50px
 *                    …__wishlist                           → width:220px / padding:10px 0
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 0. 調整用パラメータ
 * ------------------------------------------------------------------------ */
.fs-body-product {
  --qty-height:      40px;     /* ステッパーの高さ */
  --qty-btn-width:   38px;     /* ＋／? ボタンの幅 */
  --qty-field-width: 56px;     /* 数値部分の幅 */

  --qty-border:  #ddd6d0;
  --qty-btn-bg:  #faf8f6;
  --qty-btn-fg:  #55504e;
  --qty-accent:  #ff8b34;      /* テーマのメインカラー */
  --qty-label:   #7d7573;
  --qty-text:    #251e1c;

  --qty-font: "Hiragino Kaku Gothic ProN", "Noto Sans JP",
              "Yu Gothic", Meiryo, sans-serif;
}


/* --------------------------------------------------------------------------
 * 1. 数量とお気に入りの並び
 *    左に数量、右にお気に入り。DOM順は逆なので order で入れ替える。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-productQuantityAndWishlist {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0;

  /* 折り返すかどうかは「画面幅」ではなく「この行の幅」で決まる。
     商品詳細の右カラム幅はテンプレートやページで変わるため、
     画面幅のメディアクエリでは判定できない（実際それで取りこぼした）。
     コンテナクエリでこの要素自身の幅を基準に判定する。 */
  container-type: inline-size;
  container-name: itoQtyRow;
}

.fs-body-product .fs-c-productQuantityAndWishlist__quantity {
  order: 1;                    /* DOM上は2番目だが左に置く */
  flex: 0 0 auto;
  width: auto;
  max-width: none;             /* fs_style.css の max-width:5em を解除 */
  margin: 0;                   /* 既存の margin:0 50px / 0 0 0 70px を解除 */
  padding: 0;

  /* ここは block にすること（flex にしてはいけない）。
     flex + flex-wrap で「数量」ラベルとメッセージを flex-basis:100% にすると、
     この要素自身の内容幅（max-content）が 100% 指定に引きずられて膨らみ、
     SPでお気に入りボタンが1行に収まらず2行目に落ちる原因になる。
     block なら内容幅＝ステッパー幅で確定する。 */
  display: block;
}

.fs-body-product .fs-c-productQuantityAndWishlist__wishlist {
  order: 2;                    /* DOM上は1番目だが右に置く */
  flex: 0 0 auto;
  width: auto;                 /* fs_itou.css の width:220px を解除 */
  padding: 0;                  /* 同 padding:10px 0 を解除 */
  margin: 0;
  /* fs_theme.css の align-self:baseline を解除。
     これが残ると、親の align-items:flex-end が効かず
     ボタンが「数量」ラベルの行に引き上げられてしまう。 */
  align-self: flex-end;

  /* 万一2行目に回っても左端に取り残されないようにする保険。
     1行に収まっているときは space-between と同じ結果になるので影響なし。
     コンテナクエリ非対応の古い環境でも、これだけは効く。 */
  margin-left: auto;
}

.fs-body-product .fs-c-productQuantityAndWishlist__quantity {
  align-self: flex-end;        /* 同上（fs_theme.css は baseline 指定） */
}


/* --------------------------------------------------------------------------
 * 2. 「数量」ラベル
 *    既存CSSは position:relative + top:30px / left:-30px でずらす作りだった。
 *    ステッパーの上に普通に積む形へ直す。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-productQuantityAndWishlist__quantity::before {
  content: "数量";
  display: block;              /* 親が block なのでそのまま1行を占める */
  position: static;            /* ↓ 既存のずらしハックを無効化 */
  top: auto;
  left: auto;
  width: auto;
  margin: 0 0 6px;
  padding: 0;
  color: var(--qty-label);
  font-family: var(--qty-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
}


/* --------------------------------------------------------------------------
 * 3. ステッパー本体（JSが生成する .ito-c-qtyStepper で囲われる）
 * ------------------------------------------------------------------------ */
.ito-c-qtyStepper {
  display: inline-flex;
  align-items: stretch;
  height: var(--qty-height, 40px);
  border: 1px solid var(--qty-border, #ddd6d0);
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.ito-c-qtyStepper__btn {
  flex: 0 0 auto;
  width: var(--qty-btn-width, 38px);
  padding: 0;
  border: 0;
  background: var(--qty-btn-bg, #faf8f6);
  color: var(--qty-btn-fg, #55504e);
  font-family: var(--qty-font);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ito-c-qtyStepper__btn--minus { border-right: 1px solid var(--qty-border, #ddd6d0); }
.ito-c-qtyStepper__btn--plus  { border-left:  1px solid var(--qty-border, #ddd6d0); }

.ito-c-qtyStepper__btn:hover:not(:disabled) {
  background: var(--qty-accent, #ff8b34);
  color: #fff;
}

.ito-c-qtyStepper__btn:focus-visible {
  outline: 2px solid var(--qty-accent, #ff8b34);
  outline-offset: -2px;
}

.ito-c-qtyStepper__btn:disabled {
  opacity: .3;
  cursor: default;
}

/* 数値部分。<select>（通常）と <input>（10+以上の直接入力）で
   見た目が変わらないよう、同じ指定を当てる。 */
.ito-c-qtyStepper .fs-c-quantity__select,
.ito-c-qtyStepper .fs-c-quantity__number {
  flex: 0 0 auto;
  width: var(--qty-field-width, 56px);
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;            /* fs_style.css の inset影を解除 */
  color: var(--qty-text, #251e1c);
  font-family: var(--qty-font);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-align-last: center;     /* select の中央寄せ（Firefox対策） */
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}

.ito-c-qtyStepper .fs-c-quantity__select:focus,
.ito-c-qtyStepper .fs-c-quantity__number:focus {
  outline: none;
  background: #fffaf5;
}

/* 入力エラー時のシステム表示は残す */
.ito-c-qtyStepper .fs-c-quantity__number.is-error {
  background: #fcf5c2;
}

/* 数量メッセージ（フォーカス時のみ出る注意書き）は下段に落とす */
.fs-body-product .fs-c-productQuantityAndWishlist__quantity .fs-c-quantity__message {
  display: block;
  margin-top: 4px;
}

/* 通常は空要素なので、余白ぶんステッパーの下端がずれないようにする */
.fs-body-product .fs-c-productQuantityAndWishlist__quantity .fs-c-quantity__message:empty {
  margin-top: 0;
}


/* --------------------------------------------------------------------------
 * 4. お気に入りボタン
 *    ステッパーと高さを揃える。色はテーマのボタン設定のまま。
 * ------------------------------------------------------------------------ */
.fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--particular.fs-c-button--addToWishList--detail,
.fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--particular.fs-c-button--removeFromWishList--detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--qty-height, 40px);   /* ステッパーと高さを揃える */
  min-height: 0;
  /* PC/SPでボタンの余白指定が異なり、SP側は
     fs_itou_sp.css の .fs-c-button--particular { padding:14px !important }
     が効いてしまうため、ここだけ !important が必要 */
  padding: 0 16px !important;
  border-radius: 4px;
  font-family: var(--qty-font);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ラベル側にも余白指定があるので解除（fs_itou_sp.css の .fs-c-button__label） */
.fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button__label {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}


/* --------------------------------------------------------------------------
 * 5. レスポンシブ
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  .fs-body-product {
    --qty-height:      38px;
    --qty-btn-width:   36px;
    --qty-field-width: 50px;
  }

  .fs-body-product .fs-c-productQuantityAndWishlist {
    gap: 10px;
    margin: 14px 0;
  }

  /* 「お気に入りに登録する」＋アイコンは横幅を取るため、
     SPでは余白・文字・アイコンを詰めて1行に収まるようにする */
  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--particular.fs-c-button--addToWishList--detail,
  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--particular.fs-c-button--removeFromWishList--detail {
    padding: 0 10px !important;
    font-size: 12px;
  }

  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--addToWishList--detail::after,
  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--removeFromWishList--detail::after {
    margin-left: 6px;
    font-size: 1.35em;
  }
}

/* --------------------------------------------------------------------------
 * 6. 1行に収まらない幅での見え方
 *    「数量ステッパー＋gap＋お気に入りボタン」の実測幅は
 *        SP : 124 + 10 + 164 = 298px
 *        PC : 134 + 12 + 193 = 339px
 *    これを下回るカラム幅では物理的に1行に入らない。
 *    そのときは中途半端に横に伸びた状態で取り残さず、全幅の2段組にする。
 *
 *    しきい値は画面幅ではなくカラム幅で判定する（コンテナクエリ）。
 * ------------------------------------------------------------------------ */
@container itoQtyRow (max-width: 338px) {
  /* 「登録する」を見た目から省き、数量の横へ収める。
     DOM上のラベルは残すため、スクリーンリーダーには従来どおり
     「お気に入りに登録する」と伝わる。 */
  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }

  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--addToWishList--detail,
  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--removeFromWishList--detail {
    width: auto;
    padding: 0 5px !important;
    font-size: 0;
  }

  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button__label {
    font-size: 0;
  }

  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button__label::before {
    content: "お気に入り";
    font-size: 10px;
    line-height: 1.2;
  }

  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--addToWishList--detail::after,
  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--removeFromWishList--detail::after {
    margin-left: 10px !important;
    font-size: 16px;
  }
}

/* 画像のような狭い購入欄では、ステッパーも一段だけコンパクトにする。
   数量（108px）＋余白（8px）＋お気に入り（約75px）で横並びを保つ。 */
@container itoQtyRow (max-width: 250px) {
  .fs-body-product .fs-c-productQuantityAndWishlist {
    --qty-btn-width: 28px;
    --qty-field-width: 50px;
    gap: 8px;
  }

  .fs-body-product .ito-c-qtyStepper__btn {
    font-size: 16px;
  }
}

/* これより狭い幅では、操作部が欠けないよう従来どおり2段にする。 */
@container itoQtyRow (max-width: 190px) {
  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--addToWishList--detail,
  .fs-body-product .fs-c-productQuantityAndWishlist__wishlist .fs-c-button--removeFromWishList--detail {
    width: 100%;
  }
}