.commerce-variants{min-width:0;padding-top:20px;color:#27473f}
.commerce-variants>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}
.commerce-variants h3{margin:0;color:#173f35;font:600 .86rem/1.3 Manrope,sans-serif}
.commerce-variants p{margin:5px 0 0;color:#78847f;font:400 .7rem/1.5 Inter,sans-serif}
.commerce-variants button{min-height:36px;padding:0 12px;border:1px solid #cedbd6;border-radius:9px;background:#f7faf8;color:#176d64;font:580 .68rem/1 Manrope,sans-serif;}
.commerce-variants>header>button,.commerce-variants details form>button,.commerce-variants aside footer button[type=submit]{border-color:#176d64;background:#176d64;color:#fff}
.commerce-variants details{margin:0 0 15px;border:1px solid #dce4e1;border-radius:11px;background:#fafcfb}
.commerce-variants details summary{padding:14px 16px;color:#42645b;font:600 .7rem/1.3 Manrope,sans-serif;}
.commerce-variants details form{display:grid;gap:12px;padding:0 16px 16px}
.commerce-variants details fieldset{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:12px;border:1px solid #e0e7e4;border-radius:9px;background:#fff}
.commerce-variants details fieldset label{display:flex;align-items:center;gap:6px;margin:0;color:#587069;font:520 .67rem/1.2 Inter,sans-serif}
.commerce-variants details input,.commerce-variants aside input,.commerce-variants aside select{box-sizing:border-box;width:100%;min-width:0;min-height:43px;padding:9px 11px;border:1px solid #d0d9d6;border-radius:9px;background:#fff;color:#243832;outline:0}
.commerce-variants details input:focus,.commerce-variants aside input:focus,.commerce-variants aside select:focus{border-color:#9dbab2;box-shadow:inset 0 -2px 0 rgba(23,109,100,.62)}
.commerce-variants i{width:15px;height:15px;border-radius:50%;background:var(--swatch)}
.commerce-variant-list{display:grid;gap:8px}
.commerce-variant-list>button{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:14px;text-align:left;border-color:#dbe3e0;background:#fff;padding:12px}
.commerce-variant-list span{display:grid;min-width:0;gap:4px}.commerce-variant-list span:nth-child(2){justify-items:end}.commerce-variant-list small{color:#74817d;overflow-wrap:anywhere}.commerce-variant-list em{padding:5px 8px;border-radius:999px;background:#e7f0eb;color:#286759;font:550 .64rem/1 Inter,sans-serif}
.commerce-variants>aside{margin-top:12px;padding:16px;border:1px solid #d5dfdc;border-radius:11px;background:#fafcfb}
.commerce-variants aside form>header,.commerce-variants aside footer{display:flex;justify-content:space-between;align-items:center}.commerce-variants aside label{display:grid;gap:6px;margin-bottom:10px;color:#587069;font:550 .67rem/1.2 Inter,sans-serif}.commerce-variant-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.commerce-variants aside footer{justify-content:flex-end;gap:7px}
@media(max-width:1px){.commerce-variants>header{flex-direction:column}.commerce-variant-grid{grid-template-columns:1fr}.commerce-variant-list>button{grid-template-columns:1fr auto}.commerce-variant-list em{grid-column:1/-1;justify-self:start}}