/*
 * 円建ての参考表示（inc/jpy-reference.php）。
 *
 * 意匠の方針: 円はドルと「同じ大きさ」で並べる。日本のお客様にとって支払額の
 * 手触りがあるのは円のほうで、ドルだけを大きく出しても結局いくら払うのか分からない。
 * ただし通貨としての正典はあくまで USD なので、
 *   - 必ず「約」を前置し、価格ブロックの下に参考値である旨の注記を 1 本置く
 *   - ドルの左・円の右という並びを崩さない（ドルが先に読まれる）
 * の 2 点で「参考値である」ことを担保する。大きさでは区別しない。
 */

/*
 * JS が hidden を立てたときに確実に消えるようにする。
 * 下の display:inline / block がユーザーエージェントの [hidden]{display:none} を
 * 上書きしてしまうため、クラスを重ねて詳細度で勝たせる。
 */
.nicobay-jpy-ref.nicobay-jpy-ref[hidden] {
  display: none;
}

/* ===================== 価格の横に並べるインライン表示 ===================== */

/*
 * 大きさ・太さ・色はすべて親から継ぐ。置かれる行によって基準が違うため
 * （元価格の行 = 1.6rem の打ち消し、値引き後の行 = 2.2rem の赤、通常 = 2.2rem の黒）。
 * 継がせておけば、価格側の意匠を直したときに円だけ取り残されることがない。
 *
 * .nicobay-jpy-ref の既定（block / 1.3rem / グレー）を確実に上回るよう、
 * クラスを 2 つ重ねて詳細度を上げている。読み込み順に依存させない。
 */
.nicobay-jpy-ref.nicobay-jpy-ref--inline {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0 0 0 0.8rem;
}

/*
 * 商品カード（コレクション／トップ／ブランド／ランキング／ウィッシュリスト）。
 * カードは横幅が狭く価格の右に置く余地が無いので、価格の下に 1 行で落とす。
 * 文字サイズはカードの価格（.price-item = 1.4rem）と同じにして、
 * 商品ページと同じ「ドルと同じ大きさで円を出す」方針をカードでも守る。
 *
 * width:100% は、価格と %OFF バッジが flex 行に並ぶカード
 * （product-card-collection.php の .nicobay-product__price-row）で
 * 行の途中に挟まらず、必ず次の行へ落とすため。
 */
.nicobay-jpy-ref.nicobay-jpy-ref--card {
  display: block;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.4;
  color: #505050;
  margin-top: 2px;
}

/* ===================== 値引き商品の 2 行表示 ===================== */

/*
 * .product-redesign__price はデスクトップ（769px 以上）で
 * display:flex / align-items:baseline になる（nicobay-product-redesign.css:1285）。
 * そのままだと 2 つの行 div が横に並んでしまうので、行を積むために解除する。
 */
.product-redesign__price.product-redesign__price--stacked {
  display: block;
}

.product-redesign__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

/* 元価格の行。打ち消し線の 1.6rem に円もそろえる
   （nicobay-product-detail.css の .product-redesign__price--on-sale del と同じ値）。 */
.product-redesign__price-row--was {
  font-size: 1.6rem;
}

.product-redesign__price-row--was del {
  margin-right: 0;
}

/* 円も一緒に打ち消す。ドルだけ打ち消して円が生きていると、
   「元価格 $18.00 は無効だが ¥2,800 は有効」と読めてしまう。 */
.product-redesign__price-row--was .nicobay-jpy-ref--inline {
  text-decoration: line-through;
}

.product-redesign__price--stacked .product-redesign__price-row--now {
  margin-top: 2px;
}

/* 値引き後の行では、円も値引き後価格と同じ赤にする。
   打ち消す相手は .product-redesign__price--on-sale .product-redesign__price-currency
   （詳細度 0,2,0）なので、こちらを 0,3,0 にして読み込み順に依存させない。 */
.product-redesign__price--on-sale .product-redesign__price-row--now .nicobay-jpy-ref--inline {
  color: #ff4757;
}

/* 2 行表示では送料込みの注記を必ず行として落とす（1 行目の途中に紛れ込ませない）。 */
.product-redesign__price--stacked .product-redesign__price-shipping-note {
  display: block;
  margin-left: 0;
  margin-top: 4px;
}

/* ===================== 参考値であることの注記 ===================== */

.nicobay-jpy-ref__note {
  display: block;
  font-size: 1.1rem;
  color: #909090;
  line-height: 1.5;
}

/*
 * 価格ブロックの「外」に置く 1 本の注記。
 * .product-redesign__price は margin-bottom:16px を持っており、隣接兄弟の
 * マージンは相殺されるため、注記側に margin-top を足しても 16px のままになる。
 * セクションを flex カラムにして相殺を止め、gap で詰める。
 */
.product-redesign__price-section--with-jpy-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/*
 * ★ align-items は既定の stretch のままにすること。flex-start にすると子要素が
 *   内容幅（max-content）に縮み、「（商品送料込み：＄93.00 USD ／ 約 ¥14,700）」の
 *   ような長い 1 行が折り返す機会を失う。中身は左寄せのブロックなので、
 *   幅いっぱいに伸ばして問題ない。max-width はその保険。
 *   実測（情報カラムを 280px に絞った状態）: 送料込みの注記は 3 行に折り返して収まり、
 *   値引き後の行も価格とバッジで 2 行に折り返す。はみ出しは無い。
 */
.product-redesign__price-section--with-jpy-note > * {
  max-width: 100%;
}

.product-redesign__price-section--with-jpy-note .product-redesign__price {
  margin-bottom: 0;
}

/*
 * ★ 通常価格（2 行に割らないほう）の行は、769px 以上で
 *   .product-redesign__price が display:flex になる（nicobay-product-redesign.css:1285）。
 *   ここに円を足すと「金額・USD・円・送料込み注記」の 4 要素が 1 行に並ぶことになり、
 *   本番の購入カラム幅では収まらず、flex アイテムが縮んで
 *   「約」と「¥4,700」が改行され、送料込み注記が細い段組みに潰れる。
 *   （値引き商品の --on-sale 側には元々 flex-wrap:wrap があるが、通常価格側には無い。）
 *
 *   行を折り返せるようにし、送料込み注記は必ず独立した行へ落とす。
 *   金額と USD と円までは 1 行、送料込みは次の行、という並びになる。
 */
.product-redesign__price-section--with-jpy-note .product-redesign__price {
  flex-wrap: wrap;
}

.product-redesign__price-section--with-jpy-note .product-redesign__price-shipping-note {
  flex: 0 0 100%;
  margin-left: 0;
  margin-top: 4px;
}

/* 「約 ¥4,700」を「約」と「¥4,700」に割らせない。 */
.nicobay-jpy-ref__amount {
  white-space: nowrap;
}

/* ===================== カート／チェックアウトの合計 ===================== */

.nicobay-jpy-ref {
  display: block;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  color: #707070;
  margin-top: 4px;
}

.nicobay-jpy-ref__amount {
  font-weight: 500;
}

/*
 * 合計行（.totals）は flex の 1 行レイアウトなので、参考表示はその「外」に
 * 独立したブロックとして置いている（inc/jpy-reference.php の docblock 参照）。
 * 金額は合計額と同じ 16px / 600（section-nicobay-cart.css の
 * .totals:first-of-type .totals__total-value と同値）にそろえる。
 */
.nicobay-jpy-ref--total {
  margin-top: 0;
  margin-bottom: 12px;
  color: #000;
}

.nicobay-jpy-ref--total .nicobay-jpy-ref__amount {
  font-size: 16px;
  font-weight: 600;
}

.nicobay-jpy-ref--total .nicobay-jpy-ref__note {
  font-weight: 400;
  margin-top: 2px;
}

/* チェックアウトは <tfoot> の中の行として出るので、セルの詰めを整える。 */
.nicobay-jpy-ref-row td {
  padding-top: 4px;
  border-top: 0;
}

/*
 * ブロックチェックアウト（assets/nicobay-jpy-blocks.js が注文概要の下に差し込む）。
 * スロットは概要カードの外側に開いているため、左右の詰めを自前で合わせないと
 * カード内の「小計 / 合計」より外側にはみ出して見える。
 */
.nicobay-jpy-ref--blocks {
  margin-top: 12px;
  padding: 0 16px;
}

/* ===================== 注文詳細の確定金額 ===================== */

/* ここだけは「参考」ではなく確定額なので、枠で囲んで明確に区別する。 */
.nicobay-jpy-confirmed {
  display: block;
  margin: 16px 0 24px;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fafafa;
  line-height: 1.6;
}

.nicobay-jpy-confirmed__label {
  font-size: 1.3rem;
  color: #505050;
  margin-right: 8px;
}

.nicobay-jpy-confirmed__amount {
  font-size: 2rem;
  font-weight: 600;
  color: #505050;
}

.nicobay-jpy-confirmed__note {
  display: block;
  margin-top: 4px;
  font-size: 1.1rem;
  color: #909090;
}

@media screen and (max-width: 749px) {
  .nicobay-jpy-ref {
    font-size: 12px;
  }

  .nicobay-jpy-ref__note {
    font-size: 11px;
  }

  .nicobay-jpy-confirmed__amount {
    font-size: 18px;
  }
}