/* ─── 要素の既定値をならす ────────────────────────────────
   2026-08-11、span の入れ子（div>span>span）をやめて意味的なタグへ置き換えた。
   h3 / p / dl / dd / ul には既定の margin や list-style が付くため、
   見た目を変えないようここで打ち消す。
   ⚠ クラス指定の見た目（font-size 等）は各クラス側にあるので触らない。 */
.bpr-ladder :where(h3, p, dl, dd, ul, figure) {
    margin: 0;
    padding: 0;
}

.bpr-ladder :where(ul) {
    list-style: none;
}

/* Block: bigboss/pr-ladder
 * ============================================================
 * グレード階段（B案）
 *   - ブランド／シリーズを価格帯の順に並べる
 *   - モバイルファースト。SPは縦積み、PCは横1行
 *   - 配色はダーク基調。役割安定トークン ink / on-ink を使用
 *     ⚠ --bb-dark / --bb-black / --bb-white は sapphire で反転するため使わない
 * ============================================================ */

.bpr-ladder {
    background: var(--bb-ink);
    color: var(--bb-on-ink);
}

.bpr-ladder__header {
    margin-bottom: 28px;

    @media screen and (min-width: 768px) {
        margin-bottom: 40px;
    }
}

.bpr-ladder__empty {
    font-size: 14px;
    color: var(--bb-on-ink-muted);
}

.bpr-ladder__list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* カード型なのでグリッド。SP1列 → 中間2列 → PC3列 */
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;

    @media screen and (min-width: 640px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media screen and (min-width: 1024px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}

/* ─── カード ──────────────────────────────────────────────
   ⚠ 以前は「価格軸の横バー」で比較させていたが、各ラインの価格幅が
      軸の4〜11%しか占めず点にしか見えなかったため廃止（2026-08-05）。
      いまは 画像 + 訴求文 + タグ で選ばせ、価格は補助情報として置く。 */
.bpr-ladder__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    background: var(--bb-ink-soft);
    color: inherit;
    text-decoration: none;
    transition: var(--bb-transition);
}

/* ⚠ カード全面リンクは廃止した（誤タップの原因になるため）。
   行き先は「詳細」「コメント」「在庫を見る」の3つで、押せる場所を明示している。
   カード hover での色替えもしない（クリックできると誤解させるため）。 */

/* ─── 商品画像（大きく・寄って見せる）────────────────────
   商品カットは背景の余白が広く、そのままだと小さく貧弱に見える。
   scale で寄せて、ホバーでさらに寄る。 */
/* ⚠ 他ブロック（sc-products-list 等）は 4/3 のカードで全景を見せている。
   ここは同じ見え方にせず、横長の帯にしてボディへ大きく寄る。
   16/7 ＝ 4/3 の約70%の高さ。scale で被写体を大きく見せる。 */
.bpr-ladder__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--bb-ink);

    & img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* 商品カットはボディが中央〜やや上にある。寄せたときに
           ヘッド側の余白ではなくボディが残るよう位置を調整する。 */
        object-position: center 42%;
        scale: 1.7;
        transition: scale 0.6s ease;
    }
}

.bpr-ladder__row:hover .bpr-ladder__thumb img {
    scale: 1.85;
}

/* ─── 本文 ────────────────────────────────────────────── */
.bpr-ladder__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    padding: 16px 18px 18px;
}

.bpr-ladder__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.bpr-ladder__rank {
    font-family: var(--bb-font-display);
    font-size: 14px;
    line-height: 1;
    color: var(--bb-accent);
    opacity: 0.8;
}

.bpr-ladder__name {
    font-family: var(--bb-font-display);
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--bb-on-ink);

    @media screen and (min-width: 1024px) {
        font-size: 21px;
    }
}

.bpr-ladder__desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--bb-on-ink-muted);
}

/* ─── 型番の要点 ──────────────────────────────────────────
   詳細本文の「### 型番の見分け方」から自動で拾った行。
   ⚠ モーダルは開かれないと読まれない。E-II のように型番が難解な
      ブランドでは、ここが選定の決め手になるので初見で見せる。
      全文はモーダルに残してあるので、ここは1行に切り詰める。 */
.bpr-ladder__variants {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);

    /* ⚠ 高さは 380px で頭打ちにし、超えた分はこの枠の中でスクロールさせる（2026-08-17）。
          型番が6件あるシリーズ（Fascist）だけカードが極端に高くなり、
          3カラムで並べたときに他のカードとの高さ差が大きくなるため。
       ⚠ 全ページ共通の指定。ページごとに数値を変えない。
       ⚠ overscroll-behavior: contain … 枠の端まで来てもページ側がスクロールしない。
          モバイルで「カードの中を触っているのにページが動く」のを防ぐ。 */
    max-height: 380px;
    overflow-y: auto;
    overscroll-behavior: contain;

    /* スクロールバーは細く、地色になじませる（Firefox） */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--bb-on-ink) 28%, transparent) transparent;

    /* WebKit 系 */
    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: color-mix(in srgb, var(--bb-on-ink) 28%, transparent);
    }

    &:hover::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--bb-on-ink) 42%, transparent);
    }
}

/* ⚠ 横並び（name と note を1行）にしない。
      カードは3カラムで幅が狭く、型番名が長いと説明が途中で切れて意味を失う。
      2026-08-11 に実測して縦積みへ戻した。
   ⚠ 型番と説明は「読ませる本文」。small(12px)にしない（2026-08-12 是正）。 */
.bpr-ladder__variant {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    line-height: 1.6;

    @media screen and (min-width: 1024px) {
        font-size: 16px;
    }
}

.bpr-ladder__variant-name {
    flex: none;
    color: var(--bb-accent);
    font-weight: 700;
    letter-spacing: .02em;
}

/* ─── 型番の見本写真（--photo）──────────────────────────
   ⚠ 写真は「型番の見本」。個体（在庫）の写真ではない。
      個体・価格・購入導線は在庫一覧（sc-products-list）の役割で、
      ここに出すと在庫一覧を見る意味が無くなる（2026-08-14 判断）。
   ⚠ 写真の無い行（既存の全ページ）は --photo が付かないため何も変わらない。 */
.bpr-ladder__variant--photo {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
        "thumb name"
        "thumb note";
    align-items: start;
    column-gap: 10px;
    row-gap: 2px;

    @media screen and (min-width: 1024px) {
        grid-template-columns: 60px minmax(0, 1fr);
        column-gap: 12px;
    }
}

.bpr-ladder__variant--photo .bpr-ladder__variant-name { grid-area: name; }
.bpr-ladder__variant--photo .bpr-ladder__variant-note { grid-area: note; }

.bpr-ladder__variant-thumb {
    grid-area: thumb;
    /* button の既定値を消す */
    appearance: none;
    padding: 0;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    background: color-mix(in srgb, var(--bb-on-ink) 5%, transparent);
    cursor: pointer;
    overflow: hidden;
    /* ⚠ ギターは縦長。正方形で切ると本体が切れるので縦長のまま置く。 */
    aspect-ratio: 3 / 4;
    display: block;
    transition: var(--bb-transition);

    & img {
        display: block;
        width: 100%;
        height: 100%;
        /* 全景を見せる。切り抜かない。 */
        object-fit: contain;
    }

    &:hover {
        border-color: var(--bb-accent);
    }
}

/* 拡大モーダル（写真だけ） */
.bpr-ladder__photo {
    margin: 0;
}

.bpr-ladder__photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 74vh;
    object-fit: contain;
}

.bpr-ladder__photo-cap {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--bb-on-ink);
}

/* ─── モーダル内の「型番 = 説明」──────────────────────────
   ⚠ <br> でつないだ1段落にしない。型番と説明が地続きになり、
      どこからどこまでが1件か読めなくなる（2026-08-14 是正）。 */
.bpr-ladder__modal-defs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.bpr-ladder__modal-def {
    display: flex;
    flex-direction: column;
    gap: 2px;

    & dt {
        color: var(--bb-accent);
        font-weight: 700;
        letter-spacing: .02em;
    }

    & dd {
        margin: 0;
        color: var(--bb-on-ink-muted);
        line-height: 1.8;
    }
}

.bpr-ladder__variant-note {
    color: var(--bb-on-ink-muted);
    /* 2行まで。1行だと「ヒンジ構造により滑らかなアーミン…」のように
       文の途中で切れて何のことか分からなくなる。全文はモーダル側にある。 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
}

/* ─── タグ ────────────────────────────────────────────────
   ⚠ .bsc-hero__tag と「同じ見た目」にすること。
      共通CSSだけ揃えても、テーマ側（prs.css 等）で hero__tag だけ
      アクセント色に上書きされていると差が出る。テーマCSSにも同じ
      上書きを入れること（2026-08-05 に漏れて指摘を受けた）。 */
.bpr-ladder__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bpr-ladder__tag {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255, 255, 255, .08);
    color: var(--bb-on-ink);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--bb-radius-sm);
    border: 1px solid rgba(255, 255, 255, .15);
}

/* ─── 「こんな人に」──────────────────────────────────────
   スペックではなく読み手の状況を書く欄。左の罫線で引用のように見せる。 */
.bpr-ladder__for {
    padding-left: 12px;
    border-left: 2px solid var(--bb-accent);
    font-size: 14px;
    line-height: 1.7;
    color: var(--bb-on-ink);
}

/* ─── フッタ（価格・在庫・CTA）───────────────────────────
   margin-top:auto で、説明の長さが違ってもカード下端に揃う。 */
.bpr-ladder__foot {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--bb-border);
}

.bpr-ladder__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--bb-accent);
    font-variant-numeric: tabular-nums;
}

.bpr-ladder__tilde {
    margin: 0 2px;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.7;
}

.bpr-ladder__count {
    font-size: 12px;
    color: var(--bb-on-ink-muted);
    font-variant-numeric: tabular-nums;
}

.bpr-ladder__cta {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--bb-accent);
    /* span から a になったので下線だけ消す。見た目は従来と同じ。 */
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

.bpr-ladder__note {
    margin: 20px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--bb-on-ink-muted);
}


/* ════════════════════════════════════════
 *  variant: gallery（ビジュアル軸）
 *  価格が主題でない比較（色・雰囲気・テーマ）向け。
 *  画像を主役にし、価格バーは出さない。並び順は編集者の入力順。
 * ════════════════════════════════════════ */

.bpr-ladder--gallery .bpr-ladder__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    @media screen and (min-width: 768px) {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    @media screen and (min-width: 1280px) {
        grid-template-columns: repeat(4, 1fr);
    }
}

.bpr-ladder__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bb-ink-soft);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md, 8px);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: background var(--bb-transition, .2s ease), border-color var(--bb-transition, .2s ease);

    &.is-link:hover,
    &.is-link:focus-visible {
        background: var(--bb-ink-soft-hover);
        border-color: var(--bb-accent);
    }
}

.bpr-ladder__cardimg {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--bb-ink);

    & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.bpr-ladder__cardbody {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 14px;
    flex: 1 1 auto;

    @media screen and (min-width: 768px) {
        padding: 16px 16px 18px;
    }
}

/* キャッチコピー: 主役はブランド名。サイズ・色ともに一段下げる */
.bpr-ladder__catch {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--bb-on-ink);

    @media screen and (min-width: 768px) {
        font-size: 14px;
    }
}

.bpr-ladder--gallery .bpr-ladder__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;

    @media screen and (min-width: 768px) {
        font-size: 17px;
    }
}

/* 価格は補足情報。控えめに、カード下端へ */
.bpr-ladder__cardprice {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bb-on-ink);
}


/* ══════════════════════════════════════════════════════════
   詳細 / コメント（モーダル）
   ══════════════════════════════════════════════════════════ */

/* ⚠ margin-top を付けない。親（__meta）が gap:10px で等間隔に並べているため、
      ここだけ余白を足すと上が22px・下が10pxになり、前後の間隔が食い違う
      （2026-08-11 指摘。variants と actions の間だけ広く見えていた）。 */
.bpr-ladder__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* stretched link より前面に */
    position: relative;
    z-index: 2;
}

.bpr-ladder__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: var(--bb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--bb-on-ink);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    /* タグ（--bb-radius-sm の角丸）と見分けが付くよう、ボタンは丸くする。
       ⚠ 50% にすると横長の要素では楕円になるため、固定値で指定する。 */
    border-radius: 50px;
    cursor: pointer;
    transition: var(--bb-transition);

    &::before {
        font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 12px;
        content: '\f05a';              /* circle-info */
    }

    &:hover,
    &:focus-visible {
        background: rgba(255, 255, 255, .16);
        border-color: rgba(255, 255, 255, .4);
    }
}

/* コメントは別アイコン（吹き出し）で区別する */
.bpr-ladder__more--voice::before {
    content: '\f075';                  /* comment */
}

/* 比較表（COMPARE）への導線。
   ⚠ 「詳細」と並ぶので、押した先が違うことがアイコンで分かるようにする。
      COMPARE は重要なセクションなので、アクセント色で少し前に出す。 */
.bpr-ladder__more--compare {
    text-decoration: none;
    background: color-mix(in srgb, var(--bb-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--bb-accent) 50%, transparent);
    color: var(--bb-on-ink);

    &::before {
        content: '\f0db';              /* columns（表） */
    }

    &:hover {
        background: color-mix(in srgb, var(--bb-accent) 26%, transparent);
    }
}

/* ─── モーダル内の節ナビ ──────────────────────────────────
   ⚠ カード側にボタンを増やして構成を見せるやり方は却下（2026-08-14）。
      入口は「詳しく見る」1つ。中身が何節に分かれているかは、
      開いた先のナビで示し、そのまま移動できるようにする。
   ⚠ 上に貼り付けて（sticky）、読んでいる間も現在地が分かるようにする。 */
.bpr-ladder__modal-nav {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bb-border);
    /* 本文がナビの裏に透けないよう、パネルと同じ地色を敷く */
    background: var(--bb-ink-soft);
}

.bpr-ladder__modal-navbtn {
    appearance: none;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 50px;
    background: rgba(255, 255, 255, .06);
    color: var(--bb-on-ink-muted);
    font-family: var(--bb-font-body);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    transition: var(--bb-transition);

    &:hover {
        color: var(--bb-on-ink);
        border-color: var(--bb-border);
    }

    /* いま読んでいる節 */
    &.is-active {
        background: color-mix(in srgb, var(--bb-accent) 18%, transparent);
        border-color: color-mix(in srgb, var(--bb-accent) 45%, transparent);
        color: var(--bb-on-ink);
        font-weight: 700;
    }
}

.bpr-ladder__modal {
    position: fixed;
    inset: 0;
    z-index: 1100;                     /* drawr(999/100) より前面 */
    display: flex;
    align-items: flex-end;             /* SP: 下から出るシート形式 */
    justify-content: center;

    @media screen and (min-width: 768px) {
        align-items: center;
        padding: 40px 20px;
    }
}

/* ⚠ 非表示指定はネストの中に書かないこと。
   ブロックCSSはブロックエディタにも注入され、WordPress 側で
   セレクタが書き換えられる。ネストしていると変換に失敗して
   `position: fixed; inset: 0` だけが残り、管理画面を全面で覆う。 */
.bpr-ladder__modal[hidden] {
    display: none !important;
}

.bpr-ladder__modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .78);
}

.bpr-ladder__modal-panel {
    position: relative;
    width: 100%;
    max-height: 88svh;
    overflow-y: auto;
    padding: 28px 20px 32px;
    background: var(--bb-ink);
    color: var(--bb-on-ink);
    border-radius: var(--bb-radius-lg) var(--bb-radius-lg) 0 0;

    @media screen and (min-width: 768px) {
        max-width: 720px;
        max-height: 84svh;
        padding: 40px;
        border-radius: var(--bb-radius-lg);
    }
}

.bpr-ladder__modal-close {
    /* ⚠ absolute にしないこと。パネル自身がスクロールするため、
       absolute だと本文と一緒に上へ流れて画面から消える。
       sticky + float で、スクロールしても右上に留める。 */
    position: sticky;
    top: 0;
    z-index: 3;
    float: right;
    width: 36px;
    height: 36px;
    margin: -8px -4px 0 0;
    padding: 0;
    background: var(--bb-ink);
    border: 0;
    border-radius: 50%;
    color: var(--bb-on-ink);
    cursor: pointer;

    &::before {
        font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 18px;
        content: '\f00d';              /* xmark */
    }

    &:hover {
        color: var(--bb-accent);
    }
}

.bpr-ladder__modal-eyebrow {
    margin: 0 0 4px;
    font-family: var(--bb-font-mono);
    font-size: 12px;
    letter-spacing: .18em;
    color: var(--bb-accent);
}

.bpr-ladder__modal-title {
    margin: 0 0 20px;
    font-family: var(--bb-font-display);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.2;

    @media screen and (min-width: 768px) {
        font-size: 36px;
    }
}

.bpr-ladder__modal-body {
    font-size: 14px;
    line-height: 1.9;
    color: var(--bb-on-ink-muted);

    & p {
        margin: 0 0 1.2em;
    }
    & strong {
        color: var(--bb-on-ink);
        font-weight: 700;
    }
}

/* ─── モーダルの節見出し ──────────────────────────────────
   ⚠ 「型番の見分け方 / どう選ぶか / 買い方」の3節構成であることが
      開いた瞬間に分かるようにする。番号と区切り線で節の境界を立てる
      （2026-08-14 指摘：箇条書きのままで工夫が無い）。 */
.bpr-ladder__modal-h {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 2.2em 0 .9em;
    padding-top: 1.2em;
    border-top: 1px solid var(--bb-border);
    font-size: 15px;
    font-weight: 700;
    color: var(--bb-on-ink);

    @media screen and (min-width: 768px) {
        font-size: 16px;
    }

    /* 最初の節は上に線を引かない（タイトルとの間が二重に見えるため） */
    &:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

.bpr-ladder__modal-h-no {
    flex: none;
    font-family: var(--bb-font-display);
    font-size: 12px;
    line-height: 1;
    letter-spacing: .08em;
    color: var(--bb-accent);
}

.bpr-ladder__modal-h-text {
    min-width: 0;
}


/* 管理画面（ブロックエディタ）では position:fixed の要素を出さない。
   ブロックCSSは編集画面にも注入され、JS は動かないため閉じられず、
   編集画面を覆ってしまう（sc-products-list と同じ方式で統一）。 */
.block-editor-page .bpr-ladder__modal,
.wp-admin .bpr-ladder__modal,
body.block-editor-iframe__body .bpr-ladder__modal {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   表示形「比較」（variant = spec）
   シリーズの違いを読ませるための形。1行2枚にして横幅を稼ぎ、
   左に縦位置の写真、右に型番の違いを並べる。
   ⚠ ladder / gallery には影響させない。必ず --spec 配下に書く。
   ═══════════════════════════════════════════════════════════ */
.bpr-ladder--spec .bpr-ladder__list {
    grid-template-columns: 1fr;      /* SP は1列 */

    @media screen and (min-width: 768px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media screen and (min-width: 1024px) {
        /* ⚠ 3列にしない。説明を読ませる形なので幅を優先する */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

/* 写真がある行だけ2カラム。無い行は単カラムのまま＝説明が100%。
   ⚠ SP で縦積みにしない。比率 1:2.73 の縦画像を幅100%で置くと
      320px 幅で高さ約870px になり、1画面が写真だけで埋まる（2026-08-11 実測）。
      幅が狭いほど写真の比率を下げ、本文の幅を確保する。 */
.bpr-ladder--spec .bpr-ladder__row.has-photo {
    grid-template-columns: 26% minmax(0, 1fr);
    align-items: start;

    @media screen and (min-width: 480px) {
        grid-template-columns: 30% minmax(0, 1fr);
    }
}

/* メーカー配布の製品画像は 440×1200（比率 1:2.73）で揃っている（2026-08-11 実測）。
   ⚠ 比率を固定しないと、差し替え時に高さが変わってカードの高さが揃わなくなる。
   ⚠ V字・変形は上下の透明余白が大きい（ARROW 上61/下50・EX-NT 上53/下54 px）。
      contain で収めるため、他機種よりやや小さく見えるのは素材由来。 */
.bpr-ladder--spec .bpr-ladder__photo {
    display: block;
    padding: 16px 8px;

    & img {
        display: block;
        width: 100%;
        aspect-ratio: 440 / 1200;
        object-fit: contain;
    }
}

.bpr-ladder--spec .bpr-ladder__meta {
    min-width: 0;              /* グリッド子の折り返しを効かせる */
}