/* J8 BOX — preserve the five-card fan and full-card gallery. */
.bx-page .bx-main { grid-template-areas:"price rail" "action action" "notes notes"; gap:var(--kit-gap) var(--kit-pad); }
.bx-page .bx-main > div:first-child { grid-area:price; }
.bx-page .bx-main > .bx-rail { grid-area:rail; }
.bx-page .bx-main > .j8-primary { grid-area:action; justify-self:start; }
.bx-page .bx-main > .j8-number-notes { grid-area:notes; }
.bx-page .bx-show .bx-ev { font-size:var(--kit-price-xl); }
.j8-number-notes { color:var(--text-2); font-size:var(--kit-label); text-align:left; }
.j8-number-notes > summary { cursor:pointer; min-height:var(--kit-touch); align-content:center; }
.j8-number-notes:not(:has(.detail-top:not([hidden]))) { display:none; }
.bx-page .j8-primary { margin-block:var(--rf-s2); }
.bx-page .g4-history.j8-shop-list { display:block; margin:var(--kit-gap) 0; padding:0; }
.bx-page .j8-shop-list :is(li,ul) { margin:0; padding:0; border:0; list-style:none; }
.bx-page .j8-shop-entry { position:relative; }
.bx-page .j8-shop-row { grid-template-columns:var(--row-rank) var(--row-art) minmax(0,2fr) minmax(var(--row-number),1fr) var(--kit-touch); padding-right:56px; min-height:var(--row-box); }
.bx-page .j8-shop-row.is-podium { min-height:var(--row-podium); margin-bottom:var(--rf-s3); }
.bx-page .j8-shop-rest .j8-shop-entry + .j8-shop-entry { border-top:1px solid var(--line); }
.bx-page .j8-shop-logo { width:56px; height:56px; display:grid; place-items:center; background:var(--sky-wash); color:var(--sky-text); border-radius:var(--r-pill); font:var(--kit-weight) var(--kit-price-l)/1 var(--f-jp); }
.bx-page .j8-shop-row .c-price { font-size:var(--kit-price-l); }
.bx-page .j8-shop-expand { position:absolute; right:var(--rf-s2); top:var(--rf-s5); background:var(--tray); border-radius:var(--r-pill); }
.bx-page .j8-shop-entry:has(> .is-podium) > .j8-shop-expand { top:44px; }
.bx-page .j8-shop-detail { padding:var(--kit-pad); border-top:1px solid var(--line); }
.bx-page .j8-shop-detail[hidden], .bx-page .g4-best[hidden] { display:none !important; }
.bx-page .j8-shop-detail .g4-source { display:inline-flex; align-items:center; min-height:var(--kit-touch); border:1px solid var(--line-strong); border-radius:var(--r-pill); padding-inline:var(--rf-s4); }
.bx-page .j8-shop-detail .g4-source::after { content:" ↗"; }
.bx-page .g4-note { margin-block:var(--rf-s2); font-size:var(--kit-meta); }
.bx-page .g4-controls button { border-radius:var(--r-pill); min-height:var(--kit-touch); }
.bx-page .g4-controls button[aria-pressed="true"] { background:var(--kit-selected); color:var(--kit-selected-ink); }
@media (max-width:767px) {
 html.m-shell .bx-page { padding-top:var(--rf-s2) !important; }
 html.m-shell .bx-page .bx-crumb-row { margin-bottom:var(--rf-s2); gap:var(--rf-s1); }
 html.m-shell .bx-page .bx-crumb-row > .bx-acts { display:flex; flex-wrap:nowrap; gap:var(--rf-s2); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; padding-bottom:var(--rf-s1); }
 html.m-shell .bx-page .bx-acts > :is(button,a) { flex:none; min-height:var(--kit-touch); height:var(--kit-touch); white-space:nowrap; border-radius:var(--r-pill); }
 html.m-shell .bx-page .bx-art .v3-stage.bx-pic { height:200px; }
 html.m-shell .bx-page .bx-art .v3-stage.bx-pic img { height:100%; padding:0; }
 html.m-shell .bx-page .bx-short { font:var(--title-h1-weight) var(--title-h1-size)/var(--title-h1-line) var(--f-jp); }
 html.m-shell .bx-page .bx-big { font-size:var(--kit-price-xl); }
 html.m-shell .bx-page .bx-main { display:flex; flex-direction:column; gap:var(--rf-s2); }
 html.m-shell .bx-page .bx-main > .j8-primary { display:flex; align-self:stretch; margin:0; }
 html.m-shell .bx-page .bx-main > .bx-rail { order:3; width:100%; box-sizing:border-box; }
 html.m-shell .bx-page .j8-number-notes { align-self:stretch; order:4; }
 html.m-shell .bx-page .j8-shop-row, html.m-shell .bx-page .j8-shop-row.is-podium { grid-template-columns:40px minmax(0,1fr) auto 16px; min-height:88px; gap:var(--rf-s2); padding:var(--rf-s2); }
 html.m-shell .bx-page .j8-shop-row .c-rank { display:none; }
 html.m-shell .bx-page .j8-shop-logo { width:40px; height:40px; font-size:var(--kit-price-m); }
 html.m-shell .bx-page .j8-shop-row .c-price { font-size:var(--kit-price-m); }
 html.m-shell .bx-page .j8-shop-row .c-row-arrow { width:16px; }
 html.m-shell .bx-page .j8-shop-expand, html.m-shell .bx-page .j8-shop-detail { display:none; }
 html.m-shell .bx-page .j8-shop-row .c-row-meta { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
 html.m-shell .bx-page #panel-four_prices :is(.liq-stats,.liq-grid) { grid-template-columns:1fr 1fr; }
}

/* R26: show existing changes and source-specific quotes without changing price bases. */
.bx-page .j8-hero-changes { display:flex; flex-wrap:wrap; align-items:center; gap:var(--rf-s2); margin-top:var(--rf-s2); }
.bx-page .j8-hero-changes small { flex-basis:100%; color:var(--text-2); font-size:var(--kit-meta); }
.bx-page .j8-hero-plain { margin:var(--rf-s2) 0; color:var(--text-2); font:700 var(--kit-label)/1.5 var(--f-jp); }
.bx-page .j8-buy-preview { grid-area:quotes; padding:var(--rf-s3) var(--rf-s4); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-row); }
.bx-page .j8-buy-preview[hidden] { display:none; }
.bx-page .j8-buy-preview .j8-buy-k { margin:0 0 var(--rf-s1); font:700 var(--kit-label)/1.5 var(--f-jp); }
.bx-page .j8-buy-preview ol { list-style:none; padding:0; margin:0; }
.bx-page .j8-buy-preview li + li { border-top:1px solid var(--line); }
.bx-page .j8-buy-preview li a { display:flex; align-items:center; justify-content:space-between; gap:var(--rf-s3); min-height:var(--kit-touch); color:var(--text-1); text-decoration:none; }
.bx-page .j8-buy-preview li span { min-width:0; }
.bx-page .j8-buy-preview strong { display:block; font:700 var(--kit-label)/1.4 var(--f-jp); overflow-wrap:anywhere; }
.bx-page .j8-buy-preview small { display:block; color:var(--text-2); font-size:var(--kit-meta); }
.bx-page .j8-buy-preview .c-price { white-space:nowrap; }
.bx-page .j8-buy-more { display:inline-flex; align-items:center; min-height:var(--kit-touch); color:var(--text-2); font-size:var(--kit-meta); }

@media (min-width:1100px) {
 .bx-page .bx-main:has(.j8-buy-preview:not([hidden])) { grid-template-areas:"price quotes" "action quotes" "rail rail" "notes notes"; align-items:start; }
 .bx-page .bx-main > .j8-buy-preview { padding:var(--rf-s2); border:0; box-shadow:none; }
}
@media (max-width:1099px) and (min-width:768px) {
 .bx-page .bx-main:has(.j8-buy-preview:not([hidden])) { grid-template-areas:"price" "action" "quotes" "rail" "notes"; }
}
@media (max-width:767px) {
 html.m-shell .bx-page .bx-main > .j8-buy-preview { order:2; width:100%; box-sizing:border-box; text-align:left; }
}

@media (max-width:767px) {
 html.m-shell .bx-page .bx-m-gap .bx-m-row { grid-template-columns:minmax(0,1fr) auto; gap:var(--rf-s1) var(--rf-s3); }
 html.m-shell .bx-page .bx-m-gap .bx-m-row > span:first-child { grid-column:1 / -1; font-family:var(--f-jp); }
}

/* R3: a shared three-column rhythm, reachable actions, readable stage changes. */
.bx-page { --bx-gap:var(--kit-gap); }
@media (min-width:1100px) {
 .bx-page .bx { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .bx-page .bx > .bx-nums { grid-column:span 2; }
 .bx-page .bx-art { align-self:start; }
 .bx-page .bx-art .bx-tags { margin-top:var(--rf-s3); }
}
.bx-page .bx-acts > :is(button,a) { box-sizing:border-box; min-height:var(--c-h-lg); height:var(--c-h-lg); min-width:var(--c-h-lg); }
.bx-page .bx-acts .c-iconbtn { width:var(--c-h-lg); }
body[data-theme="dark"] .bx-page .bx-acts :is(.btn-soft,.btn,.ra-alert) { background:color-mix(in srgb,var(--text-1) 14%,transparent); color:var(--text-1); border-color:var(--line-strong); }
.bx-page .bx-ev-d1:is(.up,.dn) { padding:var(--rf-s1) var(--rf-s2); border-radius:var(--r-pill); }
.bx-page .bx-ev-d1.up { background:var(--up-wash); color:var(--up-text); }
.bx-page .bx-ev-d1.dn { background:var(--down-wash); color:var(--down-text); }
.bx-page .bx-ev-d1 small { opacity:1; }
@media (max-width:767px) {
 html.m-shell .bx-page .bx-crumb-row > .bx-acts { flex-wrap:wrap; overflow:visible; padding-bottom:0; gap:var(--rf-s2); }
 html.m-shell .bx-page .bx-acts > :is(button,a) { min-height:var(--c-h-lg); height:auto; white-space:normal; }
 html.m-shell .bx-page .bx-acts > :is(button,a):not(.c-iconbtn) { flex:1 1 auto; }
}

html body .bx-page .bx-acts [aria-pressed="true"] { background:var(--kit-selected); color:var(--kit-selected-ink); }