/* ============================================================
   SST Quick Order — PSA back order card grid (psabo)
   sst-psa-backorder-20260903 (E1)

   assets/qo-psa-grid.css (PSA10用) の完全な複製で、スコープ属性だけを
   [data-qo-subgroup="psa10"] -> [data-qo-subgroup="psabo"] に置換したもの。
   元ファイルには一切手を入れていない = このファイルが古いまま配られても、
   新しいまま配られても、PSA10タブの見た目は絶対に変わらない。

   列数・カード寸法・SPのオファーセル縦積み(3列時のステッパー溢れ対策)は
   すべて PSA10 と同一。末尾に psabo 固有のブロック(BACK ORDERバッジ /
   「Also in stock」リンク / 取り寄せ注意書き)を足している。

   quick-order-critical.min.css -> qo-psa-grid.css の後に読み込む前提。
   ============================================================ */

/* ----- tbody: 列数 (ベース = 5列) ----- */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* ----- カード(tr) ----- */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas: "info" "sealed" "nos" !important;
  align-content: start;
  gap: 6px !important;
  padding: 8px 8px 10px !important;
  overflow: hidden;
}

/* ----- 商品セル ----- */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] > td:first-child {
  grid-area: info;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] > td.sst-qo__offer {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ----- 商品リンク: 画像を上、テキストを下に縦積み ----- */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__prod {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-align: center !important;
}

/* ----- カード画像: カード幅いっぱい・PSAスラブ縦長比率 ----- */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__prod img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 118 / 166 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 6px;
  background: #f6f6f6 !important;
  cursor: zoom-in;
}

/* ----- 商品名まわり ----- */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__prod-copy {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  text-align: center;
}

html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__pname {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* ----- 価格を読みやすく ----- */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__offer-price {
  font-size: 14px !important;
  font-weight: 800 !important;
}

html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__offer-label {
  font-size: 9px !important;
}

/* 数量ステッパーは既存CSSが `width:100%` + grid で組んでおり、5列(カード内寸 約188px)でも
   そのまま収まることを実測済み。ここでは何も上書きしない。 */

/* ----- PSA10チップ(画像右上) ----- */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__prod::after {
  content: "PSA 10";
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
}

/* ----- SALE / PRE-ORDER バッジ(画像左上) ----- */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle][data-qo-sale="1"]::after {
  content: "SALE";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 2px 6px;
  border: 1px solid #ca8a04;
  border-radius: 999px;
  background: #facc15;
  color: #422006;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
  pointer-events: none;
}

html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle][data-qo-preorder="1"]:not([data-qo-sale="1"])::after {
  content: "PRE-ORDER";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 2px 6px;
  border: 1px solid #1d4ed8;
  border-radius: 999px;
  background: #dbeafe;
  color: #1e3a8a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
  pointer-events: none;
}

/* ----- PCホバー演出 ----- */
@media (hover: hover) and (pointer: fine) {
  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] {
    transition: box-shadow 0.18s ease, transform 0.18s ease;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
    z-index: 1;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__prod img {
    transition: transform 0.22s ease;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle]:hover .sst-qo__prod img {
    transform: scale(1.04);
  }
}

/* ----- 連鎖読込中のスケルトン(5列シマー) ----- */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"][data-lazy-loading="1"] .sst-qo__lazy {
  display: block;
  min-height: 230px;
  margin-top: 12px;
  border-radius: 8px;
  color: transparent !important;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 8px), #fff calc(20% - 8px), #fff 20%),
    linear-gradient(100deg, #f1f1f1 30%, #e7e7e7 45%, #f1f1f1 60%);
  background-size: 100% 100%, 300% 100%;
  background-position: 0 0, 120% 0;
  animation: sstQoPsaSkeleton 1.1s linear infinite;
}

@keyframes sstQoPsaSkeleton {
  from {
    background-position: 0 0, 120% 0;
  }
  to {
    background-position: 0 0, -180% 0;
  }
}

/* ----- タブレット〜ノートPC(750–1199px): 3列 -----
   2026-07-30時点の見た目をそのまま維持するため、ベースで詰めた値をここで元に戻す。
   (非PSAタブも同幅で3列。バッジ/チップのみ9pxで全幅統一) */
@media (max-width: 1199px) {
  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] {
    gap: 8px !important;
    padding: 10px 10px 12px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__prod {
    gap: 8px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__pname {
    font-size: 13px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__offer-price {
    font-size: 15px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__offer-label {
    font-size: 10px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"][data-lazy-loading="1"] .sst-qo__lazy {
    background-image:
      repeating-linear-gradient(90deg, transparent 0, transparent calc(33.333% - 10px), #fff calc(33.333% - 10px), #fff 33.333%),
      linear-gradient(100deg, #f1f1f1 30%, #e7e7e7 45%, #f1f1f1 60%);
  }
}

/* ----- モバイル(≤749px): 3列 -----
   カード内寸は 375px端末で約103px。文字・余白・ステッパーを最小値まで詰める。 */
@media (max-width: 749px) {
  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] {
    gap: 4px !important;
    padding: 6px 5px 8px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__prod {
    gap: 5px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__pname {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__offer-price {
    font-size: 12px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__offer-label {
    font-size: 8px !important;
  }

  /* オファーセルを縦積みに ----------------------------------------
     既存のモバイル層はセルを `grid-template-areas:"info qty"` の2カラムで組み、
     トラックを `minmax(54px,1fr) 72px` + column-gap 4px = 最小130px に固定している。
     3列化するとセル幅が実測108.7pxまで縮むため、右トラック(ステッパー)が
     カード外へ25.3pxはみ出す。カラムを1本にして info の下に qty を落とす。
     エリア名は既存の子要素(.sst-qo__offer-info=info / .sst-qo__qty=qty)と同名なので
     子側の grid-area 指定はそのまま使える。
     `quote` / `coming-soon` 状態のセルは元から1カラムflexで収まっている(実測)ため、
     既存ルールと同じ :not() 条件で対象から外し、一切触らない。 */
  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__offer-cell:not([data-qo-action-state="quote"]):not([data-qo-action-state="coming-soon"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "info" "qty" !important;
    column-gap: 0 !important;
    row-gap: 4px !important;
    padding: 4px !important;
  }

  /* ステッパー: 幅固定(72px/min/max)を解除してカード幅いっぱいに敷く
     (上のセル規則と同じく quote / coming-soon は対象外) */
  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__offer-cell:not([data-qo-action-state="quote"]):not([data-qo-action-state="coming-soon"]) .sst-qo__qty {
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: 26px minmax(0, 1fr) 26px !important;
    height: 28px !important;
    min-height: 28px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__offer-cell:not([data-qo-action-state="quote"]):not([data-qo-action-state="coming-soon"]) .sst-qo__qty button {
    height: 28px !important;
    min-height: 28px !important;
    line-height: 28px !important;
    font-size: 13px !important;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__offer-cell:not([data-qo-action-state="quote"]):not([data-qo-action-state="coming-soon"]) .sst-qo__qty input {
    height: 28px !important;
    min-height: 28px !important;
    min-width: 0 !important;
    font-size: 12px !important;
  }

  /* チップ/バッジも最小化 */
  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__prod::after {
    top: 3px;
    right: 3px;
    padding: 2px 4px;
    font-size: 8px;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle][data-qo-sale="1"]::after,
  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle][data-qo-preorder="1"]:not([data-qo-sale="1"])::after {
    top: 9px;
    left: 8px;
    padding: 2px 5px;
    font-size: 8px;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"][data-lazy-loading="1"] .sst-qo__lazy {
    min-height: 170px;
    background-image:
      repeating-linear-gradient(90deg, transparent 0, transparent calc(33.333% - 5px), #fff calc(33.333% - 5px), #fff 33.333%),
      linear-gradient(100deg, #f1f1f1 30%, #e7e7e7 45%, #f1f1f1 60%);
  }
}

/* 動きを抑える設定のユーザーにはアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"][data-lazy-loading="1"] .sst-qo__lazy {
    animation: none;
  }

  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle],
  html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__prod img {
    transition: none;
  }
}

/* ============================================================
   psabo 固有ブロック (ここから下は qo-psa-grid.css に無い部分)
   同一セレクタは後勝ちなので、上の複製ブロックの値を上書きする。
   ============================================================ */

/* ----- 画像右上のチップ: "PSA 10" -> 「Back order」バッジ -----
   バッジ文言は行の data-sst-bo-badge (samurai_sword_qo_render_row が
   samurai_sword_qo_text('Back order') を入れる) から取る。CSSに英語を
   埋め込むと10言語の辞書に乗らないため attr() を使う。 */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle] .sst-qo__prod::after {
  content: attr(data-sst-bo-badge);
  background: rgba(30, 64, 175, 0.94);
  max-width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* data-sst-bo-badge が無い行 (万一の取りこぼし) ではチップを出さない。 */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle]:not([data-sst-bo-badge]) .sst-qo__prod::after {
  content: none;
}

/* ----- 受付停止 (DECISIONS §I 47 / 50) -----
   掲載は残すが注文はできない状態。チップは灰色にして、在庫欄の
   「Not accepting orders」と色を揃える。数量ステッパーはサーバ側で
   出さない (actionState=unavailable) ので、ここでは色だけを扱う。 */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-qo-backorder-accepting="0"] .sst-qo__prod::after {
  background: rgba(107, 114, 128, 0.94);
}

html body .sst-qo .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-qo-backorder-accepting="0"] .sst-qo__prod img {
  opacity: 0.62;
}

/* 受付中の取り寄せセルの在庫欄は「Back order」。在庫の緑ではなく取り寄せの青。 */
html body .sst-qo .sst-qo__offer--backorder .sst-qo__offer-stock {
  color: #1d4ed8;
  font-weight: 700;
}

html body .sst-qo .sst-qo__offer--backorder-paused .sst-qo__offer-stock {
  color: #6b7280;
  font-weight: 700;
}

/* ----- カートパネル: 受付停止になった明細 (決定49) -----
   カートに入れた後で停止された行。チェックアウトで弾かれるので、
   パネル側でどの行を外せばよいか分かるようにする。 */
html body .sst-qo .sst-qo__ci--bo-paused {
  background: #f9fafb;
}

html body .sst-qo .sst-qo__ci-bo-paused {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #6b7280;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* SALE / PRE-ORDER バッジは取り寄せ枠では出さない (どちらも即納枠の概念)。 */
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle][data-qo-sale="1"]::after,
html body .sst-qo:not(.sst-qo--list) .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__table tbody tr[data-handle][data-qo-preorder="1"]:not([data-qo-sale="1"])::after {
  content: none;
  display: none;
}

/* ----- 「Also in stock — buy now」リンクは 2026-09-04 (2カート契約 v2 / 決定⑫) で廃止 -----
   2カートでは即納タブへ移った瞬間にカートが通常側へ戻るため、「取り寄せカートを
   作りかけたまま別のカートへ移す」導線になっていた。描画側 (functions.php の
   samurai_sword_qo_render_row) ごと消したので、ここの .sst-qo__bo-instock 一式も削除。 */

/* ----- 取り寄せの固定文言 (グループ見出し直下) ----- */
html body .sst-qo .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__psa-notice--backorder {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #1d4ed8;
  border-radius: 6px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 749px) {
  html body .sst-qo .sst-qo__group[data-qo-subgroup="psabo"] .sst-qo__psa-notice--backorder {
    font-size: 11px;
  }
}

/* ============================================================
   2カート契約 v2 (2026-09-04 / DESIGN.md §6.4 決定④⑧)
   QOカートパネルが「back order カート」になっているあいだの見た目。

   切替はテーマJS が root (.sst-qo) に data-sst-qo-cart-context="backorder" を
   立てるだけ。DOM の増減は data-qo-backorder-banner の1ブロックのみで、
   機能OFF のページ (SST_QO_CONFIG.backorder が出ない) では作られもしない。

   スコープは必ず .sst-qo 配下。ヘッダーのカートドロワー/ミニカートは
   決定① で通常カートのままなので、この配色を漏らしてはいけない。
   ============================================================ */

html body .sst-qo[data-sst-qo-cart-context="backorder"] .sst-qo__cart {
  /* border ではなく inset shadow: パネルの既存の箱寸法を1pxも動かさない。 */
  box-shadow: inset 0 0 0 2px #1d4ed8;
  border-radius: 8px;
}

html body .sst-qo[data-sst-qo-cart-context="backorder"] .sst-qo__cc {
  background: #1d4ed8;
  color: #fff;
}

html body .sst-qo[data-sst-qo-cart-context="backorder"] .sst-qo__btn-checkout:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

html body .sst-qo .sst-qo__bo-banner {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #1d4ed8;
  border-left-width: 4px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1e3a8a;
}

/* WordPress テーマ側のリセットが p/div に display を当てても隠れ続けるように。 */
html body .sst-qo .sst-qo__bo-banner[hidden],
html body .sst-qo .sst-qo__bo-banner-short[hidden] {
  display: none !important;
}

html body .sst-qo .sst-qo__bo-banner-title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html body .sst-qo .sst-qo__bo-banner-copy {
  margin: 3px 0 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

html body .sst-qo .sst-qo__bo-banner-short {
  margin: 7px 0 0;
  padding: 6px 8px;
  border-radius: 4px;
  background: #1d4ed8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

@media (max-width: 749px) {
  html body .sst-qo .sst-qo__bo-banner-copy,
  html body .sst-qo .sst-qo__bo-banner-short {
    font-size: 10.5px;
  }
}