/* ========================================================================= * SST Quick Order — mobile bottom dock (sst-qo-mobile-dock-20260908) * * 症状 (オーナー報告 2026-09-08 / back order 一般公開直後): * 「quick order 画面のスマホ版だと画面下部の表示がかぶってる」 * * 原因は「画面下端に貼り付く要素が 4 系統あり、互いの高さを知らない」こと。 * 実測 (すべて本番ファイルの静的解析。ファイル:行は下記): * * A. .sst-qo__side:not(--expanded) fixed / bottom:0 / z 1000 * = QO のモバイルカート固定バー。実高 = .sst-qo__cart の高さ。 * quick-order-critical.css:6909(位置) / :7906(<=749px の最終形) * B. .sst-qo__bo-banner grid-area 未指定 * = back order タブのバナー。quick-order.js:4687 が * panel.insertBefore(banner, panel.firstChild) で .sst-qo__cart の * 先頭に差し込むが、<=749px の 2 カラムグリッド * (grid-template-areas:"total actions"; :7907) に領域が無いので * 暗黙の 2 行目 1 列目へ自動配置される。バーが ~60px 高くなり、 * C を下から飲み込む。**今日の一般公開で顕在化した本命**。 * C. .sst-qo__promotion-policy-note / .sst-qo__cart-message * fixed / bottom:calc(62px + safe-area) / z 91 (:876-:900) * - 62px はハードコード。A が 54px(標準) を超えると A の下に潜る * (z 91 < 1000)。--stock-review 時の A は 76px+safe-area (:8310)、 * B が出ると更に +60px。 * - しかも 2 要素が **完全に同じ矩形**。cart-message が出ると * クーポン条件の開示 (policy-note) が完全に隠れる。 * cart-message は back order の受付停止/最低額で出る * (quick-order.js:408-419) ため、今日から常態化した。 * D. .sst-order-help-chat fixed / z 1200 * <=520px で bottom:calc(6.25rem + safe-area)=100px+SA * (plugins/sst-order-help-chat/assets/order-help-chat.css:807) * A が 100px を超えると Checkout ボタンの上に乗る。 * E. .sstt-toasts fixed / z 400 * <=560px で bottom:14px (top-tab.css:704)。A(>=54px, z1000) の * 完全に裏。TOP タブの「カートに入れました」が見えない。 * * 規約 (この 1 枚で固定する): * 下端に貼り付いてよいのは **A だけ**。B と C は A の中の行になる * (= バーの高さに必ず含まれる)。A の実高は qo-mobile-dock.js が * --sst-qo-dock-h に書き出し、D/E/本文の余白はそれを足して積む。 * * L0 --sst-qo-dock-h A の実高 (safe-area 込み) * L1 チャットランチャー max(元の位置, L0 + gap) * L2 予約ピル max(pill の JS 実測, L1 + 56 + gap) * L3 TOP トースト ピルが出ているときだけ L2 + 64 * * 適用範囲: * - このファイルは is_front_page() でだけ enqueue される (functions.php)。 * - body.sst-app (Flutter WebView) は samurai-app-bridge.php:12880- が * 独自のタブバー前提でバーを組み直しているので **全ルールで除外**する。 * - .sst-qo__side--expanded (全画面ドロワー) は現状維持。 * ====================================================================== */ :root { /* JS が動く前 / 非対応環境の既定値。<=749px の標準バー(54px 相当)+safe-area。 */ --sst-qo-dock-h: calc(54px + env(safe-area-inset-bottom)); --sst-qo-dock-gap: 12px; /* Google Customer Reviews バッジが右下に居るときの占有分 (実高 + gap)。 居なければ 0px。qo-mobile-dock.js が実測して書く。 */ --sst-qo-gcr-block: 0px; /* チャットランチャーの元の下限。order-help-chat.css:50 と同値。 <=520px では :807 の 100px 版に差し替える (下のメディアクエリ)。 */ --sst-qo-chat-floor: max(1rem, env(safe-area-inset-bottom)); /* L1: チャットランチャーの bottom。バーと Google バッジの両方を越える。 */ --sst-qo-chat-b: max( var(--sst-qo-chat-floor), calc(var(--sst-qo-dock-h) + var(--sst-qo-dock-gap) + var(--sst-qo-gcr-block)) ); /* L2: ランチャーの上 (ランチャーは 3.5rem=56px 角。order-help-chat.css:93,102)。 */ --sst-qo-float-b: calc(var(--sst-qo-chat-b) + 56px + var(--sst-qo-dock-gap)); } @media (max-width: 520px) { :root { --sst-qo-chat-floor: calc(6.25rem + env(safe-area-inset-bottom)); } } @media (max-width: 1024px) { /* --------------------------------------------------------------- * 1) バーの中身を「行」にする * * .sst-qo__cart-actions を display:contents にして、その子 * (policy-note / cart-message / ship-summary / Checkout) を * .sst-qo__cart の直接のグリッドアイテムに昇格させる。 * DOM は 1 ノードも動かさないので、PC・ドロワー・app では * このメディアクエリの外に出た瞬間に完全に元へ戻る。 * * div に display:contents を当てるのは安全 (暗黙の role を持たない)。 * top-tab.js:3283 が .sst-qo__cart-actions の高さを測るが、その * openCart() は sst-qo-cart-unify-20260828 で到達不能 (top-tab.js:3054)。 * ------------------------------------------------------------- */ html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__cart-actions { display: contents !important; } /* 750-1024px: 3 カラム ("heading total actions" / critical:6922) */ html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__cart { grid-template-areas: "bo bo bo" "msg msg msg" "policy policy policy" "summary summary summary" "heading total act" !important; row-gap: 0 !important; column-gap: 8px !important; align-items: center !important; } html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__bo-banner:not([hidden]) { grid-area: bo !important; } html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__cart-message:not([hidden]) { grid-area: msg !important; } html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__promotion-policy-note { grid-area: policy !important; } html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__ship-summary:not([hidden]) { grid-area: summary !important; } html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__btn-checkout { grid-area: act !important; } /* --------------------------------------------------------------- * 2) 2 つの注記を fixed から外して行にする * (これで bottom:62px のハードコードが消え、重なりも消える) * ------------------------------------------------------------- */ html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__promotion-policy-note, html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__cart-message:not([hidden]) { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 0 6px !important; padding: 4px 8px !important; border-radius: 5px !important; box-shadow: none !important; text-align: left !important; overflow-wrap: anywhere !important; } html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__promotion-policy-note { border: 1px solid #dce5df !important; background: #f7faf8 !important; color: #345143 !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.25 !important; } html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__cart-message:not([hidden]) { border: 1px solid rgba(158, 44, 95, .28) !important; background: #fff8fb !important; color: #7d2249 !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1.25 !important; } /* --------------------------------------------------------------- * 3) back order バナーをバーの 1 行に畳む * 見出しと不足額を 1 行に並べ、説明文はバーでは出さない * (説明文はドロワーと PC では従来どおり出る)。 * ------------------------------------------------------------- */ html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__bo-banner:not([hidden]) { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 2px 8px !important; min-width: 0 !important; margin: 0 0 6px !important; padding: 3px 8px !important; border-width: 1px 1px 1px 4px !important; border-radius: 5px !important; } html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__bo-banner-copy { display: none !important; } html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__bo-banner-title { margin: 0 !important; font-size: 10px !important; line-height: 1.25 !important; white-space: nowrap !important; } /* 不足額のチップ。qo-psabo-grid.css:511 の padding:6px 8px は、 縦積みのカードパネル用の寸法。1 行に畳んだバーでは詰める。 */ html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__bo-banner-short:not([hidden]) { min-width: 0 !important; margin: 0 !important; padding: 2px 6px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; } /* ship-summary も行になったので、行間だけ揃える */ html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__ship-summary:not([hidden]) { margin: 0 0 6px !important; } /* --------------------------------------------------------------- * 3b) 展開ドロワーの Details パネルを流し込みに戻す * * .sst-qo__checkout-extra[open] .sst-qo__checkout-extra-body は * critical:3327 / :690 で position:fixed / bottom:calc(92px + safe-area) / * z-index:100。折りたたみバーでは親が display:none なので出ないが、 * 展開ドロワー (flex 縦積み、order:8) では **開いた瞬間にパネルだけが * ビューポート基準の 92px へ飛び出し**、ドロワー本体と切り離されて * その上に重なる。ドロワーの中身なのだから、中に置く。 * ------------------------------------------------------------- */ html body:not(.sst-app) .sst-qo .sst-qo__side.sst-qo__side--expanded .sst-qo__checkout-extra[open] .sst-qo__checkout-extra-body { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: auto !important; max-height: min(46dvh, 420px) !important; box-shadow: none !important; } /* --------------------------------------------------------------- * 4) 本文の余白をバーの実高に連動させる * 従来は .sst-qo が 78px+safe-area、.sst-qo__main が 150px の * 二重の固定値で、合計 228px の死んだ余白を作りながら、 * バーが 150px を超えると足りなくなっていた。 * ------------------------------------------------------------- */ html body:not(.sst-app) .sst-qo { padding-bottom: calc(var(--sst-qo-dock-h) + 24px) !important; } html body:not(.sst-app) .sst-qo .sst-qo__main { padding-bottom: 8px !important; } /* フッター最下段 (コピーライト) が恒久的にバーの裏に隠れていた */ html body:not(.sst-app) .sst-footer__bottom { padding-bottom: calc(var(--sst-qo-dock-h) + 12px) !important; } /* --------------------------------------------------------------- * 5) 右下の浮遊物を積む * ------------------------------------------------------------- */ /* L1: チャットランチャー。元の位置を下限にして、バー + Google バッジより上へ。 ドラッグで移動された場合は order-help-chat.js:779-780 が style 属性に bottom を書くので、そちらが勝つ (= ドラッグ機能は壊さない)。 [data-position] が top-* のときは bottom:auto なので除外。 */ html body:not(.sst-app) .sst-order-help-chat:not([data-position*="top"]) { bottom: var(--sst-qo-chat-b) !important; } /* L2: 予約ピル。--sst-preorder-pop-b は functions.php:18485 の placePill() が チャットランチャーの実測から書く値。placePill() は load 時にしか走らず バーの伸縮に追従しないので、max() で床を保証する。 */ html body:not(.sst-app) .sst-preorder-pop { bottom: max( var(--sst-preorder-pop-b, calc(env(safe-area-inset-bottom) + 130px)), var(--sst-qo-float-b) ) !important; } /* L2: TOP タブのトースト。既定はランチャーの上。ピルが出ているときだけ さらにその上へ逃がす (:has() 非対応でも既定値で破綻しない)。 */ html body:not(.sst-app) .sstt-toasts { bottom: var(--sst-qo-float-b) !important; } html body:not(.sst-app):has(#sst-preorder-pop:not([hidden])) .sstt-toasts { bottom: calc(var(--sst-qo-float-b) + 64px) !important; } } @media (max-width: 749px) { /* <=749px は 2 カラム (critical:7906)。列数に合わせた領域名を上書き。 */ html body:not(.sst-app) .sst-qo .sst-qo__side:not(.sst-qo__side--expanded) .sst-qo__cart { grid-template-areas: "bo bo" "msg msg" "policy policy" "summary summary" "total act" !important; } } @media (min-width: 1025px) { /* PC ではバーが存在しないので、積み上げ用の変数を無効化しておく。 (JS も 0px を書くが、JS 無効時の保険) */ :root { --sst-qo-dock-h: 0px; } }