@keyframes handy-variation-guide{0%{box-shadow:0 0 0 0 rgb(35 76 106 / .4)}50%{box-shadow:0 0 0 8px rgb(35 76 106 / .15)}100%{box-shadow:0 0 0 0 #fff0}}.handy-variation-form{--handykech-primary-color:#234c6a;.variations{display:flex;flex-direction:column;gap:2rem;.variation-dropdown{position:relative;scroll-margin-block:12rem;&.handy-variation-guide>button{animation:handy-variation-guide 0.9s ease-in-out 2}button:focus-visible{outline:2px solid var(--handykech-primary-color);outline-offset:2px}button{padding:2rem;width:100%;background-color:#f9f9f9;color:#000;border-radius:1rem;border:none;display:flex;align-items:center;justify-content:space-between;gap:2rem;cursor:pointer;span{display:flex;align-items:center;gap:1rem}svg{width:2rem;height:2rem}}.variation-options{position:absolute;top:100%;left:0;width:100%;max-height:350px;overflow:auto;background-color:#fff;border-radius:1.5rem;padding:1rem;box-shadow:0 2px 4px rgb(0 0 0 / .1);z-index:10;margin-top:.5rem;transform:translateY(5px);opacity:0;pointer-events:none;will-change:transform,opacity;transition:transform 0.3s,opacity 0.2s;&.open{pointer-events:auto;opacity:1;transform:translateY(0)}.variation-option{label{border-radius:1rem;padding:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;color:#000;cursor:pointer;transition:background-color 0.2s ease;&:hover{background-color:#f1f1f1;color:#000}&:has(input[type="radio"]:checked){background-color:#f1f1f1}>span{display:flex;align-items:center;gap:1rem;.option-price{font-weight:600;color:#555;background-color:#f1f1f1;padding:.25rem .5rem;border-radius:.5rem;font-size:.95rem}}}}}}}ul{list-style:none;padding:0;margin:0}input[type="radio"]{display:none;~svg{opacity:0;color:var(--handykech-primary-color);width:2rem;height:2rem;transition:opacity 0.2s ease;flex-shrink:0}&:checked~svg{opacity:1}}[x-cloak]{display:none}.quantity{position:relative;margin-top:2rem;.quantity-info{padding:2rem;width:100%;background-color:#f9f9f9;color:#000;border-radius:1rem;border:none;display:flex;align-items:center;justify-content:space-between;gap:2rem;cursor:pointer;>span{display:flex;align-items:center;gap:1rem}button{background-color:#fff0;text-decoration:underline;border:none;border-radius:1rem;cursor:pointer}}.quantity-dropdown{position:absolute;top:0;left:0;height:100%;width:100%;display:flex;align-items:center;justify-content:space-between;background-color:#f9f9f9;border-radius:1.5rem;padding:1rem 2rem;z-index:10;transform:translateY(10px);opacity:0;pointer-events:none;will-change:transform,opacity;transition:transform 0.3s,opacity 0.2s;&.open{pointer-events:auto;opacity:1;transform:translateY(0)}.quantity-input{display:flex;align-items:center;gap:1rem;input{border:none;outline:none;width:50px;height:100%;background-color:#fff0;text-align:center;font-size:1.5rem;font-weight:600;color:#000;box-shadow:none;&[type="number"]{-moz-appearance:textfield}&[type="number"]::-webkit-outer-spin-button,&[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}}span{cursor:pointer;border-radius:50%;background-color:#fff;color:#000;box-shadow:0 2px 4px rgb(0 0 0 / .1);font-size:2rem;font-weight:600;aspect-ratio:1;height:4rem;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;&:hover{background-color:var(--handykech-primary-color);color:#fff}}}.validate{cursor:pointer;text-decoration:underline}}}.single-add-to-cart-button{width:100%;padding:1.5rem 2rem;background-color:var(--handykech-primary-color);color:#fff;border:none;border-radius:4rem;text-align:center;font-size:1.7rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;margin-top:2rem;&:not(:disabled):hover{background-color:#1a3a52;transform:translateY(-2px);box-shadow:0 4px 12px rgb(35 76 106 / .3)}&:disabled{opacity:.6;box-shadow:none;cursor:not-allowed;transform:none}}.order-now-button{margin-top:.5rem;background-color:#fff;color:var(--handykech-primary-color);border:2px solid var(--handykech-primary-color);&:not(:disabled):hover{background-color:#000;color:#fff;box-shadow:0 4px 12px rgb(0 0 0 / .3)}}.divider{position:relative;margin-block:.5rem;text-align:center;font-size:1.5rem;color:#555;&::before,&::after{content:'';position:absolute;top:50%;left:0;width:40%;height:1px;background-color:#ccc}&::after{left:auto;right:0}}}