:root { --ink:#111; --line:#d8d8d8; --muted:#6e6e6e; --paper:#fff; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
body { margin:0; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 30px 18px; border-bottom:1px solid var(--ink); font-size:17px; font-weight:800; letter-spacing:-.02em; }
.bank-name { text-align:right; }
main { padding:0 30px 40px; }
.intro { display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:28px 0 22px; }
h1 { margin:0; font-size:25px; line-height:1; letter-spacing:-.045em; }
.intro p { margin:0; color:var(--muted); font-size:12px; }
.table-head, .product-row { display:grid; grid-template-columns:72px minmax(170px,1.25fr) minmax(300px,1.8fr) minmax(180px,.9fr) 92px; align-items:center; column-gap:18px; }
.table-head { min-height:28px; border-bottom:1px solid var(--ink); color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.product-row { min-height:82px; border-bottom:1px solid var(--line); padding:8px 0; }
.thumb-wrap { width:64px; height:64px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.thumb { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.title { font-size:14px; font-weight:700; line-height:1.15; }
.artist, .kind { color:var(--muted); font-size:11px; line-height:1.3; margin-top:4px; }
.option-list { display:flex; flex-wrap:wrap; gap:5px; }
.option { appearance:none; border:1px solid #bcbcbc; border-radius:999px; background:#fff; color:var(--ink); cursor:pointer; font:600 10px/1 Arial, Helvetica, sans-serif; padding:7px 10px 6px; }
.option:hover { border-color:var(--ink); }
.option.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.sku { font-size:12px; font-weight:700; }
.size { color:var(--muted); font-size:10px; line-height:1.25; margin-top:5px; }
.frame-size { margin-top:2px; }
.download { justify-self:end; color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-size:11px; font-weight:700; }
.download:hover { text-decoration-thickness:2px; }
footer { display:flex; justify-content:space-between; padding:15px 30px 28px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.04em; }
@media (max-width:850px) {
  .table-head { display:none; }
  .product-row { grid-template-columns:64px 1fr auto; grid-template-areas:"image name link" "image options options" "image details details"; row-gap:8px; }
  .thumb-wrap { grid-area:image; }
  .identity { grid-area:name; }
  .option-list { grid-area:options; }
  .details { grid-area:details; }
  .download { grid-area:link; }
}
@media (max-width:560px) {
  .masthead, main, footer { padding-left:16px; padding-right:16px; }
  .masthead { font-size:13px; }
  .intro { display:block; }
  .intro p { margin-top:9px; }
  .product-row { grid-template-columns:58px 1fr; grid-template-areas:"image name" "image options" "image details" "image link"; column-gap:12px; }
  .thumb-wrap { width:54px; height:64px; }
  .download { justify-self:start; }
}