/* RUVO catalog corners · native generated illustrated tier emblems.
   source_refs: sesuo::N5h7IVeCopQmgOKcau5TPQ::06
   Existing brand rainbow retained by user request; ink roles are reassigned. */
.catalog-tile-head {
  --grade-ink: #101a36;
  --grade-paper: #f6f9fc;
  --grade-height: 34px;
  --grade-width: 98px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 50px;
  padding: 8px 10px;
  box-sizing: border-box;
  background: var(--elev);
}
/* The text and material are one native generated bitmap. CSS only crops
   the three complete emblems from their shared transparent canvas, never redraws them. */
.catalog-grade-art {
  display: block;
  position: relative;
  flex: 0 0 124px;
  width: 124px;
  height: 38px;
  overflow: hidden;
}
.catalog-grade-art img {
  position: absolute;
  max-width: none;
  pointer-events: none;
}
 .catalog-grade-art--raw img {
  width: 280.55px; height: 93.52px;
  left: -78.53px; top: 4px;
  clip-path: inset(0 0 69% 0);
}
.catalog-grade-art--psa9 img {
  width: 271.5px; height: 90.5px;
  left: -73.75px; top: -26.38px;
  clip-path: inset(31.2% 0 37.3% 0);
}
.catalog-grade-art--psa10 img {
  width: 249.38px; height: 83.13px;
  left: -62.92px; top: -49.78px;
  clip-path: inset(62.3% 0 0);
}
/* Other real grades remain literal; never label other grades, ARS or BGS as PSA10. */
.catalog-grade {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  color: var(--ink);
  font: 700 14px/1.5 var(--ui);
  white-space: nowrap;
}
.catalog-grade--graded { font-family: var(--mono); }
.catalog-grade strong { font-size: 21px; line-height: 1; }
.catalog-year { font: 700 12px/1.5 var(--mono); color: var(--mute); }
.card-tile .art--missing {
  display: grid;
  place-items: center;
  background-image: none;
}
.catalog-image-missing { padding: 16px; color: var(--mute); text-align: center; font-size: 14px; font-weight: 700; line-height: 1.7; }
.catalog-image-missing small { display: block; margin-top: 6px; font-size: 11px; font-weight: 400; }

/* Keep the complete package visible in the square BOX catalog tile. */
.card-tile.is-box .art { background-size: contain !important; }

/* Approved separate grade/year row above card art. */
.catalog-grade-art--raw,.catalog-grade-art--psa10{width:112px;height:42px;flex-basis:112px}
.catalog-grade-art--raw img,.catalog-grade-art--psa10 img{width:280px;height:140px;max-width:none;clip-path:none;top:-90px;pointer-events:none}
.catalog-grade-art--psa10 img{left:-28px}.catalog-grade-art--raw img{left:-141px}
.catalog-grade{min-height:28px;padding:2px 6px;border-radius:6px;background:rgba(248,250,253,.93);font-size:12px}.catalog-grade strong{font-size:14px}
.catalog-tile-head{position:relative;inset:auto;display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:6px 8px;gap:8px;background:var(--elev);pointer-events:auto}
.catalog-year{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:50px;height:28px;margin:0;padding:0 9px 0 7px;border:1px solid rgba(190,212,227,.7);border-radius:9px 4px 10px 7px;background:linear-gradient(115deg,#fafdff,#e2f1fa);color:#4b6074;font:700 11px/1 var(--mono);box-shadow:0 2px 3px #23374b12;transform:skewX(-9deg);backdrop-filter:none}
.catalog-year::after{content:'';position:absolute;right:-1px;top:-1px;width:10px;height:10px;background:#b2d8cf;clip-path:polygon(0 0,100% 0,100% 100%);border-radius:0 4px 0 0}
.catalog-year span{transform:skewX(9deg)}
body[data-theme=dark] .catalog-year{background:linear-gradient(115deg,#eaf2f9,#d7e9f4);color:#43596c}
@media(max-width:420px){.catalog-tile-head{padding:5px 6px;gap:4px}.catalog-year{min-width:42px;padding:0 6px;font-size:10px;height:26px}.catalog-grade-art--raw,.catalog-grade-art--psa10{flex-basis:112px;width:112px}}