.pet-picker{width:min(100%,330px);min-width:0;margin-inline:auto}
.pet-picker[hidden],.pet-picker [hidden]{display:none!important}
.pet-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.pet-option{position:relative;display:grid;align-content:center;justify-items:center;min-width:0;min-height:74px;padding:2px 4px 4px;border:2px solid #dddccb;border-radius:16px;background:#faf7ec;color:#415242;box-shadow:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pet-option canvas{display:block;max-width:100%;height:auto!important;aspect-ratio:84/62}
.pet-option:hover{border-color:#afbc9f}
.pet-option[aria-checked="true"]{border-color:#739370;background:#e6f1da}
.pet-option:focus-visible,.pet-pages button:focus-visible{outline:3px solid #896d9d;outline-offset:2px}
.pet-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15;font-size:12px;font-weight:750}
.pet-check{display:none;position:absolute;top:3px;right:4px;width:19px;height:19px;border-radius:50%;background:#67875f;color:white;font:800 14px/19px system-ui}
.pet-option[aria-checked="true"] .pet-check{display:block}
.pet-pages{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:4px}
.pet-pages button{min-width:44px;min-height:44px;padding:1px 9px;border:1px solid #c9cfb9;border-radius:14px;background:#f6f4e9;color:#4b604b;font:bold 25px/1 system-ui}
.pet-pages button:disabled{opacity:.4}.pet-pages>span{min-width:42px;text-align:center;font-size:12px;font-weight:700;color:#536353}
.pet-current{position:relative}.pet-current canvas{display:block}.pet-current::after{content:'✓';position:absolute;bottom:2px;right:3px;color:#547650;font:bold 13px/1 system-ui}
@media(max-height:480px) and (min-width:520px){.pet-option{min-height:61px}.pet-option canvas{max-height:43px;width:auto!important}.pet-name{font-size:11px}}