/**
 * カートドロワー（inc/cart-drawer.php / template-parts/cart-drawer.php）。
 *
 * 意匠はサイトに合わせる: 見出しと金額は Poppins、本文は Noto Sans JP、
 * CTA は黒のピル（border-radius: 25px）。到達メーターの緑は
 * nicobay-shipping-progress.css が持っているのでここでは色を作らない。
 *
 * 全ページで読む（inc/enqueue.php の chrome CSS）。ドロワー自体が
 * どのページからでも開くため。セレクタは .nb-drawer 配下に閉じてある。
 */

/* ---------- 器 ---------- */

.nb-drawer {
  position: fixed;
  inset: 0;
  /* ★ 巨大値。クーポンモーダル（coupon-modal.css）・まとめ買いPOPUP
     （nicobay-bulk-modal.css）と同じ値・同じ理由。
     最初 1100 にしていたが、本番でヘッダーの下に潜った（2026-10-04）。
     ヘッダー枠 .shopify-section-group-header-wrapper 自体は
     section-header.css で z-index: 1000 だが、同じ要素が持つ .section-header に
     nicobay-nav-dropdown.css と nicobay-flavor-dropdown.css が
     「ドロップダウンを最前面に」と z-index: 10000 !important を当てている。
     どちらも全ページで読む chrome CSS なので、ヘッダーは常に 10000。
     ここを直すときは、その 2 ファイルの値も一緒に見ること。 */
  z-index: 2147483000;
  /* 自分のスタッキングコンテキストを確実に作る（中の要素が外と競合しないように）。 */
  isolation: isolate;
  display: flex;
  justify-content: flex-end;
}

.nb-drawer[hidden] { display: none; }

/* ★ 開いていない間（閉じるアニメーション中を含む）は、裏のページのクリックを
     一切塞がない。開閉が食い違って hidden が付かないまま残っても、透明な幕が
     画面を覆って「裏のページが動かない」状態にはならない（2026-10-06 指摘）。 */
.nb-drawer:not(.is-open) { pointer-events: none; }

/* カートが空のときは、開いたままでも裏のページを操作できるようにする（2026-10-06 指示）。
   幕を出さず、ドロワーの器（画面全体を覆う fixed の箱）はクリックを素通しにして、
   パネルだけが押せる。スクロール止めも JS 側で掛けない（syncMode）。
   商品が入ると JS が is-empty を外し、通常の幕付きに戻る。 */
.nb-drawer.is-empty { pointer-events: none; }
.nb-drawer.is-empty.is-open .nb-drawer__panel { pointer-events: auto; }
.nb-drawer.is-empty .nb-drawer__scrim { display: none; }

/* 購入上限・在庫切れなどの警告（合計欄の上）。カートページの赤い警告と同じ扱い。 */
.nb-drawer__notice {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 6px;
  background: #fdecee;
  color: #b3261e;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
}

.nb-drawer__notice p { margin: 0; }
.nb-drawer__notice p + p { margin-top: 4px; }

/* 裏のページのスクロール止め（JS が html に付け外しする）。
   body の style を直接触らないのは、テーマのメニューも body にクラスで止めを
   付けていて、上書き・空にすると互いに壊し合うため。 */
html.nb-drawer-locked,
html.nb-drawer-locked body { overflow: hidden; }

/* 合計欄の幅に合わせて文字を詰めるための基準（下の @container）。 */
.nb-drawer__panel { container: nbdrawer / inline-size; }

.nb-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.nb-drawer__panel {
  position: relative;
  width: 342px;
  max-width: calc(100vw - 32px);
  height: 100%;
  background: #fff;
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  color: #121212;
}

.nb-drawer.is-open .nb-drawer__scrim { opacity: 1; }

/* ★ 幕は中身の無い <div> なので、base.css（Dawn）の
     `div:empty { display: none; }`（詳細度 0,1,1）に消されていた。
     10/4 の初回反映から 10/12 まで幕が一度も出ておらず、
     ・開いても裏が暗くならない
     ・外側を押しても閉じない（透明な器が押されるだけ）
     ・裏のページが押せず、スクロールもできない
     という状態だった。詳細度で勝つよう .nb-drawer を重ねて display を戻す。 */
.nb-drawer .nb-drawer__scrim { display: block; }
.nb-drawer.is-open .nb-drawer__panel { transform: translateX(0); }

@media screen and (min-width: 750px) {
  .nb-drawer__panel { width: 440px; }
}

/* 通信中は中身を薄くして二度押しを止める（JS が .is-busy を付ける）。 */
.nb-drawer.is-busy .nb-drawer__scroll,
.nb-drawer.is-busy .nb-drawer__foot,
.nb-drawer.is-busy .nb-drawer__meter {
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .nb-drawer__scrim,
  .nb-drawer__panel { transition: none; }
}

/* ---------- ヘッダー ---------- */

.nb-drawer__head {
  flex-shrink: 0;
  height: 50px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
}

.nb-drawer__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* 見出しは和文（カートページの「お買い物カゴ」と同じ呼び方にそろえる）。
   Poppins は和文の字形を持たないので、ここでは本文のスタックに任せる。
   字間も和文向けに詰める（0.06em は欧文の CART 用だった）。 */
.nb-drawer__title-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nb-drawer__count { font-size: 13px; color: #767676; }

.nb-drawer__close {
  width: 34px;
  height: 34px;
  margin-right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: #555;
  cursor: pointer;
}

/* ---------- 到達メーター ---------- */

.nb-drawer__meter {
  flex-shrink: 0;
  border-bottom: 1px solid #e5e5e5;
}

/* 中身（割引・送料の到達）は inc/cart-progress.php が出し、
   幅 342px 向けの詰めは assets/nicobay-cart-progress.css の
   .nb-goals--drawer が持っている。ここは器の縁だけ。 */

/* ---------- 明細 ---------- */

.nb-drawer__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px;
  /* おすすめ商品を下にそろえるための縦の並び（下の .nb-drawer-xsell の margin-top: auto）。 */
  display: flex;
  flex-direction: column;
}

/* 縦に詰まったとき中身が縮まないように（スクロールさせる）。 */
.nb-drawer__scroll > * { flex-shrink: 0; }

.nb-drawer__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 行は大きめに。JCB の注記とカートページへのリンクを外し、合計と円を
   1 行にまとめて空いた縦幅を、商品の見やすさに回した（2026-10-05）。 */
.nb-drawer-item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.nb-drawer-item__media {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
}

.nb-drawer-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nb-drawer-item__body { flex: 1; min-width: 0; }

.nb-drawer-item__set {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #5d6659;
  border-radius: 3px;
  padding: 1px 6px;
  margin-bottom: 4px;
}

.nb-drawer-item__name {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #121212;
  text-decoration: none;
  margin-right: 20px;
}

.nb-drawer-item__name:hover { opacity: 0.7; }

.nb-drawer-item__meta {
  font-size: 12.5px;
  color: #767676;
  line-height: 1.5;
  margin-top: 2px;
}

/* WooCommerce が出すバリエーション表（dl.variation）は、狭い器では
   定義リストの改行が効きすぎるので 1 行に寝かせる。 */
.nb-drawer-item__meta dl,
.nb-drawer-item__meta dd,
.nb-drawer-item__meta dt {
  display: inline;
  margin: 0;
  font-size: inherit;
}

.nb-drawer-item__meta dd::after { content: " "; }
.nb-drawer-item__meta p { margin: 0; }

/* ML はサイト共通のバッジ（assets/puffs-badge.css の .puffs-badge-inline）を使う。
   商品カード・ランキングと同じ緑のピルになる。あちらは「名前の右に添える」前提で
   margin-left を持っているが、ここでは行の先頭に置くので左右を入れ替える。 */
.nb-drawer-item__meta .puffs-badge-inline {
  margin-left: 0;
  margin-right: 6px;
}

.nb-drawer-item__unit {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  color: #767676;
  margin-top: 2px;
}

.nb-drawer-item__unit del { color: #b0b0b0; margin-right: 5px; }
.nb-drawer-item__unit ins { text-decoration: none; color: #c0392b; font-weight: 600; }

/* セット商品の構成品（既定は畳んでおく）。 */
.nb-drawer-item__kids { margin-top: 6px; }

.nb-drawer-item__kids > summary {
  font-size: 12.5px;
  color: #555;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nb-drawer-item__kids > summary::-webkit-details-marker { display: none; }

.nb-drawer-item__kids > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid #767676;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform 0.15s ease;
}

.nb-drawer-item__kids[open] > summary::before { transform: rotate(90deg); }

.nb-drawer-item__kids ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #f7f7f5;
  border-radius: 6px;
  font-size: 12px;
  color: #555;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 構成品 1 つぶん。単品の行と同じ並び（画像 → 名前 → その下に ML）を小さくしたもの。 */
.nb-drawer-item__kids li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nb-drawer-item__kid-media {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.nb-drawer-item__kid-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nb-drawer-item__kid-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.nb-drawer-item__kid-name {
  color: #121212;
}

/* ML は名前の下（単品のメタ行と同じ位置）。共通バッジの左余白は要らない。 */
.nb-drawer-item__kids .puffs-badge-inline {
  margin-left: 0;
}

.nb-drawer-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}

.nb-drawer-item__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 999px;
  height: 32px;
}

.nb-drawer-item__qty button {
  width: 30px;
  height: 30px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  border-radius: 999px;
}

.nb-drawer-item__qty button:disabled { opacity: 0.3; cursor: default; }
.nb-drawer-item__qty button:hover:not(:disabled) { background: #f5f5f5; }

.nb-drawer-item__qty-value {
  min-width: 30px;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nb-drawer-item__qty-fixed { font-size: 12px; color: #767676; }

.nb-drawer-item__total {
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nb-drawer-item__remove {
  position: absolute;
  top: 10px;
  right: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: #999;
  cursor: pointer;
}

.nb-drawer-item__remove:hover { color: #121212; }

/* ---------- クロスセル（あと◯点足すなら） ---------- */

/* 下にそろえる。商品が 1 点（同じ商品を 2 個を含む）など中身が少ないとき、
   棚が商品のすぐ下に浮かず、小計の上の線の真上に来る（2026-10-06 指示）。
   中身が多くてスクロールするときは margin-top: auto が 0 になり、従来どおり並ぶ。 */
.nb-drawer-xsell {
  margin-top: auto;
  border-top: 1px solid #eee;
  padding: 10px 0 14px;
}

/* 左右の送りボタン。トップページのランキング・特集と同じ画像（緑の丸）を半透明で重ねる。 */
.nb-drawer-xsell__rail {
  position: relative;
}

.nb-drawer-xsell__arrow {
  position: absolute;
  /* 画像（88px 角）の上下中央に合わせる。 */
  top: 44px;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.nb-drawer-xsell__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

.nb-drawer-xsell__arrow:hover { opacity: 1; }
.nb-drawer-xsell__arrow--prev { left: -6px; }
.nb-drawer-xsell__arrow--next { right: -6px; }

/* 送れない側は隠す（JS の syncRail が disabled にする）。 */
.nb-drawer-xsell__arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

/* 棚の名前。「あと何点で何が得か」はドロワー上部の到達表示が言うので、
   ここでは繰り返さない（2026-10-05）。本文と同じ黒。 */
.nb-drawer-xsell__head {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #121212;
}

.nb-drawer-xsell__row {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* 標準のスクロールバーは隠す。左右ボタンで送れるうえ、PC（Windows）では
     太い灰色の帯がカードの下に出ていた。指・トラックパッドの横スクロールは効く。 */
  scrollbar-width: none;
}

.nb-drawer-xsell__row::-webkit-scrollbar { display: none; }

.nb-drawer-xsell__card {
  width: 88px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.nb-drawer-xsell__link {
  display: block;
  text-decoration: none;
  color: #121212;
}

.nb-drawer-xsell__img {
  display: block;
  /* 商品画像は 300×300 の正方形。枠も正方形にして、全体を収める（切り取らない）。 */
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.nb-drawer-xsell__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nb-drawer-xsell__name {
  display: block;
  font-size: 10.5px;
  line-height: 1.4;
  margin-top: 5px;
  height: 26px;
  overflow: hidden;
}

.nb-drawer-xsell__price {
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

/* カード内の価格は 1 行に収める（セール品は del + ins が入る）。 */
.nb-drawer-xsell__price del { color: #b0b0b0; margin-right: 4px; }
.nb-drawer-xsell__price ins { text-decoration: none; color: #c0392b; }
.nb-drawer-xsell__price .nicobay-jpy-ref { display: none; }

.nb-drawer-xsell__add {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin-top: 5px;
  border: 1px solid #121212;
  border-radius: 999px;
  background: #fff;
  font-size: 10.5px;
  color: #121212;
  text-decoration: none;
  cursor: pointer;
}

.nb-drawer-xsell__add:hover { background: #121212; color: #fff; }

/* ---------- 合計と CTA ---------- */

.nb-drawer__foot {
  flex-shrink: 0;
  border-top: 1px solid #e5e5e5;
  padding: 11px 18px 14px;
  background: #fff;
}

.nb-drawer__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  color: #555;
}

/* クーポン行（まとめ買い割引もここに出る）。小計より一段小さく、緑で引き算と分かるように。 */
.nb-drawer__sum--discount {
  margin-top: 3px;
  color: #1a7f4b;
  font-size: 12px;
}

.nb-drawer__sum--discount strong {
  font-size: 13px;
  color: #1a7f4b;
}

/* WooCommerce がクーポン行に出す［削除］リンク。まとめ買い割引の行では
   テーマ側のフィルタが外しているので、残るのは客が自分で入れたクーポンだけ。 */
.nb-drawer__sum--discount .woocommerce-remove-coupon {
  margin-left: 6px;
  font-size: 10.5px;
  color: #8a8a8a;
}

.nb-drawer__sum strong {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #121212;
  font-variant-numeric: tabular-nums;
}

/* 合計。円の目安はこの数字から出しているので、必ず対で並べる
   （inc/cart-drawer.php のコメント参照）。内訳より一段大きくして、
   どれが請求額かを一目で分かるようにする。 */
.nb-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 7px;
  padding-top: 8px;
  border-top: 1px solid #eee;
  font-size: 13.5px;
  font-weight: 700;
}

.nb-drawer__total strong {
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ドルと円は同じ行に並べる（2026-10-05）。
   以前は円が次の行に落ちていて、合計まわりで 2 行を使っていた。 */
.nb-drawer__total-amounts {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* 割引前の合計（二重価格）。商品ページのセール表示（nicobay-product-detail.css の
   .product-redesign__price--on-sale）にそろえ、元値は 1 本線で消し、
   割引後の合計を赤（#ff4757）にする。%OFF バッジは付けない（2026-10-06 指示）。 */
.nb-drawer__total-was {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #121212;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nb-drawer__total-amounts--sale strong {
  color: #ff4757;
}

.nb-drawer__total-jpy {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 円の注記。読み落とせない断りなので消さずに残すが、面積は抑える。 */
/* 1 要素 1 行（改行位置は inc/jpy-reference.php の note_lines が持つ）。
   行の途中では折り返さない（2026-10-05 指示）。2 行目
   「銀行振込の確定金額はご注文後のメールでご案内します。」は 9px で約 225px。
   ドロワーの中身の幅は 320px 幅の端末でも 252px あるので収まる。 */
.nb-drawer__jpy-note-line {
  display: block;
  white-space: nowrap;
}

/* ぶら下げ。※ を左の余白に出し、2 行目の頭を 1 行目の「本」にそろえる
   （2026-10-05 指示）。※ は全角なので 1em ちょうど。 */
.nb-drawer__jpy-note-line:first-child {
  text-indent: -1em;
}

.nb-drawer__jpy-note {
  padding-left: 1em;
  margin: 3px 0 0;
  text-align: left;
  font-size: 9px;
  line-height: 1.6;
  color: #121212;
}

/* ご購入手続きへ／商品を見る。商品カードの「カートに入れる」
   （featured-collection-swiper.css の .featured-collection-cart-btn）と同じ緑。 */
.nb-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-top: 10px;
  border-radius: 25px;
  background: #168707;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.nb-drawer__cta:hover { opacity: 0.75; color: #fff; }

/* ---------- 空のとき ---------- */

.nb-drawer__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 0 26px;
}

/* 空のときのイラスト。ヘッダーのカートアイコンと同じ形を大きく、薄いグレーで。 */
.nb-drawer__empty-icon {
  display: block;
  width: 56px;
  height: 64px;
  margin-bottom: 10px;
  color: #b5b5b5;
}

.nb-drawer__empty-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.nb-drawer__empty-title { margin: 0; font-size: 14px; font-weight: 700; }

.nb-drawer__empty-note {
  margin: 0;
  font-size: 11.5px;
  color: #767676;
  line-height: 1.7;
  /* 2 行になったとき「…無料に／なります」と語尾だけ落ちないよう、行の長さをそろえる。 */
  text-wrap: balance;
}

.nb-drawer__empty .nb-drawer__cta { width: 100%; }

/* ---------- フォーカス ---------- */

.nb-drawer :focus-visible {
  outline: 2px solid #121212;
  outline-offset: 2px;
}

/* 狭い端末（パネルの幅 300px 以下＝画面幅 332px 以下）では、合計の 1 行に
   割引前・合計・円の 3 つが並びきらないので、少しずつ詰める。 */
@container nbdrawer (max-width: 300px) {
  .nb-drawer__total strong { font-size: 18px; }
  .nb-drawer__total-was { font-size: 11px; }
  .nb-drawer__total-jpy { font-size: 12px; }
  .nb-drawer__total-amounts { gap: 6px; }
}