:root{ --zrn-yellow:#ffb900; --zrn-navy:#1e272e; --zrn-red:#ef394e; --zrn-radius:8px; } .zrn-wrapper{ width:100%; margin:0; padding:0; position:relative; min-height:48px; overflow:visible; } .zrn-btn-main{ display:flex; align-items:center; justify-content:center; width:100%; height:48px; border-radius:var(--zrn-radius); border:none; cursor:pointer; text-decoration:none!important; position:relative; padding:0 14px; transition:background-color .2s ease, color .2s ease, border-color .2s ease; outline:none!important; box-sizing:border-box; } .zrn-content-inner{ display:flex; align-items:center; justify-content:center; gap:8px; line-height:1; } .zrn-icon{ width:20px; height:20px; flex:0 0 20px; } .zrn-txt{ font-size:15px; font-weight:600; white-space:nowrap; line-height:1; } .zrn-state-add, .zrn-state-add:hover, .zrn-state-add:focus, .zrn-state-add:active{ background:var(--zrn-yellow)!important; color:#fff!important; } .zrn-state-add:hover{ background:#f2af00!important; } .zrn-state-incart{ background:var(--zrn-navy)!important; color:#fff!important; flex:1; } .zrn-state-incart:hover{ background:#2d3436!important; } .zrn-flex{ display:flex; align-items:center; gap:6px; width:100%; height:48px; } .zrn-trash{ width:47px; height:47px; min-width:48px; border-radius:var(--zrn-radius); border:1.5px solid var(--zrn-red); background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .2s ease, border-color .2s ease, opacity .2s ease; padding:0; margin:0; line-height:0; box-sizing:border-box; } .zrn-trash svg{ width:24px; height:24px; display:block; } .zrn-trash svg path{ transition:stroke .2s ease; } .zrn-trash:hover{ background:var(--zrn-red); } .zrn-trash:hover svg path{ stroke:#fff; } .zrn-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:4px; pointer-events:none; } .zrn-loading span{ width:5px; height:5px; background:#fff; border-radius:50%; animation:zrnblink 1.3s infinite; } .zrn-loading span:nth-child(2){animation-delay:.2s} .zrn-loading span:nth-child(3){animation-delay:.4s} @keyframes zrnblink{ 0%,80%,100%{opacity:.2;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} } .zrn-switch{ animation:none!important; } .zrn-wrapper.zrn-changing{ pointer-events:none; }