.mousepads-page .mouse img { width: 190px; height: 190px; margin: 0; }
@media (min-width: 701px) {
  .mousepads-page .mouse.featured .caption { font-size: calc(12px * var(--cs, 1) / var(--s, 1)); }
  .mousepads-page .mouse.featured .caption small { font-size: calc(10px * var(--cs, 1) / var(--s, 1)); margin-top: calc(3px * var(--cs, 1) / var(--s, 1)); }
}
.mousepads-page .options.pad-colors { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.mousepads-page .pad-colors .option { flex: 1 1 0; min-width: 0; max-width: 72px; min-height: 0; padding: 10px 0 8px; gap: 7px; background: transparent; }
.mousepads-page .pad-colors .option:hover { background: var(--tile); }
.mousepads-page .pad-colors .option strong { font-size: 12px; font-weight: 500; }
.mousepads-page .pad-colors .option[data-value="any"] { flex: 1 1 100%; max-width: none; min-height: 48px; margin-top: 8px; background: var(--tile); }
.mousepads-page .pad-colors .option[data-value="any"] strong { font-weight: 700; }
.pad-swatch { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); transition: transform .18s, box-shadow .18s; }
.mousepads-page .pad-colors .option.selected { outline: none; background: transparent; }
.mousepads-page .pad-colors .option.selected .pad-swatch { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.mousepads-page .pad-colors .option.selected strong { font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .pad-colors .option:hover .pad-swatch { transform: scale(1.08); }
}
.question-footer #back[hidden] + #reset { left: 26px; }
.pad-shot { display: block; width: 100%; max-width: 96px; height: 56px; margin: 0 auto 8px; object-fit: contain; pointer-events: none; }
.mousepads-page .l-thumb { flex-basis: 40px; width: 40px; height: 40px; }
@media (max-width: 700px) {
  .mousepads-page .options.pad-colors { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; animation: none; }
  .mousepads-page .pad-colors .option { flex: 0 0 60px; min-height: 0; padding: 8px 0 6px; }
  .mousepads-page .pad-colors .option[data-value="any"] { flex: 1 1 100%; min-height: 42px; }
  .pad-colors .pad-swatch { width: 30px; height: 30px; }
  .pad-shot { max-width: 80px; height: 46px; margin-bottom: 6px; }
  .question-footer #back[hidden] + #reset { left: 14px; }
}
@media (max-height: 650px) and (max-width: 700px) {
  .mousepads-page .questionnaire { max-height: 65dvh; overflow-y: auto; padding-top: 18px; }
}