variant-radios .product-form__input--right:has(.av-variant-tile){display:flex;flex-wrap:wrap;gap:8px}
.av-variant-tile{position:relative;flex:1 1 220px;max-width:100%;min-width:0}
:is(#av-variant-layout,variant-radios) .av-variant-tile>label{display:flex!important;align-items:center;justify-content:flex-start!important;box-sizing:border-box;width:100%!important;max-width:100%!important;min-height:44px!important;height:auto!important;margin:0!important;padding:12px 14px!important;white-space:normal!important;overflow-wrap:anywhere;text-align:left!important;line-height:1.4!important}
:is(#av-variant-layout,variant-radios) .av-variant-tile.av-variant-has-picture>label{padding-left:82px!important;min-height:76px!important}
.av-variant-picture{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:62px;height:62px;padding:0;border:1px solid #d8dfd2;border-radius:7px;background:#fff;overflow:hidden;cursor:zoom-in;z-index:1}
.av-variant-picture[hidden]{display:none}.av-variant-picture img{display:block;width:100%;height:100%;object-fit:contain}.av-variant-picture span{position:absolute;right:0;bottom:0;background:#fff;color:#194d3b;font-size:17px;line-height:18px;padding:0 3px;border-radius:4px 0 0 0}.av-variant-picture:focus-visible{outline:3px solid #81985a;outline-offset:2px}
.av-variant-dialog{box-sizing:border-box;width:min(94vw,850px);max-width:94vw;max-height:90dvh;padding:44px 12px 12px;border:1px solid #d8dfd2;border-radius:14px;color:#194d3b;background:#fffdf6;overflow:auto}.av-variant-dialog::backdrop{background:rgb(0 0 0 / .65)}.av-variant-close{position:absolute;right:8px;top:4px;width:40px;height:36px;border:0;border-radius:50%;font-size:30px;background:transparent;color:#194d3b;cursor:pointer}.av-variant-caption{text-align:center;padding:0 24px 12px;line-height:1.4;overflow-wrap:anywhere}.av-variant-zoom img{display:block;max-width:100%;height:auto;margin:auto}.av-variant-zoom{overflow:auto}
@media(max-width:749px){.av-variant-tile{flex-basis:100%}.av-variant-dialog{max-height:90vh;max-height:90dvh}}

.av-variant-dialog.av-variant-is-loading::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin: 0 auto 12px;
  border: 3px solid #d8dfd2;
  border-top-color: #194d3b;
  border-radius: 50%;
  animation: av-variant-spin .75s linear infinite;
}
@keyframes av-variant-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .av-variant-dialog.av-variant-is-loading::before { animation: none; }
}

@media (max-width: 749px) {
  .av-variant-dialog .av-variant-zoom {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: max(0px, calc(90dvh - 110px));
  }
  .av-variant-dialog .av-variant-zoom img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .av-variant-dialog.av-variant-is-loading::before { display: none; }
  .av-variant-dialog.av-variant-is-loading .av-variant-zoom::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 3px solid #d8dfd2;
    border-top-color: #194d3b;
    border-radius: 50%;
  }
}
@media (max-width: 749px) and (prefers-reduced-motion: no-preference) {
  .av-variant-dialog.av-variant-is-loading .av-variant-zoom::before {
    animation: av-variant-spin .75s linear infinite;
  }
}
