.hy-bg{margin:20px 0 0;font-family:'Nunito',system-ui,sans-serif}
.hy-bg *{box-sizing:border-box}
.hy-bg__label{font:700 13px/1.3 'Nunito',sans-serif;color:#465575;margin:0 0 8px}
.hy-bg__label span{font-weight:600;color:#8592ab}
.hy-bg__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;border:0}
.hy-bg__opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:2px solid #dce2ec;border-radius:10px;padding:8px 8px 10px;cursor:pointer;transition:border-color .12s ease,background .12s ease}
.hy-bg__opt:hover{border-color:#9db6f5}
.hy-bg__input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.hy-bg__input:checked + .hy-bg__opt,.hy-bg__opt.is-active{border-color:#1a4dd6;background:#f2f6ff}
.hy-bg__input:focus-visible + .hy-bg__opt{outline:3px solid #9db6f5;outline-offset:2px}
.hy-bg__input:disabled + .hy-bg__opt{opacity:.45;cursor:not-allowed}
.hy-bg__thumb{position:relative;width:100%;aspect-ratio:1/1;border-radius:7px;overflow:hidden;background:#f4f6fa;border:1px solid #eef1f7}
.hy-bg__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hy-bg__name{font:800 13px/1.2 'Nunito',sans-serif;color:#16223a;text-align:center;word-break:break-word}
.hy-bg__soldout{font:700 10.5px 'Nunito',sans-serif;color:#c0392b}
@media (max-width:480px){
  .hy-bg__grid{gap:8px}
  .hy-bg__opt{padding:6px 6px 8px;gap:6px}
  .hy-bg__name{font-size:12px}
}