/* J8 — C5/C7 catalog composition. Palette, geometry and motion use the shared kit. */
body[data-j8-catalog] main > .shell { padding-top:var(--kit-pad) !important; }
body[data-j8-catalog] .j8-toolbar { display:flex; flex-wrap:nowrap; align-items:center; gap:var(--rf-s2); padding:var(--rf-s3); margin:0 0 var(--kit-pad); }
body[data-j8-catalog] .j8-toolbar .search-field { flex:1 1 240px; min-width:120px; width:auto; height:var(--kit-touch); margin:0; border-radius:var(--r-pill); background:var(--panel-b); color:var(--text-1); border:1px solid var(--line-strong); }
body[data-j8-catalog] .j8-count { flex:0 1 280px; font:700 var(--kit-meta)/1.5 var(--f-num); color:var(--text-2); margin:0 !important; }
.j8-control { position:relative; flex:none; }
.j8-control summary { list-style:none; white-space:nowrap; min-height:var(--kit-touch); padding-inline:var(--rf-s3); }
.j8-control summary::-webkit-details-marker { display:none; }
.j8-control summary .ic { width:20px; height:20px; }
.j8-control summary .ic:last-child { width:16px; transition:transform var(--c-d-press) var(--c-e-press); }
.j8-control[open] summary .ic:last-child { transform:rotate(180deg); }
.j8-control-panel { display:grid; gap:var(--rf-s3); }
.j8-control > .j8-control-panel { position:absolute; z-index:30; top:calc(100% + 8px); right:0; width:360px; max-width:calc(100vw - 32px); padding:var(--kit-pad); border:1px solid var(--line); border-radius:var(--r-lg); background:var(--overlay); box-shadow:var(--shadow-3); }
.j8-control-panel .chips { display:flex; flex-wrap:wrap; gap:var(--rf-s2); margin:0 !important; padding:0; }
.j8-control-panel .chip-plate { display:none; }
.j8-control-panel .c-chip { min-height:var(--kit-touch); }
.j8-control-panel .c-chip.is-on { color:var(--kit-selected-ink) !important; background:var(--kit-selected) !important; }
.j8-control-panel .facet-row { display:grid; gap:var(--rf-s3); margin:0; }
.j8-control-panel .facet { display:grid; gap:var(--rf-s2); }
.j8-control-panel select { max-width:100%; width:100%; min-height:var(--kit-touch); }
.j8-price-filter { display:grid; grid-template-columns:1fr 1fr; gap:var(--rf-s3); }
.j8-price-filter label { display:grid; gap:var(--rf-s1); font-size:var(--kit-label); }
.j8-price-filter input { width:100%; min-width:0; box-sizing:border-box; min-height:var(--kit-touch); border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--panel); color:var(--text-1); padding:var(--rf-s2); font:inherit; }
.j8-price-filter button { grid-column:1/-1; }
body[data-j8-catalog] :is(#boxes-sort-line,#cards-sort-line,#box-sort-line,#single-sort-line,#psa-sort-line) { display:none; }
body[data-j8-catalog] .j8-view-head { margin-top:var(--kit-pad); }
body[data-j8-catalog] .j8-view-head h2 { font-size:var(--title-h2-size); }
body[data-j8-catalog] :is(.box-grid,.card-grid).c-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--kit-gap); }
body[data-j8-catalog] .card-grid.c-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
body[data-j8-catalog] .v3-tile.c-tile { display:flex; flex-direction:column; padding:0; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow-1); min-width:0; overflow:hidden; position:relative; }
body[data-j8-catalog] .v3-tile .v3-art { aspect-ratio:1; padding:6px; background:var(--panel-b); }
body[data-j8-catalog] .v3-tile-portrait .v3-art { aspect-ratio:744/1040; }
body[data-j8-catalog] .v3-tile .v3-art img { width:100%; height:100%; max-width:100%; max-height:100%; padding:0; object-fit:contain; }
body[data-j8-catalog] .v3-tile .v3-tbody { padding:var(--rf-s3); min-width:0; }
body[data-j8-catalog] .v3-tile .v3-tname { margin:0; min-height:0; font:var(--title-h3-weight) var(--title-h3-size)/var(--title-h3-line) var(--f-jp); color:var(--text-1); display:block; -webkit-line-clamp:unset; overflow:visible; white-space:normal; overflow-wrap:anywhere; }
body[data-j8-catalog] .v3-tile :is(.v3-tmeta,.d1-key) { font:500 var(--kit-meta)/1.4 var(--f-jp); color:var(--text-2); margin-top:var(--rf-s1); }
body[data-j8-catalog] .v3-tile .v3-tmeta { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body[data-j8-catalog] .v3-tile .v3-tprices { width:100%; margin-top:auto; gap:1px; }
body[data-j8-catalog] .v3-tile .v3-tp { background:var(--tray); color:var(--text-1); padding:var(--rf-s3); border:0; min-width:0; }
body[data-j8-catalog] .v3-tile .v3-tv { color:var(--text-1); font-family:var(--f-num); }
body[data-j8-catalog] .v3-tile .v3-tk { color:var(--text-2); font-size:var(--kit-meta); }
body[data-j8-catalog] .v3-tile-prices-solo { display:grid; grid-template-columns:1fr; }
body[data-j8-catalog] .v3-tile > .v3-tdlt { position:static; align-self:flex-start; margin:var(--rf-s2) var(--rf-s3); box-shadow:none; }
body[data-j8-catalog] .v3-tdlt.up { background:var(--up-wash); color:var(--up-text); }
body[data-j8-catalog] .v3-tdlt.dn { background:var(--down-wash); color:var(--down-text); }
body[data-j8-catalog] .c-tile > .c-row-arrow { position:absolute; right:0; bottom:0; width:24px; height:32px; pointer-events:none; }
body[data-j8-catalog] .c-tile .v3-tprices { padding-right:var(--rf-s4); box-sizing:border-box; }
body[data-j8-catalog] .j8-list { display:block; }
body[data-j8-catalog] .j8-list .v3-tile.c-data-row { display:grid; grid-template-columns:var(--row-rank) var(--row-art) minmax(0,2fr) minmax(160px,1fr) var(--row-change) var(--kit-touch); gap:var(--rf-s3); padding:var(--rf-s2) var(--rf-s4); min-height:var(--row-box); border:0; border-radius:0; box-shadow:none; background:none; transform:none; overflow:visible; container-type:normal; }
body[data-j8-catalog] .j8-list .c-data-row.is-card { min-height:var(--row-card); }
body[data-j8-catalog] .j8-list .c-data-row.is-podium { min-height:var(--row-podium); grid-template-columns:var(--row-rank) var(--row-podium-art) minmax(0,2fr) minmax(160px,1fr) var(--row-change) var(--kit-touch); background:var(--panel-b); border-radius:var(--r-row); }
body[data-j8-catalog] .j8-list .c-list .c-data-row + .c-data-row { border-top:1px solid var(--line); }
body[data-j8-catalog] .j8-list .c-row-art img { width:100%; height:100%; object-fit:contain; }
body[data-j8-catalog] .j8-list .c-row-art { height:var(--row-art); }
body[data-j8-catalog] .j8-list .is-card .c-row-art { height:90px; }
body[data-j8-catalog] .j8-list .is-podium .c-row-art { height:120px; }
body[data-j8-catalog] .j8-list .v3-tbody { padding:0; }
body[data-j8-catalog] .j8-list .v3-tprices { display:flex; flex-direction:column; gap:var(--rf-s1); margin:0; width:auto; }
body[data-j8-catalog] .j8-list .v3-tp { display:flex; align-items:baseline; justify-content:flex-end; gap:var(--rf-s2); padding:0; background:none; }
body[data-j8-catalog] .j8-list .v3-tv { font-size:var(--kit-price-m); padding:0; }
body[data-j8-catalog] .j8-list .is-podium .v3-tp:first-child .v3-tv { font-size:var(--kit-price-l); }
body[data-j8-catalog] .j8-list :is(.v3-kind,.v3-tile-grade,.img-approx) { position:static; display:inline-flex; margin-right:var(--rf-s2); transform:none; }
body[data-j8-catalog] .j8-list .v3-tile-grade { display:none; }
body[data-j8-catalog] .j8-list .v3-tdlt { position:static; box-shadow:none; }
body[data-j8-catalog] .j8-list .v3-tp > .d1-price-basis { display:none !important; }
body[data-j8-catalog] .j8-list .c-row-arrow { position:static; }
body[data-j8-catalog] :is(input,summary,.entry-card):focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
 body[data-j8-catalog] .c-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
 body[data-j8-catalog] .j8-list .c-data-row:hover { transform:none; box-shadow:none; }
}
@media (min-width:1680px) {
 body[data-j8-catalog] .box-grid.c-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
 body[data-j8-catalog] .card-grid.c-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
}
@media (min-width:768px) and (max-width:1099px) {
 body[data-j8-catalog] .box-grid.c-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 body[data-j8-catalog] .card-grid.c-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
 body[data-j8-catalog] .j8-count { flex-basis:160px; }
 body[data-j8-catalog] .j8-list .c-data-row { --row-change:72px; --row-rank:24px; gap:var(--rf-s2); }
}
@media (max-width:767px) {
 html.m-shell body[data-j8-catalog] main > .shell { padding-top:var(--rf-s2) !important; }
 html.m-shell body[data-j8-catalog] .page-lead { margin-bottom:var(--rf-s3); }
 html.m-shell body[data-j8-catalog] .j8-toolbar { display:grid !important; grid-template-columns:1fr 1fr; padding:var(--rf-s3); gap:var(--rf-s2); }
 html.m-shell body[data-j8-catalog] .j8-toolbar .search-field { grid-column:1/-1; width:100%; min-width:0; min-height:var(--kit-touch); }
 html.m-shell body[data-j8-catalog] .j8-count { display:block; grid-column:1/-1; margin:0 !important; }
 html.m-shell body[data-j8-catalog] .j8-control summary { justify-content:center; }
 html.m-shell body[data-j8-catalog] :is(.box-grid,.card-grid).c-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--rf-s2); }
 html.m-shell body[data-j8-catalog] .v3-tile .v3-tbody { padding:var(--rf-s2); }
 html.m-shell body[data-j8-catalog] .v3-tile .v3-tp { padding:var(--rf-s2); }
 html.m-shell body[data-j8-catalog] .j8-list { display:block; }
 html.m-shell body[data-j8-catalog] .j8-list .v3-tile.c-data-row { grid-template-columns:64px minmax(0,1fr) minmax(72px,auto) 16px; min-height:var(--row-box); gap:var(--rf-s2); padding:var(--rf-s2); }
 html.m-shell body[data-j8-catalog] .j8-list .c-data-row.is-card { min-height:var(--row-card); }
 html.m-shell body[data-j8-catalog] .j8-list .c-rank { display:none; }
 html.m-shell body[data-j8-catalog] .j8-list .c-row-art { grid-column:1; grid-row:1/3; width:64px; height:64px; }
 html.m-shell body[data-j8-catalog] .j8-list .is-card .c-row-art { height:90px; }
 html.m-shell body[data-j8-catalog] .j8-list .v3-tbody { grid-column:2; grid-row:1/3; padding:0; }
 html.m-shell body[data-j8-catalog] .j8-list .v3-tname { font-size:var(--title-h3-size); line-height:var(--title-h3-line); }
 html.m-shell body[data-j8-catalog] .j8-list .v3-tmeta { -webkit-line-clamp:1; }
 html.m-shell body[data-j8-catalog] .j8-list .v3-tprices { grid-column:3; grid-row:1; align-self:end; }
 html.m-shell body[data-j8-catalog] .j8-list .v3-tp { display:block; padding:0; }
 html.m-shell body[data-j8-catalog] .j8-list .v3-tp:not(:first-child) { display:none; }
 html.m-shell body[data-j8-catalog] .j8-list .v3-tk { display:block !important; font-size:10px; }
 html.m-shell body[data-j8-catalog] .j8-list .v3-tp:first-child .v3-tv { font-size:var(--kit-price-m); }
 html.m-shell body[data-j8-catalog] .j8-row-change { grid-column:3; grid-row:2; align-self:start; justify-self:end; }
 html.m-shell body[data-j8-catalog] .j8-list .c-row-arrow { grid-column:4; grid-row:1/3; width:16px; }
 html.m-shell body[data-j8-catalog] .j8-list :is(.v3-kind,.img-approx) { font-size:10px; }
 html.m-shell body[data-j8-catalog] .j8-list .c-row-art .c-missing { width:64px; height:64px; }
 html.m-shell body[data-j8-catalog] .c-section-head { gap:var(--rf-s2); }
 html.m-shell body[data-j8-catalog] .c-view-toggle { height:var(--c-h-lg); }
 html.m-shell body[data-j8-catalog] .c-view-toggle button { height:var(--c-h-md); }
 .j8-catalog-sheet .j8-control-panel { position:static; width:auto; max-width:none; }
 html.m-shell body[data-j8-catalog] .j8-control-panel #sort-chips, .j8-catalog-sheet #sort-chips { display:flex; }
}
@media (prefers-reduced-motion:reduce) { body[data-j8-catalog] :is(.c-tile,.c-tilt,.c-data-row) { transition:none; animation:none; } }

body[data-j8-catalog] .v3-tile-portrait .v3-tbody > :is(.v3-tile-grade,.v3-tile-yr) { position:static; display:inline-flex; margin:var(--rf-s1) var(--rf-s1) 0 0; transform:none; }
body[data-j8-catalog] .v3-art > .stk { position:absolute; right:var(--rf-s2); top:var(--rf-s2); }
body[data-j8-catalog] .j8-recent { display:flex; flex-wrap:wrap; align-items:center; gap:var(--rf-s2); margin-bottom:var(--kit-gap); }
body[data-j8-catalog] .j8-recent[hidden] { display:none; }
body[data-j8-catalog] .j8-recent button { min-height:var(--kit-touch); }

body[data-j8-catalog] .j8-list .v3-tk { display:block !important; }
body[data-j8-catalog] .j8-row-head { grid-template-columns:var(--row-rank) var(--row-art) minmax(0,2fr) minmax(160px,1fr) var(--row-change) var(--kit-touch); }
body[data-j8-catalog] .j8-row-head > :nth-child(4) { text-align:right; }
@media(max-width:767px) { html.m-shell body[data-j8-catalog] .j8-row-head { display:none; } }

/* R2 J8: identity is visible on touch devices; search + two half-width controls. */
body[data-j8-catalog] .v3-tile .j8-identity { color:var(--text-2); font:700 var(--kit-meta)/1.5 var(--f-jp); white-space:normal; overflow-wrap:anywhere; margin-top:var(--rf-s1); }
@media (max-width:767px) {
 html.m-shell body[data-j8-catalog] .j8-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
 html.m-shell body[data-j8-catalog] .j8-toolbar > .search-field { grid-column:1 / -1; grid-row:1; box-sizing:border-box; }
 html.m-shell body[data-j8-catalog] .j8-toolbar > .j8-sort { grid-column:1; grid-row:2; width:100%; min-width:0; margin:0; }
 html.m-shell body[data-j8-catalog] .j8-toolbar > .j8-filter { grid-column:2; grid-row:2; width:100%; min-width:0; margin:0; }
 html.m-shell body[data-j8-catalog] .j8-control > summary { display:flex; width:100%; box-sizing:border-box; padding-inline:var(--rf-s2); }
 html.m-shell body[data-j8-catalog] .j8-toolbar > .j8-count { grid-row:3; }
}

/* R24: no image means no large showcase, regardless of the chosen sort. */
body[data-j8-catalog="boxes"] .c-grid .j8-no-image .v3-art { aspect-ratio:auto; height:88px; min-height:0; }
body[data-j8-catalog="boxes"] .c-grid .j8-no-image .box-image-missing { min-height:0; height:100%; padding:var(--rf-s2); }
@media (max-width:767px) {
 html.m-shell body[data-j8-catalog="boxes"] #grid.c-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}

body[data-j8-catalog] .v3-tile .j8-cardset-name > span { display:block; }
body[data-j8-catalog] .v3-tile .j8-cardset-name > span:first-child { font-size:var(--kit-label); white-space:nowrap; }

/* R3 P0-6/P2-12: share image, identity, price and change tracks across each tile row.
   A missing change badge leaves its track intact; full names remain readable. */
body[data-j8-catalog] .c-grid > .v3-tile.c-tile {
 display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0; align-content:start;
}
body[data-j8-catalog] .c-grid > .v3-tile > .v3-art { grid-row:1; align-self:start; }
body[data-j8-catalog] .c-grid > .v3-tile > .v3-tbody { grid-row:2; }
body[data-j8-catalog] .c-grid > .v3-tile > .v3-tprices { grid-row:3; margin-top:0; align-self:stretch; align-items:start; align-content:start; }
body[data-j8-catalog] .c-grid > .v3-tile > .v3-tdlt { grid-row:4; align-self:start; justify-self:start; }
body[data-j8-catalog] .c-grid > .v3-tile > .v3-tprices .v3-tp { display:flex; flex-direction:column; align-items:stretch; }
body[data-j8-catalog] .c-grid > .v3-tile .v3-tp > :is(.v3-tk,.d1-price-basis) { min-height:2.8em; line-height:1.4; }
body[data-j8-catalog] .c-grid > .v3-tile .v3-tv { margin-top:0; padding-top:var(--rf-s1); font-size:var(--kit-price-m); line-height:1.4; }
body[data-j8-catalog] .c-grid > .v3-tile .v3-tname { min-height:calc(2 * var(--title-h3-size) * var(--title-h3-line)); text-wrap:balance; overflow-wrap:break-word; word-break:normal; }
body[data-j8-catalog] .v3-tk > span { display:block; white-space:nowrap; }
@media (max-width:767px) {
 /* The legacy mobile main .toolbar rule otherwise beats the catalog grid. */
 html.m-shell body[data-j8-catalog] main .j8-toolbar.c-filters { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--rf-s3); }
 html.m-shell body[data-j8-catalog] .c-grid > .v3-tile .v3-tprices { grid-template-columns:1fr; }
}