/* Relative ruler: each 12px tick represents one item, independent of the maximum. */
.quantity-dial { margin-top:6px; }
.quantity-dial__surface { position:relative; padding:26px 22px 12px; border:1px solid #36584a; border-radius:22px; color:#f5f4e9; background:radial-gradient(ellipse at 50% 0,#33564880,transparent 65%),linear-gradient(145deg,#182e27,#0c1e18); box-shadow:inset 0 1px 0 #ffffff19,0 16px 28px -20px #0a241dcc; touch-action:pan-y; cursor:ew-resize; transition:border-color .2s,box-shadow .2s; }
.quantity-dial__surface:hover { border-color:#779070; box-shadow:inset 0 1px 0 #ffffff20,0 0 24px -12px #e6c84d80,0 16px 28px -20px #0a241dcc; }
.quantity-dial__surface:has(.quantity-dial__range:focus-visible) { outline:3px solid #c18b00; outline-offset:5px; }
.quantity-dial .quantity-dial__title { color:#e2e9dd; font-size:13px; font-weight:600; line-height:1.5; text-align:center; }
.quantity-dial__readout { display:flex; justify-content:center; height:1em; margin:22px 0 8px; font-size:clamp(54px,5vw,76px); line-height:1; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.055em; color:#fff8d7; user-select:none; }
.quantity-dial__digit { display:block; width:.64em; height:1em; overflow:hidden; }
.quantity-dial__digit > span { display:block; height:10em; transition:transform .25s cubic-bezier(.2,.7,.25,1); }
.quantity-dial__digit i { display:block; height:1em; line-height:1; font-style:normal; }
.quantity-dial__unit { display:block; text-align:center; color:#bdcdbf; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.quantity-dial__ruler { position:relative; height:76px; overflow:hidden; margin:18px -22px 0; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); user-select:none; }
.quantity-dial__track { position:absolute; left:50%; top:17px; }
.quantity-dial__tick { position:absolute; width:1px; height:12px; background:#b8c9b66b; }
.quantity-dial__tick--major { height:23px; background:#d1dbbdc2; }
.quantity-dial__tick b { position:absolute; top:33px; left:50%; transform:translateX(-50%); color:#c6d2c2; font-size:10px; font-weight:500; font-variant-numeric:tabular-nums; }
.quantity-dial__needle { position:absolute; top:5px; left:calc(50% - 1px); width:2px; height:38px; background:#fcc306; box-shadow:0 0 12px #fcc30666; }
.quantity-dial__needle::before { content:""; position:absolute; top:-2px; left:-3px; width:8px; height:8px; border-radius:50%; background:#fcc306; }
.quantity-dial__range { position:absolute; width:1px; height:1px; padding:0; margin:0; opacity:0; pointer-events:none; }
.quantity-dial__footer { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#bdcdbf; font-size:11px; }
.quantity-dial__footer button { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:1px solid #52705b; border-radius:50%; background:linear-gradient(#2c483a,#1c3429); color:#f5ecd1; font:inherit; font-size:23px; line-height:1; cursor:pointer; box-shadow:inset 0 1px 0 #ffffff14; }
.quantity-dial__footer button:hover { border-color:#e4c84d; color:#ffdc56; }
.quantity-dial__footer button:disabled { opacity:.35; cursor:default; }
.quantity-dial__footer button:focus-visible { outline:2px solid #ffdc56; outline-offset:3px; }
.quantity-dial > .business-calculator__field { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:15px; color:#56685d; font-size:11px; font-weight:500; }
.quantity-dial > .business-calculator__field input { flex:0 1 112px; width:112px; min-height:44px; padding:8px 12px; text-align:right; font-size:15px; font-weight:600; }
@media(prefers-reduced-motion:reduce) { .quantity-dial__digit > span,.quantity-dial__surface { transition:none; } }