@charset "UTF-8";
/* ===============================
   Spinner base（共通定義）
   =============================== */
@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}
/* 共通スピナー */
.spinner-border {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: 0.75s linear infinite spinner-border;
}
/* 寸法は .spinner-border と同値なので vertical-align だけ差し替える */
.spinner-border-sm {
  vertical-align: middle;
}
/* ユーティリティ */
.ms-2 {
  margin-left: 0.5rem;
}
/* ===============================
   ボタン共通仕様（全ボタンタイプ対応）
   =============================== */
/* 対象ボタン：
   - .ec-blockBtn--action（商品詳細カート追加）
   - .checkout-button（チェックアウト）
   - .trial-cart-btn（トライアル商品PC用）
   - .shopping-sticky-submit-btn（SP固定フッターボタン）
*/
.ec-blockBtn--action,
.checkout-button,
.trial-cart-btn,
.shopping-sticky-submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: opacity 0.15s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
/* 通常は非表示 → loading / :disabled の時だけ表示 */
.ec-blockBtn--action .spinner-border,
.checkout-button .spinner-border,
.trial-cart-btn .spinner-border,
.shopping-sticky-submit-btn .spinner-border {
  display: none;
}
/* loading時はd-noneを上書きして表示 */
.ec-blockBtn--action.loading .spinner-border,
.ec-blockBtn--action.loading .spinner-border.d-none,
.checkout-button.loading .spinner-border,
.checkout-button.loading .spinner-border.d-none,
.trial-cart-btn.loading .spinner-border,
.trial-cart-btn.loading .spinner-border.d-none,
.shopping-sticky-submit-btn.loading .spinner-border,
.shopping-sticky-submit-btn.loading .spinner-border.d-none {
  display: inline-block !important;
}
/* 多重クリック防止・視覚状態 */
.ec-blockBtn--action.loading,
.ec-blockBtn--action:disabled,
.checkout-button.loading,
.checkout-button:disabled,
.trial-cart-btn.loading,
.trial-cart-btn:disabled,
.shopping-sticky-submit-btn.loading,
.shopping-sticky-submit-btn:disabled {
  pointer-events: none;
}
.ec-blockBtn--action.loading:not([style*="cursor: not-allowed"]),
.ec-blockBtn--action:disabled:not([style*="cursor: not-allowed"]),
.checkout-button.loading:not([style*="cursor: not-allowed"]),
.checkout-button:disabled:not([style*="cursor: not-allowed"]),
.trial-cart-btn.loading:not([style*="cursor: not-allowed"]),
.trial-cart-btn:disabled:not([style*="cursor: not-allowed"]),
.shopping-sticky-submit-btn.loading:not([style*="cursor: not-allowed"]),
.shopping-sticky-submit-btn:disabled:not([style*="cursor: not-allowed"]) {
  cursor: wait !important;
  opacity: 0.85;
}
/* ===============================
   モダンスピナー（テキスト非表示・中央配置）
   =============================== */
/* ローディング時はテキストを透明に */
.ec-blockBtn--action.loading .btn-label,
.checkout-button.loading .btn-label,
.trial-cart-btn.loading .btn-label,
.shopping-sticky-submit-btn.loading .btn-label {
  opacity: 0;
  transition: opacity 0.15s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
/* スピナーを中央に配置 */
.ec-blockBtn--action.loading .spinner-border,
.checkout-button.loading .spinner-border,
.trial-cart-btn.loading .spinner-border,
.shopping-sticky-submit-btn.loading .spinner-border {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* !important は animation より強い。付けると @keyframes の回転が止まる */
  transform: translate(-50%, -50%);
  margin: 0 !important;
  margin-left: 0 !important;
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
  animation: spinner-border-centered 0.65s linear infinite;
}
@keyframes spinner-border-centered {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* ===============================
   カラーバリエーション
   =============================== */
/* デフォルト（暗い背景ボタン用） - 白いスピナー */
.ec-blockBtn--action.loading .spinner-border,
.trial-cart-btn.loading .spinner-border,
.shopping-sticky-submit-btn.loading .spinner-border {
  border-color: rgba(255, 255, 255, 0.9);
  border-right-color: transparent;
}
/* 明るい背景ボタン用 - 暗いスピナー */
.btn-light.loading .spinner-border,
.btn-outline.loading .spinner-border {
  border-color: rgba(0, 0, 0, 0.6);
  border-right-color: transparent;
}
/* ===============================
   ホバー・フォーカス無効化（ローディング中）
   =============================== */
.ec-blockBtn--action.loading:hover,
.ec-blockBtn--action.loading:focus,
.checkout-button.loading:hover,
.checkout-button.loading:focus,
.trial-cart-btn.loading:hover,
.trial-cart-btn.loading:focus,
.shopping-sticky-submit-btn.loading:hover,
.shopping-sticky-submit-btn.loading:focus {
  transform: none !important;
  box-shadow: none !important;
}
.trial-cart-btn.loading .spinner-border,
.gd-tasting-direct-button.loading .spinner-border,
.checkout-button.loading .spinner-border,
.shopping-sticky-submit-btn.loading .spinner-border,
.ec-blockBtn--action.loading .spinner-border {
  color: #a87d26 !important;
}