.product-code-control{min-width:0;max-width:100%}
.product-code-control>label{display:grid;gap:6px}
.product-code-input{position:relative;min-width:0}
.product-code-input>input{display:block;width:100%;max-width:100%;padding-right:44px!important}
.product-code-tick{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:24px;height:24px;pointer-events:none}
.product-code-tick svg{display:block;width:24px;height:24px}
.product-code-tick[hidden],.product-code-retry[hidden]{display:none!important}
.product-code-feedback{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px;font-size:12px;line-height:1.5;color:#6b756f;overflow-wrap:anywhere}
.product-code-control[data-code-status=valid] .product-code-feedback{color:#1768b8}
.product-code-control[data-code-status=valid] .product-code-input>input{border-color:#78b7ef}
.product-code-control[data-code-status=invalid] .product-code-feedback,.product-code-control[data-code-status=error] .product-code-feedback{color:#a3312b}
.product-code-control[data-code-status=invalid] .product-code-input>input{border-color:#d77b75}
.product-code-retry{font:inherit;min-height:36px;padding:6px 9px;border:1px solid #c9d9e7;border-radius:7px;background:#fff;color:#1768b8;cursor:pointer}
@media(max-width:700px){.product-code-retry{min-height:44px}}