.bukken-detail-gallery{--bukken-detail-slide-w: 78%;--bukken-detail-accent: #00a040;width:100%;max-width:650px;margin:0 auto}.bukken-detail-main{position:relative;overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;background:#fff;width:100%;max-width:650px;aspect-ratio:650 / 500}.bukken-detail-main.is-zoomed{cursor:grab}.bukken-detail-main.is-dragging,.bukken-detail-main.is-panning{cursor:grabbing}.bukken-detail-main.is-zoomed{touch-action:none}.bukken-detail-main-track{display:flex;align-items:center;height:100%;will-change:transform}.bukken-detail-main-slide{flex:0 0 auto;width:var(--bukken-detail-slide-w);height:100%;margin:0 1.5%;overflow:hidden;background:#f5f5f5}.bukken-detail-main-slide img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;transform-origin:center center}.bukken-detail-main.is-zoomed .bukken-detail-main-slide.is-current img{background:#000}.bukken-detail-main-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border:none;border-radius:6px;background:#0003;color:#fff;font-size:1.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer}.bukken-detail-main-arrow:hover{background:#00000059}.bukken-detail-main-arrow--prev{left:calc((100% - var(--bukken-detail-slide-w)) / 2 + 8px)}.bukken-detail-main-arrow--next{right:calc((100% - var(--bukken-detail-slide-w)) / 2 + 8px)}.bukken-detail-main-arrow[data-tooltip]:after,.bukken-detail-main-zoom-hint[data-tooltip]:after{content:attr(data-tooltip);position:absolute;padding:3px 8px;border-radius:4px;background:#000000b3;color:#fff;font-size:1.1rem;line-height:1.4;white-space:nowrap;opacity:0;transition:opacity .2s ease .15s,transform .2s ease .15s;pointer-events:none}.bukken-detail-main-arrow[data-tooltip]:after{bottom:100%;margin-bottom:8px;background:#fff;color:#222;border:1px solid #222}.bukken-detail-main-arrow--prev[data-tooltip]:after{left:50%;transform:translate(-50%,2px)}.bukken-detail-main-arrow--next[data-tooltip]:after{right:50%;transform:translate(50%,2px)}.bukken-detail-main-zoom-hint[data-tooltip]:after{top:100%;margin-top:8px;right:0;transform:translateY(-2px)}.bukken-detail-main-arrow--prev[data-tooltip]:hover:after{opacity:1;transform:translate(-50%)}.bukken-detail-main-arrow--next[data-tooltip]:hover:after{opacity:1;transform:translate(50%)}.bukken-detail-main-zoom-hint[data-tooltip]:hover:after{opacity:1;transform:translateY(0)}.bukken-detail-main-zoom-hint{position:absolute;top:calc(50% + 28px);right:calc((100% - var(--bukken-detail-slide-w)) / 2 + 8px);z-index:2;width:40px;height:32px;border:none;border-radius:6px;background:#0003;color:#fff;font-size:2rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}.bukken-detail-main-zoom-hint:hover{background:#00000059}.bukken-detail-main-zoom-hint.is-active{background:#ffffffd9;color:#333}.bukken-detail-main-counter{position:absolute;right:calc((100% - var(--bukken-detail-slide-w)) / 2 + 8px);bottom:10px;z-index:2;background:#0000008c;color:#fff;font-size:1.2rem;font-weight:700;padding:2px 10px;border-radius:12px}.bukken-detail-thumbs{display:flex;align-items:center;gap:4px;margin-top:10px}.bukken-detail-thumbs-viewport{flex:1 1 auto;overflow:hidden}.bukken-detail-thumbs-track{display:flex;gap:6px;will-change:transform;touch-action:pan-y;-webkit-user-select:none;user-select:none}.bukken-detail-thumb{box-sizing:border-box;flex:0 0 auto;width:90px;height:68px;padding:0;border:3px solid transparent;border-radius:4px;overflow:hidden;cursor:pointer;background:#eee}.bukken-detail-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.bukken-detail-thumb.is-active{border-color:var(--bukken-detail-accent);box-shadow:0 0 0 1px var(--bukken-detail-accent)}.bukken-detail-thumbs-arrow{flex:0 0 auto;width:28px;height:28px;border:none;border-radius:50%;background:var(--bukken-detail-accent);color:#fff;font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer}.bukken-detail-thumbs-arrow:hover{filter:brightness(1.1)}.bukken-detail-thumbs-arrow:disabled{background:#ccc;cursor:default}@media screen and (max-width:749px){.bukken-detail-main-slide{width:88%;margin:0 1%}.bukken-detail-thumb{width:70px;height:54px}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/bukken-detail-gallery.css.map */