/* Size estimator */
.sz4 { --ink: #0a0a0b; --ink-raised: #18181b; --ink-raised-2: #1f1f23; --ink-line: #27272a; --bone: #fafafa; --bone-dim: #a1a1aa; --mute: #8b8b99;
  --hazard: #22d3ee; --hazard-deep: #0e7490; --on-hazard: #06141c; --hz-tint: rgba(34,211,238,.10);
  --money: #ff6a1a; --money-deep: #b4420a; --on-money: #0a0a0b; --mn-tint: rgba(255,106,26,.07);
  --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif; --body: 'Archivo', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, Consolas, monospace;
  display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); min-width: 0; text-align: left;
  color: var(--bone); font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
.sz4 *, .sz4 *::before, .sz4 *::after { box-sizing: border-box; }
.sz4 a { color: inherit; text-decoration: none; }
.sz4 button, .sz4 input, .sz4 select { font: inherit; color: inherit; }
.sz4 a:focus-visible, .sz4 button:focus-visible, .sz4 input:focus-visible, .sz4 select:focus-visible, .sz4 summary:focus-visible, .sz4 [role="button"]:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }
.sz4 img { max-width: 100%; display: block; }
.sz4 [hidden] { display: none !important; }
.sz4 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sz4 h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; margin: 0; line-height: 1.02; font-size: 19px; color: var(--bone); text-wrap: balance; }
.sz4 input, .sz4 select { font: inherit; color: inherit; }
.sz4 input:focus-visible, .sz4 select:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }
.sz4 .sub { color: var(--bone-dim); font-size: 15px; margin: -8px 0 0; max-width: 60ch; }
.sz4 .sec { display: grid; gap: 12px; min-width: 0; }
.sz4 .sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sz4 .sec-h a { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hazard); padding: 12px 0; margin: -12px 0; }
.sz4 .panel { border: 1px solid var(--ink-line); background: var(--ink-raised); padding: 16px; display: grid; gap: 12px; min-width: 0; }
.sz4 .panel.lift { box-shadow: 4px 4px 0 var(--hazard); border-color: var(--hazard); }
.sz4 .lbl { font: 700 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.sz4 .in { width: 100%; min-width: 0; height: 52px; padding: 0 14px; border: 2px solid var(--ink-line); background: var(--ink); color: var(--bone); font: 16px var(--body); outline: 0; border-radius: 0; }
.sz4 .in.filled { border-color: var(--bone-dim); }
.sz4 .in::placeholder { color: var(--mute); }
.sz4 .row { display: flex; gap: 8px; min-width: 0; }
.sz4 .row > .in { flex: 1; }
.sz4 .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sz4 .btn { min-height: 52px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font: 800 14px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sz4 .btn.cy { background: var(--hazard); color: var(--on-hazard); box-shadow: 4px 4px 0 var(--hazard-deep); }
.sz4 .btn.money { background: var(--money); color: var(--on-money); box-shadow: 4px 4px 0 var(--money-deep); }
.sz4 .btn.ghost { background: transparent; color: var(--bone); border: 2px solid var(--bone); box-shadow: 4px 4px 0 var(--hazard); }
.sz4 .btn.line { background: transparent; color: var(--bone); border: 2px solid var(--ink-line); box-shadow: none; }
.sz4 .btn.full { width: 100%; }
.sz4 .btn.sm { min-height: 40px; padding: 0 12px; font-size: 12px; }
.sz4 .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sz4 .chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--ink-line); display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1 var(--body); background: var(--ink); }
.sz4 .chip.on { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.sz4 .note { font-size: 13px; color: var(--bone-dim); }
.sz4 .note b { color: var(--bone); }
.sz4 .ok { color: var(--ok); }
.sz4 .slims { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sz4 .slim { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--ink-line); background: var(--ink-raised); min-width: 0; }
.sz4 .slim img { width: 56px; height: 56px; object-fit: cover; background: #e9e9ec; }
.sz4 .slim span { display: grid; gap: 1px; min-width: 0; }
.sz4 .slim .n { font: 600 13px/1.25 var(--body); overflow-wrap: anywhere; }
.sz4 .slim .p { font: 700 13px var(--mono); color: var(--hazard); }
.sz4 .coupon { border: 2px solid var(--money); padding: 14px; display: grid; gap: 10px; align-items: center; background: linear-gradient(0deg, var(--mn-tint), var(--mn-tint)), var(--ink-raised); }
.sz4 .coupon .k { font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--money); }
.sz4 .coupon .bigc { font: 400 24px/1 var(--display); text-transform: uppercase; }
.sz4 .coupon .small { color: var(--bone-dim); font-size: 13px; }
.sz4 .coupon .small b { color: var(--bone); font-family: var(--mono); }
.sz4 .coupon-txt { display: grid; gap: 8px; min-width: 0; }
.sz4 .cline { font-size: 13.5px; color: var(--bone-dim); }
.sz4 .cline a { color: var(--money); font-weight: 700; }
.sz4 .copyrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--ink-line); }
.sz4 .copyrow b { font: 700 15px var(--mono); }
.sz4 .copy { min-height: 40px; padding: 0 12px; border: 1px solid var(--ink-line); background: none; color: var(--hazard); font: 700 12.5px/1 var(--body); }
@media (min-width: 640px) {
  .sz4 .slims { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sz4 .coupon { grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 18px 20px; }
}
.sz4 .panel { padding: 14px; gap: 12px; }
.sz4 .ts { display: grid; gap: 12px; min-width: 0; }
.sz4 .th { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; }
.sz4 .tl { font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.sz4 .tdiv { height: 1px; background: var(--ink-line); margin: 0 -14px; }
.sz4 .seg { display: inline-flex; border: 2px solid var(--ink-line); background: var(--ink); flex: none; }
.sz4 .seg button { min-height: 40px; padding: 0 11px; border: 0; background: transparent; color: var(--bone-dim); font: 700 12px/1 var(--mono); letter-spacing: .02em; cursor: pointer; white-space: nowrap; }
.sz4 .seg button + button { border-left: 1px solid var(--ink-line); }
.sz4 .seg button.on { background: var(--bone); color: var(--ink); }
.sz4 .fld { display: grid; gap: 6px; min-width: 0; }
.sz4 .r2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sz4 .r3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.sz4 .r3 .seg button { min-height: 48px; padding: 0 10px; }
.sz4 .bh { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sz4 .bl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sz4 .bo { display: grid; gap: 5px; justify-items: center; padding: 3px 3px 7px; border: 2px solid var(--ink-line); background: var(--ink); color: var(--bone-dim); cursor: pointer; min-width: 0; }
.sz4 .bo img { width: 100%; height: auto; aspect-ratio: 1 / 1.3; object-fit: cover; object-position: 50% 45%; background: #0d0d10; }
.sz4 .bo span { font: 700 10px/1.1 var(--mono); text-transform: uppercase; letter-spacing: .01em; }
.sz4 .bo.on { border-color: var(--hazard); color: var(--hazard); box-shadow: 3px 3px 0 var(--hazard-deep); }
.sz4 .us { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 2px solid var(--ink-line); background: var(--ink); }
.sz4 .us button { min-height: 44px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--bone-dim); font: 700 12px/1 var(--mono); cursor: pointer; }
.sz4 .us button + button { border-left: 1px solid var(--ink-line); }
.sz4 .us button.on { background: var(--bone); color: var(--ink); }
.sz4 .sh { border: 1px dashed var(--ink-line); }
.sz4 .sh > summary { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; cursor: pointer; list-style: none; }
.sz4 .sh > summary::-webkit-details-marker { display: none; }
.sz4 .sh > summary::after { content: "+"; margin-left: auto; color: var(--hazard); font: 700 18px/1 var(--mono); }
.sz4 .sh[open] > summary::after { content: "\2212"; }
.sz4 .sh .k1 { font: 700 13px/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.sz4 .sh .k2 { font: 400 12px/1.2 var(--mono); color: var(--bone-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz4 .sh .k2.set { color: var(--bone); }
.sz4 .sh .shb { padding: 2px 12px 12px; display: grid; gap: 12px; }
.sz4 .sh .us { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sz4 .sh .us button:nth-child(5) { border-left: 0; }
.sz4 .sh .us button:nth-child(n+5) { border-top: 1px solid var(--ink-line); }
.sz4 .up { min-height: 40px; padding: 0; border: 0; background: none; color: var(--bone-dim); font: 400 12px/1.3 var(--mono); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: right; }
/* the QC-photo switch at the right of the item's header: a 44 px tall target in the header's 40 px row */
.sz4 .qsw { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -2px 0; padding: 0; border: 0; background: none; color: var(--bone-dim); font: 700 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.sz4 .qsw .qst { position: relative; flex: none; width: 36px; height: 20px; border: 2px solid var(--ink-line); border-radius: 10px; background: var(--ink); }
.sz4 .qsw .qst::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--mute); }
.sz4 .qsw.on .qst { border-color: var(--hazard); background: var(--hazard); }
.sz4 .qsw.on .qst::after { transform: translateX(16px); background: var(--on-hazard); }
.sz4 .qsw:focus-visible { outline: 0; }
.sz4 .qsw:focus-visible .qst { outline: 2px solid var(--hazard); outline-offset: 2px; }
/* high contrast replaces the page's colours: the knob, and the fill when on, take the system's so off and on still differ */
@media (forced-colors: active) {
  .sz4 .qsw .qst::after { background: ButtonText; }
  .sz4 .qsw.on .qst { border-color: Highlight; background: Highlight; }
  .sz4 .qsw.on .qst::after { background: HighlightText; }
}
.sz4 .sec-h a { display: inline-block; padding: 15px 0; margin: -15px 0; }
.sz4 .stp { display: inline-flex; align-items: center; gap: 10px; font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.sz4 .stp b { width: 26px; height: 26px; display: inline-grid; place-items: center; background: var(--hazard); color: var(--on-hazard); font: 700 13px/1 var(--mono); letter-spacing: 0; }
.sz4 .stp.lock { color: var(--mute); }
.sz4 .stp.lock b { background: transparent; border: 1px solid var(--ink-line); color: var(--mute); }
.sz4 .stp.done b { background: var(--ok); color: var(--ink); }
.sz4 .nxt { font: 400 12px/1.3 var(--mono); color: var(--mute); }
.sz4 .sumr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.sz4 .sumr .sv { font: 400 13px/1.4 var(--mono); color: var(--bone-dim); overflow-wrap: anywhere; }
.sz4 .sumr .sv b { color: var(--bone); font-weight: 700; white-space: nowrap; }
.sz4 .sumr .btn { grid-column: 2; grid-row: 1 / span 2; }
.sz4 .sumr.wpic { grid-template-columns: 34px minmax(0, 1fr) auto; }
.sz4 .sumr.wpic img { grid-row: 1 / span 2; width: 34px; height: 46px; object-fit: cover; object-position: 50% 45%; border: 1px solid var(--ink-line); }
.sz4 .sumr.wpic .btn { grid-column: 3; }
.sz4 .ans { border: 1px solid var(--hazard); box-shadow: 4px 4px 0 var(--hazard); background: var(--ink-raised); padding: 16px 14px; display: grid; gap: 14px; min-width: 0; }
.sz4 .adiv { height: 1px; background: var(--ink-line); }
.sz4 .hero { display: grid; gap: 10px; min-width: 0; }
.sz4 .hk { font: 700 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.sz4 .szb { font: 400 76px/.86 var(--display); color: var(--hazard); text-transform: uppercase; }
.sz4 .s1 { margin: 0; font-size: 16px; line-height: 1.45; }
.sz4 .fitc { color: var(--ok); }
.sz4 .conf { display: flex; align-items: center; gap: 10px; }
.sz4 .conf .ct { flex: 1; max-width: 220px; height: 8px; background: var(--ink-line); position: relative; }
.sz4 .conf .ct i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hazard); }
.sz4 .conf .cl { font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.sz4 .upl { margin: 0; padding: 9px 12px; border-left: 3px solid var(--hazard); background: var(--ink); font-size: 14px; line-height: 1.4; }
.sz4 .upl b { color: var(--hazard); }
.sz4 .szr { display: flex; align-items: flex-end; gap: 16px; min-width: 0; }
.sz4 .szr .fl2 { padding-bottom: 6px; font-size: 16px; line-height: 1.35; min-width: 0; }
.sz4 .btw { margin: 0; font-size: 15px; line-height: 1.6; }
.sz4 .sb { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; margin: 0 2px; border: 1px solid var(--bone-dim); font: 700 13px/1 var(--mono); vertical-align: 1px; }
.sz4 .lad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sz4 .lad li { border: 1px solid var(--ink-line); background: var(--ink); padding: 10px 4px 9px; display: grid; gap: 5px; justify-items: center; align-content: start; text-align: center; min-width: 0; }
.sz4 .lad .ls { font: 400 32px/1 var(--display); }
.sz4 .lad .lf { font: 700 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .01em; }
.sz4 .lad .ll { font: 400 10.5px/1.2 var(--mono); color: var(--bone-dim); }
.sz4 .lad .lb { font: 700 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sz4 .lad li.on { background: var(--hazard); border-color: var(--hazard); color: var(--on-hazard); box-shadow: 3px 3px 0 var(--hazard-deep); }
.sz4 .lad li.on .lf, .sz4 .lad li.on .ll { color: var(--on-hazard) !important; }
/* the other sizes are the scale around the pick, not buttons: no box of their own */
.sz4 .lad li:not(.on) { background: none; border-color: transparent; }
.sz4 .pf { margin: 0; font-size: 16px; line-height: 1.5; }
.sz4 .pf b { font-weight: 800; white-space: nowrap; }
.sz4 .pf .ok { color: var(--ok); }
.sz4 .buy { display: grid; gap: 10px; min-width: 0; align-content: start; }
.sz4 .buy .btn { width: 100%; }
.sz4 .buy .btn.line { min-height: 46px; }
.sz4 .itm { display: grid; gap: 4px; min-width: 0; }
.sz4 .itm .ik { font: 700 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.sz4 .itm .it { margin: 0; font: 600 14.5px/1.4 var(--body); overflow-wrap: anywhere; }
.sz4 .qcc { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; min-height: 64px; border: 2px solid var(--hazard); background: linear-gradient(0deg, var(--hz-tint), var(--hz-tint)), var(--ink-raised); }
.sz4 .qcc .qi { font-size: 26px; line-height: 1; }
.sz4 .qcc .qt { display: grid; gap: 3px; min-width: 0; }
.sz4 .qcc .qt b { font: 400 19px/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; }
.sz4 .qcc .qt span { font-size: 13px; color: var(--bone-dim); }
.sz4 .qcc .go { font: 700 20px/1 var(--mono); color: var(--hazard); }
.sz4 .bd { gap: 10px; }
.sz4 .bdn { margin: -2px 0 0; font-size: 13px; color: var(--bone-dim); }
.sz4 .lg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--bone-dim); }
.sz4 .lg i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.sz4 .scs { display: grid; gap: 8px; }
.sz4 .sc { border: 1px solid var(--ink-line); background: var(--ink-raised); padding: 12px; display: grid; gap: 8px; min-width: 0; }
.sz4 .sc.rec { border-color: var(--hazard); }
.sz4 .sct { display: flex; align-items: center; gap: 10px; }
.sz4 .sct .sn { font: 400 24px/1 var(--display); min-width: 30px; }
.sz4 .fp { font: 700 11.5px/1 var(--mono); padding: 5px 8px; }
.sz4 .best { margin-left: auto; font: 700 11px/1 var(--mono); color: var(--hazard); text-transform: uppercase; letter-spacing: .06em; }
.sz4 .ss { margin: 0; font-size: 13.5px; line-height: 1.4; }
.sz4 .eb { position: relative; height: 8px; background: var(--ink-line); }
.sz4 .ez { position: absolute; top: 0; bottom: 0; background: rgba(34, 197, 94, .45); }
.sz4 .ed { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--ink); }
.sz4 .sm { margin: 0; font: 400 12px/1.4 var(--mono); color: var(--bone-dim); }
.sz4 .tbw { border: 1px solid var(--ink-line); background: var(--ink-raised); }
.sz4 .stb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sz4 .stb th { font: 700 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-dim); text-align: left; padding: 10px 6px 8px; border-bottom: 1px solid var(--ink-line); }
.sz4 .stb td { padding: 10px 6px; border-top: 1px solid var(--ink-line); font: 400 13px/1.25 var(--mono); vertical-align: top; }
.sz4 .stb th:first-child, .sz4 .stb td:first-child { padding-left: 12px; }
.sz4 .stb td.z { font: 400 20px/1 var(--display); white-space: nowrap; }
.sz4 .stb td.z i { font: 700 10px/1 var(--mono); font-style: normal; color: var(--hazard); margin-left: 4px; vertical-align: 3px; }
.sz4 .stb tr.on td { background: var(--hz-tint); }
.sz4 .stb tr.on td.z { color: var(--hazard); box-shadow: inset 3px 0 0 var(--hazard); }
.sz4 .stb .lf2 { display: block; font-size: 10.5px; color: var(--bone-dim); margin-top: 3px; }
.sz4 .coll { display: grid; gap: 10px; }
.sz4 .coll > summary { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; cursor: pointer; list-style: none; border: 1px solid var(--ink-line); background: var(--ink-raised); }
.sz4 .coll > summary::-webkit-details-marker { display: none; }
.sz4 .coll > summary .c1 { font: 400 19px/1 var(--display); text-transform: uppercase; }
.sz4 .coll > summary .c2 { font: 400 12px/1 var(--mono); color: var(--bone-dim); }
.sz4 .coll > summary::after { content: "+"; margin-left: auto; color: var(--hazard); font: 700 20px/1 var(--mono); }
.sz4 .coll[open] > summary::after { content: "\2212"; }
.sz4 .copy, .sz4 .copyrow b[data-a] { cursor: pointer; }
@media (min-width: 900px) {
  .sz4 .panel.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; padding: 20px; }
  .sz4 .panel.split > .tdiv { display: none; }
  .sz4 .ans { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; padding: 22px; }
  .sz4 .ans > .adiv { display: none; }
  .sz4 .szb { font-size: 104px; }
  .sz4 .bl, .sz4 .us, .sz4 .bh { max-width: 460px; }
}
.sz4 .route { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font: 700 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sz4 .route.q { border: 1px dashed var(--bone-dim); color: var(--bone-dim); }
.sz4 .route.m { border: 1px solid var(--ok); color: var(--ok); }
.sz4 .lad.l5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.sz4 .lad.l5 .ls { font-size: 28px; }
.sz4 .lad.l5 .lf { font-size: 9.5px; }
.sz4 .addm { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--bone-dim); }
.sz4 .addm p { margin: 0; font-size: 14px; line-height: 1.45; }
.sz4 .msr { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--hazard); background: linear-gradient(0deg, var(--hz-tint), var(--hz-tint)), var(--ink); }
.sz4 .mh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sz4 .mh .lbl { color: var(--bone); }
.sz4 .mtg { font: 700 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.sz4 .mnote { margin: 0; font: 400 12.5px/1.45 var(--mono); color: var(--bone-dim); }
.sz4 .mnote b { color: var(--bone); }
.sz4 .rts { display: grid; gap: 10px; }
.sz4 .rtb { display: grid; gap: 4px; justify-items: center; align-content: center; min-height: 62px; padding: 9px 14px; white-space: normal; text-align: center; }
.sz4 .rtb .r1 { font: 400 21px/1 var(--display); letter-spacing: .02em; }
.sz4 .rtb .r2 { font: 400 12px/1.25 var(--mono); letter-spacing: 0; text-transform: none; }
.sz4 .cmu { color: var(--mute); }
.sz4 .info { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; border: 1px solid var(--hazard); border-radius: 50%; color: var(--hazard); font: 700 10px/1 var(--mono); letter-spacing: 0; text-transform: none; vertical-align: 1px; position: relative; cursor: pointer; }
/* a tap just beside the small circle still opens the guide (31 x 20 px); it stays clear of the box under it */
.sz4 .info::after { content: ""; position: absolute; top: 0; right: -8px; bottom: -4px; left: -8px; }
.sz4 .hint2 { margin: 0; font: 400 12px/1.4 var(--mono); color: var(--bone-dim); }
.sz4 .hint2 .hi { cursor: pointer; }
.sz4 .stp.skip { color: var(--bone-dim); }
.sz4 .stp.skip b { background: transparent; border: 1px dashed var(--bone-dim); color: var(--bone-dim); }
.sz4 .me { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.sz4 .me img { grid-row: 1 / span 3; width: 34px; height: 46px; object-fit: cover; object-position: 50% 45%; border: 1px solid var(--ink-line); }
.sz4 .me .mk { font: 700 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.sz4 .me .mv { font: 400 13px/1.4 var(--mono); color: var(--bone); overflow-wrap: anywhere; }
.sz4 .me .mr { font: 700 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sz4 .me .mr.q { color: var(--bone-dim); }
.sz4 .me .mr.q a { color: var(--hazard); }
.sz4 .me .mr.m { color: var(--ok); }
.sz4 .me .btn { grid-column: 3; grid-row: 1 / span 3; }
.sz4 .lk { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
/* the field and its Paste button are one box: focus rings the box (a ring around the field alone ran under Paste; brand.css rings every input with !important) */
.sz4 .lk:focus-within {outline: 2px solid var(--hazard); outline-offset: 2px;}
.sz4 .lk .in:focus-visible {outline: 0 !important;}
.sz4 .lk .pst:focus-visible {outline: 2px solid var(--hazard); outline-offset: -6px;}
.sz4 .lk .in { border-right: 0; }
.sz4 .lk .pst { min-height: 52px; padding: 0 14px; border: 2px solid var(--ink-line); background: var(--ink-raised); color: var(--hazard); font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.sz4 .again { display: grid; }
.sz4 .wb { font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
.sz4 .why { border: 1px solid var(--ink-line); background: var(--ink); }
.sz4 .why > summary { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; cursor: pointer; list-style: none; }
.sz4 .why > summary::-webkit-details-marker { display: none; }
.sz4 .why > summary .w1 { font: 700 13px/1.2 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--hazard); }
.sz4 .why > summary .w2 { font: 400 12px/1.2 var(--mono); color: var(--bone-dim); }
.sz4 .why > summary::after { content: "+"; margin-left: auto; color: var(--hazard); font: 700 18px/1 var(--mono); }
.sz4 .why[open] > summary::after { content: "\2212"; }
.sz4 .why[open] > summary { border-bottom: 1px solid var(--ink-line); }
.sz4 .wbx { padding: 12px; display: grid; gap: 12px; }
.sz4 .wp { margin: 0; font-size: 14px; line-height: 1.5; }
.sz4 .wp b { white-space: nowrap; }
.sz4 .wk { font: 700 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.sz4 .wrs { display: grid; gap: 7px; }
.sz4 .wr { display: grid; grid-template-columns: 30px minmax(0, 1fr) 82px; gap: 10px; align-items: center; }
.sz4 .wr .ws { font: 400 18px/1 var(--display); color: var(--bone-dim); }
.sz4 .wr .wn { font: 700 11.5px/1.15 var(--mono); text-align: right; }
.sz4 .wr .wn small { display: block; font: 400 9.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .02em; margin-top: 2px; }
.sz4 .wr.on .ws { color: var(--hazard); }
.sz4 .wbar { position: relative; height: 10px; background: var(--ink-line); }
.sz4 .wbar .wz { position: absolute; top: 0; bottom: 0; background: rgba(34, 197, 94, .42); }
.sz4 .wbar .wm { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(34, 197, 94, .9); }
.sz4 .wbar .wd { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid var(--ink); }
.sz4 .wr.on .wbar .wd { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 0 0 2px var(--hazard); }
.sz4 .wax { display: flex; justify-content: space-between; font: 400 10.5px/1.2 var(--mono); color: var(--mute); margin: -2px 92px 0 40px; }
.sz4 .wsep { height: 1px; background: var(--ink-line); }
.sz4 .wt { width: 100%; border-collapse: collapse; font: 400 12.5px/1.2 var(--mono); }
.sz4 .wt th { font: 700 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-dim); text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--ink-line); }
.sz4 .wt td { text-align: right; padding: 7px 4px; border-top: 1px solid var(--ink-line); }
.sz4 .wt th:first-child, .sz4 .wt td:first-child { text-align: left; }
.sz4 .wt tr.on td { color: var(--hazard); font-weight: 700; }
.sz4 .wsure { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 12.5px/1.4 var(--mono); color: var(--bone-dim); }
.sz4 .wsure b { color: var(--bone); }
.sz4 .ans > .buyx { display: grid; gap: 10px; min-width: 0; }
.sz4 .buyx .sec-h h3 { font-size: 17px; }
@media (min-width: 900px) {
  .sz4 .ans > .buyx, .sz4 .ans > .again { grid-column: 1 / -1; }
}

/* the rest of the page's own rules for these class names stay out of the size tool */
.sz4 .hero { text-align: left; margin: 0; max-width: none; }
.sz4 .btn { width: auto; border-radius: 0; transition: none; text-decoration: none; }
.sz4 .btn.full, .sz4 .buy .btn { width: 100%; }
.sz4 .btn:disabled { opacity: .55; cursor: progress; }
.sz4 .in { font-family: var(--body); transition: none; }
.sz4 .in:focus { border-color: var(--hazard); box-shadow: none; }
.sz4 .lad li { list-style: none; }
.sz4 .lad.l6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.sz4 .lad.l6 .ls { font-size: 24px; }
.sz4 .lad.l6 .lf { font-size: 8.5px; }
.sz4 .lad.l4 .lf { font-size: 10.5px; }
.sz4 .lad.lw { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sz4 .lad .ls { overflow-wrap: anywhere; }

/* imperial height: feet and inches side by side */
.sz4 .ftin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }

/* an inline problem with what was typed */
.sz4 .er { margin: 0; padding: 9px 12px; border-left: 3px solid var(--bad); background: rgba(239, 68, 68, .08); color: #fca5a5; font-size: 13.5px; line-height: 1.45; }
.sz4 .bw { margin: 0; font: 400 12px/1.45 var(--mono); color: var(--warn); }

/* the size-chart upload, under the link box */
.sz4 .upz { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--bone-dim); background: var(--ink); cursor: pointer; text-align: left; width: 100%; color: var(--bone-dim); font: 400 12.5px/1.45 var(--mono); }
.sz4 .upz b { color: var(--bone); font: 700 13px/1.3 var(--body); text-transform: uppercase; letter-spacing: .04em; }
.sz4 .upz.drag, .sz4 .upz.hl { border-color: var(--hazard); background: linear-gradient(0deg, var(--hz-tint), var(--hz-tint)), var(--ink); }
/* why the chart is asked for, right over the box: the listing's own chart could not be read */
.sz4 .upm { margin: 0; padding: 9px 12px; border-left: 3px solid var(--hazard); background: var(--hz-tint); color: var(--bone); font-size: 13.5px; line-height: 1.45; scroll-margin-top: 96px; }
.sz4 .upf { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--ok); background: var(--ink); }
.sz4 .upf img { width: 52px; height: 52px; object-fit: cover; border: 1px solid var(--ink-line); }
.sz4 .upf span { font: 400 12.5px/1.35 var(--mono); color: var(--bone); overflow-wrap: anywhere; }
.sz4 .upf button { min-height: 40px; padding: 0 10px; border: 1px solid var(--ink-line); background: none; color: var(--bone-dim); font: 700 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
/* its toggle: Hide upload at the box's bottom right, or the way to open it again where it was; a 44 px target
   6 px clear of the box (or Find my size) above it, so a tap a little high does not land on them */
.sz4 .ts > .up { justify-self: end; min-height: 44px; margin: -6px 0 -12px; }
.sz4 .up.on { color: var(--hazard); }

/* the item row after an answer, for an uploaded chart */
.sz4 .sumr .sv img { display: inline-block; width: 26px; height: 26px; object-fit: cover; vertical-align: middle; margin-right: 6px; border: 1px solid var(--ink-line); }
.sz4 .me .mr a, .sz4 .me .mr button { color: var(--hazard); background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }

/* waiting for the answer */
.sz4 .ans.ld { display: grid; justify-items: center; gap: 10px; padding: 28px 14px; text-align: center; color: var(--bone-dim); font: 400 13px/1.5 var(--mono); }
.sz4 .spin { width: 28px; height: 28px; border: 3px solid rgba(34, 211, 238, .2); border-top-color: var(--hazard); border-radius: 50%; animation: sz4-spin .8s linear infinite; }
@keyframes sz4-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sz4 .spin { animation-duration: 2.4s; } }

/* an answer we could not give: a plain card, never a bogus size */
.sz4 .ans.msg { display: grid; gap: 10px; }
.sz4 .ans.msg.bad { border-color: var(--warn); box-shadow: 4px 4px 0 rgba(245, 158, 11, .45); }
.sz4 .ans.msg .mk2 { font: 700 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.sz4 .ans.msg.bad .mk2 { color: var(--warn); }
.sz4 .ans.msg p { margin: 0; font-size: 15px; line-height: 1.5; }
@media (min-width: 900px) { .sz4 .ans.msg, .sz4 .ans.ld { grid-template-columns: minmax(0, 1fr); } }

/* sized on an estimated chart: said plainly, with the upload for an exact read */
.sz4 .est { margin: 0; padding: 9px 12px; border-left: 3px solid var(--warn); background: var(--ink); font-size: 13.5px; line-height: 1.45; }
.sz4 .est button { padding: 0; border: 0; background: none; color: var(--hazard); font: 700 13.5px/1.45 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* inside the Why box */
.sz4 .wp .wl { padding: 0; border: 0; background: none; color: var(--hazard); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sz4 .wc { display: grid; gap: 6px; }
.sz4 .wc p { margin: 0; padding-left: 10px; border-left: 2px solid var(--warn); font-size: 13.5px; line-height: 1.45; color: var(--bone); }
.sz4 .wtw { overflow-x: auto; }
.sz4 .wim { display: flex; gap: 6px; flex-wrap: wrap; }
.sz4 .wim button { padding: 0; border: 1px solid var(--ink-line); background: var(--ink); cursor: zoom-in; }
.sz4 .wim img { width: 64px; height: 64px; object-fit: cover; }
.sz4 .wfb { display: flex; flex-wrap: wrap; gap: 8px; }
.sz4 .wfb > button { min-height: 40px; padding: 0 12px; border: 1px solid var(--ink-line); background: none; color: var(--bone-dim); font: 700 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.sz4 .rep, .sz4 .fu { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--ink-line); background: var(--ink-raised); }
.sz4 .rep p, .sz4 .fu p { margin: 0; font: 400 12.5px/1.45 var(--mono); color: var(--bone-dim); }
.sz4 .rep p b, .sz4 .fu p b { color: var(--bone); }
/* every field in the report keeps 16px text: phones zoom the page in on a field with smaller text */
.sz4 .rep .in, .sz4 .fu .in { height: 44px; font-size: 16px; }
.sz4 .rep textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 2px solid var(--ink-line); background: var(--ink); color: var(--bone); font: 16px/1.4 var(--body); border-radius: 0; resize: vertical; }
.sz4 .rep .chips button { min-height: 44px; padding: 0 10px; border: 1px solid var(--ink-line); background: var(--ink); color: var(--bone-dim); font: 700 11.5px/1 var(--mono); cursor: pointer; }
.sz4 .rep .chips button.on { border-color: var(--hazard); color: var(--hazard); }
.sz4 .rep .btn, .sz4 .fu .btn { min-height: 44px; }
.sz4 .fu .row { flex-wrap: wrap; }
.sz4 .fu .row .in { flex: 1 1 180px; }
.sz4 .rmsg { font: 400 12px/1.4 var(--mono); color: var(--bone-dim); }

/* no product link known (an uploaded chart): paste it to buy */
.sz4 .bp { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--ink-line); background: var(--ink); }
.sz4 .bp label { font: 700 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); }
.sz4 .bp .btn.off { opacity: .45; cursor: not-allowed; }
.sz4 .bp .rmsg:empty { display: none; }

/* the measuring guide */
.sz4m { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .74); }
.sz4m[hidden] { display: none; }
.sz4m .bx { position: relative; width: 100%; max-width: 340px; max-height: 90vh; overflow: auto; padding: 18px; border: 2px solid var(--hazard, #22d3ee); background: #18181b; color: #fafafa; box-shadow: 6px 6px 0 #0a0a0b; text-align: center; }
.sz4m h4 { margin: 0 0 10px; font: 400 20px/1.05 'Anton', 'Arial Narrow', Impact, sans-serif; text-transform: uppercase; }
.sz4m svg { width: 150px; height: auto; display: block; margin: 0 auto 10px; }
.sz4m img { width: 100%; height: auto; display: block; margin: 0 auto 8px; }
.sz4m p { margin: 0; font: 400 13.5px/1.5 'Archivo', system-ui, sans-serif; color: #a1a1aa; text-align: left; }
.sz4m .x { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: 0; background: none; color: #a1a1aa; font: 400 26px/1 'Archivo', system-ui, sans-serif; cursor: pointer; }

.sz4 .me .mr button { display: inline; }
.sz4 .buy .cline { margin: 13.5px 0; }

/* PC: the page's full width, the same column as the other tools */
@media (min-width: 900px) {
  .sz4 { gap: 20px; }
  .sz4 .panel { padding: 24px; gap: 16px; }
  .sz4 .tdiv { margin: 0 -24px; }

  /* first visit: the link box across the top, then About you across the width */
  .sz4 .panel.split { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 20px; }
  .sz4 .panel.split > .tdiv { display: block; }
  .sz4 .lk .in { height: 72px; padding: 0 22px; font-size: 18px; }
  .sz4 .lk .pst { min-height: 72px; padding: 0 30px; font-size: 13px; }
  .sz4 .upz { padding: 16px 18px; }
  .sz4 .panel.split > .tdiv + .ts { column-gap: 32px; row-gap: 14px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "th build" "hw build" "us build" "sh sh" "note find"; }
  .sz4 .panel.split > .tdiv + .ts > .th { grid-area: th; }
  .sz4 .panel.split > .tdiv + .ts > .r2 { grid-area: hw; }
  .sz4 .panel.split > .tdiv + .ts > .fld:nth-child(3) { grid-area: build; }
  .sz4 .panel.split > .tdiv + .ts > .fld:nth-child(4) { grid-area: us; }
  .sz4 .panel.split > .tdiv + .ts > .sh { grid-area: sh; }
  .sz4 .panel.split > .tdiv + .ts > .mnote { grid-area: note; align-self: center; }
  .sz4 .panel.split > .tdiv + .ts > .er { grid-column: 1 / -1; }
  .sz4 .panel.split > .tdiv + .ts > .btn { grid-area: find; }
  .sz4 .bl, .sz4 .us, .sz4 .bh { max-width: none; }
  .sz4 .bl { gap: 8px; }
  .sz4 .bo { padding: 4px 4px 9px; gap: 7px; }
  .sz4 .bo span { font-size: 11px; }
  .sz4 .us button { min-height: 48px; font-size: 13px; }
  .sz4 [data-a="find"] { min-height: 60px; font-size: 15px; }

  /* next visit: the link box and Find side by side, like QC Finder's paste box */
  .sz4 .panel:not(.split) > .ts { grid-template-columns: minmax(0, 1fr) minmax(240px, 30%); column-gap: 16px; }
  .sz4 .panel:not(.split) > .ts > * { grid-column: 1 / -1; }
  .sz4 .panel:not(.split) > .ts > .th { grid-row: 1; }
  .sz4 .panel:not(.split) > .ts > .lk { grid-row: 2; grid-column: 1; }
  .sz4 .panel:not(.split) > .ts > [data-a="find"] { grid-row: 2; grid-column: 2; min-height: 72px; }

  /* the measurements: four boxes in one row */
  .sz4 .msr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; padding: 16px; }
  .sz4 .msr > * { grid-column: 1 / -1; }
  .sz4 .msr > .r2 { grid-column: span 2; }
  .sz4 .msr > .hint2 { grid-column: 1 / 3; align-self: center; }
  .sz4 .msr > .btn { grid-column: 3 / 5; }
  .sz4 .me img, .sz4 .sumr.wpic img { width: 40px; height: 54px; }
  .sz4 .me { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 14px; }

  /* the answer: the size and the Why box on the left, Buy on the right */
  .sz4 .ans { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 40px; row-gap: 24px; padding: 28px; }
  .sz4 .hero { gap: 14px; }
  .sz4 .lad { gap: 8px; }
  .sz4 .lad li { padding: 18px 6px 16px; gap: 8px; }
  .sz4 .lad .ls { font-size: 52px; }
  .sz4 .lad .lf { font-size: 12px; }
  .sz4 .lad .lb { font-size: 11px; }
  .sz4 .lad.l5 { gap: 8px; }
  .sz4 .lad.l5 .ls { font-size: 46px; }
  .sz4 .lad.l5 .lf { font-size: 11px; }
  .sz4 .lad.l6 { gap: 6px; }
  .sz4 .lad.l6 .ls { font-size: 38px; }
  .sz4 .lad.l6 .lf { font-size: 10px; }
  .sz4 .upl { font-size: 15px; padding: 11px 14px; max-width: none; justify-self: stretch; }
  .sz4 .sh .k1 { white-space: nowrap; }
  .sz4 .why > summary { min-height: 54px; padding: 0 16px; }
  .sz4 .why > summary .w1 { font-size: 14px; }
  .sz4 .wbx { padding: 16px; gap: 14px; }
  .sz4 .wp { font-size: 15px; }
  .sz4 .buy { gap: 14px; position: sticky; top: 104px; }
  .sz4 .buy .btn.money { min-height: 64px; font-size: 16px; }
  .sz4 .buy .copyrow { padding: 14px 16px; }
  .sz4 .buy .copyrow b { font-size: 17px; }
  .sz4 .buy .cline { margin: 0; font-size: 14.5px; }

  /* most bought this week: a row of photo cards, like QC Finder's rails */
  .sz4 .buyx .sec-h h3 { font-size: 22px; }
  .sz4 .buyx .slims { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
  .sz4 .buyx .slim { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 0; padding: 0; }
  .sz4 .buyx .slim:hover { border-color: var(--hazard); }
  .sz4 .buyx .slim img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .sz4 .buyx .slim > span { padding: 8px 10px 10px; gap: 3px; }
  .sz4 .buyx .slim .n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .sz4 .again .btn { min-height: 56px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .sz4 .buyx .slims { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sz4 .buyx .slim:nth-child(n+7) { display: none; }
}
@media (min-width: 1200px) {
  .sz4 .panel.split > .tdiv + .ts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.15fr); grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "th build us" "hw build us" "hw build sh" "note find find"; }
}
@media (max-width: 899px) {
  .sz4 .buyx .slim:nth-child(n+5) { display: none; }
}

/* from QC photos: the photos fetched for the link, or your own; the answer says where it came from */
.sz4 .qcb { display: grid; gap: 10px; min-width: 0; }
.sz4 .qcb .btn.line { min-height: 48px; border-color: var(--bone-dim); }
.sz4 .qcs { margin: 0; font: 400 12.5px/1.45 var(--mono); color: var(--bone); }
.sz4 .qcn { margin: 0; padding: 8px 10px; border-left: 3px solid var(--warn); background: rgba(245, 158, 11, .08); color: #fbbf24; font-size: 13px; line-height: 1.45; }
.sz4 .qcg { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; min-width: 0; }
.sz4 .qct { display: block; padding: 0; border: 1px solid var(--ink-line); background: var(--ink-raised-2); cursor: zoom-in; aspect-ratio: 1 / 1; overflow: hidden; min-width: 0; }
.sz4 .qct img { width: 100%; height: 100%; object-fit: cover; }
.sz4 .qcf { grid-template-columns: auto minmax(0, 1fr) auto; }
.sz4 .qcf .qcfi { display: flex; gap: 3px; }
.sz4 .qcf .qcfi img { width: 34px; height: 34px; object-fit: cover; border: 1px solid var(--ink-line); }
.sz4 .rtr { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sz4 .route.qc { border: 1px solid var(--hazard); color: var(--hazard); }
.sz4 .lad .lsh { font: 700 9px/1.1 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ok); }
.sz4 .lad li.on .lsh { color: var(--on-hazard); }
.sz4 .nx { display: grid; gap: 8px; min-width: 0; }
.sz4 .nx .btn { width: 100%; min-height: 46px; white-space: normal; text-align: center; line-height: 1.2; }
.sz4 .pmf { margin: 0; border: 1px solid var(--ink-line); background: var(--ink-raised); min-width: 0; }
.sz4 .pmw { position: relative; line-height: 0; }
.sz4 .pmw img { width: 100%; height: auto; }
.sz4 .pmw svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sz4 .pmf figcaption { padding: 8px 10px; font-size: 12.5px; line-height: 1.45; color: var(--bone-dim); }
.sz4 .pmf .pr { color: #ff6b6b; }
.sz4 .pmf .pb { color: #6cb4ff; }
.sz4 .mv2 { margin: 0; font: 400 44px/1 var(--display); color: var(--hazard); text-transform: uppercase; overflow-wrap: anywhere; }
.sz4 .wt small { font-size: 9.5px; color: var(--bone-dim); }
.sz4 .wt.mtab th, .sz4 .wt.mtab td { text-align: left; }
@media (min-width: 900px) {
  .sz4 .qcg { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
  .sz4 .lad .lsh { font-size: 10px; }
  .sz4 .mv2 { font-size: 64px; }
  /* the answer's Buy column stays where it is in the card: nothing on the page follows the scroll */
  .sz4.sz4q .buy { position: static; }
}
/* size4.js draws the panel after the page's first paint. Until it is there the box keeps its height, so what is under
   it does not jump when it appears: a first visit's panel on wider screens (a returning visitor's is shorter), and on
   narrower ones enough to keep what is under it off a phone's or tablet's first screen. Only with scripting on:
   without it the box shows its one link. */
@media (scripting: enabled) { .sz4:not(:has(.panel)) { min-height: 700px; } }
@media (scripting: enabled) and (min-width: 900px) { .sz4:not(:has(.panel)) { min-height: 690px; } }
@media (scripting: enabled) and (min-width: 1200px) { .sz4:not(:has(.panel)) { min-height: 583px; } }