@charset "UTF-8";

/* ==========================================================================
   cle-cart.css — カート（/shop/cart）

   デザインは docs/design/design_0901/cart.html + account.css。
   ただし造りは ecforce 既定のまま使い、CSS だけでトンマナを寄せる。
   マークアップは触っていない（テンプレートに足したのは見出しの英語ラベル
   1行だけ）。

   ■ 既定の骨格がデザインとほぼ同じ
     bundle.css の .p-cart_content__inner は
       grid-template: "products sidebar" / 1fr auto（sidebar 320px、gap 60px）
     で、デザインの「左に明細・右にご注文内容」と同じ形。列の作り直しは
     要らないので、幅・罫線・書体・余白だけを替えている。

   ■ 借りているもの（寸法はここで持たない）
     .cle-page__head / __head-label   … 見出し（cle-page.css 2節）
     .cle-btn の値                    … レジ導線のボタン（同 4節）
     .c-order_quantity                … 数量ステッパー（cle-form.css 1節）
     入力欄・チェック                 … cle-form.css 2〜3節

   ■ 読み込み位置
     ec_force/shop/sections/_head.html.liquid から条件なしで読む。

     8節（カートモーダル）以外は #cart-show-view の下に閉じてあるので、
     他のページで読まれても影響は出ない。モーダルはレイアウトが出していて
     全ページに存在するため、そちらだけ .p-cart_modal のスコープにしてある。

   ■ カードの見た目はここには無い
     下部のレコメンドと閲覧履歴に並ぶのはテーマ既定のカード
     （.c-product_item）。見た目は cle-list.css 5節が面を問わず受け持つ。
     ここが持つのは帯・見出し・並べ方だけ。
   ========================================================================== */

/* ==========================================================================
   1. ページの地と幅

   このページの main は <main class="js-main-container" id="cart-show-view">
   で、.l-container を持たない。固定ヘッダーぶんの押し下げ
   （cle-header.css 1節）は .l-container に当たっているので届かない。

   カートは ecforce の disable_header_feature_page_flg（余計な導線を出さない
   面）の対象で、その場合ヘッダーは static になり押し下げ自体が不要になる。
   フラグが立っているかはテーマ側から確かめられないので、ヘッダーが固定の
   ときだけ押し下げる形にして、どちらでも成立させている。
   （body の cle-header-static は header.liquid が付ける）
   ========================================================================== */

#cart-show-view {
  padding-top: 72px;
  background: linear-gradient(180deg, #f6f0e7 0%, #efe8dc 100%);
}

body:not(.cle-header-static) #cart-show-view {
  padding-top: var(--cle-header-h);
}

/* 中身の幅は他の下層ページと同じ 1400px ＋ 共通ガター。
   既定はページヘッダーが 40px、明細が 1280px と別々に持っているので、
   行（.l-container__row）1か所へ寄せてから、内側の指定を打ち消す。 */
#cart-show-view .l-container__row {
  box-sizing: border-box;
  width: min(100%, 1400px);
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  padding-top: 0;
  padding-right: var(--cle-page-gutter);
  padding-left: var(--cle-page-gutter);
}

#cart-show-view .p-page_header,
#cart-show-view .p-cart_content {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

/* 最後の行の下に余白を足す。既定はレコメンドや閲覧履歴が出るときだけ
   u-margin__bottom--100 が付き、出ないと地が途切れて見える。 */
#cart-show-view .l-container__row:last-child {
  padding-bottom: 96px;
}

/* ==========================================================================
   2. 見出し

   テンプレートで .p-page_header__inner に .cle-page__head を足してある。
   中央寄せ・英語ラベル・明朝の見出しは共通パーツ（cle-page.css 2節の
   .cle-page__head h1）がそのまま受け持つので、この面に指定は要らない。

   既定の .p-page_header__inner__title（font-size:30px）と
   .u-text--head（同 24px）はどちらもクラス1つぶんの詳細度なので、
   .cle-page__head h1 のほうが強く、放っておけば負ける。

   ここに #cart-show-view 付きで font-size を書くと、id のぶん詳細度が
   跳ね上がって共通パーツに勝ってしまう。2026-09-06 に font-size: inherit と
   書いて、見出しが本文と同じ大きさになった。**この節に字の大きさを
   書き足さないこと。**
   ========================================================================== */

/* ==========================================================================
   3. 明細（.c-cart_item）

   既定は flex（画像・情報・操作）。デザインは
   「104px の画像 ＋ 情報」の2列で、金額と削除は情報の下の1行に置く。

   ecforce は金額と削除を .c-cart_item__action に分けて持っているので、
   3列目として右端に置く形にした。行は罫線だけで区切る（枠は持たせない）。
   ========================================================================== */

#cart-show-view .c-cart_item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 24px;
  padding: 26px 0;
  border-top: 0;
  border-bottom: 1px solid var(--cle-line);
}

/* 既定は最後の行にだけ下罫線を足していた。上の指定で全行が持つので不要 */
#cart-show-view .c-cart_item:not(:has(+ .c-cart_item)) {
  border-bottom: 1px solid var(--cle-line);
}

#cart-show-view .c-cart_item__img {
  width: 100%;
  height: fit-content;
  border: 1px solid var(--cle-line);
  background: var(--cle-white);
}

/* 既定は 4:3 の縦長。商品カード（cle-list.css）と同じ正方形にする */
#cart-show-view .c-cart_item__img__inner {
  padding-top: 100%;
  background-size: contain;
}

#cart-show-view .c-cart_item__info {
  padding-left: 0;
}

/* ブランド名。商品カードと同じ扱い（小さく・字間を広く・大文字） */
#cart-show-view .c-cart_item__info__category {
  margin-bottom: 0;
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#cart-show-view .c-cart_item__info__title {
  display: block;
  margin-top: 8px;
  color: var(--cle-ink);
  font: 300 16px/1.5 var(--cle-font-name);
  text-decoration: none;
}

#cart-show-view .c-cart_item__info__variant {
  margin-top: 6px;
  color: var(--cle-ink-soft);
  font-size: 11px;
}

/* ---- 数量と更新 --------------------------------------------------------
   数量ステッパーそのものは cle-form.css 1節。ここでは並びだけ決める。
   ----------------------------------------------------------------------- */

#cart-show-view .c-cart_item__info__quantity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

/* 「更新」。主導線ではないので枠線のボタンにする（cle-page.css 4節の
   .cle-btn.--outline と同じ調子で、寸法だけ小さく） */
#cart-show-view .c-cart_item__info__quantity__submit {
  width: auto;
  padding: 9px 16px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--cle-ink-soft);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

#cart-show-view .c-cart_item__info__quantity__submit:hover {
  border-color: var(--cle-ink);
  background: rgba(255, 253, 249, 0.6);
  color: var(--cle-ink);
  opacity: 1;
}

/* 数量が動かせない行（ギフトなど）は数字だけが出る */
#cart-show-view .c-cart_item__info__total {
  margin-top: 18px;
}

#cart-show-view .c-cart_item__info__total__quantity {
  color: var(--cle-ink-soft);
  font-size: 11px;
}

#cart-show-view .c-cart_item__info__total__price {
  font: 300 16px/1 var(--cle-font-mincho);
}

/* ---- 右端（金額と削除） ------------------------------------------------ */

#cart-show-view .c-cart_item__action {
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  padding-left: 0;
}

#cart-show-view .c-cart_item__action__price {
  order: 1;
  font: 300 16px/1 var(--cle-font-mincho);
}

/* 削除は取り消しの操作。目立たせず、しかし迷わない位置に。
   既定は 24px の × アイコン。字だけの控えめなリンクへ替える。 */
#cart-show-view .c-cart_item__action__delete {
  order: 2;
  flex: none;
}

#cart-show-view .c-cart_item__action__delete__btn {
  color: var(--cle-ink-soft);
  font-size: 11px;
  letter-spacing: 0.06em;
}

#cart-show-view .c-cart_item__action__delete__btn i {
  font-size: 13px;
}

#cart-show-view .c-cart_item__action__delete__btn span {
  border-bottom: 1px solid var(--cle-line-strong);
  text-decoration: none;
}

/* ---- バッジ ------------------------------------------------------------
   予約商品・同梱グループなどの印。商品一覧のタグと同じチップにする。
   ----------------------------------------------------------------------- */

#cart-show-view .c-cart_item__badges .c-badge {
  padding: 4px 11px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* ==========================================================================
   4. ご注文内容（右の列）

   既定は「レジ導線（.c-cart_submit）」と「金額（.c-billing_list）」の
   2つが縦に並ぶだけ。デザインは1つの囲みなので、列そのものに枠と地を持たせ、
   中の2つからは枠を外して1枚に見せる。

   ■ 並びはデザインに合わせて 金額 → レジ導線 に固定する
     DOM の順はレジ導線が先。bundle.css は .p-cart_content .c-cart_submit に
     order を当てていて、画面幅で 1 と 2 が入れ替わる作りになっている
     （実機の PC で見ると order:1、つまりボタンが先に出ていた）。

     買う前に金額を確かめてからボタンへ進む並びにしたいので、幅によらず
     金額を上に固定する。order は既定より詳細度の高いこの指定で決める。
   ========================================================================== */

#cart-show-view .p-cart_content__inner {
  align-items: start;
}

#cart-show-view .p-cart_content__inner__side .c-billing_list {
  order: 1;
  padding: 0;
  margin-top: 0;
  margin-bottom: 20px;
}

#cart-show-view .p-cart_content__inner__side .c-cart_submit {
  order: 2;
}

#cart-show-view .p-cart_content__inner__side {
  position: sticky;
  top: calc(var(--cle-header-h) + 28px);
  box-sizing: border-box;
  width: 340px;
  padding: 30px 28px 32px;
  border: 1px solid var(--cle-line-strong);
  background: var(--cle-paper);
}

/* ヘッダーが固定でない面（カートは既定でこちら）は、逃がす高さも要らない */
body.cle-header-static #cart-show-view .p-cart_content__inner__side {
  top: 28px;
}

/* ---- 金額 -------------------------------------------------------------- */

#cart-show-view .c-billing_list {
  background: transparent;
}

#cart-show-view .c-billing_list__title {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cle-line);
  color: var(--cle-ink);
  font: 300 15px/1.5 var(--cle-font-mincho);
}

#cart-show-view .c-billing_list__detail {
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* 明細の下の罫線は「合計」が自分の上罫線で受け持つので消す。
   既定のままだと細い線が2本続いて見える。 */
#cart-show-view .c-billing_list__detail__bottom__border {
  border-bottom: 0;
}

#cart-show-view .c-billing_list__detail__item__row {
  margin-block-end: 12px;
  font-size: 12px;
}

#cart-show-view .c-billing_list__detail__item__row__title {
  color: var(--cle-ink-soft);
  font-size: 12px;
}

#cart-show-view .c-billing_list__detail__item__row__price {
  font-size: 13px;
}

/* 税の内訳。金額の主役ではないので一段落とす */
#cart-show-view .c-billing_list__detail__item__tax {
  color: var(--cle-ink-soft);
  font-size: 11px;
}

/* 合計だけ明朝で大きく。上に太い罫線を引いて明細と切る */
#cart-show-view .c-billing_list__total {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--cle-line-strong);
}

#cart-show-view .c-billing_list__total__title {
  color: var(--cle-ink);
  font-size: 13px;
}

#cart-show-view .c-billing_list__total__price {
  font: 300 22px/1 var(--cle-font-mincho);
}

/* ---- レジ導線 ----------------------------------------------------------
   囲みは列が持っているので、ここからは枠を外す。
   ----------------------------------------------------------------------- */

#cart-show-view .c-cart_submit {
  border-top: 0;
  border-bottom: 0;
}

#cart-show-view .c-cart_submit__block {
  padding-bottom: 0;
}

#cart-show-view .c-cart_submit__block + .c-cart_submit__block {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--cle-line);
}

#cart-show-view .c-cart_submit__block__title {
  margin-bottom: 14px;
  color: var(--cle-ink);
  font: 300 14px/1.5 var(--cle-font-mincho);
}

/* 主導線。値は cle-page.css 4節の .cle-btn.--solid と同じもの。
   この面では列の幅いっぱいに伸ばすので、高さと最大幅だけ既定を外す。 */
#cart-show-view .c-cart_submit__block__submit {
  max-width: none;
  width: 100%;
  height: auto;
  margin-top: 20px;
  padding: 17px 24px;
  border: 1px solid var(--cle-ink);
  border-radius: 0;
  background: var(--cle-ink);
  color: var(--cle-white);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  transition: opacity 0.35s ease;
}

#cart-show-view .c-cart_submit__block__submit:hover {
  opacity: 0.82;
}

/* 「登録せずに購入」。副次的な導線なので字だけ */
#cart-show-view .c-cart_submit__block__link {
  margin-top: 14px;
  color: var(--cle-ink-soft);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid var(--cle-line-strong);
}

/* ログインの入力欄は cle-form.css が受け持つ。ここは間隔だけ */
#cart-show-view .c-form_input + .c-form_input {
  margin-top: 10px;
}

/* ==========================================================================
   5. ギフト

   カートにギフトを足す枠。既定のボタンを枠線のボタンに寄せる。
   あわせて、明細に出るギフトの囲みと、ギフトを選ぶモーダルの地を整える。

   ■ 既定の地は濃い茶になっている
     bundle.css はギフトの囲みと選択中の行に
     var(--js-color-page-accent-lighten, #f5f8fa) を敷く。この変数は
     bundle.js が --color-page-accent（cle-common.css で --cle-ink）から
     計算して足すので、淡い青ではなく #4E483C の濃い茶になる。
     囲みは地を透かし、選択中の行は地を活かして字を白くしている
     （白との対比 9.0）。
   ========================================================================== */

#cart-show-view .p-cart_content__inner__gift {
  margin-top: 34px;
}

#cart-show-view .p-cart_content__button {
  height: auto;
  padding: 15px 22px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

#cart-show-view .p-cart_content__button:hover {
  border-color: var(--cle-ink);
  background: rgba(255, 253, 249, 0.6);
}

/* 明細の中のギフトの囲み。地を透かして明細と地続きにする */
#cart-show-view .c-cart_item__gift-info {
  background-color: transparent;
}

/* ギフトを選ぶモーダルの選択中の行。地は既定のまま（濃い茶）なので字を白に。
   ラジオボタンは自前の白い丸を描くので、濃い地でもそのまま見える。 */
#cart-show-view .p-gift_select__item:has(:checked) {
  color: var(--cle-white);
}

/* ==========================================================================
   6. 空のカート・お知らせ

   商品が1つも無いときは1行だけが出る。地の中で迷子にならないよう、
   上下に余白を持たせて明朝で置く。
   ========================================================================== */

#cart-show-view .p-cart_content > .u-text--body.text-center {
  padding: 96px 0;
  color: var(--cle-ink-soft);
  font: 300 15px/2 var(--cle-font-mincho);
}

/* 個数の注意など、明細の上に出るお知らせ */
#cart-show-view .p-cart_content__message-container {
  width: 100%;
  margin-bottom: 24px;
}

#cart-show-view .p-cart_content__message-text {
  color: var(--cle-ink-soft);
  font-size: 12px;
  line-height: 1.9;
}

/* ==========================================================================
   7. 下部の帯（閲覧履歴・レコメンド）

   明細の下に出る2つの帯。どちらもテーマ既定のカード（.c-product_item）が
   並ぶ。カードの中身は cle-list.css 5節が面を問わず受け持つので、ここが
   持つのは**帯・見出し・並べ方**だけ。

   ■ 閲覧履歴のマークアップはテーマの外から来る
     sections/browsing_history.liquid は**この帯とは関係ない**。
     カートの .js-browsing-histories へ流し込まれるのはプラットフォーム側の
     マークアップで、テーマには一度も出てこない別の class を持つ。

       出るもの      .p-browsing_history / __inner / __inner__title
       テーマ側      .p-new_product__title / __slider__track__list

     2026-09-06 に browsing_history.liquid のほうを直して当たらなかった。
     bundle.css で p-browsing_history を引くと定義だけが見つかり、テーマの
     liquid には1件も無い。これが見分け方。**この帯を直すときは liquid では
     なくこの節。** 中身（並べる商品・件数・見出しの文言）は管理画面の
     「閲覧履歴」セクションの設定から来る。

   ■ 送りは slick が入った後から畳んでいる
     JSが .slick-track と各スライドに width と transform を**インライン
     スタイルで**書き込むので、宣言の詳細度では勝てない。ここだけ
     !important を使っている。bundle.css 自身も別の面（.p-variant_changes）で
     同じことをしていて、その書き方に合わせてある。

   ■ 帯の余白と罫線
     デザインの .page-block（96px 0）と同じ。上の罫線は持たない
     （account.css の .page-block + .reco-block が 0 にしている）。
   ========================================================================== */

/* ---- 閲覧履歴 ---------------------------------------------------------- */

/* 商品が1件も無いときは帯ごと消す。

   受け皿（.js-browsing-histories）はログインしていれば必ず出る
   （carts/show.html.liquid の current_customer の分岐）。そこへ流し込まれる
   マークアップは、**閲覧履歴が空でも見出しだけは組んでくる**ので、
   「History／閲覧履歴」の下に何も無い帯が 96px ぶん残っていた。

   1件も無いときは帯ごと出さない、という扱いは TOPページの News・よくある
   質問と同じ。あちらは liquid で件数を見て分岐できるが、この帯は
   マークアップに手が入らない（プラットフォーム側が器ごと出す）ので
   :has() で見る。

   判定はカード（.c-product_item）の有無。流し込みが済んでいない読み込み
   直後も「無い」扱いになるため、見出しが一瞬出てから消えることもない。

   **受け皿の行ではなく帯を消している。** 行は上下の余白を持たないので
   （1節の padding-top: 0 と、下にある padding-bottom: 0）、帯を消せば
   行の高さは 0 になる。行を消すと、流し込みの前後で器ごと出入りすることに
   なり、slick が幅を測る瞬間に隠れている形を作りかねない。

   :has() が効かないブラウザでは、今までどおり見出しだけが残る。
   ------------------------------------------------------------------------ */

#cart-show-view .p-browsing_history:not(:has(.c-product_item)) {
  display: none;
}

/* 既定は左右 40px。幅と左右は受け皿（.js-browsing-histories）が1節で
   受け取っているので、こちらは上下だけ持つ。 */
#cart-show-view .p-browsing_history {
  padding: 96px 0;
}

/* 既定は max-width:1200px で中央寄せ。レコメンドの帯と同じ理由で外す */
#cart-show-view .p-browsing_history__inner {
  max-width: none;
  width: 100%;
}

/* 受け皿の下の余白は帯が持つ。1節の :last-child ぶんと二重になるため */
#cart-show-view .l-container__row.js-browsing-histories {
  padding-bottom: 0;
}

/* ---- 閲覧履歴の見出し ---------------------------------------------------
   値は共通の .cle-page__head（cle-page.css 2節）と同じもの。あちらは class を
   足せる面で使うが、この帯はマークアップに手が入らないので写している。
   **直すときは両方を見ること。**

   欧文が h2、日本語が span という並び（プラットフォーム側の作り）。
   class 名では受けずに要素で受けているのは、日本語のほうの class が
   p-rbrowsing_history__inner__jp と綴りが揺れているため。直されても
   直されなくても効くようにしてある。

   欧文に lang 属性が付かないので、cle-common.css の :lang(en) が当たらない。
   書体はここで指定する。
   ------------------------------------------------------------------------ */

#cart-show-view .p-browsing_history__inner__title {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-bottom: 56px;
  text-align: center;
}

#cart-show-view .p-browsing_history__inner__title h2 {
  margin: 0;
  color: var(--cle-ink-soft);
  font-family: var(--cle-font-en);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

#cart-show-view .p-browsing_history__inner__title span {
  color: var(--cle-ink);
  font: 300 clamp(22px, 2.2vw, 30px)/1.5 var(--cle-font-mincho);
}

/* ---- 閲覧履歴を格子に組み替える ----------------------------------------
   デザイン（cart.html の .cart-reco-grid）は4枚並びの格子で、横送りの
   見た目を持たない。管理画面の「表示形式」がカルーセルのままでも格子で
   出るように、slick が入った後の形をここで畳んでいる。

   列間は空けず縦罫1本で仕切る。商品一覧・商品詳細のレコメンド帯と同じ組み。
   ------------------------------------------------------------------------ */

#cart-show-view .p-browsing_history .p-product_slider__list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#cart-show-view .p-browsing_history .slick-list {
  margin: 0;
}

#cart-show-view .p-browsing_history .slick-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 50px;
  width: auto !important;
  transform: none !important;
}

/* 既定の clearfix。格子では空の行になる */
#cart-show-view .p-browsing_history .slick-track::before,
#cart-show-view .p-browsing_history .slick-track::after {
  content: none;
}

#cart-show-view .p-browsing_history .slick-slide {
  height: auto;
  width: auto !important;
  margin: 0;
}

/* 無限送りのときにJSが作る複製。格子では同じ商品が2度出る */
#cart-show-view .p-browsing_history .slick-cloned {
  display: none;
}

/* 送りの点と矢印はデザインに無い */
#cart-show-view .p-browsing_history .p-product_slider__nav {
  display: none;
}

/* カードのあいだの縦罫。共通カードと同じ値。列数が面ごとに違うので、
   何番目を消すかはこの面で決める（商品詳細のレコメンド帯も同じ分担）。 */
#cart-show-view .p-browsing_history .slick-slide .c-product_item::after {
  position: absolute;
  top: 12px;
  right: 0;
  bottom: 12px;
  width: 1px;
  content: '';
  background: linear-gradient(
    to bottom,
    rgba(30, 26, 22, 0) 0%,
    rgba(30, 26, 22, 0.08) 18%,
    rgba(30, 26, 22, 0.08) 82%,
    rgba(30, 26, 22, 0) 100%
  );
}

#cart-show-view .p-browsing_history .slick-slide:nth-child(4n) .c-product_item::after,
#cart-show-view .p-browsing_history .slick-slide:last-child .c-product_item::after {
  display: none;
}

/* ---- レコメンド -------------------------------------------------------- */

#cart-show-view .p-recommend_product {
  padding: 96px 0;
}

/* 既定は max-width:1200px で中央寄せ。閲覧履歴の帯と左右が揃わないので外す */
#cart-show-view .p-recommend_product__inner {
  max-width: none;
  width: 100%;
  padding: 0;
}

/* ---- レコメンドの横送り -------------------------------------------------
   slick はそのまま使う（既定の造りを活かす方針）。送りの点だけ整える。
   ----------------------------------------------------------------------- */

#cart-show-view .p-product_slider__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#cart-show-view .p-product_slider__nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}

#cart-show-view .p-product_slider__nav .slick-dots li button {
  background: var(--cle-line-strong);
}

#cart-show-view .p-product_slider__nav .slick-dots li.slick-active button {
  background: var(--cle-ink);
}

/* ==========================================================================
   8. カートモーダル（ヘッダーのカートアイコンから開く）

   中身は明細（.c-cart_item）と合計とレジ導線。カートページと同じ部品なので、
   数量ステッパー（cle-form.css 1節）はそのまま効く。ここでは器と、
   この面ぶんの寸法だけを持つ。

   カートページ側（3〜4節）の指定は #cart-show-view に閉じていてここには
   届かない。同じ値を書いている箇所があるので、片方だけ直さないこと。
   ========================================================================== */

.p-cart_modal__container {
  border-radius: 0;
  background: var(--cle-paper);
}

.p-cart_modal__header {
  color: var(--cle-ink);
  font: 300 15px/1.5 var(--cle-font-mincho);
}

.p-cart_modal__total-text {
  color: var(--cle-ink-soft);
  font-size: 12px;
}

.p-cart_modal__total-price {
  color: var(--cle-ink);
  font: 300 20px/1 var(--cle-font-mincho);
}

/* レジ導線。値はカートページのボタン（4節）と同じ */
.p-cart_modal__purchase {
  height: auto;
  padding: 16px 24px;
  border: 1px solid var(--cle-ink);
  border-radius: 0;
  background: var(--cle-ink);
  color: var(--cle-white);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.p-cart_modal .c-cart_item {
  padding: 20px 0;
  border-top: 0;
  border-bottom: 1px solid var(--cle-line);
}

.p-cart_modal .c-cart_item__img {
  border: 1px solid var(--cle-line);
  background: var(--cle-white);
}

.p-cart_modal .c-cart_item__img__inner {
  padding-top: 100%;
  background-size: contain;
}

.p-cart_modal .c-cart_item__info__category {
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.p-cart_modal .c-cart_item__info__title {
  color: var(--cle-ink);
  font: 300 14px/1.5 var(--cle-font-name);
  text-decoration: none;
}

.p-cart_modal .c-cart_item__info__variant {
  color: var(--cle-ink-soft);
  font-size: 11px;
}

/* 数量ステッパーは共通部品。既定がこの面だけ幅を決めていたので外す */
.p-cart_modal .c-order_quantity {
  width: auto;
}

.p-cart_modal .c-badge {
  padding: 4px 11px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--cle-ink-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.p-cart_modal__empty-content figcaption {
  color: var(--cle-ink-soft);
  font: 300 14px/2 var(--cle-font-mincho);
}

/* ==========================================================================
   9. レスポンシブ（デザインに合わせて 1024px / 768px の2点だけ）
   ========================================================================== */

@media (max-width: 1024px) {
  /* 閲覧履歴の格子。共通の商品グリッドと同じく3列に落とす
     （cle-list.css 8節と対）。行末の縦罫も3列基準にする。 */
  #cart-show-view .p-browsing_history .slick-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #cart-show-view .p-browsing_history .slick-slide:nth-child(4n) .c-product_item::after {
    display: block;
  }

  #cart-show-view .p-browsing_history .slick-slide:nth-child(3n) .c-product_item::after,
  #cart-show-view .p-browsing_history .slick-slide:last-child .c-product_item::after {
    display: none;
  }

  #cart-show-view .p-browsing_history,
  #cart-show-view .p-recommend_product {
    padding: 72px 0;
  }

  #cart-show-view .p-cart_content__inner__side {
    width: 300px;
    padding: 26px 22px 28px;
  }
}

@media (max-width: 768px) {
  #cart-show-view {
    padding-top: 40px;
  }

  /* 閲覧履歴の格子は2列へ。行末の縦罫も2列基準にする */
  #cart-show-view .p-browsing_history .slick-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  #cart-show-view .p-browsing_history .slick-slide:nth-child(3n) .c-product_item::after {
    display: block;
  }

  #cart-show-view .p-browsing_history .slick-slide:nth-child(2n) .c-product_item::after,
  #cart-show-view .p-browsing_history .slick-slide:last-child .c-product_item::after {
    display: none;
  }

  /* 帯の上下。デザインの .page-block と同じ値（cle-page.css 11節と対） */
  #cart-show-view .p-browsing_history,
  #cart-show-view .p-recommend_product {
    padding: 56px 0;
  }

  /* 見出しの詰めも共通パーツ（cle-page.css 11節の .cle-page__head）と同じ値 */
  #cart-show-view .p-browsing_history__inner__title {
    margin-bottom: 36px;
  }

  /* 既定がここで1カラムへ落ちる。追従も枠の幅指定も外す */
  #cart-show-view .p-cart_content__inner__side {
    position: static;
    width: 100%;
    margin-top: 34px;
  }

  /* 明細は画像と情報の2列。金額と削除は情報の下の行へ回る（既定と同じ）。
     既定は padding-left:95px で画像の幅ぶん字下げしていたので、
     画像の幅を変えたぶんだけ合わせ直す。 */
  #cart-show-view .c-cart_item {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0;
  }

  #cart-show-view .c-cart_item__action {
    grid-column: 1 / -1;
    align-items: center;
    margin-top: 14px;
    padding-left: 100px;
  }

  #cart-show-view .c-cart_item__action__delete {
    order: 1;
    margin-top: 0;
  }

  #cart-show-view .c-cart_item__action__price {
    order: 2;
  }

  #cart-show-view .l-container__row:last-child {
    padding-bottom: 62px;
  }

  #cart-show-view .p-cart_content > .u-text--body.text-center {
    padding: 62px 0;
  }
}