.exclusive-price-field {
    background: #f1f8f5;
    border: 1px solid #c9e1d8;
    border-radius: 12px;
    padding: 14px;
}

/* 常時表示は「商品名・カテゴリー・販売価格・写真」の4つだけ。
   それ以外は ＋説明を追加 と 詳細設定 の中へ畳みます。 */
.selling-price-field {
    background: #f1f8f5;
    border: 1px solid #c9e1d8;
    border-radius: 12px;
    display: grid;
    font-weight: 900;
    gap: 8px;
    padding: 14px;
}

.selling-price-field small {
    color: var(--muted);
    font-weight: 400;
}

/* 提供目標（分）と「コースにする」（2026-10-05）。販売価格の欄と同じ並べ方です。 */
.serve-minutes-field {
    display: grid;
    gap: 8px;
}

.serve-minutes-field small {
    color: var(--muted);
    font-weight: 400;
}

.minutes-input {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.minutes-input input {
    max-width: 110px;
    text-align: right;
}

.link-button {
    background: transparent;
    border: 0;
    color: var(--brand-dark);
    font-weight: 800;
    padding: 0;
    text-decoration: underline;
}

.inheritance-note {
    align-items: baseline;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}

/* 1商品は複数カテゴリーに属せます。チェックを複数入れられることが見た目で伝わるように、
   単一選択に見えるプルダウンではなくチップの並びにしています。 */
.product-categories {
    background: #f1f8f5;
    border: 1px solid #c9e1d8;
    border-radius: 12px;
    margin: 0;
    padding: 14px;
}

.product-categories legend {
    color: var(--brand-dark);
    font-weight: 900;
    padding: 0 6px;
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-categories small {
    color: var(--muted);
    display: block;
    margin-top: 9px;
}

.price-input {
    align-items: center;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

.price-input > span {
    background: #dfede8;
    border: 1px solid #c2d6cf;
    border-radius: 9px 0 0 9px;
    color: var(--brand-dark);
    font-size: 18px;
    font-weight: 900;
    min-height: 50px;
    padding: 10px 12px;
}

/* 高さは50pxにそろえます（2026-10-15）。同じ行の「削除」ボタン（.option-choice-row / .qa-choice-row）も50pxです。
   以前は「¥」の箱44px・入力欄は文字の大きさなり（約49px）・ボタン約43pxで、下端はそろっても上端が段違いでした。 */
.price-input input {
    border-radius: 0 9px 9px 0;
    font-size: 18px;
    font-weight: 900;
    min-height: 50px;
}

.option-choice-row > button,
.qa-choice-row > button {
    min-height: 50px;
}

.selling-price-field {
    background: #fff;
    border: 1px solid #d5e2dd;
    border-radius: 9px;
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
}

.selling-price-field label {
    display: grid;
    gap: 5px;
}

.selling-price-field small {
    color: var(--muted);
    font-size: 11px;
}

.mode-price-input input {
    font-size: 16px;
}

.price-recalculate {
    justify-self: start;
    min-height: 34px;
    padding: 7px 11px;
}

.catalog-bottom-actions {
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-top: 20px;
}

.catalog-bottom-actions button {
    min-width: min(320px, 100%);
}

/* オプション編集。属性は data-option-* で、商品カードの data-field とは別の名前空間です。 */
.option-group-list {
    display: grid;
    gap: 14px;
}

.option-choice-list {
    display: grid;
    gap: 10px;
}

.option-choice-row {
    align-items: end;
    background: #f7faf8;
    border: 1px solid #dfe9e5;
    border-radius: 10px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) 170px auto auto;
    padding: 12px;
}

.option-default-toggle {
    align-items: center;
    display: flex;
    gap: 7px;
    white-space: nowrap;
}

.product-options {
    background: #f4f7fb;
    border: 1px solid #ccd9e8;
    border-radius: 12px;
    margin: 0;
    padding: 14px;
}

.product-options legend {
    color: var(--brand-dark);
    font-weight: 900;
    padding: 0 6px;
}

.option-assign-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 720px) {
    .option-choice-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── 商品タブの中のサブタブ（760px以下の切替バー）─────────────────────────
   クラス名を .tabs / .tab-panel と同じにしてはいけない。openTab() が
   querySelectorAll('.tabs button[data-tab]') / ('.tab-panel') でページ全体から拾うため。
   見た目も外側タブ（ピル）と分けて、こちらが下位の切り替えだと分かるようにする。

   ★761px以上では出さない（2026-09-18 ユーザー指示）。そちらは左メニューの「商品」の下に
     アコーディオンで開くサブ項目（index.php の #catalog-nav）が担当する。下の @media を参照。
     ただしDOMからは消さない。3ペインと同じで、描かないと結線の相手が消える。 */
.subtabs {
    background: #e8efec;
    border-radius: 12px;
    display: flex;
    gap: 6px;
    overflow: auto;
    padding: 5px;
    scrollbar-width: thin;
}

.subtabs button {
    background: transparent;
    border-radius: 9px;
    color: var(--muted);
    flex: 1 1 0;
    min-height: 42px;
    white-space: nowrap;
}

.subtabs button[aria-selected="true"] {
    background: #fff;
    box-shadow: 0 2px 6px rgba(19, 58, 49, .12);
    color: var(--brand-dark);
}

/* .tab-panel と同じ縦積み。[hidden]{display:none!important}（admin.css）が
   この display に勝つので、切り替えは hidden の付け外しだけで足りる。
   ★列は minmax(0,1fr)（2026-10-13）。auto だと「まとめて登録」の表（.ba-table の min-width:640px）の幅まで列が広がり、
     スマホでページが横に伸びて、ヘッダーと中身がずれた。表は .ba-table-wrap の中だけで横に送る（admin.css の .tab-panel と同じ理由）。 */
.subtab-panel {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
}

/* 課金制限中でも「見る」ことは止めない。admin.css の
   .billing-restricted #tab-catalog :is(input,select,textarea,button) から明示的に除外する
   （詳細度 (1,2,1) > (1,1,1)）。止めないと制限中の店舗はカテゴリー画面を開けない。 */
.billing-restricted #tab-catalog .subtabs button {
    opacity: 1;
    pointer-events: auto;
}

/* 761px以上では左メニューのサブ項目（#catalog-nav）が切り替えを受け持つので、
   画面の中の切替バーは出さない。「同じものが2か所」にしないため。
   ★body.has-side-nav の下だけに書く。admin.js が店舗を開いたときに付けるクラスなので、
     JSが途中で止まって左メニューが横タブバーのままでも、この切替バーは出たままになり、
     カテゴリー画面とオプション画面へ行けなくなることがない。 */
@media (min-width: 761px) {
    body.has-side-nav #tab-catalog .subtabs {
        display: none;
    }
}

.member-summary {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

@media (max-width: 760px) {
    .subtabs button {
        font-size: 13px;
        padding: 11px 8px;
    }

}

/* お酒の印。テイクアウトで販売できない理由が、チェックのすぐそばで読めるようにします。 */
.product-alcohol {
    align-items: center;
    display: flex;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 12px;
}

/* ── 売り切れを戻したことの案内 ─────────────────────────────────────────
   メニュー画面と表示順タブの両方の先頭に出す。売り切れのチェックが両方にあるため。
   トーストにしないのは、朝いちばんに開いて3.5秒で消える通知は必ず見落とすため。 */
.sold-out-restored {
    background: #fdf6ec;
    border-left: 4px solid #c98a2e;
    border-radius: 10px;
    color: #5d4a2d;
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 16px;
    padding: 14px 16px;
}

/* ---- メニュー区分（商品タブの4つ目の画面と、テーブルQRタブのセレクタ） ---- */
.menu-channel-note {
    margin: 0 0 14px;
}

.menu-channel-list {
    display: grid;
    gap: 14px;
}

.menu-channel-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 13px;
    padding: 17px;
}

.table-menu-channel {
    font-size: 12px;
    min-width: min(200px, 100%);
}

.menu-channel-default {
    background: #eff9f6;
    border: 1px solid #9ccbc0;
    border-radius: 14px;
    margin-bottom: 20px;
    padding: 16px 18px;
}

.menu-channel-default select {
    max-width: 320px;
}

.menu-channel-default p {
    margin: 10px 0 0;
}



/* ---- 店舗の価格設定（受付設定タブの支払い方法の下。2026-10-06 に商品→メニューから移設。admin.js の pricingPolicyPanel()） ----
   インボイス対象事業者か／設定価格は税抜きか税込みかを、店舗オーナーが1つ決める場所です。
   担当者にはいまの設定を1行で見せるだけで、選択肢とボタンは描きません。
   情報タブの「この項目へ移動する」の着地先なので、固定ヘッダーのぶん scroll-margin-top を取ります。 */
.pricing-policy {
    scroll-margin-top: 96px;
}

.pricing-policy .badge.warn {
    background: #fff3df;
    color: var(--warning);
}

.pricing-current {
    margin: 0 0 14px;
}

.pricing-choice {
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px 14px;
}

.pricing-choice legend {
    color: #40504c;
    font-size: 13px;
    font-weight: 800;
    padding: 0 6px;
}

/* ラジオと見出しを1行に、説明はその下へ。label の既定（display:grid）のままだとラジオが1行を占めます。 */
.pricing-choice label {
    align-items: start;
    column-gap: 8px;
    font-size: 14px;
    grid-template-columns: auto 1fr;
}

.pricing-choice label small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    grid-column: 2;
    line-height: 1.6;
}

/* 旧形式のメニューを開いたときの案内。トーストにしません（次の保存で価格が変わる、消えてはいけない知らせです）。 */
.pricing-migration-notice {
    background: #fff3df;
    border: 1px solid #eed39d;
    border-radius: 12px;
    color: #7c5316;
    font-size: 13px;
    margin-top: 16px;
    padding: 14px 16px;
}

.pricing-migration-notice p {
    margin: 6px 0 8px;
}

.pricing-migration-notice ul {
    margin: 0;
    max-height: 220px;
    overflow: auto;
    padding-left: 20px;
}

/* 確認のポップアップ（index.php の #pricing-confirm-dialog）。商品が多い店舗では一覧が長くなるので、
   表だけをスクロールさせ、「やめる／変更する」がいつも見えるようにします。 */
.pricing-confirm-dialog {
    width: min(720px, calc(100vw - 32px));
}

.pricing-change-scroll {
    border: 1px solid var(--line);
    border-radius: 10px;
    max-height: min(46vh, 380px);
    overflow: auto;
}

.pricing-change-table {
    border-collapse: collapse;
    font-size: 13px;
    width: 100%;
}

.pricing-change-table th,
.pricing-change-table td {
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
    text-align: right;
    white-space: nowrap;
}

.pricing-change-table th[scope="row"],
.pricing-change-table thead th:first-child {
    /* 狭い画面で商品名が1文字ずつ縦に折り返さないよう、幅を確保します（表は枠の中で横にスクロールします）。 */
    min-width: 8em;
    text-align: left;
    white-space: normal;
}

.pricing-change-table thead th {
    background: #f5f8f7;
    position: sticky;
    top: 0;
}

/* ── 「つくる」画面のアコーディオン行（カテゴリー／メニュー／オプション。2026-09-20）──────────
   畳んだ行は名前だけ（商品は画像と「売り切れにする」も）を見せます。admin.js の accordionRow()。

   ★行は admin-sort.css の .sort-row でもあります（つかんで並べ替える対象）。.sort-row は見出しの5列を
     そのまま並べる grid ですが、ここでは見出し（.acc-head）と本体（.acc-body）を縦に積むので、
     grid の列は .acc-head へ移して、行そのものはブロックに戻します。
   ★本体は hidden で隠すだけで、DOMからは消しません（collectCatalog() が null を読んで保存が落ちます）。
     admin.css の [hidden]{display:none!important} が .acc-body の display:grid に勝ちます。
   ★開閉のボタン（.acc-toggle）は、課金制限中も押せるようにします。止めると、制限中の店舗は
     登録済みの内容を見ることもできなくなります（.subtabs button と同じ扱い）。 */
.sort-row.acc-row {
    display: block;
    padding: 0;
}

.acc-head {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px 30px minmax(0, 1fr) auto auto;
    padding: 8px 12px 8px 8px;
}

/* 並べ替えない行（オプション）は、ハンドルと番号と↑↓がありません。 */
.acc-head.is-static {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 12px;
}

.acc-toggle {
    align-items: center;
    background: transparent;
    border-radius: 10px;
    color: var(--ink);
    display: flex;
    font-size: 15px;
    gap: 10px;
    justify-content: flex-start;
    min-height: 44px;
    min-width: 0;
    padding: 4px 6px;
    text-align: left;
    width: 100%;
}

.acc-toggle::after {
    color: var(--muted);
    content: "▾";
    flex: none;
    font-size: 12px;
    margin-left: auto;
}

.acc-toggle[aria-expanded="true"]::after {
    content: "▴";
}

.acc-label {
    font-weight: 800;
    min-width: 0;
    overflow-wrap: anywhere;
}

.acc-thumb {
    background: #eaf0ed;
    border-radius: 8px;
    flex: none;
    height: 44px;
    object-fit: cover;
    width: 44px;
}

.acc-mark {
    background: #e8efec;
    border-radius: 999px;
    color: #43544f;
    flex: none;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
}

.acc-body {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 14px;
    padding: 16px;
}

.acc-row.is-open {
    border-color: #9ccbc0;
}

.product-card-body {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: 110px minmax(0, 1fr);
}

.product-photo {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.catalog-link-notice {
    margin: 0 0 16px;
}

.catalog-link-notice .inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.billing-restricted #tab-catalog .acc-toggle {
    opacity: 1;
    pointer-events: auto;
}

/* 切替バーは、見出し（つくる／ひもづける）ごとに1行です（admin.js の renderCatalog()）。
   7つを1行の横スクロールに押し込むと、後ろの「ひもづける」3つが画面の外に出て見つかりません。
   折り返して積むと、狭い画面で切替バーだけが250px以上になります。
   あふれたぶんは、その行の中だけで横に送ります。ページは横にスクロールさせません。 */
.subtabs {
    display: grid;
    gap: 4px;
    overflow: visible;
}

.subtabs-row {
    align-items: center;
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.subtabs-group {
    color: var(--muted);
    flex: none;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    padding: 0 4px 0 8px;
    width: 6.5em;
}

.subtabs button {
    flex: 1 0 auto;
}

@media (max-width: 640px) {
    /* admin-sort.css が同じ幅で .sort-row を3列に畳むのに合わせます（↑↓は次の行へ）。 */
    .acc-head {
        grid-template-columns: 34px 26px minmax(0, 1fr);
        row-gap: 6px;
    }

    .acc-head .sort-sold-out {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .acc-head .sort-steps {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* スマホの商品の行は、番号を隠し、写真を小さくして、商品名の幅を空けます（2026-10-15）。
   つかむ所・番号・写真・商品名を横1列に並べると、375pxで商品名が約114pxしかなく、5〜6行に折れていました。
   並びの順番は行の上下の位置と ↑↓ で分かるので、番号は読み上げ用にだけ残します。 */
@media (max-width: 560px) {
    .acc-head {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .acc-head .sort-number {
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .acc-thumb {
        height: 36px;
        width: 36px;
    }
}

@media (max-width: 760px) {
    .product-card-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 持ち場（焼き場・ドリンクなど。2026-10-07）。提供目標の欄と同じ並べ方で、入力候補は datalist（#product-station-suggestions）。 */
.product-station-field {
    display: grid;
    gap: 8px;
}

.product-station-field input {
    max-width: 260px;
}

.product-station-field small {
    color: var(--muted);
    font-weight: 400;
}

/* 飲み放題などの制限時間（分）。コースの行にだけ出します（2026-10-07。居酒屋向けUI案 §4.1）。 */
.time-limit-field {
    display: grid;
    gap: 8px;
}

.time-limit-field small {
    color: var(--muted);
    font-weight: 400;
}

/* 商品登録（カテゴリー→商品→オプションを順に入れて登録する画面。2026-10-09。admin-quick-add.js）。
   375px でもページを横にスクロールさせません（欄は1列に落とし、長い名前は折り返す）。 */
.quick-add h4 {
    margin: 0 0 6px;
    font-size: 16px;
}

.quick-add h5 {
    margin: 0;
    font-size: 14px;
}

.qa-steps {
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.qa-steps li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #eef3f1;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.qa-steps li > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qa-step-number {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
}

.qa-steps li.is-current {
    background: var(--brand);
    color: #fff;
}

.qa-steps li.is-current .qa-step-number {
    color: var(--brand);
}

.qa-steps li.is-done {
    background: #dff5ec;
    color: #08634f;
}

.qa-body {
    display: grid;
    gap: 14px;
}

/* 2列の欄は隣の欄（販売価格の下の注記など）に高さをそろえられるので、ラベルの中は上詰めにする。
   詰めないと、行の少ない側（商品名）の見出しと入力欄が余白を分け合って縦に伸び、隣と高さがずれる。 */
.quick-add .form-grid > label {
    align-content: start;
}

.qa-group {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfdfc;
}

.quick-add .qa-choice,
.quick-add .qa-check,
.bulk-add .qa-check,
.bulk-price .qa-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 800;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.quick-add .qa-choice input,
.bulk-add .qa-check input,
.bulk-price .qa-check input,
.quick-add .qa-check input {
    width: auto;
    flex: none;
    margin: 3px 0 0;
}

.qa-indent {
    display: grid;
    gap: 10px;
    margin-left: 24px;
}

.qa-fieldset {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    min-width: 0;
}

.qa-fieldset legend {
    padding: 0 4px;
    color: #40504c;
    font-size: 13px;
    font-weight: 800;
}

.quick-add .qa-note,
.bulk-add .qa-note {
    margin: 0;
    font-weight: 400;
}

.qa-course-list,
.qa-option-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.qa-course-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line);
}

.qa-course-row.is-picked {
    border-color: #9ccbc0;
    background: #eff9f6;
}

.qa-course-timing {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.qa-course-timing label {
    grid-template-columns: auto 76px;
    align-items: center;
}

.qa-option-summary {
    display: block;
    font-weight: 400;
}

.qa-new-option {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #9ccbc0;
    border-radius: 12px;
    background: #fff;
}

.qa-new-option-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.qa-new-option-head button {
    padding: 7px 12px;
    font-size: 13px;
}

.qa-choice-list {
    display: grid;
    gap: 8px;
}

.qa-choice-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 180px) auto;
    gap: 10px;
    align-items: end;
}

.qa-new-option > .ghost,
.qa-group > .ghost {
    justify-self: start;
}

.qa-summary {
    display: grid;
    gap: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.qa-summary > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
}

.qa-summary > div:first-child {
    border-top: 0;
}

.qa-summary dt {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.qa-summary dd {
    margin: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.qa-error {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff0f0;
    color: var(--danger);
    font-weight: 800;
}

.qa-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
}

.qa-nav .primary {
    min-width: 140px;
}

.qa-result {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #9ccbc0;
    border-radius: 12px;
    background: #eff9f6;
}

.qa-result p {
    margin: 0;
    font-weight: 800;
}

.qa-result.is-error {
    border-color: #eed39d;
    background: #fff3df;
}

/* 先へ進む前に確かめてもらう警告（出ないカテゴリー・10,000円以上の価格）。チェックを付けるまで「次へ」で止まります。 */
.qa-warning {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #eed39d;
    border-radius: 12px;
    background: #fff3df;
}

.qa-warning[hidden] {
    display: none;
}

.qa-warning p {
    margin: 0;
    font-weight: 800;
}

/* 課金制限中の注記。描くのは常にで、見せるのは body.billing-restricted のときだけです（quickAddPaneBody() 参照）。 */
.qa-restricted-note {
    display: none;
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff0f0;
    color: var(--danger);
    font-weight: 800;
}

.billing-restricted .qa-restricted-note {
    display: block;
}

.qa-image {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qa-image img {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    background: #e9efec;
    object-fit: contain;
}

/* お客様の画面での見え方。shop/demo/assets/site.css の .product-card（写真ありは横並び・写真なしは文字だけ）を写したものです。 */
.qa-preview {
    margin-top: 16px;
}

.qa-preview-label {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.qa-preview-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    max-width: 420px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(32, 48, 43, .06);
}

.qa-preview-card.no-image {
    display: block;
}

.qa-preview-card img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    background: #e9efec;
    object-fit: contain;
}

.qa-preview-body {
    padding: 12px 14px;
}

.qa-preview-body h5 {
    margin: 0 0 5px;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.qa-preview-body p {
    display: -webkit-box;
    margin: 0 0 10px;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    white-space: pre-line;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.qa-preview-price {
    font-weight: 900;
}

@media (max-width: 760px) {
    .qa-steps li {
        flex-direction: column;
        gap: 2px;
        padding: 6px 4px;
        font-size: 11px;
        text-align: center;
    }

    .qa-steps li > span:last-child {
        max-width: 100%;
    }

    .qa-indent {
        margin-left: 0;
    }

    .qa-choice-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .qa-choice-row button {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .qa-summary > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .qa-nav .primary {
        flex: 1;
    }
}

/* iPhone SE などの狭い幅（2026-10-15）。
   ・選択肢の名前と追加料金を2列にすると、追加料金の欄が約51px（数字が入るのは27px）になり、「100」以上が切れていました。
   ・ステップ表示（1 商品 2 カテゴリー…）は1つ約49pxなので、「カテゴ…」と切らずに折り返します。 */
@media (max-width: 400px) {
    .qa-choice-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .qa-steps li > span:last-child {
        line-height: 1.2;
        overflow: visible;
        white-space: normal;
    }
}

/* まとめて登録の下は、説明文とボタンを縦に積みます（2026-10-15）。横に並べると、ボタン（最小140px）の残りに
   説明文が96〜151pxの細い列で5〜7行に折れていました。 */
@media (max-width: 560px) {
    .bulk-add .qa-nav {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ---- まとめて登録（admin-bulk-add.js。2026-10-10） ---- */
.ba-modes {
    margin-bottom: 14px;
}

/* 表は狭い画面でもページを横に広げず、表の中だけで横に送ります。 */
.ba-table-wrap,
.bulk-price-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.ba-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.ba-table th {
    padding: 6px 4px;
    color: var(--muted);
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
}

.ba-table td {
    padding: 3px 4px;
    vertical-align: middle;
}

.ba-table input {
    padding: 8px 9px;
}

.ba-table th:nth-child(2),
.ba-table th:nth-child(3) {
    width: 26%;
}

.ba-table th:nth-child(4) {
    width: 13%;
}

.ba-no {
    width: 2.2em;
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

.ba-remove {
    width: 44px;
}

.ba-remove button {
    padding: 7px 10px;
}

.ba-row.is-error input {
    border-color: var(--danger);
    background: #fff8f8;
}

.ba-note td {
    padding: 0 4px 8px;
    font-size: 12px;
}

.ba-note td:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.ba-new {
    display: inline-flex;
    border-radius: 999px;
    padding: 2px 8px;
    background: #dff5ec;
    color: #08634f;
    font-weight: 800;
}

.ba-row-error {
    color: var(--danger);
    font-weight: 800;
}

.bulk-add .ba-confirm {
    font-size: 12px;
}

.ba-row-actions {
    margin-top: 10px;
}

.bulk-add .qa-nav {
    align-items: center;
}

/* ---- 価格をまとめて変える（「メニュー」画面の上） ---- */
.bulk-price > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    cursor: pointer;
    list-style: none;
}

.bulk-price > summary::-webkit-details-marker {
    display: none;
}

.bulk-price > summary::before {
    content: "▸";
    color: var(--muted);
}

.bulk-price[open] > summary::before {
    content: "▾";
}

.bulk-price-title {
    font-size: 17px;
    font-weight: 900;
}

/* 1列の最小幅は200pxです（2026-10-15）。130pxだと、iPad・PCの幅でも「端数」の「1円単位（四捨五入）」が切れていました。
   画面が200pxの2列より狭ければ、1列に積みます。 */
.bulk-price-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 10px;
    margin: 16px 0 12px;
}

.bulk-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.bulk-price-table th,
.bulk-price-table td {
    padding: 6px 6px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.bulk-price-table th {
    color: var(--muted);
    font-size: 12px;
}

.bulk-price-table input {
    width: auto;
}

.bulk-price-table tr.is-changed .bulk-price-after {
    color: var(--brand-dark);
    font-weight: 900;
}

.bulk-price .qa-warning,
.bulk-price .inline-actions {
    margin-top: 12px;
}