.bon-ba-wrap{--bon-ba-text:#232323;--bon-ba-muted:#6b6f73;--bon-ba-green:#5f8354}.bon-ba-grid{display:grid;grid-template-columns:repeat(3,minmax(0, 1fr));gap:20px}.bon-ba-item{margin:0;min-width:0}.bon-ba-item figcaption{padding-top:12px;text-align:center;font-size:15px;line-height:1.5;color:var(--bon-ba-text)}.bon-ba-item .dz{font-weight:600}.bon-ba-item .dz:after{content:"·";margin:0 6px;color:var(--bon-ba-muted);font-weight:400}.bon-ba{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#111;touch-action:pan-y;-webkit-user-select:none;user-select:none;--pos:50%}.bon-ba img{position:absolute;inset:0;width:100% !important;height:100% !important;max-width:none;object-fit:cover;display:block;pointer-events:none;border-radius:0}.bon-ba img.before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}.bon-ba .tag{position:absolute;top:12px;z-index:1;font-size:13px;font-weight:600;line-height:1.6;color:#fff;background:rgba(0,0,0,.55);padding:2px 10px;border-radius:999px;pointer-events:none}.bon-ba .tag.l{left:12px}.bon-ba .tag.r{right:12px;background:var(--bon-ba-green)}.bon-ba .divider{position:absolute;top:0;bottom:0;left:var(--pos);z-index:1;width:2px;margin-left:-1px;background:#fff;pointer-events:none}.bon-ba .knob{position:absolute;top:50%;left:var(--pos);z-index:1;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--bon-ba-text);box-shadow:0 2px 10px rgba(0,0,0,.25);display:grid;place-items:center;pointer-events:none}.bon-ba .knob svg{width:22px;height:22px}.bon-ba input[type=range]{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:0 0}.bon-ba input[type=range]:focus-visible~.knob{outline:3px solid var(--bon-ba-green);outline-offset:3px}.bon-ba-note{margin:20px 0 0;font-size:13px;color:var(--bon-ba-muted)}.bon-ba-dots{display:none}@media (min-width:768px) and (max-width:1023px){.bon-ba-grid{grid-template-columns:repeat(2,minmax(0, 1fr))}}@media (max-width:767px){.bon-ba-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:4px;scrollbar-width:none}.bon-ba-grid::-webkit-scrollbar{display:none}.bon-ba-item{flex:0 0 84%;scroll-snap-align:center}.bon-ba-grid>.bon-ba-item:only-child{flex-basis:100%}.bon-ba-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}.bon-ba-dots span{width:6px;height:6px;border-radius:3px;background:#c9cdd1;transition:width .2s}.bon-ba-dots span.on{width:18px;background:var(--bon-ba-green)}}