bg-quantity.bgq{display:block;--bgq-accent:#0d8756;--bgq-fill:0%;color:inherit;font:inherit;padding:12px 0 8px}bg-quantity *{box-sizing:border-box}.bgq-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.bgq-heading h2{margin:0;font:inherit;font-weight:600;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.6px}.bgq-unit{font-size:13px;background:#f5f5f1;color:#7c7d73;border-radius:30px;padding:10px 14px;text-align:center}.bgq-space{padding:142px 68px 0}.bgq-rail{position:relative;height:44px}.bgq-track{position:absolute;top:17px;left:0;right:0;height:10px;border-radius:20px;background:#edefe9}.bgq-fill{width:var(--bgq-fill);height:100%;border-radius:20px;background:linear-gradient(90deg,#a6d7b8,var(--bgq-accent))}.bgq-slider{position:absolute;inset:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;z-index:2;outline:none}.bgq-slider:active{cursor:grabbing}.bgq-slider[aria-disabled=true]{cursor:default;opacity:.4}.bgq-thumb{position:absolute;left:var(--bgq-fill);top:7px;transform:translateX(-50%);width:30px;height:30px;background:var(--bgq-accent);border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0d875620,0 2px 6px #0d875620}.bgq-slider:focus-visible .bgq-thumb{outline:3px solid var(--bgq-accent);outline-offset:4px}.bgq-floating{position:absolute;left:var(--bgq-fill);top:0;width:0;height:44px;pointer-events:none;z-index:3}.bgq-bubble{position:absolute;bottom:60px;left:0;transform:translateX(-50%);min-width:140px;max-width:210px;padding:17px 19px 15px;background:#fff;border:1px solid #dddfd8;border-radius:15px;color:inherit;text-align:center;pointer-events:auto;cursor:pointer;font:inherit;box-shadow:0 3px 8px #34382805;line-height:1.25}.bgq-bubble:after{content:"";position:absolute;bottom:-7px;left:calc(50% - 7px);width:12px;height:12px;transform:rotate(45deg);background:#fff;border-right:1px solid #dddfd8;border-bottom:1px solid #dddfd8}.bgq-bubble:hover{border-color:var(--bgq-accent)}.bgq-bubble:focus-visible,.bgq-actions button:focus-visible{outline:3px solid var(--bgq-accent);outline-offset:4px}.bgq-packs{display:block;font-size:24px;font-weight:600;letter-spacing:-.8px;white-space:nowrap}.bgq-pieces{display:block;font-size:15px;color:#7c7d73;margin-top:7px;white-space:nowrap;font-variant-numeric:tabular-nums}.bgq-edit{display:block;font-size:10px;letter-spacing:.2px;color:#8a9086;margin-top:9px}.bgq-scale{display:flex;justify-content:space-between;gap:12px;margin:10px -4px 0;color:#909186;font-size:12px}.bgq-help{text-align:center;font-size:13px;line-height:1.6;color:var(--bgq-accent);margin:25px 0 0;min-height:42px}.bgq-dialog{border:1px solid #e2e4dc;border-radius:20px;padding:28px;color:inherit;background:white;width:min(380px,calc(100% - 32px));max-height:90vh;overflow:auto;font:inherit}.bgq-dialog::backdrop{background:#252a2366}.bgq-dialog h2{font:inherit;font-size:22px;font-weight:600;margin:0}.bgq-dialog p{font-size:13px;color:#79776e}.bgq-dialog label{display:block;font-size:13px;margin:22px 0 8px}.bgq-dialog input{width:100%;padding:12px;border:1px solid #a7bcae;border-radius:8px;font:inherit;font-size:22px;color:inherit;background:white}.bgq-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}.bgq-actions button{font:inherit;font-size:13px;border:1px solid #e8e6df;padding:11px 14px;border-radius:8px;background:white;color:inherit;cursor:pointer}.bgq-actions [data-apply]{background:var(--bgq-accent);color:white;border-color:var(--bgq-accent)}.bgq[data-dragging] .bgq-thumb{box-shadow:0 0 0 6px #0d875616}.product-form__quantity[hidden],quantity-input[hidden]{display:none!important}@media(max-width:480px){.bgq-space{padding-left:60px;padding-right:60px}.bgq-heading{gap:8px}.bgq-unit{font-size:11px;padding:8px 10px}.bgq-packs{font-size:22px}.bgq-bubble{min-width:132px;padding:14px}.bgq-help{font-size:12px}.bgq-scale{font-size:11px}}@media(prefers-reduced-motion:reduce){bg-quantity *{scroll-behavior:auto}} bg-quantity.bgq .bgq-bubble {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 0;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 16px 20px !important;
  line-height: 1.25 !important;

  text-align: center;
  white-space: normal;
}

bg-quantity.bgq .bgq-bubble > span {
  flex: 0 0 auto;
}